.main {}
.mainbar {width: 100%;height: 100%;padding-top: 30px;}
.headbar {background: #000;padding: 0px 25px;position: fixed;width: 100%;top: 0;z-index: 999;}
.headbar > div {margin: 0 auto;height: 100%;width: 100%;display: flex;align-items: center;justify-content: space-between;}
.headbar > div > div {}
.headbar > div > div:first-child {display: flex;flex-direction: row;align-items: center;}
.headbar > div > div:last-child {display: flex}
.headbar > div > div:first-child img {width: 30px;}
.headbar > div > div:nth-child(2) {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;font-size: 13px;font-weight: 500;}

.menubar {display: flex;padding: 0px 20px;}
.dil {}
.tabbar {background: #fff;padding: 10px 19px !important;display: flex;align-items: center;justify-content: space-between;border-radius: 10px;}
.tabbar > div {}
.modern-havuz-menu {background: #fff;overflow: hidden;}
.menu-container {position: relative;display: flex;align-items: center;width: 100%;}
.menu-scroll {display: flex;overflow-x: auto;scroll-behavior: smooth;padding: 12px 10px;gap: 8px;flex: 1;white-space: nowrap;min-width: 0;cursor: grab;user-select: none;-webkit-user-select: none;}
.menu-scroll::-webkit-scrollbar {height: 8px;display: block;}
.menu-scroll::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 4px;}
.menu-scroll::-webkit-scrollbar-thumb {background: #c1c1c1; border-radius: 4px;}
.menu-scroll::-webkit-scrollbar-thumb:hover {background: #a8a8a8;}

/* Firefox için */
.menu-scroll {scrollbar-width: thin;scrollbar-color: #c1c1c1 #f1f1f1;}
.menu-scroll.dragging {cursor: grabbing;}
.menu-scroll.dragging .menu-link {pointer-events: none;}
.menu-item {flex-shrink: 0;position: relative;display: inline-block;}
.menu-link {display: flex;flex-direction: row;align-items: center;padding: 5px 5px;background: #f8f9fa;border: 2px solid transparent;border-radius: 10px;text-decoration: none;color: #495057;transition: all 0.3s ease;text-align: center;position: relative;overflow: hidden;gap: 4px; margin: 0 !important;}
.menu-link:hover {background: #e9ecef;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}

.opsiyoniptal{ padding:8px; background: #000;color: #fff;transition:1s;}
.opsiyoniptal:hover{background: #fff;color: #000;transition:1s;}

.opsiyondiv> fieldset>div{margin-bottom:15px;}

.menu-item.active .menu-link {background: linear-gradient(135deg, #007bff, #0056b3);color: white;border-color: #007bff;box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);}
.menu-item.active .menu-link::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);pointer-events: none;}
.menu-title {font-weight: 600;font-size: 11px;white-space: nowrap;text-overflow: ellipsis;}
.menu-count {background: rgba(0, 0, 0, 0.1);padding: 2px 8px;border-radius: 12px;font-size: 11px;font-weight: 500;}
.menu-item.active .menu-title {color: white;}
.menu-item.active .menu-count {background: rgba(255, 255, 255, 0.2);color: white;}
.scroll-arrows {display: flex;flex-direction: column;gap: 5px;padding: 0 10px;}
.scroll-btn {background: #f8f9fa;border: 1px solid #dee2e6;border-radius: 6px;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.2s ease;color: #6c757d;}
.scroll-btn:hover {background: #e9ecef;border-color: #adb5bd;color: #495057;}
.scroll-btn:active {transform: scale(0.95);}
.scroll-btn:disabled {opacity: 0.5;cursor: not-allowed;}
.dil select {border: 0;width: 50px;background: #ebebeb;border-radius: 2px;}
.menu {}
.menu ul {list-style: none;margin: 0;padding: 0;}
.menu li {position: relative;}
.menu > div > ul > li {float: left;margin-right: 20px;padding: 10px 0;}
.menu a {text-decoration: none;display: flex;align-items: center;}
.menu > div > ul > li > a > span {color: #fff;margin-left: 3px;}
.menu > div > ul > li > a > span.title {font-size: 13px}
.menu > div > ul > li > a > span.material-symbols-outlined {font-size: 16px;}
.menu a:hover {}
.menu ul ul {display: none;position: absolute;top: calc(100%);left: 0;background-color: #fff;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);border: 1px solid #ddd;z-index: 1000;padding: 17px 20px;}
.menu ul ul li {float: none;margin: 0;}
.menu ul ul a {white-space: nowrap;color: #000;border-bottom: 1px solid #e0e0e0;padding: 5px 0;font-size: 12px;}
.menu ul ul > li:last-child a {border: 0}
.menu ul ul a:hover {color: #7b7b7b;}
.menu li:hover > ul {display: block;}

.file-upload-wrapper {position: relative;display: inline-block;}
.file-upload-input {display: none;}
.file-upload-label {background-color: #4CAF50;color: white;padding: 25px 15px;border-radius: 5px;cursor: pointer;text-align: center;}
.file-upload-label:hover {background-color: #45a049;}
.file-upload-preview {margin-top: 10px;display: flex;flex-wrap: wrap;flex-direction: row;width: 100%;}
.file-upload-preview img {width: 200px;height: 200px;object-fit: cover;margin: 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;}

.popup-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.5);display: flex;justify-content: center;align-items: center;z-index: 9999;}
.popup-box {background: #fff;padding: 20px;width: 350px;border-radius: 10px;box-shadow: 0 0 20px rgba(0,0,0,.2);}
 #iptalNedeni {width: 100%;height: 100px;margin-bottom: 15px;padding: 10px;}
.hidden {display: none;}
.popup-buttons {display: flex;justify-content: flex-end;gap: 10px;}

.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: 370PX;}
.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% - 100px);
            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: 98%;
    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);
    }

.besli {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px;
}

    .besli > div {
    }

        .besli > div label {
            font-size: 10px !important
        }

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

.satir {
    display: flex;
    align-items: flex-start;
    align-content: center;
    flex-direction: column;
}

.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: center;
    width: 120px;
}

.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 {
        }

.gorusme p > label.left {
    margin-right: 5px
}

.ikili > p {
    width: auto;
}

.select2-search textarea {
    height: 18px !important;
    padding: 3px !important;
}

.select2-container {
    width: 170px !important;
}

.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: flex-start; /* margin-bottom: 50px; */
}

    .tablelist > div {
    }

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

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

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

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

            .tablelist > div:first-child > div a {
                margin: 0 7px;
                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;
            }

    .tablelist .yanla {
        margin: 0
    }

.varyasyonsil {
    padding: 5px 20px;
    cursor: pointer;
    background: #000;
    color: #fff;
}

.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;
            }

.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 {
            width: 70px;
        }

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

.varyasyonekle {
    cursor: pointer;
}

.varyasyontabla {
    display: none !important
}

    .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;
        margin: 0;
    }

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

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

.buton {
    padding: 5px 19px;
    border-color: #dddddd;
}

    .buton:hover {
        background: #000;
        color: #fff
    }

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

.searchbar {
    margin-right: 15px;
    width: 200px;
}

    .searchbar > input {
        width: 100%;
        border: 1px solid #f1f1f1;
        padding: 6px 10px;
        border-radius: 7px;
        font-size: 12px;
    }

.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 {
                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;
        }

.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: 150px;
        margin-bottom: 15px;
        width: 100%;
    }

    .yuklenengorsel > div, .yuklenengorsel1 > div, .yuklenengorsel2 > div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .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 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%;
        }

.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;
    }

.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 button {
        padding: 10px 62px;
        border: 1px solid #ddd;
        background: #000;
        color: #fff;
    }

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

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%;
    }

.metaentegrason {
}

    .metaentegrason > div {
        margin-bottom: 14px;
        width: 100%;
    }

        .metaentegrason > div label {
            font-weight: 600;
            margin-bottom: 5px
        }

.metabegin {
    width: 100%
}

    .metabegin > div {
    }

        .metabegin > div .begin ul {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin-top: 15px
        }

        .metabegin > div .begin h3 {
            font-weight: 600;
            font-size: 13px;
        }

        .metabegin > div .begin a {
            border: 1px solid #000000;
            padding: 5px 17px;
            display: block;
        }

            .metabegin > div .begin a span {
                font-weight: 700
            }

    .metabegin .begin {
        margin-bottom: 10px;
    }

        .metabegin .begin > div > div {
            background: #f1f1f1;
            display: flex;
            align-content: center;
            justify-content: space-between;
            padding: 11px 14px;
            align-items: center;
        }

.seciliform {
    margin: 0;
    width: 100%
}

.seciliform {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .seciliform .item {
    }

        .seciliform .item ul {
            margin-bottom: 15px;
            background: #f1f1f1;
            padding: 11px;
            gap: 15px;
            display: flex;
            flex-wrap: wrap;
        }

    .seciliform li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: calc(20% - 15px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .seciliform li > div {
            margin-right: 5px;
        }

        .seciliform li > label {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

            .seciliform li > label > span {
                font-size: 11px;
            }

                .seciliform li > label > span:first-child {
                    font-weight: 600;
                    border: 1px solid #e7e5de;
                    padding: 2px 6px;
                    border-radius: 5px;
                    background: #f7f7f6;
                    margin-bottom: 3px;
                    font-size: 10px;
                }

.yetkisiz {
}

    .yetkisiz h1 {
        text-align: center;
        font-size: 25px
    }

.listeform {
}

    .listeform li {
        display: flex;
        align-content: center;
        align-items: center;
        font-size: 11px;
    }

        .listeform li label {
            font-weight: 400 !important;
        }

#sonucDiv {
}

    #sonucDiv h3 {
        font-size: 13px;
        font-weight: 600;
    }

@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%;
}

.bottompage {
    width: 98%;
    margin: 0 auto;
    margin-top: 25px;
}

    .bottompage > .head {
        width: 100%;
        margin-bottom: 15px;
    }

    .bottompage > .begin, .metabegin .begin {
        width: 100%;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
    }

.izinler .metabegin {
    margin-bottom: 25px;
}

form {
    width: 100%;
}

    form > div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }

        form > div.tekli {
            display: flex;
            flex-direction: column;
        }

        form > div > div {
            display: flex;
            flex-direction: column;
            width: 49%;
            align-content: flex-start;
            justify-content: center;
        }

        form > div.treediv > div {
            width: calc(98% / 3)
        }

        form > div.tekli > div {
            display: flex;
            flex-direction: row;
            align-content: flex-start;
            margin-bottom: 5px;
            width: 100%;
        }

        form > div > div > label {
            font-size: 13px;
            margin-bottom: 3px;
        }

        form > div > div > input {
            width: 100%;
        }

        form > div > div fieldset {
            display: flex;
            flex-direction: row;
            align-content: center;
            align-items: center;
            gap: 25px;
        }

            form > div > div fieldset > legend {
            }

            form > div > div fieldset > div {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 5px;
            }

                form > div > div fieldset > div > label {
                    /* font-weight: 500; */
                    font-size: 13px;
                }

                form > div > div fieldset > div > input {
                }

        form > div > div > input[type="checkbox"], form > div > div > input[type="radio"] {
            width: 20px;
            height: 20px;
        }

.record {
    width: 100%;
}

    .record .formbegin {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 20px;
        flex-wrap: wrap;
    }

        .record .formbegin > .item {
            width: calc((100% / 3) - 20px);
        }

            .record .formbegin > .item > label {
            }

            .record .formbegin > .item > select {
            }

            .record .formbegin > .item > input {
            }

            .record .formbegin > .item > textarea {
            }

            .record .formbegin > .item > div {
                margin-bottom: 15px;
                display: flex;
                flex-direction: column;
                align-content: space-around;
            }

                .record .formbegin > .item > div > label {
                    margin-bottom: 3px
                }

.projeaitgorsel {
    flex-direction: column;
}

    .projeaitgorsel > h1 {
        margin-bottom: 10px
    }

.formfiyat {
    background: #f5f5f5;
    padding: 25px;
    border-radius: 15px;
    gap: 14px;
}

    .formfiyat > div {
    }

        .formfiyat > div.item {
            width: 170px;
        }

            .formfiyat > div.item.tekli {
                width: 100%;
            }

            .formfiyat > div.item.ikili {
                width: 49%;
            }

            .formfiyat > div.item.small {
                width: 150px;
            }

                .formfiyat > div.item.small.uclu {
                    display: flex;
                    flex-direction: column;
                }

                    .formfiyat > div.item.small.uclu > div {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        margin-bottom: 10px;
                        align-content: flex-start;
                    }


            .formfiyat > div.item > label {
                font-weight: 600;
            }

            .formfiyat > div.item.tipi {
                width: calc(100%);
            }

                .formfiyat > div.item.tipi > label {
                    margin-bottom: 5px;
                }

    .formfiyat .tipi .tipidetay {
        display: flex;
        gap: 10px;
        margin-bottom: 22px;
        flex-wrap: wrap;
        margin-top: 15px;
    }

        .formfiyat .tipi .tipidetay > div {
            display: flex;
            flex-direction: column;
            background: #fff;
            padding: 16px;
        }

            .formfiyat .tipi .tipidetay > div > div {
                margin-bottom: 5px;
            }

                .formfiyat .tipi .tipidetay > div > div:first-child {
                    display: flex;
                    align-items: center;
                }

                    .formfiyat .tipi .tipidetay > div > div:first-child input {
                        margin-right: 5px;
                    }

input[type="checkbox"] {
}

.formfiyat .tipi .tipidetay > div > div > label {
    font-weight: 700;
}

.formfiyat .tipi .tipidetay > div > div > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
}

    .formfiyat .tipi .tipidetay > div > div > div:first-child {
        margin-right: 10px
    }

    .formfiyat .tipi .tipidetay > div > div > div > label {
        font-size: 12px;
    }

    .formfiyat .tipi .tipidetay > div > div > div > div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

        .formfiyat .tipi .tipidetay > div > div > div > div > div {
            width: 49%;
            display: flex;
            align-items: center;
        }

            .formfiyat .tipi .tipidetay > div > div > div > div > div input {
                width: 100%;
            }

            .formfiyat .tipi .tipidetay > div > div > div > div > div label {
                margin-left: 3px;
                font-size: 10px;
            }

    .formfiyat .tipi .tipidetay > div > div > div > input {
        width: 60px;
    }

.serifiye {
}

    .serifiye > label {
        font-weight: 600;
    }

    .serifiye > div {
        display: flex;
        flex-direction: row;
        gap: 15px;
        margin-top: 2px;
    }

        .serifiye > div > div {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

            .serifiye > div > div select {
                width: 70px;
                margin-right: 5px;
                padding: 8px 3px;
                border: 1px solid #e6e6e6;
            }

            .serifiye > div > div input {
                width: 70px
            }

            .serifiye > div > div label {
                margin-right: 5px;
            }

.basarilimesaj {
    padding: 14px;
    background: #00e91d;
    margin-bottom: 15px;
    border-radius: 8px;
}

    .basarilimesaj p {
        color: #fff;
        font-weight: 700;
    }

.basarisizmesaj {
    padding: 14px;
    background: #d51317;
    margin-bottom: 15px;
    border-radius: 8px;
}

    .basarisizmesaj p {
        color: #fff;
        font-weight: 700;
    }


.gunlukaramalist { /* border: 1px solid #ebebeb; */ /* padding: 10px; */ /* background: #f9f9f9; */
    border-radius: 10px;
    margin-top: 25px;
}

    .gunlukaramalist > div {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%; /* flex-wrap: wrap; */
        gap: 5px;
        overflow: hidden;
        overflow-x: auto;
        padding-bottom: 5px;
    }

        .gunlukaramalist > div > div { /* width: calc((100% / 4) - 1%); */ /* border: 1px solid #e9e9e9; */
            border-radius: 11px; /* margin-bottom: 1%; */
            padding: 5px 2px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #fff; /* margin-right: 1%; */
        }

            .gunlukaramalist > div > div:nth-child(4n) {
                margin-right: 0
            }

            .gunlukaramalist > div > div h3 {
                font-size: 13px;
                margin: 0;
                line-height: 16px;
                font-weight: 700;
                border-bottom: 1px solid #ebebeb;
                width: 100%;
                text-align: center;
                margin-bottom: 0;
                padding-bottom: 5px;
            }

            .gunlukaramalist > div > div ul {
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: row;
                align-items: stretch;
                width: 100%;
                position: relative;
            }

    .gunlukaramalist .mesajpopup > ul {
        margin-bottom: 15px
    }

    .gunlukaramalist > div > div ul li {
        list-style-type: none;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid #ebebeb;
        padding: 3px 8px;
        width: calc(100% /3);
        position: relative;
        cursor: pointer
    }

        .gunlukaramalist > div > div ul li:last-child {
            border-right: 0
        }

        .gunlukaramalist > div > div ul li h1 {
            font-weight: 700;
            font-size: 16px;
            line-height: 19px;
            margin: 0;
        }

        .gunlukaramalist > div > div ul li span {
            font-size: 12px;
        }

        .gunlukaramalist > div > div ul li.active {
            background: #ff0000;
        }

            .gunlukaramalist > div > div ul li.active h1, .gunlukaramalist > div > div ul li.active span {
                color: #fff
            }

    .gunlukaramalist .mesajpopup {
        top: 60px;
        left: 60px;
    }

    .gunlukaramalist > div > div ul .mesajpopup li {
        width: 100%;
        align-items: flex-start
    }

    .gunlukaramalist > div > div .gorusme {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 1px;
    }

        .gunlukaramalist > div > div .gorusme > div:first-child {
            font-size: 13px;
            line-height: 16px;
            font-weight: 700;
        }

        .gunlukaramalist > div > div .gorusme > div {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            line-height: 12px;
        }

            .gunlukaramalist > div > div .gorusme > div > div {
                padding: 0px 5px;
            }

                .gunlukaramalist > div > div .gorusme > div > div, .gunlukaramalist > div > div .gorusme > div > div > span {
                    font-size: 11px;
                    color: #999;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                    .gunlukaramalist > div > div .gorusme > div > div.active, .gunlukaramalist > div > div .gorusme > div > div.active > span {
                        font-weight: 600;
                        color: #000;
                    }

.gorusmetab { /* background: #f1f1f1; */
}

.nofieldsetflex {
    display: block
}

    .nofieldsetflex select {
        padding: 3px 5px;
    }

.gunlukaramalist > div > div .gorusme > div > div > span {
    font-size: 11px !important;
}

.note > div:not(.mesajpopup) {
    position: absolute;
    background: #51a351;
    color: #fff;
    font-weight: 600;
    font-size: 9px;
    padding: 4px;
    border-radius: 100% !important;
    right: -3px;
    top: -8px;
}

.table.liste td.redtext *{    color: #b71c1c; font-weight:500}
/* Filtre ikonu */
.musterilistesiappend .gorusme .popupcont {
    right: 0;
}

.table.liste.bagimsizbolum tbody td a, .table.liste.bagimsizbolum tbody td * {
    font-size: 11px;
    line-height: 14px;
}
.note > span {
    white-space: nowrap;
}

.mesajpopup {
    display: none;
    transition: 0.5s;
    width: 250px;
    position: absolute;
    background: #fff;
    padding: 25px 12px;
    box-shadow: 0px 0 12px 0px #00000026;
    z-index: 9;
    right: 0;
    top: 20px;
    max-height: 220px;
    overflow-y: auto;
}

.note.acik:hover .mesajpopup {
    display: block;
}

.mesajpopup {
}

    .mesajpopup > h1 {
    }

    .mesajpopup > ul {
        list-style: none;
        margin: 0;
        display: flex;
        border-bottom: 1px solid #f1f1f1;
    }

        .mesajpopup > ul > li {
            width: calc(100%);
            padding: 3px 0;
            font-size: 11px;
            padding: 10px 0;
        }

            .mesajpopup > ul > li > a {
            }

            .mesajpopup > ul > li p {
                margin: 0;
                font-size: 11px;
                line-height: 15px;
                margin-bottom: 9px;
            }

                .mesajpopup > ul > li p > span {
                    font-weight: 600
                }

            .mesajpopup > ul > li > a > span {
                font-size: 20px;
            }

                .mesajpopup > ul > li > a > span.red {
                    color: #e02222;
                }

                .mesajpopup > ul > li > a > span.green {
                    color: #51a351;
                }

        .mesajpopup > ul.listehead {
            margin: 0;
        }

            .mesajpopup > ul.listehead > li {
                font-weight: 600;
                background: #000;
                color: #fff;
                padding: 5px 3px;
            }

        .mesajpopup > ul > li:first-child {
        }

        .mesajpopup > ul > li:last-child {
        }

.noteaddlist {
}
.checkdiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:5px
}
    .noteaddlist .checkdiv {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

        .noteaddlist .checkdiv input {
            width: auto;
        }

        .noteaddlist .checkdiv label {
            padding-left: 4px;
        }

    .noteaddlist .hatirlaticigizli {
        display: none
    }

    .noteaddlist .hatirlatarih {
        display: flex
    }

.projesec {
    width: 250px
}

.musterikayit {
}

.kayitlimusterilist {
    flex-direction: column;
}

.musterikayit .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 17px;
}

.musterikayit fieldset {
    width: 100%;
    flex-direction: column;
    display: flex;
    align-items: flex-start;
}

.musterikayit .alicibilgi > div {
    display: flex;
    flex-wrap: wrap
}

.musterikayit .item label {
    margin-bottom: 4px;
    font-weight: 500;
}

.musterikayit .kayitel {
}

.musterikayit .twodiv, .musterikayit .fourdiv, .musterikayit .fivediv, .sozlesmeolustur .twodiv, .sozlesmeolustur .fourdiv, .sozlesmeolustur .fivediv {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .musterikayit .twodiv .item, .sozlesmeolustur .twodiv .item {
        width: 49%;
    }

    .musterikayit .fourdiv .item, .sozlesmeolustur .fourdiv .item {
        width: 24%;
    }

.musterikayit .treediv .item, .sozlesmeolustur .treediv .item {
    width: 32%;
}

.musterikayit .fivediv .item, .sozlesmeolustur .fivediv .item {
    width: 19%;
}

.musterikayit .twodiv input, .musterikayit .twodiv select, .musterikayit .twodiv textarea {
    width: 100%;
    padding: 8px 5px;
}

.musterikayit input, .musterikayit textarea {
    width: 100%;
}

.musterikayit .havuzat {
    display: flex;
}

    .musterikayit .havuzat > div {
        display: flex;
    }

        .musterikayit .havuzat > div label {
            width: 75px
        }

        .musterikayit .havuzat > div input {
            width: 20px;
        }

.musterikayit .iskontodiv {
    display: none
}

.musterikayit .planayni {
    display: none;
    width: 100%;
    justify-content: flex-start;
    padding: 16px 0px;
}

    .musterikayit .planayni > div {
        display: flex;
        width: 100%;
    }

        .musterikayit .planayni > div label {
            margin-left: 6px;
        }

        .musterikayit .planayni > div input {
            width: auto;
        }


.havuzmenubar {
    overflow: hidden;
    overflow-x: auto;
    gap: 15px;
    touch-action: none;
    padding: 0;
    display: flex;
    margin: 10px;
}

    .havuzmenubar > div {
    }

        .havuzmenubar > div > button, .havuzmenubar > div > button * {
            font-size: 12px
        }

        .havuzmenubar > div > button {
            white-space: nowrap;
            border: 1px solid #ddd;
            padding: 7px 6px;
        }

            .havuzmenubar > div > button > span {
                font-weight: 600
            }

            .havuzmenubar > div > button.aktif {
                background: #e7e7e7;
            }

.tablofilter0 {
    padding: 0 10px
}

.hatirlatmanot {
    margin-bottom: 10px;
}

    .hatirlatmanot h6 {
        font-size: 11px;
        line-height: 14px;
        margin-bottom: 3px;
        font-weight: 600;
    }

    .hatirlatmanot p {
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .hatirlatmanot hr {
        margin-top: 5px;
        border: 0;
        height: 1px;
        background: #ddd8d8;
    }

.kayitlimusteri {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.kayitlimusterilist {
}

    .kayitlimusterilist table {
        width: 100%;
        margin: 15px 0;
        width: 98%;
        margin: 0 auto;
    }

        .kayitlimusterilist table tr {
            margin-bottom: 15px
        }

        .kayitlimusterilist table > thead td {
            background: #f1f1f1;
            padding: 12px 2px;
            font-size: 12px;
            font-weight: 600;
        }

        .kayitlimusterilist table > tbody td {
            padding: 3px 2px;
            font-size: 11px;
            vertical-align: middle;
        }

        .kayitlimusterilist table > tbody > tr {
            border-bottom: 1px solid #f1f1f1;
        }


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

    .userexit > div {
        display: flex;
        align-items: center;
        color: #fff;
    }

        .userexit > div span {
        }

        .userexit > div * {
            color: #fff
        }

.kayittip {
}

    .kayittip ul {
        display: flex;
        gap: 10px;
    }

    .kayittip li {
        text-align: center;
        display: flex;
        justify-content: flex-start;
        gap: 3px;
    }


.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)
    }
}

.gorusme.fleft {
    float: left !important;
    margin-right: 3px
}

.toplamkayit {
}

    .toplamkayit select {
        width: 60px
    }

    .toplamkayit label {
        color: #fff;
        padding-right: 5px
    }

.kampanyabari {
    width: 100%;
    background: #ddd;
    height: 6px;
    border-radius: 5px;
    display: flex;
}

    .kampanyabari > div {
        height: 100%;
        position: relative;
        cursor: pointer;
        transition: .5s;
    }

        .kampanyabari > div > div {
            position: absolute;
            left: 5px;
            background: #fff;
            padding: 5px;
            border-radius: 5px;
            top: 8px;
            box-shadow: 0 0 3px 1px #00000033;
            min-width: 100px;
            text-align: center;
            display: none;
        }

        .kampanyabari > div:hover > div {
            display: block;
        }

        .kampanyabari > div.pesin {
            background: #298930;
        }

        .kampanyabari > div.taksitoran {
            background: #ed1eb7;
        }

        .kampanyabari > div.araodeme {
            background: #ffa500;
        }

#sozlesmemusteriekle .buyut, .kampanyaekle .buyut, .sozlesmeolustur .buyut {
    width: 100%;
    display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

    .kampanyaekle .buyut > div { /* width:50%; */
    }

        #sozlesmemusteriekle .buyut > div label, .kampanyaekle .buyut > div label {
            margin-right: 10px
        }

.kampanyaekle .plus-div {
    width: 20%;
    margin-left: 20px;
}

.kampanyaekle .plus-icon {
    font-size: 11px;
    text-align: center;
    display: inline-block;
    padding: 10px 8px;
    background-color: transparent;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid #36d742;
    color: #ffffff;
    width: 100%;
    background: #018e0c;
}

.kampanyaekle .kamproje {
    justify-content: flex-start;
    flex-direction: column;
}

    .kampanyaekle .kamproje label {
    }

    .kampanyaekle .kamproje div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 5px;
    }

        .kampanyaekle .kamproje div div {
            display: flex;
            justify-content: flex-start;
            width: 98%;
            align-items: center;
        }

            .kampanyaekle .kamproje div div label {
                margin-left: 3px;
            }

            .kampanyaekle .kamproje div div input {
            }

.kampanyaekle .gruplama {
}

    .kampanyaekle .gruplama fieldset > div {
        display: flex;
    }

        .kampanyaekle .gruplama fieldset > div > div {
            display: flex;
            margin-right: 10px;
        }

            .kampanyaekle .gruplama fieldset > div > div input {
            }

            .kampanyaekle .gruplama fieldset > div > div label {
                margin-left: 5px;
            }

.kampanyaekle .geneltip {
}

    .kampanyaekle .geneltip div {
        display: flex;
        justify-content: space-between;
    }

        .kampanyaekle .geneltip div > div:last-child {
            margin: 0
        }

        .kampanyaekle .geneltip div > div {
            margin-right: 6px;
        }

            .kampanyaekle .geneltip div > div label {
                margin-left: 6px;
            }

.clondiv, .clondiv1 {
    display: flex;
    flex-direction: column
}

    .clondiv > .clonla {
        margin-top: 15px;
    }

        .clondiv > .clonla:first-child {
            margin-top: 0;
        }

.altkategori-list {
}

    .altkategori-list ul {
        display: flex;
    }

        .altkategori-list ul li {
            display: flex;
            margin-right: 9px;
            align-items: center;
        }

            .altkategori-list ul li input {
            }

            .altkategori-list ul li label {
                font-size: 14px;
                margin-left: 4px;
                margin-bottom: 0 !important;
            }

/*.bagimsizbolum td:hover .gorusmenotu{display:block}*/
.projebaslik {
}

    .projebaslik > h1 {
        margin-bottom: 10px;
        font-weight: 600
    }

.disabled-link {
    opacity: 0.5;
    cursor: no-drop;
}

.file-upload-preview div {
    margin-right: 10px
}

.file-upload-preview input {
}

.yuklukat {
    display: flex;
}

    .yuklukat > div {
        width: calc((100% / 5) - 10px);
        border: 1px solid #ddd;
        padding: 4px;
    }

        .yuklukat > div > img {
            width: 100%;
            margin: 0;
        }

        .yuklukat > div > input {
            width: 100%;
        }

    .yuklukat .deletebtn {
        margin: 10px 0;
        justify-content: center;
    }

.banaata {
    font-size: 10px;
    line-height: 11px;
    padding: 4px;
}

.kopyala {
    font-size: 10px;
    line-height: 11px;
    padding: 4px;
    cursor: pointer;
}

    .kopyala > span {
        color: #008000;
        font-size: 23px;
    }

.pdfindir {
    display: flex;
    font-size: 12px;
    align-items: center;
    color: #b60000;
    font-weight: 500;
}

    .pdfindir > span {
        margin-right: 2px;
        font-size: 19px;
        color: #b60000;
    }

.cursor {
    cursor: pointer !important
}

.noprice {
    padding: 20px;
    text-align: center
}

    .noprice p {
        font-size: 16px;
    }

.custom-arrow {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #000;
    z-index: 2;
}

.prelative {
    position: relative
}

.aramadelete {
    display: flex;
}

    .aramadelete.hidden {
        display: none;
    }

.sozlesmeolustur {
    width: 99%
}

.tab-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.tab-buttons {
    display: flex;
    border-bottom: 2px solid #ddd;
    flex-direction: row;
    width: 100%;
}

    .tab-buttons button {
        flex: 1;
        padding: 10px;
        border: none;
        background: #f1f1f1;
        cursor: pointer;
        transition: 0.3s;
        font-size: 16px;
        border-right: 1px solid #ddd;
    }

        .tab-buttons button:hover {
            background: #ddd;
        }

        .tab-buttons button.active {
            background: #000000;
            color: white;
            font-weight: bold;
        }

.tab-content {
    display: block;
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
    width: 100%;
}

    .tab-content.hidden {
        display: none !important;
    }

    .tab-content.active {
        display: block;
    }

.sozlesmeolustur .gizle {
    display: none
}

.ikilibolum {
    display: flex !important;
    justify-content: space-between;
}

    .ikilibolum > div {
        width: 49%;
    }

.tminheight {
    min-height: 50vh
}


.sozlesmemetin {
    width: 90%;
    margin: 50px auto
}

    .sozlesmemetin h1 {
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .sozlesmemetin h2 {
        font-size: 20px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .sozlesmemetin h3 {
        font-size: 18px;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .sozlesmemetin p {
        margin: 5px 0;
    }

    .sozlesmemetin .section {
        margin-bottom: 20px;
    }

    .sozlesmemetin .bold {
        font-weight: bold;
    }

    .sozlesmemetin .indent {
        margin-left: 20px;
    }

    .sozlesmemetin table {
        border-collapse: collapse;
        width: 100%;
        margin: 10px 0;
    }

    .sozlesmemetin th, .sozlesmemetin td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }

    .sozlesmemetin th {
        background-color: #f2f2f2;
    }

.tablediv th {
    width: 220px
}

.alt-tab-buttons {
    display: flex;
    border-bottom: 2px solid #ccc;
    margin-bottom: 15px;
}

    .alt-tab-buttons button {
        padding: 10px 20px;
        cursor: pointer;
        background: none;
        border: none;
        border-bottom: 3px solid transparent;
        font-weight: bold;
    }

        .alt-tab-buttons button.active {
            border-color: #007bff;
            color: #007bff;
        }

.alt-tab-content {
    display: none;
}

    .alt-tab-content.active {
        display: block;
    }


.kampanyaekle #taksitTablosu {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .kampanyaekle #taksitTablosu table {
        width: 100%;
        border-collapse: collapse;
    }

    .kampanyaekle #taksitTablosu th, .kampanyaekle #taksitTablosu td {
        border: 1px solid #d7d7d7;
        padding: 0;
        text-align: center;
    }

    .kampanyaekle #taksitTablosu th {
        background-color: #f0f0f0;
        font-weight: bold;
        padding: 9px 0;
    }

    .kampanyaekle #taksitTablosu input[type="date"] {
        padding: 5px; /* width: 100%; */
        box-sizing: border-box; /* border: 0; */
        border-radius: 4px;
    }

    .kampanyaekle #taksitTablosu td:last-child {
        font-weight: bold;
        color: #2a7c2a;
    }

