/* =========================================================
   Vuslat Hızlı Bağış — SADECE .vuslat-qd altında
   (IP preview ile yüklenir; site genelini etkilemez)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap");

.vuslat-qd {
    --qd-teal: #0a5c6e;
    --qd-teal-deep: #084858;
    --qd-teal-soft: #3d7a8a;
    --qd-bg-1: #eef6f9;
    --qd-bg-2: #f7fbfd;
    --qd-white: #ffffff;
    --qd-border: #d7e3e8;
    --qd-accent: #e0b13a;
    --qd-radius: 18px;
    --qd-radius-sm: 8px;
    --qd-shadow: 0 10px 28px rgba(10, 60, 80, 0.12);

    /* Slider (.container) ile aynı responsive genişlik */
    width: 100%;
    max-width: 100%;
    margin: 1rem auto 1.5rem;
    padding: 0 0.25rem; /* slider: .container.p-1 */
    box-sizing: border-box;
    font-family: "Proxima Soft", "Segoe UI", sans-serif;
    color: var(--qd-teal);
}

@media (min-width: 576px) {
    .vuslat-qd { max-width: 540px; }
}

@media (min-width: 768px) {
    .vuslat-qd { max-width: 720px; }
}

@media (min-width: 992px) {
    .vuslat-qd { max-width: 960px; }
}

@media (min-width: 1200px) {
    .vuslat-qd { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .vuslat-qd { max-width: 1320px; }
}

.vuslat-qd *,
.vuslat-qd *::before,
.vuslat-qd *::after {
    box-sizing: border-box;
}

.vuslat-qd__card {
    display: flex;
    align-items: center;
    gap: 1rem 1.25rem;
    min-height: 180px;
    padding: 1rem 1.25rem;
    border-radius: var(--qd-radius);
    /* Zemin: maviye çalan beyaz; suluboya darbeleri kartın geneline dağıtılmış */
    background-color: #f2f8fb;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 340' preserveAspectRatio='none'%3E%3Cpath fill='%23a9d2e4' fill-opacity='0.5' d='M8 332 L34 308 L52 314 L88 280 L82 270 L120 238 L138 246 L172 214 L188 226 L146 264 L152 274 L110 308 L118 318 L74 344 L40 342 Z'/%3E%3Cpath fill='%23cfe6ef' fill-opacity='0.45' d='M60 340 L96 306 L112 312 L150 278 L144 268 L184 236 L200 246 L236 216 L248 230 L204 266 L212 276 L168 312 L176 322 L130 346 Z'/%3E%3Cpath fill='%2390c3d8' fill-opacity='0.3' d='M16 298 L48 270 L58 278 L92 248 L100 258 L64 288 L70 296 L34 322 Z'/%3E%3Cpath fill='%23cfe6ef' fill-opacity='0.28' d='M14 66 L64 26 L78 36 L30 78 Z'/%3E%3Cpath fill='%23a9d2e4' fill-opacity='0.2' d='M44 102 L108 52 L120 62 L58 114 Z'/%3E%3Cpath fill='%23a9d2e4' fill-opacity='0.18' d='M380 40 L448 8 L462 20 L396 56 Z'/%3E%3Cpath fill='%23cfe6ef' fill-opacity='0.22' d='M420 66 L500 28 L512 40 L436 80 Z'/%3E%3Cpath fill='%23cfe6ef' fill-opacity='0.2' d='M520 320 L596 284 L608 296 L536 334 Z'/%3E%3Cpath fill='%23a9d2e4' fill-opacity='0.16' d='M560 296 L648 254 L660 266 L576 310 Z'/%3E%3Cpath fill='%23a9d2e4' fill-opacity='0.2' d='M820 50 L892 16 L904 28 L836 64 Z'/%3E%3Cpath fill='%23cfe6ef' fill-opacity='0.24' d='M860 78 L944 40 L956 52 L876 92 Z'/%3E%3Cpath fill='%23cfe6ef' fill-opacity='0.3' d='M1050 316 L1122 280 L1136 292 L1068 330 Z'/%3E%3Cpath fill='%23a9d2e4' fill-opacity='0.24' d='M1090 288 L1166 250 L1178 262 L1104 302 Z'/%3E%3Cpath fill='%2390c3d8' fill-opacity='0.18' d='M1120 340 L1180 310 L1192 322 L1136 348 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: var(--qd-shadow);
    overflow: hidden;
    position: relative;
}

/* içerik efektin üstünde kalsın */
.vuslat-qd__card > * {
    position: relative;
    z-index: 1;
}

/* ---- Brand ---- */
.vuslat-qd__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 1 280px;
    min-width: 0;
    z-index: 2;
}

