/* ============================================================
   FLOATING CONTACT
   Bu dosya eski fixed_form CSS'inden bağımsız çalışır.
============================================================ */

:root {
    --contact-burgundy: #8c151d;
    --contact-burgundy-dark: #6f1017;
    --contact-burgundy-deep: #4f0b10;

    --contact-gold: #c99a58;
    --contact-gold-soft: #e4c89c;

    --contact-cream: #fffaf5;
    --contact-cream-dark: #f6ece2;

    --contact-text: #3f3431;
    --contact-muted: #796d67;
    --contact-border: #e8d4c2;
}


/* ============================================================
   WRAPPER
============================================================ */

.contact_float {
    width: 58px;
    height: 58px;

    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 999999;
}

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

.contact_float_mirror {
    right: auto;
    left: 28px;
}

.contact_float_toggle {
    display: none;
}


/* ============================================================
   ANA BUTON
============================================================ */

.contact_float_launcher {
    width: 58px;
    height: 58px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px;

    overflow: visible;

    border:
        1px solid
        rgba(202, 156, 89, 0.78);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #9d1e26,
            #741118
        );

    box-shadow:
        0 10px 30px
        rgba(78, 9, 15, 0.28);

    cursor: pointer;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.contact_float_launcher::before {
    content: "";

    position: absolute;

    inset: -6px;

    z-index: -1;

    border:
        1px solid
        rgba(140, 21, 29, 0.13);

    border-radius: 50%;

    background:
        rgba(255, 250, 245, 0.82);
}

.contact_float_launcher:hover {
    transform:
        translateY(-2px)
        scale(1.03);

    border-color:
        var(--contact-gold-soft);

    box-shadow:
        0 14px 34px
        rgba(78, 9, 15, 0.33);
}

.contact_float_launcher img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


/* Ana menü açıldığında launcher görünmez. */

#contact_float_menu:checked
~
.contact_float_launcher {
    display: none;
}


/* ============================================================
   PANEL
============================================================ */

.contact_float_panel {
    display: none;
}

#contact_float_menu:checked
~
.contact_float_panel {
    display: block;
}


/* ============================================================
   HIZLI BUTONLAR
============================================================ */

.contact_float_actions {
    width: 54px;

    position: absolute;

    right: 2px;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;
}

.contact_float_mirror
.contact_float_actions {
    right: auto;
    left: 2px;
}


/* Form açılınca hızlı butonları kaldır. */

#contact_float_form_toggle:checked
~
.contact_float_actions {
    display: none;
}


.contact_float_action {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 11px;

    overflow: hidden;

    border:
        1px solid
        rgba(199, 154, 88, 0.58);

    border-radius: 50%;

    background:
        rgba(255, 250, 245, 0.98);

    box-shadow:
        0 8px 23px
        rgba(69, 13, 17, 0.15);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.contact_float_action:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--contact-gold);

    box-shadow:
        0 11px 27px
        rgba(69, 13, 17, 0.20);
}

.contact_float_action img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


/* Bize yazın */

.contact_float_message:hover {
    background-color:
        #fff3ea;
}


/* WhatsApp */

.contact_float_whatsapp:hover {
    background-color:
        #effbf3;

    border-color:
        rgba(35, 165, 85, 0.48);

    box-shadow:
        0 11px 27px
        rgba(27, 139, 74, 0.15);
}


/* Menü X */

.contact_float_close {
    padding: 0;

    color:
        white;

    background:
        linear-gradient(
            145deg,
            #a51e27,
            #781119
        );

    border-color:
        rgba(219, 174, 112, 0.72);
}

.contact_float_close span {
    display: block;

    margin-top: -3px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 34px;

    line-height: 1;

    font-weight: 300;
}

.contact_float_close:hover {
    color: white;

    background:
        linear-gradient(
            145deg,
            #b0242e,
            #85151d
        );
}


/* ============================================================
   FORM
============================================================ */

.contact_float_form {
    width: 390px;

    max-height:
        calc(
            100vh - 42px
        );

    position: absolute;

    right: 72px;
    bottom: 0;

    display: none;

    overflow-y: auto;

    padding:
        28px
        27px
        26px;

    border:
        1px solid
        rgba(199, 154, 88, 0.52);

    border-radius: 18px;

    background:
        linear-gradient(
            155deg,
            #fffdfb 0%,
            #fff8f2 100%
        );

    box-shadow:
        0 18px 55px
        rgba(66, 8, 13, 0.20);
}

.contact_float_form::before {
    content: "";

    width: 72px;
    height: 4px;

    position: absolute;

    top: 0;
    left: 27px;

    border-radius:
        0
        0
        10px
        10px;

    background:
        linear-gradient(
            90deg,
            var(--contact-burgundy),
            var(--contact-gold)
        );
}

.contact_float_mirror
.contact_float_form {
    right: auto;
    left: 72px;

    direction: rtl;
}

.contact_float_mirror
.contact_float_form::before {
    left: auto;
    right: 27px;
}


/* Form checkbox */

#contact_float_form_toggle:checked
~
.contact_float_form {
    display: block;
}


/* ============================================================
   FORM KAPAT
============================================================ */

.contact_float_form_close {
    width: 36px;
    height: 36px;

    position: absolute;

    top: 15px;
    right: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--contact-burgundy);

    border:
        1px solid
        #e3c7ae;

    border-radius: 50%;

    background:
        #fff8f1;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.contact_float_mirror
.contact_float_form_close {
    right: auto;
    left: 15px;
}

.contact_float_form_close span {
    display: block;

    margin-top: -2px;

    font-size: 26px;
    line-height: 1;
}

.contact_float_form_close:hover {
    color: white;

    background-color:
        var(--contact-burgundy);

    transform:
        rotate(5deg);
}