.kampanyaekle .hesapbutton {
    text-align: center
}

    .kampanyaekle .hesapbutton button {
        border-radius: 9px;
    }

        .kampanyaekle .hesapbutton button:hover {
            background: #b60000;
            color: #fff
        }

table.taksitlendir {
}

.alttoplam {
    background: #f0f0f0;
}

    .alttoplam > td {
        padding: 6px 0 !important;
        font-weight: 600;
    }

.sozlesmepage {
}

    .sozlesmepage > div {
        width: 100%
    }

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

    .sozlesmetab > div {
        width: 49%;
        text-align: center;
    }

        .sozlesmetab > div h1 {
            font-size: 20px;
            font-weight: 600;
        }

    .sozlesmetab .sozlesmetabbuttonlar {
        display: flex;
        justify-content: space-between;
    }

        .sozlesmetab .sozlesmetabbuttonlar > div {
            width: calc((100% / 3) - 7px);
            text-align: center;
        }

        .sozlesmetab .sozlesmetabbuttonlar button {
            width: 100%;
        }

            .sozlesmetab .sozlesmetabbuttonlar button p {
            }


.senet {
    display: flex;
    margin: 0 auto;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .senet > div {
    }

        .senet > div > div { /* width: 600px; */ /* padding: 15px; */
        }

    .senet p {
        margin-bottom: 5px;
        line-height: 21px;
    }

    .senet .headerdiv {
        text-align: center;
        font-weight: 700;
        margin-bottom: 29px;
    }

        .senet .headerdiv th, .senet .headerdiv td {
            font-weight: 700;
            text-align: center;
        }

    .senet .field {
        margin: 8px 0;
    }

    .senet .underline {
        border-bottom: 1px dotted #000;
        display: inline-block;
        width: 200px;
    }

    .senet .kalin {
        font-weight: 600;
        text-align: center
    }

    .senet .altbari {
        display: table;
        margin-top: 18px;
        width: 100%
    }

        .senet .altbari > div {
            display: table-cell
        }

            .senet .altbari > div:last-child {
                text-align: right
            }

    .senet .a4 {
        page-break-after: always;
        width: 210mm;
        height: 100%;
        box-sizing: border-box;
        display: table;
    }

    .senet .page { /* padding: 15mm 20mm; */
        border: 1px solid #000;
        width: 19cm;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .senet .a5 {
        page-break-after: always;
        width: 210mm;
        height: 148mm;
        box-sizing: border-box;
        padding: 10mm;
    }

@media print {
    .senet {display: table}
    .senet .page {height: 8.4cm}
    .senetbaslik {display: none}
}

.senetbaslik {width: 19cm;margin: 0 auto 10px auto;}
.senetbaslik > h1 {font-weight: 600;}
.sozlesmepartial .alt-tab-buttons {justify-content: center;}
.anatd {text-align: left !important;padding: 18px 0 !important;font-size: 13px !important;}
.anatd b {font-size: 13px !important;}

.durumcheck {display: flex;align-items: center;}
.durumcheck > span {font-size: 14px;padding-right: 3px;}
.durumcheck > span.active {color: #018e0c;}
.durumcheck > span.noactive {color: #f00}
.password-wrapper {position: relative;display: inline-block;}
.password-wrapper input {padding-right: 40px;}

.toggle-icon {position: absolute;top: 65%;right: 10px;transform: translateY(-50%);cursor: pointer;user-select: none;}
.gorusmeindir {margin-top: 5px}
.gorusmeindir a {}
.etap-blok-tipleri {}
.etap-blok-tipleri h4 {border-bottom: 1px solid #ddd}
.etap-blok-tipleri .tipler {margin-bottom: 5px;display: flex;align-items: center;text-align: center;justify-content: space-between;}
.projeekle {}
.projeekle .item {display: flex;justify-content: flex-start;flex-wrap: wrap;}
.projeekle .item > div {display: flex;flex-direction: column;}
.projeekle .item.tree-cols > div {width: calc((100% / 3) - 10px);margin-left: 10px;margin-bottom: 10px;}
.projeekle .item.tree-cols > div label {margin-bottom: 5px;}
.projeekle .usttip {display: flex;flex-direction: column;align-items: flex-start;gap: 10px;}

        .projeekle .usttip > div {
            margin: 0 10px;
            align-items: center;
        }

            .projeekle .usttip > div label {
            }

            .projeekle .usttip > div input {
            }

    .projeekle .alttipler {
        margin-top: 25px;
    }

    .projeekle .alt-box {
        margin: 15px 0
    }

        .projeekle .alt-box h4 {
            margin-bottom: 10px;
            font-weight: 600;
        }

        .projeekle .alt-box div.item {
        }

        .projeekle .alt-box div > div {
            width: 114px;
            margin-right: 10px;
            text-align: center;
        }

            .projeekle .alt-box div > div label {
                font-weight: 600;
            }

.yuklulogo {
    margin-top: 15px;
}

    .yuklulogo h1 {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .yuklulogo img {
        width: 200px;
    }

.fiyatlistediv {
}

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

    .ikilifiyat > div {
        width: 100%;
        text-align: center;
    }

.fiyatdownload {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .fiyatdownload h3 {
        font-size: 16px;
        font-weight: 600
    }

    .fiyatdownload > div {
    }

    .fiyatdownload span {
    }

    .fiyatdownload button {
        margin-top: 10px;
    }

.altformlar {
    padding-top: 27px;
}

    .altformlar ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

        .altformlar ul li {
            display: flex;
            width: calc(100% / 4);
            margin-bottom: 15px;
        }

            .altformlar ul li label {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

                .altformlar ul li label input {
                    margin-right: 10px
                }

.acilirprojeliste {
    border: 1px solid #ddd;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    background: #f1f1f1;
    margin-bottom: 10px;
    margin-top: 2px;
    border-radius: 5px;
}

    .acilirprojeliste ul {
    }

        .acilirprojeliste ul li {
            padding: 10px;
            color: #000000;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
            transition: all 0.2s ease-in-out 0.05s;
            padding-bottom: 10px;
        }

            .acilirprojeliste ul li:hover {
                background: #000;
                color: #fff
            }

            .acilirprojeliste ul li:last-child {
                border: 0
            }


.personelliste {
    width: 100%
}

.kayitlimusterilist {
    width: 100%;
    margin: 0 auto;
    margin-top: 18px;
    overflow: hidden;
}

    .kayitlimusterilist thead tr {
        background: #e7e7e7;
    }

    .kayitlimusterilist thead td {
        padding: 6px 4px;
        font-weight: 600;
        font-size: 12px;
        text-align: center;
    }

    .kayitlimusterilist tbody tr {
        background: #fff;
        transition: .2s;
    }

    .kayitlimusterilist tbody td {
        text-align: center;
        padding: 5px 3px;
        border: 1px solid #e7e7e7;
        font-size: 12px;
    }

        .kayitlimusterilist tbody td a {
            display: block;
            color: #000;
            text-decoration: none;
        }

        .kayitlimusterilist tbody td:nth-child(2) {
            text-align: left
        }

    .kayitlimusterilist thead td:nth-child(2) {
        text-align: left
    }

    .kayitlimusterilist tbody td.norecord {
        text-align: center;
        color: #b60000;
        font-weight: 600;
        padding: 25px;
    }

    .kayitlimusterilist tbody td:first-child {
        font-weight: 600;
    }

.personelliste .tablelist {
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.personelliste .pagehead {
}

    .personelliste .pagehead > div {
    }

        .personelliste .pagehead > div button {
        }

            .personelliste .pagehead > div button#tab-aktif {
            }

            .personelliste .pagehead > div button#tab-pasif {
            }

.personelliste #dateFilterForm {
}

    .personelliste #dateFilterForm > input {
    }

        .personelliste #dateFilterForm > input:first-child {
        }

        .personelliste #dateFilterForm > input:first-child {
        }

.personelliste .pagemain {
    margin-top: 20px;
}

.personelliste .tablelist > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f7f7f7;
    padding: 10px 12px 10px 12px;
}

    .personelliste .tablelist > div:first-child > div {
        font-size: 17px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .personelliste .tablelist > div:first-child > div > span:first-child {
        }

        .personelliste .tablelist > div:first-child > div > span:last-child {
        }

    .personelliste .tablelist > div:first-child > button {
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .personelliste .tablelist > div:first-child > button > span {
            font-size: 18px;
        }

.kategori-musteri {
    background-color: #e6f7ff !important;
}

.kategori-satis {
    background-color: #e6fff7 !important;
}

.kategori-musteri-durum {
    background-color: #fff7e6 !important;
}

.kategori-randevu {
    background-color: #f7e6ff !important;
}

.kategori-talep-durum {
    background-color: #ffe6e6 !important;
}

.personelliste .select2-container {
    width: 100% !important
}

.projedateFilterForm {
    display: flex;
    flex-direction: column;
    min-width: 125px;
    position: relative;
    align-items: flex-start;
    margin-bottom: 0;
}

.searchmenu.filter {background: #fff;padding: 15px;display: flex;flex-direction: row;align-content: center;border: 1px solid #ddd;border-radius: 10px;}
.searchmenu.filter > form {width: auto;margin: 0;padding: 0;}
.searchmenu.filter > form > div {}
.searchmenu.filter > form > div {display: flex;gap: 10px;align-items: flex-end;align-content: center;margin: 0;}
.searchmenu.filter > form > div > div {display: flex;gap: 10px;flex-direction: row;align-items: center;text-align: left;justify-content: flex-start;width: auto;}
.searchmenu.filter > form > div input {font-size: 13px;max-width: 120px;}
.searchmenu.filter > form > div label {font-size: 12px}
.searchmenu.filter > form > div button {font-size: 13px;height: 40px;}

.searchmenu>div h1{padding: 10px 5px;font-size: 13px;}

/* Başlıklar için daha iyi okunabilirlik */
.projebaslik h1 {}

#excelExportModal {background: rgb(0 0 0 / 84%);width: 100%;height: 100%;position: fixed;}
#excelExportModal .modal-dialog {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}
#excelExportModal .modal-content {background: #fff;padding: 55px;position: relative;border-radius: 20px;}

    #excelExportModal .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    #excelExportModal .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
        margin-bottom: 8px;
    }

        #excelExportModal .modal-header h3 {
            font-size: 16px;
            line-height: 1.5;
            font-weight: 500;
        }

    #excelExportModal .modal-header {
        display: flex;
    }

    #excelExportModal .close {
        position: absolute;
        right: 8px;
        top: 8px;
    }

        #excelExportModal .close button {
            font-size: 34px;
            padding: 2px 2px;
            margin: 0;
            line-height: 1;
            border-radius: 100%;
            width: 40px;
            height: 40px;
        }

    #excelExportModal .modal-body form {
    }

        #excelExportModal .modal-body form label {
            font-size: 12px;
            line-height: 1;
        }

        #excelExportModal .modal-body form h4 {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 5px;
        }

        #excelExportModal .modal-body form input[type="checkbox"] {
            width: 15px;
            height: 15px;
        }

        #excelExportModal .modal-body form > div {}