.vuslat-qd__logo {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    line-height: 0;
}

.vuslat-qd__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.vuslat-qd__brand-text {
    min-width: 0;
}

.vuslat-qd__title {
    margin: 0 0 0.25rem;
    /* Mockup: kalın, sıkı, iki satır HIZLI / BAĞIŞ */
    font-family: "Proxima Soft", "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.02;
    max-width: 6.5ch;
    color: var(--qd-teal);
    text-transform: uppercase;
}

.vuslat-qd__subtitle {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--qd-teal-soft);
    font-weight: 500;
}

/* ---- Form ---- */
.vuslat-qd__form {
    flex: 1 1 340px;
    min-width: 0;
    z-index: 2;
}

.vuslat-qd__fields {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    width: 100%;
}

.vuslat-qd__field {
    min-width: 0;
}

.vuslat-qd__field--campaign {
    flex: 1.5 1 0;
    min-width: 185px;
}

.vuslat-qd__field--amount {
    flex: 1 1 150px;
    min-width: 145px;
}

.vuslat-qd__field--cta {
    flex: 0 0 auto;
    min-width: 0;
}

.vuslat-qd__select,
.vuslat-qd__amount-input,
.vuslat-qd__currency,
.vuslat-qd .vuslat-qd__adet .form-select,
.vuslat-qd .vuslat-qd__adet .form-control,
.vuslat-qd .vuslat-qd__adet .input-group-text {
    height: 44px;
    border: 1px solid var(--qd-border) !important;
    border-radius: var(--qd-radius-sm) !important;
    background: var(--qd-white) !important;
    color: var(--qd-teal) !important;
    font-size: 0.9rem;
    box-shadow: none !important;
}

.vuslat-qd__select {
    width: 100%;
    text-overflow: ellipsis;
    padding: 0 1.8rem 0 0.75rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230a5c6e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-color: var(--qd-white) !important;
}

.vuslat-qd__amount-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
}

.vuslat-qd__amount-input {
    flex: 1 1 auto;
    min-width: 0;
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 0 0.65rem;
}

.vuslat-qd__currency {
    flex: 0 0 auto;
    min-width: 42px;
    justify-content: center;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    font-weight: 600;
    padding: 0 0.65rem;
}

.vuslat-qd__adet {
    margin-top: 0.4rem;
}

.vuslat-qd__adet .form-select,
.vuslat-qd__adet .form-control {
    max-width: 100%;
}

.vuslat-qd__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    width: auto !important;
    min-width: 188px;
    max-width: none;
    height: 44px;
    padding: 0 1rem !important;
    border: 0 !important;
    border-radius: var(--qd-radius-sm) !important;
    background: var(--qd-teal) !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    line-height: 1 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.15s ease;
}

.vuslat-qd__btn:hover,
.vuslat-qd__btn:focus {
    background: var(--qd-teal-deep) !important;
    color: #fff !important;
}

.vuslat-qd__btn .mdi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
    margin: 0 !important;
}

.vuslat-qd__btn span {
    display: inline-block;
    flex: 0 0 auto;
    line-height: 1;
    white-space: nowrap;
}

/* ---- Visual / slogan ---- */
.vuslat-qd__visual {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 0 1 300px;
    min-width: 0;
    z-index: 1;
}