/* ============================================================
   FORM HEAD
============================================================ */

.contact_float_form_head {
    width: 100%;

    margin-bottom: 21px;

    padding:
        4px
        44px
        18px
        0;

    border-bottom:
        1px solid
        var(--contact-border);
}

.contact_float_mirror
.contact_float_form_head {
    padding:
        4px
        0
        18px
        44px;
}

.contact_float_kicker {
    display: block;

    margin-bottom: 7px;

    color:
        #a36e32;

    font-size: 9px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 3px;
}

.contact_float_form h1 {
    margin: 0;

    color:
        var(--contact-burgundy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 31px;

    line-height: 1.15;

    font-weight: normal;
}


/* ============================================================
   FIELD
============================================================ */

.contact_float_field {
    width: 100%;

    margin-bottom: 13px;
}

.contact_float_field label {
    display: block;

    margin-bottom: 6px;

    color:
        #594844;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 700;

    cursor: default;
}

.contact_float_field input,
.contact_float_field textarea {
    width: 100%;

    display: block;

    color:
        var(--contact-text);

    background:
        rgba(255, 255, 255, 0.94);

    border:
        1px solid
        #dfcbbb;

    border-radius: 9px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.contact_float_field input {
    height: 43px;

    padding:
        0
        13px;

    font-size: 13px;
}

.contact_float_field textarea {
    height: 94px;

    min-height: 78px;
    max-height: 155px;

    padding:
        11px
        13px;

    resize: vertical;

    font-size: 13px;

    line-height: 1.5;
}

.contact_float_field input:focus,
.contact_float_field textarea:focus {
    background-color:
        white;

    border-color:
        var(--contact-gold);

    box-shadow:
        0 0 0 3px
        rgba(199, 154, 88, 0.14);
}

.contact_float_mirror
.contact_float_field input,
.contact_float_mirror
.contact_float_field textarea {
    text-align: right;
}


/* ============================================================
   SEND BUTTON
============================================================ */

.contact_float_form button {
    width: 100%;
    min-height: 46px;

    margin-top: 3px;

    padding:
        0
        17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    color:
        white;

    border:
        1px solid
        #a84d52;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #8c151d,
            #6f1017
        );

    box-shadow:
        0 8px 22px
        rgba(111, 16, 23, 0.18);

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.contact_float_form button:hover {
    transform:
        translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #9c1b24,
            #781119
        );

    box-shadow:
        0 11px 27px
        rgba(111, 16, 23, 0.24);
}

.contact_float_send_arrow {
    color:
        var(--contact-gold-soft);

    font-size: 18px;

    line-height: 1;
}


/* ============================================================
   <= 1260
============================================================ */

@media only screen and (max-width: 1260px) {

    .contact_float {
        right: 20px;
        bottom: 20px;
    }

    .contact_float_mirror {
        right: auto;
        left: 20px;
    }

    .contact_float_form {
        width: 370px;

        right: 68px;
    }

    .contact_float_mirror
    .contact_float_form {
        right: auto;
        left: 68px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media only screen and (max-width: 720px) {

    .contact_float {
        width: 52px;
        height: 52px;

        right: 13px;
        bottom: 13px;
    }

    .contact_float_mirror {
        right: auto;
        left: 13px;
    }

    .contact_float_launcher {
        width: 50px;
        height: 50px;

        padding: 10px;
    }

    .contact_float_launcher::before {
        inset: -4px;
    }

    .contact_float_actions {
        width: 46px;

        right: 2px;

        gap: 8px;
    }

    .contact_float_mirror
    .contact_float_actions {
        right: auto;
        left: 2px;
    }

    .contact_float_action {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        padding: 9px;
    }

    .contact_float_close {
        padding: 0;
    }

    .contact_float_close span {
        font-size: 30px;
    }


    /* Form tam ekranın içine oturur */

    .contact_float_form,
    .contact_float_mirror
    .contact_float_form {
        width: auto;

        max-height:
            calc(
                100vh - 100px
            );

        position: fixed;

        left: 10px;
        right: 10px;

        bottom: 72px;

        padding:
            23px
            18px
            20px;
    }

    .contact_float_form {
        direction: ltr;
    }

    .contact_float_mirror
    .contact_float_form {
        direction: rtl;
    }

    .contact_float_form::before {
        left: 18px;
    }

    .contact_float_mirror
    .contact_float_form::before {
        left: auto;
        right: 18px;
    }

    .contact_float_form_head {
        margin-bottom: 17px;

        padding:
            3px
            42px
            15px
            0;
    }

    .contact_float_mirror
    .contact_float_form_head {
        padding:
            3px
            0
            15px
            42px;
    }

    .contact_float_form h1 {
        font-size: 25px;
    }

    .contact_float_field {
        margin-bottom: 10px;
    }

    .contact_float_field input {
        height: 40px;

        font-size: 12px;
    }

    .contact_float_field textarea {
        height: 78px;

        min-height: 70px;
        max-height: 115px;

        font-size: 12px;
    }

    .contact_float_form button {
        min-height: 43px;
    }

}


/* ============================================================
   <= 420
============================================================ */

@media only screen and (max-width: 420px) {

    .contact_float {
        right: 10px;
        bottom: 10px;
    }

    .contact_float_mirror {
        right: auto;
        left: 10px;
    }

    .contact_float_form,
    .contact_float_mirror
    .contact_float_form {
        left: 8px;
        right: 8px;

        bottom: 68px;

        padding:
            20px
            15px
            18px;
    }

    .contact_float_kicker {
        font-size: 8px;

        letter-spacing: 2.3px;
    }

    .contact_float_form h1 {
        font-size: 23px;
    }

}