#excelExportModal .modal-body form > div > div {display: flex;flex-wrap: wrap;gap: 20px;margin-bottom: 20px;flex-direction: row;}
#excelExportModal .modal-body form div > .item {max-height: 300px;overflow-y: auto;border: 1px solid #eee;padding: 10px;border-radius: 8px;width: 100%;}
#excelExportModal .modal-body form div > .item > div {margin-bottom: 5px;}
#excelExportModal .modal-body form div > .item > div > div {}
#excelExportModal .modal-body form div > .item > div > div div {}
#exportButtonContainer {text-align: center;margin-top: 20px;display: flex;justify-content: flex-start;gap: 15px;}

.filterbtn {
}

.grafik-main {
    width: 100%
}

.grafik-content {
    background: #fff;
    border-radius: 0 0 10px 10px;
    gap: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;}

    .grafik-panel {flex: 1;min-width: 300px;background: #fff;border-radius: 8px;padding: 15px;}
    .grafik-panel canvas {}
    .grafik-panel h4 {font-weight: 700}
    .tablelistbos {width: 100%;border: 1px solid #ddd;border-radius: 10px;background: #fff;align-items: center;}
    .chart-container {position: relative;width: 100%;height: 300px;max-height: 300px;}
    .chart-container canvas {max-width: 100% !important;max-height: 100% !important;height: auto !important;}
    .main-chart-container {position: relative;width: 100%;height: 50vh;max-height: 50vh;margin: 20px 0;border-radius: 8px;padding: 15px;}
    .main-chart-container canvas {max-width: 100% !important;max-height: 100% !important;height: auto !important;}
    .tekgrafik {background: #fff;border-radius: 12px;padding: 20px 10px;}
    .tekgrafik > h3 {font-size: 20px;font-weight: 700;margin-bottom: 18px;text-align: center;}
    .tekgrafik canvas {height: 100%;max-height: 50vh;}
    .personel-ozet-kutu {background: #fff;border-radius: 12px;box-shadow: 0 2px 8px #0001;padding: 18px 22px;min-width: 220px;max-width: 260px;flex: 1 1 220px;cursor: pointer;transition: box-shadow .2s;position: relative;}
    .personel-ozet-kutu .head {font-size: 18px;font-weight: 600;color: #007bff;margin-bottom: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .personel-ozet-kutu .liste {display: flex;flex-direction: column;gap: 2px}
    .personel-ozet-kutu .liste div {font-weight: 700;}
    .personel-ozet-kutu .liste div span:first-child {font-weight: 500;}
    .personel-ozet-kutu .person {position: absolute;top: 12px;right: 12px;font-size: 20px;color: #bbb;}
    .toplam-grid {display: flex;gap: 7px;justify-content: center;align-items: center;background: #fff;border-radius: 10px;padding: 18px 24px;margin-bottom: 18px;font-size: 17px;font-weight: 500;background: #f1f1f1;}
    .toplam-grid div {display: flex;flex-direction: column;align-items: center;min-width: 90px;}
    .toplam-grid span {color: #888;font-size: 13px;font-weight: 600;margin-bottom: 2px;}
    .toplam-grid b {color: #222;font-size: 22px;font-weight: 700;letter-spacing: 1px;}

@media (max-width: 600px) {
    .toplam-grid {gap: 10px;padding: 10px 4px;font-size: 14px;}
    .toplam-grid b {font-size: 16px;}
    .toplam-grid div {min-width: 60px;}
}

/* Print Styles - Yazdırma stilleri */
@media print {
    @page {size: landscape;margin: 0.4in;}
    body {font-family: Arial, sans-serif;font-size: 12px;line-height: 1.3;color: #000;background: #fff;}
    .chart-container, .main-chart-container {page-break-inside: avoid;background: #fff !important;border: 1px solid #ddd !important;box-shadow: none !important;}
    .chart-container canvas, .main-chart-container canvas {max-width: 100% !important;height: auto !important;}
    .grafik-content {display: flex !important;gap: 15px !important;page-break-inside: avoid;}
    .grafik-panel {flex: 1;background: #fff !important;border: 1px solid #ddd !important;box-shadow: none !important;}
    .tekgrafik {background: #fff !important;border: 1px solid #ddd !important;box-shadow: none !important;page-break-inside: avoid;}
    .kayitlimusterilist table, .personel-ozet-table {font-size: 10px !important;page-break-inside: avoid;}
    .kayitlimusterilist th, .kayitlimusterilist td, .personel-ozet-table th, .personel-ozet-table td {padding: 4px !important;border: 1px solid #ddd !important;}
    .personel-ozet-table tfoot {border-top: 2px solid #007bff !important;}
    .personel-ozet-table tfoot td {background: #f8f9fa !important;font-weight: bold !important;padding: 6px 4px !important;border: 1px solid #ddd !important;}
    h1, h3, h4 {page-break-after: avoid;margin-top: 20px;margin-bottom: 10px;}
    .buton, .button, button {display: none !important;}
    .pageheadfiltre, .donwload-bar {display: none !important;}
    .print-chart-wrapper {text-align: center;margin: 10px 0;page-break-inside: avoid;}
    .print-chart-image {max-width: 90% !important;height: auto !important;border-radius: 6px;}
    .print-footer {margin-top: 15px;text-align: center;font-size: 9px;color: #666;border-top: 1px solid #ddd;padding-top: 8px;}
}

.personel-ozet-grid {margin-bottom: 32px;}
.personel-ozet-kutu:hover { box-shadow: 0 4px 16px #007bff22;}
.highlighted { box-shadow: 0 0 0 3px #007bff88 !important; transition: box-shadow .2s;}

.personel-ozet-table {width: calc(100% - 50px);margin-bottom: 32px;border-collapse: collapse;margin: 25px;}
.personel-ozet-table thead {}
.personel-ozet-table thead tr {background: #f7f7f7;font-weight: 700;}
.personel-ozet-table thead th {padding: 8px 12px;text-align: left;font-weight: 700;border: 1px solid #e7e7e7;text-align: center;}
.personel-ozet-table tbody {}
.personel-ozet-table tbody tr {cursor: pointer;}
.personel-ozet-table tbody tr:hover {background: #f3f3f3;}
.personel-ozet-table tbody tr td {padding: 8px 12px;border: 1px solid #e7e7e7;text-align: center;}
.personel-ozet-table thead th:nth-child(2), .personel-ozet-table tbody td:nth-child(2) {text-align: left}
.personel-ozet-table tfoot {border-top: 2px solid #007bff;}
.personel-ozet-table tfoot tr {background: #f8f9fa !important;font-weight: bold;}
.personel-ozet-table tfoot td {padding: 10px 12px;border: 1px solid #e7e7e7;text-align: center;font-weight: 700;background: #f8f9fa;}
.personel-ozet-table tfoot td:nth-child(2) {text-align: left;color: #333;}
.pageheadfiltre .liste {display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 25px;}
.pageheadfiltre .liste .persondurum {width: auto;background: none !important;gap: 11px;}
.pageheadfiltre .liste .dateFilterForm {width: auto;border: 1px solid #ddd;border-radius: 10px;background: #fff;display: flex;flex-direction: column;align-items: center;padding: 15px;}
.select2-container--default .select2-selection--multiple {border: 1px solid #f1f1f1 !important}
.select2-container .select2-selection--multiple {min-height: 40px !important;display: flex;align-items: center;align-content: center;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {font-size: 11px;}
.pageheadfiltre {width: 98%;display: flex;flex-direction: column;align-content: flex-end;margin: 0 auto;}
.persondurum button {border: none;outline: none;padding: 8px 10px;font-size: 14px;font-weight: 600;border-radius: 6px 6px 0 0;margin-right: 8px;background: #f2f2f2;color: #888;transition: background 0.2s, color 0.2s;cursor: pointer;}
.persondurum button.active {background: #007bff;color: #fff;box-shadow: 0 2px 8px rgba(0,123,255,0.08);}
.persondurum button.inactive {background: #e0e0e0;color: #888;}
.persondurum button:hover:not(.active) {background: #d0d0d0;color: #333;}
.donwload-bar {width: auto !important;background: none !important;gap: 25px;display: flex;flex-direction: row;justify-content: center;}
.taksitlendir .taksittarih {}
.taksitlendir .taksittutar {display: flex;align-items: center;justify-content: space-around;}
.taksitlendir .taksittarih input, .taksitlendir .taksittutar input {width: 85%;margin: 4px 0;}
.proje-item.disabled {color: #999;pointer-events: none;cursor: not-allowed;}
.katplanekle .custom-file-upload {display: inline-block;padding: 6px 12px;cursor: pointer;background-color: #4CAF50;color: white;border-radius: 5px;font-size: 14px;transition: background-color 0.3s;margin: 10px auto;}
.katplanekle .custom-file-upload:hover {background-color: #45a049;}
.katplanekle .custom-file-upload input[type="file"] {display: none;}
.katplanekle .upload-button-container {position: absolute;top: 20px;right: 20px;}
.katplanekle .file-upload-input {display: none;}
.katplanekle .upload-label {cursor: pointer;display: inline-flex;align-items: center;gap: 5px;}
.katplanekle .file-upload-preview {margin-bottom: 20px;}
.katplanekle .kat-plan-table {width: 100%;border-collapse: collapse;}
.katplanekle .table-header {background-color: #f5f5f5;}
.katplanekle .table-row {border-bottom: 1px solid #ddd;}
.katplanekle .table-cell {padding: 12px;border: 1px solid #ddd;vertical-align: top;}
.katplanekle .text-center {text-align: center;}
.katplanekle .kat-plan-image {width: 100%;object-fit: contain;height: auto !important;border: 0 !important;}
.katplanekle .eslesme-container {display: flex;flex-direction: column;gap: 10px;}
.katplanekle .description-input {width: 100%;padding: 8px;border: 1px solid #ddd;border-radius: 4px;}
.katplanekle .radio-group {display: flex;flex-wrap: wrap;flex-direction: row;gap: 5px;align-content: flex-start;}
.katplanekle .radio-option {padding: 5px;border: 1px solid #e0e0e0;border-radius: 4px;}
.katplanekle .radio-label {display: flex;align-items: center;gap: 8px;cursor: pointer;font-weight: bold;}
.katplanekle .radio-label input[type="radio"] {margin: 0;}
.katplanekle .radio-text {font-size: 10px;color: #333;white-space: nowrap}
.katplanekle .no-match {color: #666;font-style: italic;}
.katplanekle .error-message {color: #dc3545;font-style: italic;}
.katplanekle .placeholder-text {color: #666;font-style: italic;}
.katplanekle .delete-link {color: #dc3545;text-decoration: none;}
.katplanekle .success-icon {color: #28a745;}
.katplanekle .empty-state {text-align: center;padding: 40px;color: #666;flex-direction: column;}
.katplanekle .empty-icon {font-size: 48px;margin-bottom: 10px;}
.proje-emlak {display: flex;flex-direction: row;align-items: flex-start;gap: 26px;}
.proje-emlak > fieldset .emlaktip {width: 100%}
.proje-emlak > fieldset {display: flex;flex-direction: column;align-items: flex-start;}
.proje-emlak > fieldset .arama {width: 100%;margin-bottom: 8px;}
.proje-emlak > fieldset .arama > input {width: 100%;}
.proje-emlak > fieldset .emlakhead {display: flex;flex-direction: column;}
.proje-emlak > fieldset .emlakhead > label {font-weight: 500;}
.projebaslik .islemler {gap: 5px;justify-content: end;}
.projebaslik .islemler a {background: #018e0c;color: #fff;display: flex;align-items: center;align-content: center;padding: 5px 8px;border-radius: 7px;cursor: pointer;}
.projebaslik .islemler a.delete {background: #b60000;}
.projebaslik .islemler span {padding: 0;}
.projebaslik .islemler span.delete {background: none}
.projebaslik .islemler label {color: #fff;font-size: 12px;cursor: pointer;}
.tablecell-edit-select {padding: 3px 5px !important}

.gorusmeliste .searchbar{width:350px}

.ayarlar .table.liste textarea{height:130px!important}

.havuztabbar{display:flex;align-items: center;}
.havuztabbar>div{}
.spamform{margin-left:20px;border-radius: 5px;}
.havuztabbar>div.active a{background: linear-gradient(135deg, #c4181a, #8b1113);color: white;border-color: #c31719;box-shadow: 0 4px 15px rgb(196 24 26);}
.havuztabbar>div.active h1{color:#fff;}

.fright{float:right}

.tipbasligi{}
.tipbasligi span{background: #7d5525;font-size: 16px;border-radius: 8px;color: #fff;padding: 3px 10px;}

.fiyatopsiyon{padding:150px 20px}

/* Mobil Menü Styles */
.mobile-menu-toggle {display: none; background: none; border: none; cursor: pointer; padding: 10px;top: 15px;right: 20px; z-index: 1001; color: #fff; font-size: 24px;}
.mobile-menu-toggle span {display: block; width: 25px; height: 3px;background: #fff; margin: 5px 0; transition: 0.3s; border-radius: 2px;}
.mobile-menu-toggle.active span:nth-child(1) {transform: rotate(-45deg) translate(-5px, 6px);}
.mobile-menu-toggle.active span:nth-child(2) {    opacity: 0;}
.mobile-menu-toggle.active span:nth-child(3) {    transform: rotate(45deg) translate(-5px, -6px);}
.mobile-menu-overlay {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.8);    z-index: 999;    opacity: 0;    visibility: hidden;    transition: all 0.3s ease;}
.mobile-menu-overlay.active {    opacity: 1;    visibility: visible;}
.mobile-menu {    position: fixed;    top: 0;    right: -100%;    width: 85%;    max-width: 350px;    height: 100%;    background: #fff;    z-index: 1000;    transition: right 0.3s ease;    overflow-y: auto;    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);}
.mobile-menu.active {    right: 0;}
.mobile-menu-header { background: #000;  color: #fff; padding: 20px; display: flex; justify-content: space-between; align-items: center;}
.mobile-menu-header h3 {   margin: 0;   font-size: 18px;    font-weight: 600;}

.mobile-menu-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-content {
    padding: 0;
}

.mobile-menu-content li>a{display:flex;align-items: center;}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu > ul > li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
    min-height: 48px;
}

.mobile-menu > ul > li > a:hover {
    background-color: #f8f9fa;
}

.mobile-menu > ul > li > a .material-symbols-outlined {
    font-size: 22px;
    color: #666;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.mobile-menu > ul > li > a .title {
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 1.3;
}

.mobile-menu > ul > li > a .submenu-toggle {
    margin-left: auto;
    color: #666;
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, color 0.2s ease;
}

.mobile-menu > ul > li > a .submenu-toggle.active {
    transform: rotate(180deg);
}

.mobile-menu ul ul {
    background: #f8f9fa;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-menu ul ul.active {
    max-height: 100%;
}

.mobile-menu ul ul li {
    border-bottom: 1px solid #e9ecef;
}

.mobile-menu ul ul li:last-child {
    border-bottom: none;
}

.mobile-menu ul ul a {
    display: block;
    padding: 12px 20px 12px 50px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.mobile-menu ul ul a:hover {
    color: #333;
    background-color: #fff;
}

/* Responsive Media Queries */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
    
    .menu {
        display: none;
    }
    
    .headbar {
        padding: 0px 15px;
    }
    
    .headbar > div > div:nth-child(2) {
        max-width: calc(100% - 100px);
    }
}

@media (max-width: 480px) {
    .mobile-menu {
        width: 90%;
        max-width: none;
    }
    
    .mobile-menu-toggle {
        right: 15px;
        top: 12px;
    }
    
    .headbar {
        padding: 0px 10px;
    }
}