/* ArtisCape Default CSS */
.main { /* padding-top: 50px; */
}

.mainbar {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    padding-top: 50px;
}

.headbar {
    background: #000;
    padding: 10px 25px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
}

    .headbar > div {
        margin: 0 auto;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .headbar > div > div {
        }

            .headbar > div > div:first-child {
                height: 14px;
                overflow: hidden;
            }

            .headbar > div > div:last-child {
                display: flex
            }

            .headbar > div > div:first-child img {
                height: 100%;
                filter: brightness(0) invert(1);
            }

            .headbar > div > div:nth-child(2) {
                width: 30%;
                max-width: inherit;
            }

                .headbar > div > div:nth-child(2) > form {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    padding: 5px 8px;
                    background: #343434;
                    border: 1px solid #505050;
                    border-radius: 7px;
                    justify-content: space-between;
                }

                    .headbar > div > div:nth-child(2) > form > span {
                        width: calc(100% );
                    }

                        .headbar > div > div:nth-child(2) > form > span:first-child {
                            width: 25px;
                            color: #adb0b2;
                            font-size: 19px;
                        }

            .headbar > div > div input {
                width: 100%;
                border: 0;
                background: #343434;
                color: #fff;
            }

            .headbar > div > div a {
                color: #fff;
                display: block;
                width: 100%;
                height: 100%;
                font-size: 13px;
                font-weight: 500;
            }

.dil {
}

    .dil select {
        border: 0;
        width: 50px;
        background: #ebebeb;
        border-radius: 2px;
    }

.solmenu {
    width: 250px;
    display: flex;
    position: relative;
}

    .solmenu > div {
        margin: 0 auto;
        padding: 25px 0;
        position: fixed;
        background: #ebebeb;
        width: 250px;
        left: 0;
        top: 50px;
        z-index: 998;
        height: 100%;
        display: flex;
        justify-content: center;
    }

        .solmenu > div > ul {
            width: calc(100% - 50px);
        }

            .solmenu > div > ul > li {
            }

        .solmenu > div ul li i {
            padding-right: 5px
        }

        .solmenu > div ul li ul {
            padding: 8px 17px;
            font-size: 14px;
        }

            .solmenu > div ul li ul li { /* padding:5px; */
            }

        .solmenu > div > ul > li a {
            display: flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 12px;
        }

            .solmenu > div > ul > li a:hover {
                background: #fff;
            }

        .solmenu > div > ul > li > a > span {
            font-size: 13px;
            font-weight: 600;
        }

            .solmenu > div > ul > li > a > span:first-child {
                font-size: 18px;
                margin-right: 5px;
            }

.login {
    background: #141414;
    height: 100%;
    width: 100%
}

.basarisizgiris {
    background: #f00;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}

    .basarisizgiris span {
        font-size: 13px;
        line-height: 20px;
        color: #fff;
        font-weight: 700;
    }

.loginscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 2;
}

    .loginscreen > div {
        background: #fff;
        padding: 30px;
        border-radius: 12px;
        width: 350px;
    }

        .loginscreen > div form {
        }

    .loginscreen h1 {
        margin-bottom: 35px;
        font-size: 23px;
        font-weight: bold;
    }

    .loginscreen > div form div {
        margin-bottom: 24px;
    }

        .loginscreen > div form div label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 16px;
        }

        .loginscreen > div form div input {
            width: calc(100% - 10px);
            border: 1px solid #000;
            border-radius: 4px;
            padding: 5px;
        }

        .loginscreen > div form div button {
            border: 0;
            background: #1a1a1a;
            color: #fff;
            padding: 12px 24px;
            border-radius: 5px;
            margin: 0 auto;
            display: block;
            width: 100%;
            font-size: 15px;
        }


.pagemain {
    width: calc(100% - 300px);
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    margin: 0 auto;
}

.mainitembar {
    padding: 35px 0px;
}

