:root {
    --c-primary: #3A7BD5;
    --c-primary-2: #2C3E5D;
    --c-ink: #2E3A59;
    --c-g1: #ffffff;
    --c-g2: #F5F7FA;
    --c-g3: #E7F0FB;
    --c-g4: #F2F6FC;
    --c-g5: #E1F0FF;
}

.page-header-wave {
    position: relative;
    overflow: hidden;
    color: var(--c-ink);
    padding: 140px 0 120px;
    background: linear-gradient(180deg,var(--c-g1) 0%,var(--c-g2) 15%,var(--c-g3) 40%,var(--c-g4) 75%,var(--c-g5) 100%);
}

    .page-header-wave .about-1-txt {
        position: relative;
        z-index: 5;
    }

        .page-header-wave .about-1-txt h2 {
            margin: 0 0 22px;
            font-weight: 800;
            letter-spacing: .2px;
            color: #4e79c6 !important;
        }

            .page-header-wave .about-1-txt h2 span {
                color: #2C3E5D !important;
            }

        .page-header-wave .about-1-txt h4 {
            margin: 26px auto 0;
            max-width: 1100px;
            color: #6b789b !important;
            opacity: 1 !important;
            font-size: 30px;
        }

    .page-header-wave::before,
    .page-header-wave::after {
        content: "";
        position: absolute;
        inset: -10% -5% auto -5%;
        height: 120%;
        pointer-events: none;
        z-index: 0;
    }

    .page-header-wave::before {
        filter: blur(18px);
        opacity: .15;
        background: radial-gradient(60rem 30rem at 10% 20%, #9EC9F5 0%, transparent 60%), radial-gradient(50rem 25rem at 80% 15%, #8DA3C2 0%, transparent 60%), radial-gradient(40rem 20rem at 60% 70%, #E7F0FB 0%, transparent 60%);
        animation: waveFloat1 26s ease-in-out infinite alternate;
    }

    .page-header-wave::after {
        inset: auto -5% -35% -5%;
        height: 80%;
        filter: blur(16px);
        opacity: .18;
        background: radial-gradient(60rem 18rem at 15% 0%, var(--c-primary) 0%, transparent 70%), radial-gradient(50rem 18rem at 85% 10%, #6A88B1 0%, transparent 70%), radial-gradient(70rem 22rem at 50% 20%, var(--c-primary-2) 0%, transparent 70%);
        animation: waveFloat2 32s ease-in-out infinite alternate;
    }

@keyframes waveFloat1 {
    from {
        transform: translateY(0) translateX(0);
    }

    to {
        transform: translateY(12px) translateX(-8px);
    }
}

@keyframes waveFloat2 {
    from {
        transform: translateY(0) translateX(0);
    }

    to {
        transform: translateY(-10px) translateX(10px);
    }
}

@media (max-width:992px) {
    .page-header-wave {
        padding: 120px 0 100px;
    }

        .page-header-wave .about-1-txt h4 {
            max-width: 900px;
        }
}

@media (max-width:576px) {
    .page-header-wave {
        padding: 100px 0 90px;
    }

        .page-header-wave .about-1-txt h2 {
            font-size: clamp(28px,7vw,36px);
        }

        .page-header-wave .about-1-txt h4 {
            font-size: 1.05rem;
            padding: 0 10px;
        }
}

.store {
    display: inline-block;
    padding: 5px 20px;
    border-radius: 12px;
    background: #06305a;
    transition: all 0.3s ease;
}

    .store img {
        display: block;
        max-height: 40px;
    }

    .store:hover {
        box-shadow: 0 6px 12px rgba(6,48,90,0.25);
    }



.custom-btn {
    background: linear-gradient(135deg, #3A7BD5, #1a4d94);
    color: #fff !important;
    border: none;
    padding: 10px 25px;
    border-radius: 36px;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .custom-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

.bg-flip-x {
    transform: scaleX(-1);
}

.bg-flip-y {
    transform: scaleY(-1);
}

.bg-flip-xy {
    transform: scale(-1, -1);
}

.bg-flip {
    background-image: url("../images/bg-03.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    transform: scaleX(-1);
}

    .bg-flip > * {
        transform: scaleX(-1);
    }

.gradient-text {
    background: linear-gradient(75deg, #fff, #3f90ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent; 
}

.gradient-text-2 {
    background: linear-gradient(75deg, #3A7BD5, #6A88B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.gradient-text-3 {
    background: linear-gradient(75deg, #2C3E5D, #83b7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


#download {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

    #download .store {
        display: inline-block;
        flex: 1 1 auto;
        max-width: 180px;
    }

        #download .store img {
            width: 100%;
            height: auto;
        }

/* Mobilde alt alta */
@media (max-width: 576px) {
    #download {
        flex-direction: column;
        align-items: center;
    }

        #download .store {
            max-width: 220px;
            width: 100%;
        }
}


:root {
    --select-caret: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3e%3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 3l6 6 6-6'/%3e%3c/svg%3e"));
    --invalid-icon: var(--bs-form-invalid-bg-icon, url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3e%3ccircle cx='6' cy='6' r='5.5' stroke='%23dc3545'/%3e%3cpath stroke='%23dc3545' stroke-linecap='round' d='M6 3.2v3.4M6 8.8h.01'/%3e%3c/svg%3e\"));
}

/* ---------- Görsel stil (oval + gri) ---------- */
.contact-form .form-control,
.contact-form .form-select {
    border-radius: 12px;
    border: 1px solid #D9E1EC;
}

    .contact-form .form-control:focus,
    .contact-form .form-select:focus {
        border-color: #B9C7DA;
        box-shadow: 0 0 0 .25rem rgba(58,123,213,.12);
        outline: none;
    }

    /* Select normal durumda: SADECE ok */
    .contact-form .form-select.subject {
        background-image: var(--select-caret);
        background-repeat: no-repeat;
        background-position: right .75rem center;
        background-size: 16px 12px;
        padding-right: 2.25rem; /* oka yer aç */
        background-color: #fff;
    }

        /* Select invalid: ok + uyarı ikonu (tekrar YOK) */
        .contact-form .form-select.subject.is-invalid,
        .contact-form.was-validated .form-select.subject:invalid {
            background-image: var(--select-caret), var(--invalid-icon);
            background-position: right .75rem center, right 2.25rem center; /* ok, uyarı */
            background-size: 16px 12px, 1rem 1rem;
            background-repeat: no-repeat, no-repeat;
            padding-right: calc(3rem + .75rem);
            border-color: var(--bs-danger, #dc3545);
        }

    /* Input/textarea invalid ikonlarını kaldır (arka plana desen düşmesin) */
    .contact-form .form-control.is-invalid,
    .contact-form.was-validated .form-control:invalid {
        background-image: none !important;
    }

/* Başlık ve grup boşlukları */
.contact-form .form-label {
    margin-bottom: .35rem;
}

.contact-form .field-group {
    margin-bottom: 16px;
}

/* Uyarı metni: kontrolün hemen altında ve küçük */
.contact-form .invalid-feedback {
    display: none;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: .9rem;
}

.contact-form .form-control.is-invalid ~ .invalid-feedback,
.contact-form .form-select.is-invalid ~ .invalid-feedback,
.contact-form.was-validated .form-control:invalid ~ .invalid-feedback,
.contact-form.was-validated .form-select:invalid ~ .invalid-feedback {
    display: block;
}

/* İlk açılışta kırmızı çerçeve olmasın */
.contact-form .form-control:invalid,
.contact-form .form-select:invalid {
    box-shadow: none;
    border-color: #D9E1EC;
}

/* Alert görünümü */
#contactAlert {
    border-radius: 12px;
}