.vuslat-qd__photo-wrap {
    position: relative;
    flex: 0 0 205px;
    width: 205px;
    height: 165px;
    overflow: hidden;
    /* Fırça darbesi maskesi — yumuşak organik kenar (zigzag yok) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M34 16 C62 2 142 0 172 12 C190 20 196 38 190 58 C196 78 194 100 190 118 C194 136 184 150 162 156 C122 166 70 162 40 152 C22 146 12 130 16 110 C8 90 10 64 16 46 C19 32 25 22 34 16 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M34 16 C62 2 142 0 172 12 C190 20 196 38 190 58 C196 78 194 100 190 118 C194 136 184 150 162 156 C122 166 70 162 40 152 C22 146 12 130 16 110 C8 90 10 64 16 46 C19 32 25 22 34 16 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.vuslat-qd__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.vuslat-qd__slogan {
    position: relative;
    margin: 0;
    max-width: 9.5rem;
    font-family: "Caveat", cursive;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--qd-teal);
    /* Mockup: yazı hafif çapraz duruyor */
    transform: rotate(-7deg);
    transform-origin: left center;
}

.vuslat-qd__slogan-mark {
    display: block;
    width: 3.2rem;
    height: 0.28rem;
    margin-top: 0.15rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--qd-accent), #f0d27a);
    transform: rotate(-4deg);
}

/* =========================================================
   PC: form yan yana (1. tasarım)
   ========================================================= */
@media (min-width: 992px) {
    .vuslat-qd__fields {
        flex-direction: row;
        align-items: center;
    }

    .vuslat-qd__field--cta .vuslat-qd__btn {
        min-width: 170px;
        width: auto !important;
    }

    .vuslat-qd__visual {
        flex: 0 0 auto;
        max-width: 330px;
    }

    .vuslat-qd__slogan {
        max-width: 7.5rem;
    }

    /* Alt yazı mockup'taki gibi: title altında, yatay 3 satır */
    .vuslat-qd__brand {
        flex: 0 0 260px;
    }

    .vuslat-qd__title {
        font-size: 1.5rem;
    }

    .vuslat-qd__subtitle {
        font-size: 0.72rem;
        max-width: 160px;
    }

    .vuslat-qd__form {
        flex: 1 1 auto;
    }
}

/* =========================================================
   Mobil / tablet: form dikey (2. tasarım)
   ========================================================= */
@media (max-width: 991.98px) {
    .vuslat-qd {
        margin: 0.75rem auto 1.25rem;
    }

    .vuslat-qd__card {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 1rem;
        gap: 0.85rem;
    }

    /* Mobil: logo + başlık + alt yazı ortalı */
    .vuslat-qd__brand {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        order: 1;
    }

    .vuslat-qd__logo {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }

    .vuslat-qd__title {
        font-size: 1.4rem;
        max-width: none;
        margin: 0 auto 0.2rem;
    }

    .vuslat-qd__subtitle {
        font-size: 0.75rem;
        max-width: 280px;
        margin: 0 auto;
        text-align: center;
    }

    .vuslat-qd__form {
        flex: 1 1 100%;
        order: 2;
    }

    .vuslat-qd__fields {
        flex-direction: column;
        gap: 0.5rem;
    }

    .vuslat-qd__field--campaign,
    .vuslat-qd__field--amount,
    .vuslat-qd__field--cta {
        flex: 1 1 auto;
        width: 100%;
    }

    .vuslat-qd__select,
    .vuslat-qd__amount-input,
    .vuslat-qd__currency,
    .vuslat-qd__btn {
        height: 46px;
    }

    .vuslat-qd__btn {
        width: 100% !important;
        min-width: 0;
        font-size: 0.88rem !important;
        padding: 0 1rem !important;
    }

    /* Mobil: child görseli yok, sadece eğik slogan altta ortalı */
    .vuslat-qd__visual {
        flex: 1 1 100%;
        justify-content: center;
        order: 3;
        margin: 0;
    }

    .vuslat-qd__photo-wrap {
        display: none;
    }

    .vuslat-qd__slogan {
        font-size: 1.35rem;
        max-width: none;
        text-align: center;
        transform: rotate(-5deg);
        transform-origin: center;
    }
}