.ikili {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .ikili > div {
        width: calc((100% / 2) - 25px);
        margin-right: 25px;
    margin-bottom: 25px;
}

        .ikili > div:nth-child(2n) { /* margin-right:0; */
        }

.topliste {
    width: calc(100% - 30px);
    background: #fff;
    padding: 25px 15px;
}

    .topliste > .head {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: space-between;
        margin-bottom: 0;
    }

        .topliste > .head > div {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

            .topliste > .head > div h1 {
                font-size: 24px;
                font-weight: 600;
                margin: 0;
                text-align: center;
            }

            .topliste > .head > div > div:first-child {
                margin-right: 5px;
            }

.filterpop {
    height: 0;
    overflow: hidden;
    width: 100%;
    transition: 0.5s;
}

    .filterpop > div, .talepsuzme > div {
        background: #ffffff;
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }

    .filterpop .item-bar, .talepsuzme .item-bar {
        border: 1px solid #f1f1f1;
        border-radius: 10px !important;
        margin-bottom: 13px;
        padding: 12px 9px;
    }

        .filterpop .item-bar:first-child, .talepsuzme .item-bar:first-child {
            width: 130px;
            margin-right: 10px;
        }

        .filterpop .item-bar h2, .talepsuzme .item-bar h2 {
            font-size: 13px;
            font-weight: bold;
            display: flex;
            align-items: center;
            margin: 0;
            letter-spacing: 0;
        }

        .filterpop .item-bar > div > div, .talepsuzme .item-bar > div > div {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }

.topliste .listebar {
    margin-top: 15px;
    margin-bottom: 0;
}

    .topliste .listebar > ul.listehead {
        background: #202020;
    }

    .topliste .listebar > ul {
        display: flex;
        list-style: none;
        margin: 0;
        width: 100%;
        border-bottom: 1px solid #e7e7e7;
        justify-content: space-between;
    }

        .topliste .listebar > ul:last-child {
            border-bottom: 0
        }

        .topliste .listebar > ul.listehead > li {
            color: #fff;
            font-weight: 600;
        }

.topliste .taleplist > ul > li:nth-child(1) {
    justify-content: center;
    display: flex;
    justify-content: center;
}

.topliste .taleplist > ul > li:nth-child(2) {
    width: 140px;
}

.topliste .taleplist > ul > li:nth-child(3) {
    width: calc(100% - 170px);
}

.topliste .taleplist > ul > li:nth-child(4) {
    display: flex;
    justify-content: right;
    width: 250px;
}

.topliste .listebar > ul > li {
    padding: 6px 2px;
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 13px;
    position: relative;
}

.pagehead {
    display: flex; /* background: #fff; */
    padding: 9px;
    margin-top: 20px;
    justify-content: space-between;
    width: 100%;
    border-radius: 10px;
    align-items: center;
}

    .pagehead > div {
    }

        .pagehead > div h1 {
            font-size: 18px;
            font-weight: 600;
        }

        .pagehead > div p {
            margin-top: 7px
        }

        .pagehead > div span {
            font-weight: 700;
        }

        .pagehead > div a {
        }

.mt30 {
    margin-top: 30px
}

.tablelist {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

    .tablelist > div {
    }

        .tablelist > div:first-child {
            display: flex;
            justify-content: space-between;
            background: #fff;
            padding: 15px;
            width: 100%;
        }

        .tablelist > div:last-child {
            width: 100%
        }

        .tablelist > div:first-child > div {
            display: flex;
            align-items: center;
        }

            .tablelist > div:first-child > div span {
                font-weight: 600
            }

            .tablelist > div:first-child > div a {
                margin: 0 15px;
                font-weight: 600;
            }

                .tablelist > div:first-child > div a.active {
                    background: #000d;
                    padding: 4px 9px;
                    color: #fff;
                    font-size: 12px;
                    border-radius: 5px;
                    border: 1px solid #000d;
                    transition: .3s;
                }

                    .tablelist > div:first-child > div a.active:hover {
                        background: #fff;
                        color: #000;
                        border: 1px solid #edededdd;
                    }

            .tablelist > div:first-child > div i {
                cursor: pointer;
            }

.varyasyonsil {
    padding: 5px 20px;
    cursor: pointer;
    background: #f0f0f0;
    color: #000000;
    font-weight: 800;
}

.kumassil {
    padding: 5px 20px;
    cursor: pointer;
    background: #f0f0f0;
    color: #000000;
    font-weight: 800;
    float: right
}

.variantsil {
    cursor: pointer;
    width: 140px;
}

    .variantsil > div {
        padding: 5px;
        background: #000000;
        color: #fff;
    }

.productalthead {
    width: 100%;
}

    .productalthead > div {
    }

        .productalthead > div:first-child {
            display: flex;
            justify-content: space-around;
            background: #f7f7f7;
            padding: 10px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

            .productalthead > div:first-child div {
                font-weight: 600
            }

            .productalthead > div:first-child div, .productalthead > div > div div {
                width: 100%;
                display: flex;
                align-content: center;
                align-items: center;
                justify-content: center;
            }

                .productalthead > div > div div input {
                    padding: 0 5px
                }

.altproductlist .yuklugorsel {
    margin: 25px 0;
    background: #fff;
    border-radius: 11px;
    padding: 23px;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    display: none
}

    .altproductlist .yuklugorsel > div {
        width: auto;
        margin-right: 9px;
        border: 1px solid #ebebeb;
        border-radius: 7px;
        padding: 14px;
        display: flex;
        flex-direction: column;
    }

        .altproductlist .yuklugorsel > div > img {
            width: 100%;
            height: auto;
            max-width: 100px;
        }

        .altproductlist .yuklugorsel > div > button {
            margin: 10px 0 0 0;
            width: 100%;
            padding: 2px 3px;
            font-size: 14px;
        }

    .altproductlist .yuklugorsel a {
        margin-top: 15px;
        width: 60px;
        text-align: center
    }

.altproductlist {
    width: calc(100%);
    display: flex;
    justify-content: space-between;
    background: #f7f7f7;
    padding: 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

    .altproductlist > div {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        justify-content: space-around;
    }

        .altproductlist > div div input {
        }

        .altproductlist > div div img {
            height: 130px;
        }

    .altproductlist .altbar {
        width: 50px;
        padding-right: 10px
    }
    .stokalani{}
    .stokalani img{}
    .stokalani p{
    margin-top: 12px;
    text-align: center;
}
.varyasyonekle {
    cursor: pointer;
}

.varyasyontabla {
}

    .varyasyontabla.active {
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
    }

    .varyasyontabla > div {
        margin-bottom: 10px;
        width: 100%;
    }

.producthead {
    width: 100%;
}

    .producthead > div {
    }

        .producthead > div:first-child {
            display: flex; /* justify-content: space-between; */
            background: #f7f7f7;
            padding: 10px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

            .producthead > div:first-child div {
                font-weight: 600
            }

            .producthead > div:first-child div, .productlist > div div {
                width: 250px;
            }

                .producthead > div:first-child div:first-child, .producthead > div:first-child div:nth-child(2), .productlist > div > div:first-child, .productlist > div > div:nth-child(2) {
                    width: 50px;
                    margin-right: 15px;
                }

.productlist {
    width: calc(100%);
    display: flex;
    justify-content: space-between;
    background: #f7f7f7;
    padding: 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

    .productlist > div {
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center;
    }

        .productlist > div div input {
        }

        .productlist > div div img {
            width: 100%;
        }

    .productlist .altbar {
        width: 50px;
        padding-right: 10px
    }

.urunlistkategori {
}

    .urunlistkategori > form > div {
        display: flex
    }

    .urunlistkategori div div {
        margin-right: 20px;
        width: 220px;
    }

    .urunlistkategori div select {
        border: 1px solid #f1f1f1;
        width: 100%;
        font-size: 12px;
        color: #000000;
        padding: 5px 9px;
    }

    .urunlistkategori div button {
        padding: 5px 19px;
        border-color: #f1f1f1;
    }

        .urunlistkategori div button:hover {
            background: #000;
            color: #fff
        }

.searchbar {
    margin-right: 15px;
    display: none;
    width: 350px;
}

    .searchbar.active {
        display: block
    }

    .searchbar > input {
        width: 100%;
        border: 1px solid #f1f1f1;
        padding: 3px 10px;
    }

.backalt {
    display: flex;
    width: 70%;
    margin: 25px auto;
}

    .backalt a {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 700;
    }

        .backalt a span {
            padding-right: 10px
        }

.productadd {
    width: 70%;
    margin: 0 auto;
    display: flex;
    align-content: center;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

    .productadd > div {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        flex-direction: column;
    }

    .productadd > div {
        width: 100%
    }

        .productadd > div > form > div {
            background: #fff;
            padding: 15px;
            width: 100%;
            border-radius: 10px;
            margin: 30px 0;
        }

            .productadd > div > form > div > div {
                margin-bottom: 10px;
                display: flex;
                flex-direction: column;
            }

                .productadd > div > form > div > div label, .productadd > div > form > div > label, .productadd > div label {
                    margin-bottom: 10px;
                    font-weight: 600;
                    display: block
                }

        .productadd > div > div > div input {
        }

        .productadd > div select, .productadd > div > form > div > div input, .productadd > div > form > div > div select, .productadd > div > form > div > div textarea {
            border-radius: 8px;
            padding: 5px 10px;
            border: 1px solid #ddd;
            width: 100%;
        }

        .productadd > div > div > div text {
        }

        .productadd > div label {
        }

        .productadd > div select {
        }

    .productadd button {
        padding: 10px 45px;
        margin: 25px auto;
        display: block;
        background: #000;
        color: #fff;
        border-radius: 5px;
        font-weight: 600;
        font-size: 14px;
    }

        .productadd button:hover {
            background: #ebebeb;
            color: #000;
        }

    .productadd .twodiv {
        display: flex;
        justify-content: space-between;
    }

        .productadd .twodiv > div {
        }

    .productadd .baslayanfiyat {
        margin-bottom: 25px;
    }

        .productadd .baslayanfiyat > div {
        }

            .productadd .baslayanfiyat > div label {
                margin-bottom: 0;
                margin-right: 5px;
            }

.kategoriekle {}
.kategoriekle p {padding: 6px 15px;display: block;background: #000;color: #fff;border-radius: 5px;font-weight: 600;font-size: 13px;margin-bottom: 10px;cursor: pointer;}
.yuklenengorsel, .yuklenengorsel1, .yuklenengorsel2 {display: none;}
.yuklenengorsel h1, .yuklenengorsel1 h1, .yuklenengorsel2 h1 {padding: 15px 0;font-size: 14px;font-weight: 700;}
.yuklenengorsel img, .yuklenengorsel1 img, .yuklenengorsel2 img {margin-right: auto;height: 100px;margin-bottom: 15px;width: 100%;}
.yuklenengorsel > div, .yuklenengorsel1 > div, .yuklenengorsel2 > div {display: flex;flex-direction: row;flex-wrap: wrap;}
.karteladetail #image-preview1 > div, .karteladetail #image-preview2 > div {width: 300px;padding-bottom: 30px;}
.karteladetail #image-preview1 > div img, .karteladetail #image-preview2 > div img {width: 100% !important;height: 80% !important;}
.karteladetail button {margin: auto;}

.yuklenengorsel3 {margin-top: 50px;}
.yuklenengorsel3 h1{font-weight:600}
.yuklenengorsel3 > div{display: flex;flex-direction: column-reverse;flex-wrap: wrap;margin-top: 15px;}
.yuklenengorsel3 > div>div{width: 100%;display: flex;justify-content: space-between;margin-bottom: 15px;border: 1px solid #ddd;padding: 5px;align-items: center;}
.yuklenengorsel3 > div>div.teklidiv{flex-direction: column;}
.yuklenengorsel3 > div>div>div{width:50%}
.yuklenengorsel3 > div>div a.button{width: 60px; text-align: center;margin: 10px auto 0 auto;}

.yuklenengorsel3 > div img{width:100%}

.yuklenengorsel > div > div, .yuklenengorsel1 > div > div, .yuklenengorsel2 > div > div {padding-right: 10px;border: 1px solid #ddd; padding: 10px;margin: 0 5px;text-align: center;width: calc((100% / 5) - 10px);background: #fff;margin-bottom: 10px}
.yuklenengorsel a, .yuklenengorsel1 a, .yuklenengorsel2 a {margin-bottom: 5px;cursor: pointer}

.vitrinbutton {    background: #07ef13 !important;
    border: 1px solid #07ef13 !important;
}

.secilivitrin {
    background: #0709ef !important;
    border: 1px solid #0709ef !important;
}

.vitrinbutton:hover {
    background: #fff !important;
    color: #000 !important
}

.secilivitrin:hover {
    background: #fff !important;
    color: #000 !important
}

.yuklenengorsel .gorseldiv {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 15px 0;
    align-content: center;
    align-items: center;
}

    .yuklenengorsel .gorseldiv > div {
        padding: 0;
        border: 0;
        margin: 0;
    }
    .yuklenengorsel .gorseldiv #siralamaguncelle{
    width: 150px;
}    
    .yuklenengorsel .gorseldiv #siralamaguncelle h1{
    background: #00a123;
    color: #fff;
    text-align: center;
    border-radius: 5px;
}    
    .yuklenengorsel .gorseldiv h1{
    font-size: 12px;
}    

    .yuklenengorsel .gorseldiv input {
        background: #000;
        color: #fff;
        padding: 10px;
        cursor: pointer;
    }

    .yuklenengorsel .gorseldiv h1 {
        text-align: left;
    }

.onerilenolcu {
    margin-top: 20px;
    font-size: 12px
}

    .onerilenolcu span {
        font-weight: 600
    }

.flex {
    display: flex;
    align-items: center;
}

.mediaupload {
    position: relative;
}

    .mediaupload > div {
    }

        .mediaupload > div:first-child {
            z-index: 2;
            position: absolute;
            width: 100%;
            height: 100%;
            background: none !important
        }

            .mediaupload > div:first-child input {
                background: none;
                opacity: 0;
                width: 100%;
                height: 100%;
                cursor: pointer
            }

        .mediaupload > div:last-child {
            z-index: 1;
            position: relative;
            background: #fff;
            padding: 35px;
            border-radius: 10px;
            border: 1px dashed #ddd;
            text-align: center;
            transition: 1s
        }

    .mediaupload:hover div {
        background: #ebebeb;
        transition: 1s
    }

.siparisdetay {
    width: 70%;
    margin: 0 auto;
}

    .siparisdetay .adresler {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 0 auto;
    }

        .siparisdetay .adresler > div {
            min-width: 40%;
            width: 49%;
        }

.detaybg {
    background: #fff;
    padding: 15px 30px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.siparisdetay .adresler label {
    font-weight: 600;
    margin-bottom: 7px;
    display: block;
}

.siparisdetay .adresler p {
    margin-bottom: 4px;
}

    .siparisdetay .adresler p span {
        font-weight: 600;
    }

.odemetur {
}

    .odemetur > div {
        display: flex;
        justify-content: space-between;
    }

        .odemetur > div p {
        }

            .odemetur > div p span {
                font-weight: 600
            }

.sdurumu {}
.sdurumu label {font-size: 15px;font-weight: 600;margin-bottom: 10px;display: block;}
.sdurumu div > div {margin-bottom: 15px}
.sdurumu select {padding-left: 5px;width: 100%;border: 1px solid #000;padding: 5px;color: #000;}
.sdurumu button {font-size: 12px;padding: 8px 20px;}
.sdurumu button:hover {color: #fff;background: #000}

.toplamtutar {}
.toplamtutar > div {display: flex;justify-content: space-between;padding: 5px 0;}
.toplamtutar > div > div {}
.toplamtutar > div > div span {font-weight: 700;}
.toplamtutar .odenen {border-top: 1px solid #ddd;}

.ayarlist {}
.ayarlist input {width: 250px}
.ayarlist button {padding: 10px 62px;border: 1px solid #ddd;background: #000;color: #fff;}
.ayarlist button:hover {background: #fff;color: #000;}

.ayarlist .textarea{width: 480px;}
.ayarlist .textarea>textarea{width:100%}

input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none; appearance: none;}
.gradient-background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-filter: blur(250px);filter: blur(250px);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);z-index: 1;}
.gradient-background__shape {mix-blend-mode: lighten;-webkit-animation-duration: 20s;animation-duration: 20s;position: absolute;border-radius: 100%;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);}
.gradient-background__shape--1 {bottom: 0;left: 0;width: 700px;height: 700px;background: #8e7bff;mix-blend-mode: lighten;-webkit-transform: translate(-30%, 40%);transform: translate(-30%, 40%);-webkit-animation-name: gradientShapeAnimation1;animation-name: gradientShapeAnimation1;}
.gradient-background__shape--2 {top: 0;right: 0;width: 600px;height: 600px;background: #44f2eb;-webkit-transform: translate(20%, -40%);transform: translate(20%, -40%);-webkit-animation-name: gradientShapeAnimation2; animation-name: gradientShapeAnimation2;}

.varyasyondiv {flex-direction: row !important;flex-wrap: nowrap; align-content: space-around; justify-content: space-between;align-items: center;}
.varyasyondiv > div {}
.varyasyondiv > div:last-child > div {padding: 5px 10px;background: #000;color: #fff;border-radius: 5px;font-weight: 600;cursor: pointer}
.varyasyondiv > div:last-child > div:hover {background: #ebebeb;color: #000}
.varyasyonpop {display: none;position: fixed;z-index: 999;background: rgb(83 83 83);width: 100%;   height: 100%;   top: 0;    left: 0;    border-radius: 5px;}
.varyasyonpop .cancel {        position: absolute;        right: 30px;        top: 30px;        cursor: pointer;    }
.varyasyonpop .cancel span {            color: #ffffff;            font-size: 40px;        }
.varyasyonpop.active {       display: block;    }
.varyasyonpop > div {       display: flex;       width: 40%;        height: 100%;        flex-direction: column;        justify-content: center;        align-content: center;        margin: 0 auto;    }
.varyasyonpop .productadd {        width: 90%;    }

.vitringorselgenel {    width: 100%;}
.vitringorselgenel.active {        height: auto;        margin-bottom: 35px;    }
.vitringorselgenel > div {        width: 100%;        display: flex;        flex-direction: column;        align-content: flex-start;    }
.vitringorselgenel h1 {        font-size: 23px;        font-weight: 600;        margin: 0;        margin-bottom: 10px;    }
.vitringorselgenel button {        border: 0;        background: #000;        color: #fff;        padding: 12px 24px;        margin-top: 3px;       width: 130px;        border-radius: 5px;  }

    .vitringorselgenel form {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .vitringorselgenel .action {
        margin: 15px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        .vitringorselgenel .action input {
            margin-right: 3px;
            width: inherit !important;
            padding: 10px 15px !important;
            font-weight: 600;
            border: 0;
            cursor: pointer
        }

.cropped {
    width: 550px
}

    .cropped img {
        width: 100%;
    }

.digerurunlertabla {
    width: 100%;
    height: 300px;
    overflow-y: scroll
}

.digerarama {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    align-items: center;
}

    .digerarama > div {
    }

    .digerarama label {
        margin: 0 !important
    }

    .digerarama > div:last-child {
        width: 30%
    }

    .digerarama > div input {
    }

#productModal {
    background: #000;
    width: 800px !important;
    height: 400px !important;
    z-index: 9999;
    left: calc(50% - 300px);
    top: calc(50% - 200px);
    background: #dddd;
}

    #productModal .modal-content {
        display: flex;
        flex-direction: column;
    }

        #productModal .modal-content .close {
            position: absolute;
            right: -20px;
            color: #fff;
            top: -20px;
            font-size: 35px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: red;
            border-radius: 40px;
        }

        #productModal .modal-content select {
            width: 90%;
            margin-bottom: 18px;
            padding: 7px;
        }

    #productModal button {
        background: #000;
        color: #fff;
        font-size: 14px;
    }

    #productModal .urunaradiv {
        display: flex;
        flex-direction: column;
        background: none;
        width: 90%;
        max-width: 100%;
        padding: 0;
    }

    #productModal #ajax-main {
        width: 100%;
        margin: 15px 0;
    }

.urunaradiv .popsearch {
    width: 100%;
    display: flex;
    align-items: center;
}

    .urunaradiv .popsearch label {
        font-weight: 700;
        width: 120px;
    }

    .urunaradiv .popsearch input {
        border-radius: 8px;
        padding: 5px 10px;
        border: 1px solid #ddd;
        width: 100%;
    }



@keyframes gradientShapeAnimation1 {
    0% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg)
    }

    25% {
        -webkit-transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg)
    }

    50% {
        -webkit-transform: translate(30%, -10%) rotate(180deg);
        transform: translate(30%, -10%) rotate(180deg)
    }

    75% {
        -webkit-transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
        transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg)
    }

    100% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg)
    }
}

@-webkit-keyframes gradientShapeAnimation2 {
    0% {
        -webkit-transform: translate(20%, -40%) rotate(-20deg);
        transform: translate(20%, -40%) rotate(-20deg)
    }

    20% {
        -webkit-transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg)
    }

    40% {
        -webkit-transform: translate(-40%, 50%) rotate(180deg);
        transform: translate(-40%, 50%) rotate(180deg)
    }

    60% {
        -webkit-transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
        transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg)
    }

    80% {
        -webkit-transform: translate(10%, -30%) rotate(180deg);
        transform: translate(10%, -30%) rotate(180deg)
    }

    100% {
        -webkit-transform: translate(20%, -40%) rotate(340deg);
        transform: translate(20%, -40%) rotate(340deg)
    }
}

@keyframes gradientShapeAnimation2 {
    0% {
        -webkit-transform: translate(20%, -40%) rotate(-20deg);
        transform: translate(20%, -40%) rotate(-20deg)
    }

    20% {
        -webkit-transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg)
    }

    40% {
        -webkit-transform: translate(-40%, 50%) rotate(180deg);
        transform: translate(-40%, 50%) rotate(180deg)
    }

    60% {
        -webkit-transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
        transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg)
    }

    80% {
        -webkit-transform: translate(10%, -30%) rotate(180deg);
        transform: translate(10%, -30%) rotate(180deg)
    }

    100% {
        -webkit-transform: translate(20%, -40%) rotate(340deg);
        transform: translate(20%, -40%) rotate(340deg)
    }
}

.product-marker {
    position: absolute;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
}

#image-container {
    position: relative
}

.product-info {
    position: absolute;
    background: white;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
}

.close-button {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
    background: black;
    color: white;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
}

.sipariskayit {
    display: flex;
    margin-bottom: 25px;
    width: 100%;
    justify-content: flex-end;
}

    .sipariskayit button {
        width: 200px;
    }

.siparisformindir {
    margin-bottom: 20px;
}

    .siparisformindir a {
        background: #000;
        border: 1px solid #ddd;
        color: #fff;
        padding: 8px 10px;
    }



.modal {
    position: fixed;
    width: 100vw !important;
    height: 100vh !important;
    background: #0000009c;
    z-index: 9999;
    top: 0;
    left: 0;
    display: none
}

    .modal .modal-dialog {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal .modal-content {
        background: #fff;
        border-radius: 11px;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
        width: 100%; /*max-width: 1000px;*/
        max-height: calc(100vh - 50px);
        position: relative;
        overflow: hidden;
        overflow-y: scroll;
        height: 100%
    }

        .modal .modal-content .partial {
            width: 100%;
            height: 100%
        }

            .modal .modal-content .partial > div {
                width: 100%;
                height: 100%
            }

    .modal .modelclose {
        position: absolute;
        right: 4px;
        top: 4px;
        cursor: pointer;
        background: #000;
        border-radius: 100%;
        z-index: 9;
    }

.modal-css {
    padding: 25px;
    overflow-y: auto;
    position: relative
}

    .modal-css > div {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        padding: 20px;
        margin: -25px -25px 25px -25px;
        border-radius: 8px 8px 0 0;
        text-align: center;
        position: relative;
    }

        .modal-css > div:first-child > button.vazgec {
        position: fixed;
        top: 15px;
        right: 15px;
        background: #fff;
        border: 2px solid rgba(255,255,255,1);
        color: #333;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: all 0.3s ease;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .modal-css .vazgec i {
        font-size: 18px;
        color: #22bd7a;
    }

    .modal-css .vazgec svg {
    }

        .modal-css .vazgec svg line {
        }

.onepage {
    width: 100%;
}

    .onepage > .head {
        background: #b60000;
        padding: 25px 15px 15px 20px;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .onepage > .head > h1 {
            color: #fff;
        }

        .onepage > .head > h2 {
            color: #fff;
            font-weight: 600;
            font-size: 16px;
            text-decoration: 20px;
        }

    .onepage > .uyari {
        width: 100%;
        padding: 25px 20px;
        background: #e6e6e6;
    }

        .onepage > .uyari > p {
            font-weight: 600;
            margin-bottom: 7px;
        }

        .onepage > .uyari > ul {
            list-style: circle;
            padding-left: 20px;
        }

            .onepage > .uyari > ul > li {
                line-height: 25px;
            }

.uyarihata {
    padding: 10px 25px;
}

    .uyarihata p {
        color: #ff0000;
    }

.onepageContent {
    width: calc(100% - 40px);
    margin: 0 auto;
    margin-top: 20px;
}

    .onepageContent > form {
    }

        .onepageContent > form .tekli {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

            .onepageContent > form .tekli > hr {
                width: 100%;
                height: 1px;
                margin: 15px 0;
                border: none;
                background-color: #e6e6e6;
            }

            .onepageContent > form .tekli > label {
                font-weight: 600;
                margin-bottom: 8px;
            }

            .onepageContent > form .tekli .aciklama {
                display: flex;
                flex-direction: column;
                margin-left: 5px;
            }

                .onepageContent > form .tekli .aciklama > label {
                    font-weight: 600;
                }

                .onepageContent > form .tekli .aciklama > span {
                }

    .onepageContent .izinler {
        margin-top: 5px;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

        .onepageContent .izinler > div {
            width: 100%;
            border: 1px solid #e6e6e6;
            margin-bottom: 15px;
        }

            .onepageContent .izinler > div:last-child {
                margin-bottom: 0
            }

            .onepageContent .izinler > div .izhead {
                background: #e6e6e6;
                padding: 15px 10px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }

                .onepageContent .izinler > div .izhead > h1 {
                    font-weight: 600;
                    font-size: 14px;
                }

                .onepageContent .izinler > div .izhead > div {
                }

            .onepageContent .izinler > div .item {
                width: 100%;
                padding: 20px 20px;
            }

                .onepageContent .izinler > div .item > ul {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 15px 30px;
                    align-content: flex-start;
                }

                    .onepageContent .izinler > div .item > ul > li {
                    }

                        .onepageContent .izinler > div .item > ul > li > label {
                            font-weight: 600;
                            margin-bottom: 4px;
                            display: block;
                            font-size: 11px;
                        }

                        .onepageContent .izinler > div .item > ul > li > div {
                            display: flex;
                            align-items: center;
                            align-content: center;
                            margin-bottom: 5px;
                        }

                            .onepageContent .izinler > div .item > ul > li > div > input {
                                margin-right: 4px;
                            }

                            .onepageContent .izinler > div .item > ul > li > div > label {
                                font-size: 11px
                            }

                            .onepageContent .izinler > div .item > ul > li > div:last-child {
                            }

    .onepageContent > form .ikili {
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        justify-content: space-between;
    }

    .onepageContent .izinler .item > ul > li > div.onay {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 5px;
    }

    .onepageContent .izinler .onay > div {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 10px;
    }

        .onepageContent .izinler .onay > div > label {
            margin-left: 5px;
            font-size: 11px;
        }

        .onepageContent .izinler .onay > div:last-child {
        }

.tabikili {
    display: flex;
    align-items: center;
    flex-direction: row;
}

    .tabikili > div {
        margin-right: 10px;
        display: flex;
        align-items: center;
    }

        .tabikili > div label {
            font-size: 12px;
        }

        .tabikili > div input {
            margin-right: 5px;
        }

.onepageContent > form .ikili > div {
    border: 1px solid #e6e6e6;
    width: 49%;
    padding: 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

    .onepageContent > form .ikili > div > div {
    }

        .onepageContent > form .ikili > div > div:last-child {
            margin-left: 23px;
            width: 80px;
        }

        .onepageContent > form .ikili > div > div h1 {
            font-weight: 600;
            font-size: 17px;
        }

        .onepageContent > form .ikili > div > div p {
            font-size: 12px;
        }

    .onepageContent > form .ikili > div.satir {
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        gap: 10px;
    }

        .onepageContent > form .ikili > div.satir > div {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

            .onepageContent > form .ikili > div.satir > div textarea {
                width: 100%;
            }

        .onepageContent > form .ikili > div.satir #ipkisitlamaDiv {
            margin: 0
        }

.onepageContent > form .tekli > div > label {
}

.onepageContent > form .tekli > div > select {
}

.onepage .bottombar {
    position: sticky;
    bottom: 0;
    background: #dedede;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}

    .onepage .bottombar > div {
        margin-right: 6px;
    }

        .onepage .bottombar > div > span {
        }

        .onepage .bottombar > div > button {
        }

.onepage .button {
    background: #ffffff;
    font-size: 13px;
    line-height: 21px;
    border: 1px solid #f1f1f1;
    padding: 3px 9px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
}

    .onepage .button span {
        font-size: 14px;
        font-weight: 600;
        margin-right: 4px;
    }

.kategoriadd {
}

    .kategoriadd .divim {
        background: #fff;
        padding: 10px;
        width: 100%;
        border-radius: 10px;
    }

        .kategoriadd .divim label {
            margin-bottom: 5px;
            font-weight: 600;
            display: block;
        }

        .kategoriadd .divim select, .kategoriadd .divim input {
            border-radius: 8px;
            padding: 5px 10px;
            border: 1px solid #ddd;
            width: 100%;
        }

.button.red {
    background: #b60000;
    border: 1px solid #d31919;
}

.button.blue {
    background: #0016c1;
    border: 1px solid #051bc3;
}

.button.green {
    background: #018e0c;
    border: 1px solid #13a61e;
}

.button.yellow {
    background: #bd7619;
    border: 1px solid #ffad11;
}

    .button.blue, .button.blue *, .button.yellow, .button.yellow *, .button.green, .button.green *, .button.red, .button.red * {
        color: #fff !important;
    }

.basarili {
    padding: 15px;
    background: #018e0c;
    margin: 10px;
    display: none
}

    .basarili p {
        text-align: center;
        color: #fff;
        font-weight: 600;
    }

.freecargo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

    .freecargo label {
        margin: 0 !important;
    }

    .freecargo input {
        width: auto !important;
        margin-left: 10px;
    }

.zorunlusecim {
}

    .zorunlusecim > div {
        flex-direction: row !important;
        margin-bottom: 0 !important;
    }

        .zorunlusecim > div input {
            width: 15px !important;
        }

        .zorunlusecim > div label {
            margin-bottom: 0 !important;
            margin-left: 5px;
            cursor: pointer;
        }


.yayinal {margin-top: 15px;background: #0bab35;color: #fff;display: inline; padding: 5px 15px; border-radius: 5px;}
.tamamensil {margin-top: 15px;background: #f00;color: #fff;display: inline; padding: 5px 15px; border-radius: 5px;display:block}

.webdegor {
}

    .webdegor a {
        color: #fff;
        background: #000;
        padding: 8px 15px;
        border-radius: 5px;
    }

.secilikumaslar {
}

    .secilikumaslar > div {
        margin-bottom: 25px;
        border: 1px solid #ddd;
        padding: 15px;
    }

        .secilikumaslar > div h1 {
            font-weight: 700;
        }

        .secilikumaslar > div ul {
            display: flex;
            flex-wrap: wrap;
        }

        .secilikumaslar > div li {
            padding: 5px;
            margin: 5px;
            border: 1px solid #000000;
            cursor: pointer;
            width: calc(16% - 6px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

            .secilikumaslar > div li > div {
                margin-bottom: 5px
            }

            .secilikumaslar > div li p {
                text-align: center;
            }

            .secilikumaslar > div li img {
                width: 100%
            }

    .secilikumaslar .tumsec {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
    }

        .secilikumaslar .tumsec > div:last-child {
            display: flex;
            justify-content: space-between;
        }

            .secilikumaslar .tumsec > div:last-child label {
                display: flex;
                cursor: pointer;
            }

                .secilikumaslar .tumsec > div:last-child label input {
                    width: auto;
                    margin-right: 5px;
                }


.formloading {
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(0 0 0 / 0.55);
    height: 100%;
    display: block;
    width: 100%;
    z-index: 999999;
    text-align: center;
}

    .formloading.hidden {
        display: none
    }

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    top: calc(50% - 40px);
}

    .lds-roller div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;
    }

        .lds-roller div:after {
            content: " ";
            display: block;
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #fff;
            margin: -4px 0 0 -4px;
        }

        .lds-roller div:nth-child(1) {
            animation-delay: -0.036s;
        }

            .lds-roller div:nth-child(1):after {
                top: 63px;
                left: 63px;
            }

        .lds-roller div:nth-child(2) {
            animation-delay: -0.072s;
        }

            .lds-roller div:nth-child(2):after {
                top: 68px;
                left: 56px;
            }

        .lds-roller div:nth-child(3) {
            animation-delay: -0.108s;
        }

            .lds-roller div:nth-child(3):after {
                top: 71px;
                left: 48px;
            }

        .lds-roller div:nth-child(4) {
            animation-delay: -0.144s;
        }

            .lds-roller div:nth-child(4):after {
                top: 72px;
                left: 40px;
            }

        .lds-roller div:nth-child(5) {
            animation-delay: -0.18s;
        }

            .lds-roller div:nth-child(5):after {
                top: 71px;
                left: 32px;
            }

        .lds-roller div:nth-child(6) {
            animation-delay: -0.216s;
        }

            .lds-roller div:nth-child(6):after {
                top: 68px;
                left: 24px;
            }

        .lds-roller div:nth-child(7) {
            animation-delay: -0.252s;
        }

            .lds-roller div:nth-child(7):after {
                top: 63px;
                left: 17px;
            }

        .lds-roller div:nth-child(8) {
            animation-delay: -0.288s;
        }

            .lds-roller div:nth-child(8):after {
                top: 56px;
                left: 12px;
            }

@keyframes lds-roller {
  0% {
transform: rotate(0deg);
  }

  100% {
transform: rotate(360deg);
  }
}

@keyframes bounce {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-15px)
    }
}

/* ========================================
   GENEL TEMİZLEME BUTONU STİLLERİ
   ======================================== */

.btn-temizle-form {
    background: #49a94d;
    border: 0;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-temizle-form:hover {
        background: #e9ecef;
        border-color: #dee2e6;
        color: #495057;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .btn-temizle-form:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .btn-temizle-form i {
        font-size: 14px;
        color: #ffffff;
    }

    .btn-temizle-form:hover i {
        color: #495057;
    }

/* ========================================
   YENİ STEP CSS STİLLERİ
   ======================================== */

/* Onay Step Stilleri */
.onay-step-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.onay-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.onay-header h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.onay-header i {
    color: #27ae60;
    margin-right: 10px;
}

.onay-content {
    margin-bottom: 30px;
}

.onay-section {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.onay-section h4 {
    color: #2c3e50;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.onay-section h4 i {
    margin-right: 10px;
    color: #3498db;
}

.onay-bilgi-alani {
    min-height: 50px;
}

.onay-musteri-item,
.onay-urun-item {
    background: white;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #e9ecef;
}

.onay-musteri-header h5,
.onay-urun-header h5 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
}

.onay-musteri-detaylar p,
.onay-urun-detaylar p {
    margin: 5px 0;
    color: #6c757d;
    display: flex;
    align-items: center;
}

.onay-musteri-detaylar i,
.onay-urun-detaylar i {
    width: 20px;
    margin-right: 8px;
    color: #3498db;
}

.onay-bos-mesaj {
    color: #6c757d;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.onay-fiyat-ozet {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.onay-fiyat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f4;
}

.onay-fiyat-item:last-child {
    border-bottom: none;
    font-weight: bold;
    font-size: 1.1em;
    color: #2c3e50;
}

.onay-footer {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
}

.onay-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.onay-checkbox input[type="checkbox"] {
    transform: scale(1.2);
}

.onay-checkbox label {
    font-weight: 500;
    color: #2c3e50;
    cursor: pointer;
}

/* Hazır Step Stilleri */
.hazir-step-container {
    padding: 30px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.hazir-header {
    margin-bottom: 40px;
}

.hazir-header h3 {
    color: #27ae60;
    margin-bottom: 10px;
    font-size: 2em;
}

.hazir-header i {
    color: #27ae60;
    margin-right: 10px;
}

.hazir-content {
    padding: 30px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e9ecef;
}

.hazir-success-icon {
    margin-bottom: 30px;
}

.hazir-success-icon i {
    color: #27ae60;
}

.hazir-bilgiler {
    margin-bottom: 30px;
}

.hazir-bilgi-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #e9ecef;
}

.hazir-bilgi-item i {
    color: #3498db;
    font-size: 1.2em;
}

.hazir-bilgi-item strong {
    color: #2c3e50;
}

.hazir-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-large {
    padding: 12px 24px;
    font-size: 1.1em;
    min-width: 150px;
}



/* Teklif Önizleme Stilleri */
.teklif-onizleme {
    padding: 20px;
    font-family: Arial, sans-serif;
}

.teklif-onizleme-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.teklif-onizleme-header h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.teklif-onizleme-musteri,
.teklif-onizleme-urunler,
.teklif-onizleme-toplam {
    margin-bottom: 25px;
}

.teklif-onizleme-musteri h4,
.teklif-onizleme-urunler h4,
.teklif-onizleme-toplam h4 {
    color: #2c3e50;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.teklif-onizleme-urun {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 10px;
    border-left: 4px solid #3498db;
}

.teklif-onizleme-urun h5 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.teklif-onizleme-urun p {
    margin: 5px 0;
    color: #6c757d;
}

.teklif-onizleme-toplam {
    background: #e8f5e8;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #27ae60;
}

.teklif-onizleme-toplam h4 {
    color: #27ae60;
    border-bottom-color: #27ae60;
}

.teklif-onizleme-toplam p {
    font-size: 1.2em;
    font-weight: bold;
    color: #2c3e50;
}

/* VIP Badge Stilleri */
.vip-badge {
    background: #f39c12;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 10px;
}

.vip-badge-inline {
    background: #f39c12;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: bold;
    margin-left: 5px;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    .onay-step-container,
    .hazir-step-container {
        padding: 15px;
    }
    
    .hazir-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-large {
        width: 100%;
        max-width: 300px;
    }
    
    .onay-fiyat-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

.useredit{display:flex;align-items: center;}
.useredit form{}
.useredit a, .useredit button{padding: 5px;width: 70px;border-radius: 10px;text-align: center;margin: 5px;}