/* =========================================================
   VİZYON TESİSAT MOBİL MENÜ
   ========================================================= */


/* =========================================================
   MASAÜSTÜNDE GİZLE
   ========================================================= */

@media (min-width: 922px) {

    #vz-open-menu,
    #vz-overlay,
    #vz-drawer {
        display: none !important;
    }

}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 921px) {


    /* =====================================================
       ASTRA'NIN MOBİL MENÜSÜNÜ GİZLE
       ===================================================== */

    .ast-mobile-popup-drawer,
    .ast-mobile-popup-inner,
    .ast-mobile-popup-content,
    .ast-mobile-menu-wrap {
        display: none !important;
    }


    /* =====================================================
       AÇMA BUTONU
       ===================================================== */

    #vz-open-menu {

        position: fixed !important;

        top: 15px !important;
        right: 15px !important;

        width: 48px !important;
        height: 48px !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        border-radius: 13px !important;

        background:
            linear-gradient(
                135deg,
                #087bd3,
                #064d9e
            ) !important;

        box-shadow:
            0 5px 20px
            rgba(0,70,130,.30) !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        align-items: center !important;

        gap: 5px !important;

        z-index: 999990 !important;

        cursor: pointer !important;

        -webkit-tap-highlight-color: transparent !important;
    }


    #vz-open-menu span {

        display: block !important;

        width: 23px !important;
        height: 3px !important;

        border-radius: 5px !important;

        background: #fff !important;
    }


    /* =====================================================
       KARARTMA
       ===================================================== */

    #vz-overlay {

        position: fixed !important;

        inset: 0 !important;

        background: rgba(0,0,0,.65) !important;

        z-index: 999997 !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            opacity .3s ease,
            visibility .3s ease !important;
    }


    #vz-overlay.vz-active {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* =====================================================
       SAĞDAN GELEN MENÜ
       ===================================================== */

    #vz-drawer {

        position: fixed !important;

        top: 0 !important;
        right: 0 !important;

        width: 94% !important;

        max-width: 430px !important;

        height: 100vh !important;

        height: 100dvh !important;

        background: #f3f7fb !important;

        z-index: 999998 !important;

        display: flex !important;

        flex-direction: column !important;

        overflow: hidden !important;

        transform:
            translate3d(110%,0,0) !important;

        transition:
            transform .38s
            cubic-bezier(.22,.61,.36,1) !important;

        box-shadow:
            -15px 0 40px
            rgba(0,0,0,.28) !important;
    }


    #vz-drawer.vz-active {

        transform:
            translate3d(0,0,0) !important;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .vz-drawer-header {

        flex-shrink: 0 !important;

        height: 75px !important;

        padding:
            0 15px 0 20px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        background:
            linear-gradient(
                135deg,
                #03417e,
                #087bd3,
                #12afea
            ) !important;
    }


    .vz-logo {

        color: #fff !important;

        font-size: 22px !important;

        font-weight: 700 !important;
    }


    .vz-logo strong {

        color: #a9eaff !important;
    }


    /* =====================================================
       ÇARPI
       ===================================================== */

    #vz-close-menu {

        width: 45px !important;
        height: 45px !important;

        min-width: 45px !important;
        min-height: 45px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border:
            1px solid
            rgba(255,255,255,.45) !important;

        border-radius: 50% !important;

        background:
            rgba(255,255,255,.15) !important;

        color: #fff !important;

        font-size: 31px !important;

        line-height: 1 !important;

        cursor: pointer !important;

        z-index: 9999999 !important;
    }


    /* =====================================================
       İÇERİK
       ===================================================== */

    .vz-drawer-body {

        flex: 1 !important;

        min-height: 0 !important;

        overflow-y: auto !important;

        padding: 15px 12px !important;

        -webkit-overflow-scrolling: touch !important;
    }


    /* =====================================================
       2 SÜTUN
       ===================================================== */

    .vz-grid {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap: 12px !important;
    }


    /* =====================================================
       KART
       ===================================================== */

    .vz-box {

        position: relative !important;

        min-width: 0 !important;

        overflow: hidden !important;

        border-radius: 17px !important;

        background: #fff !important;

        border:
            1px solid
            #dce7f0 !important;

        box-shadow:
            0 5px 18px
            rgba(20,60,90,.12) !important;
    }


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

    .vz-box-button {

        position: relative !important;

        width: 100% !important;

        height: 165px !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;

        background: #fff !important;

        text-align: left !important;

        cursor: pointer !important;

        display: block !important;
    }


    /* =====================================================
       GÖRSEL
       ===================================================== */

    .vz-icon {

        height: 110px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        position: relative !important;

        overflow: hidden !important;

        font-size: 57px !important;

        line-height: 1 !important;

        color: #fff !important;
    }


    .vz-icon:after {

        content: "" !important;

        position: absolute !important;

        width: 100px !important;
        height: 100px !important;

        right: -35px !important;
        top: -50px !important;

        border-radius: 50% !important;

        background:
            rgba(255,255,255,.20) !important;

        pointer-events: none !important;
    }


    /* =====================================================
       RENKLER
       ===================================================== */

    .vz-water {

        background:
            linear-gradient(
                135deg,
                #006bd1,
                #00cfff
            ) !important;
    }


    .vz-toilet {

        background:
            linear-gradient(
                135deg,
                #0752a0,
                #13b9ef
            ) !important;
    }


    .vz-location {

        background:
            linear-gradient(
                135deg,
                #0874d3,
                #45d9ff
            ) !important;
    }


    .vz-phone {

        background:
            linear-gradient(
                135deg,
                #00a268,
                #16df91
            ) !important;
    }


    /* =====================================================
       GERÇEK GÖRSELLER
       ===================================================== */

    .vz-pimas,
    .vz-petek {

        padding: 0 !important;

        background: #087db7 !important;
    }


    .vz-pimas img,
    .vz-petek img {

        width: 100% !important;

        height: 110px !important;

        display: block !important;

        object-fit: cover !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* =====================================================
       BAŞLIK
       ===================================================== */

    .vz-box-title {

        min-height: 55px !important;

        display: flex !important;

        align-items: center !important;

        box-sizing: border-box !important;

        padding:
            8px 38px 8px 12px !important;

        color: #172438 !important;

        font-size: 14px !important;

        font-weight: 800 !important;

        line-height: 1.15 !important;
    }


    /* =====================================================
       + / OK
       ===================================================== */

    .vz-arrow {

        position: absolute !important;

        right: 9px !important;
        bottom: 13px !important;

        width: 29px !important;
        height: 29px !important;

        border-radius: 50% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        background: #087bd3 !important;

        color: #fff !important;

        font-size: 19px !important;

        font-weight: 900 !important;
    }


    /* =====================================================
       ALT MENÜ
       ===================================================== */

    .vz-sub {

        display: none !important;

        padding:
            0 9px 10px !important;

        background: #f5faff !important;

        border-top:
            1px solid
            #e0eaf2 !important;
    }


    .vz-sub.vz-show {

        display: block !important;
    }


    .vz-sub a {

        display: block !important;

        margin-top: 7px !important;

        padding: 11px 10px !important;

        border-radius: 10px !important;

        background: #fff !important;

        border:
            1px solid
            #e0e9f1 !important;

        color: #17314a !important;

        text-decoration: none !important;

        font-size: 12px !important;

        font-weight: 600 !important;

        line-height: 1.25 !important;
    }


    /* =====================================================
       NORMAL KARTLAR
       ===================================================== */

    .vz-link-box {

        display: block !important;

        height: 165px !important;

        text-decoration: none !important;

        color: #172438 !important;
    }


    /* =====================================================
       RANDEVU
       ===================================================== */

    .vz-appointment {

        border:
            1px solid
            #9ce8c8 !important;
    }


    .vz-appointment .vz-box-title {

        color: #078154 !important;
    }


    .vz-appointment .vz-arrow {

        background: #08a86a !important;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .vz-drawer-footer {

        flex-shrink: 0 !important;

        padding:
            10px 12px 14px !important;

        background: #fff !important;

        border-top:
            1px solid
            #dfe7ef !important;
    }


    .vz-status {

        display: flex !important;

        align-items: center !important;

        gap: 9px !important;

        padding:
            0 3px 9px !important;
    }


    .vz-status > span {

        width: 9px !important;
        height: 9px !important;

        flex-shrink: 0 !important;

        border-radius: 50% !important;

        background: #10b778 !important;

        box-shadow:
            0 0 0 4px
            rgba(16,183,120,.12) !important;
    }


    .vz-status strong {

        display: block !important;

        color: #182638 !important;

        font-size: 11px !important;
    }


    .vz-status small {

        display: block !important;

        margin-top: 2px !important;

        color: #788696 !important;

        font-size: 10px !important;
    }


    /* =====================================================
       HEMEN ARA
       ===================================================== */

    .vz-call-button {

        min-height: 57px !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        padding: 0 12px !important;

        border-radius: 12px !important;

        background:
            linear-gradient(
                135deg,
                #087bd3,
                #064b99
            ) !important;

        color: #fff !important;

        text-decoration: none !important;
    }


    .vz-call-button > b {

        width: 36px !important;
        height: 36px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background:
            rgba(255,255,255,.16) !important;

        font-size: 19px !important;
    }


    .vz-call-button strong {

        display: block !important;

        color: #fff !important;

        font-size: 13px !important;
    }


    .vz-call-button small {

        display: block !important;

        color: #fff !important;

        font-size: 11px !important;

        margin-top: 2px !important;
    }


    /* =====================================================
       SAYFA MENÜ AÇIKKEN KAYMASIN
       ===================================================== */

    body.vz-menu-open {

        overflow: hidden !important;
    }

}