:root {
    --yanmenugenislik: 80px;
    --ustbosluk: 80px;
    --altbosluk: 60px;
}

.header {
    background: #fff;
    padding: 25px 0;
    display: flex;
    justify-content: center;
    width: 100%;
    transition: .5s;
    border-bottom: 1px solid #d1d1d1;
    flex-direction: column;
    position: relative;
}

    .header.fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        border-bottom: 1px solid #f1f1f1;
        padding: 15px 0;
    }

    .header > div:not(.sourcebox, .mobilemenu) {
        display: flex;
        justify-content: space-between;
    }

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

        .header .logo > a {
            display: block
        }

        .header .logo img {
            height: 2rem;
            width: auto
        }

    .header .menu {
        display: flex;
        align-content: center;
        flex-direction: row;
        align-items: center;
    }

        .header .menu > ul {
            display: flex;
            /* margin-right:15px; */
        }

            .header .menu > ul:last-child {
                margin-right: 0px
            }

            .header .menu > ul > li {
                margin-right: 22px;
            }

                .header .menu > ul > li > a {
                    font-size: .99rem;
                    position: relative;
                    line-height: 2rem;
                    padding: 0.5rem 0;
                }

                    .header .menu > ul > li > a:after {
                        content: "";
                        position: absolute;
                        margin: 0;
                        left: 0;
                        width: 100%;
                        bottom: 0;
                        border-bottom: 1px solid #000;
                        opacity: 0;
                        transition: all .5s;
                    }

                    .header .menu > ul > li > a:hover:after {
                        opacity: 1;
                    }

        .header .menu ul.icon > li {
            width: 40px;
            text-align: center;
            margin: 0
        }

        .header .menu ul.icon a {
            display: flex;
            align-items: flex-start;
            position: relative;
            justify-content: center;
        }

            .header .menu ul.icon a > span {
                line-height: 1.4rem;
                font-size: 1.4rem;
                font-weight: 200;
                color: #777;
            }

            .header .menu ul.icon a > div.txt {
                position: absolute;
                top: -1px;
                right: -2px;
                background: #000;
                width: 20px;
                height: 20px;
                border-radius: 100%;
                color: #fff;
                font-size: 12px;
                font-weight: 600;
                line-height: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

.language {
    display: flex;
    align-content: center;
    align-items: center;
    margin-right: 15px !important;
}

    .language a {
        align-content: center;
        align-items: center !important;
        font-size: 13px !important;
    }

        .language a span {
            margin-right: 2px;
        }

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

.mobilemenu {
    width: 100%;
    position: fixed;
    z-index: 9;
    height: 100vh;
    background: rgb(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    top: -100vh;
    transition: 0.5s
}

    .mobilemenu.active {
        top: 0;
    }

    .mobilemenu > .menuicerik {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: space-evenly;
        height: calc(100% - 160px);
        margin-top: 100px;
        opacity: 0;
        transition: opacity .5s ease-in-out;
    }

    .mobilemenu.active > .menuicerik {
        opacity: 1;
        transition-delay: .5s;
        /* 2 saniye gecikme */
    }

    .mobilemenu > .menuicerik .menuler {
        display: flex;
        flex-direction: column;
        height: 90%;
        justify-content: center;
    }

        .mobilemenu > .menuicerik .menuler > div {
            text-align: center;
        }

            .mobilemenu > .menuicerik .menuler > div > a {
                font-size: 4vw;
                line-height: 5.7vw;
                font-weight: 200;
                text-align: center;
            }

                .mobilemenu > .menuicerik .menuler > div > a:hover {
                    border-bottom: 2px solid #000;
                }

    .mobilemenu > .menuicerik .altbar {
    }

.socialmedia {
}

    .socialmedia > a {
        margin-right: 18px;
    }

        .socialmedia > a > svg {
        }

            .socialmedia > a > svg > path {
                fill: #000;
            }

.archtive {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

    .archtive > img {
        width: 300px;
        margin-right: 15px;
    }

    .archtive h1 {
        line-height: 2.4;
        font-size: 1.8rem;
        margin-top: 15px;
        font-weight: 600;
    }

.markalar {
    width: 100%;
}

    .markalar > img {
        width: 100%;
        filter: grayscale(100%);
    }

        .markalar > img:hover {
            width: 100%;
            filter: grayscale(0%);
        }

.menusepet {
    position: relative
}

    .menusepet:hover .basket-preview-container, .basket-preview-container.active {
        display: block
    }

.basket-preview-container {
    text-align: left !important;
    width: 350px;
    top: 40px;
    right: 0;
    border: 1px solid #e6e6e6;
    position: absolute;
    z-index: 901;
    background-color: #fff;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    overflow: hidden;
    display: none;
}

    .basket-preview-container > div {
        padding: 15px;
    }

        .basket-preview-container > div .slideContainer {
            padding-bottom: 15px;
        }

            .basket-preview-container > div .slideContainer .slideUpBox {
                margin-bottom: 15px;
                margin-top: 15px;
            }

                .basket-preview-container > div .slideContainer .slideUpBox p {
                    font-size: 14px;
                    font-weight: 600;
                }

            .basket-preview-container > div .slideContainer .basketProductList {
                max-height: 375px;
                overflow-y: auto;
            }

                .basket-preview-container > div .slideContainer .basketProductList li {
                    padding: 15px;
                    margin: 0;
                    border-bottom: 1px solid #e6e6e6;
                }

                .basket-preview-container > div .slideContainer .basketProductList p {
                    text-align: left;
                    font-size: 13px;
                }

                .basket-preview-container > div .slideContainer .basketProductList img {
                    width: 55px;
                    margin-right: 15px;
                    border: 1px solid #e6e6e6;
                    border-radius: 6px;
                }

                .basket-preview-container > div .slideContainer .basketProductList p.product {
                    width: 100%;
                    margin: 0;
                }

                    .basket-preview-container > div .slideContainer .basketProductList p.product span {
                        font-size: 14px;
                    }

                    .basket-preview-container > div .slideContainer .basketProductList p.product .brand {
                        font-weight: 600;
                        margin-right: 5px;
                    }

                .basket-preview-container > div .slideContainer .basketProductList p.details {
                    margin: 5px 0;
                }

                    .basket-preview-container > div .slideContainer .basketProductList p.details .quantity {
                        font-size: 12px;
                    }

                .basket-preview-container > div .slideContainer .basketProductList p.price-info {
                }

                .basket-preview-container > div .slideContainer .basketProductList p.price-info {
                    font-size: 16px;
                    font-weight: 600;
                }

    .basket-preview-container .productPriceBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .basket-preview-container .productPriceBox > a {
            font-size: 15px;
            line-height: 19px;
            font-weight: 600;
            padding: 10px 21px;
            border: 1px solid #d1d1d1;
            border-radius: 5px;
        }

            .basket-preview-container .productPriceBox > a.goBasket {
            }

            .basket-preview-container .productPriceBox > a.CompleteOrder {
                background: #000;
                color: #fff;
                border-color: #000;
            }

.sourcebox {
    width: 100%;
    display: none;
    border-bottom: 1px solid #d1d1d1;
    position: absolute;
    top: 93px;
    z-index: 9;
    background: #fff;
}

    .sourcebox > div {
        width: calc(100% - 60px);
        position: relative;
        display: flex;
        align-items: center;
        margin: 25px auto;
    }

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

        .sourcebox > div .icontop {
            position: absolute;
            right: 10px;
        }

            .sourcebox > div .icontop > span {
            }

.yankenarlik {
    width: calc(100% - 50px) !important;
    margin: 0 auto;
    z-index: 11;
}

video {
    width: 100%
}

.slader {
    width: 100%;
    height: calc(100vh - 88px)
}

    .slader video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        position: relative
    }

.slick-slider, .slick-list {
    width: 100%;
}

.arrow-scroll-down {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    z-index: 8;
    cursor: pointer;
}

    .arrow-scroll-down > span {
        color: #fff;
        animation: bounce .6s infinite alternate;
        display: block;
        font-size: 2rem;
    }

#form-contact-us {
    position: relative
}

    #form-contact-us input, #form-contact-us textarea {
        border: 1px solid #f6f6f4;
    }

.formloading {
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0 0 0 / 0.55);
    height: 100%;
    display: none;
    width: 100%
}

.tesekkurler {
    width: 100%;
    padding: 10px 10px;
    display: none;
}

    .tesekkurler > p {
        color: #0a960f;
        text-align: center;
        font-size: 17px;
        font-weight: 600;
        line-height: 23px;
        margin-bottom: 0 !important;
    }

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

.icortala {
    width: 90%;
    margin: 0 auto;
    max-width: 1300px;
}

.divalan {
    margin-top: 7vh;
    margin-bottom: 7vh;
}

.ikilisatir {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

    .ikilisatir > div {
        width: 48%;
    }

    .ikilisatir .txt {
        width: 90%;
    }

.terscevir {
    flex-direction: row-reverse;
}

    .terscevir .txt {
        margin-left: 10%;
    }

.zoom {
    overflow: hidden
}

    .zoom > img {
        transition: 0.5s
    }

        .zoom > img:hover {
            transform: scale(1.2)
        }

.teklif {
}

    .teklif > div {
        width: 90%;
        max-width: 860px;
    }

    .teklif .form button {
        background: #000;
        color: #fff;
        font-weight: 600;
        border-radius: 6px;
    }

.zoom {
    overflow: hidden
}

    .zoom > a > img {
        transition: 0.5s
    }

        .zoom > a > img:hover {
            transform: scale(1.2)
        }

.zoom-gallery .zoom img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
}

.zoom.pasif {
    background: #000
}

    .zoom.pasif img {
        opacity: 0.35
    }

.kvkk {
    padding: 50px 25px
}

    .kvkk p {
        font-size: 19px;
        line-height: 42px;
    }

        .kvkk p span {
            font-weight: 800
        }

.fourdiv {
    display: flex
}

    .fourdiv > div {
        width: calc((100% /6) - 1vw);
        margin-right: 1vw;
        height: 12vw;
        /* margin-bottom: 2vw; */
    }

        .fourdiv > div > img {
            width: 100%
        }

        .fourdiv > div:last-child {
            margin-right: 0
        }

.socialfollow {
}

    .socialfollow h2 {
        margin-top: 0 !important;
        line-height: 1.8rem !important;
    }

    .socialfollow .fourdiv {
        width: calc(100% - 60px);
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

        .socialfollow .fourdiv > div {
            border: 1px solid #f1f1f1;
            /* box-shadow: 0px 0 14px 5px rgb(0 0 0 / 7%); */
            border-radius: 12px;
        }

            .socialfollow .fourdiv > div:last-child {
                margin: 0
            }

            .socialfollow .fourdiv > div img {
                width: 100%;
                height: 100%;
                -o-object-fit: cover;
                object-fit: cover;
                position: relative;
            }

footer {
    width: 100%;
    margin-top: 5vh;
    padding: 5vh;
    background: #000000;
    display: flex;
    justify-content: space-around;
}

    footer > div {
    }

    footer .logo {
    }

        footer .logo > img {
            filter: brightness(0) invert(1);
        }

.imza {
}

    .imza a {
        display: block
    }

    .imza span {
        color: #ffffff;
        line-height: 26px;
        font-size: 11px;
        display: block;
        text-align: right;
    }

.bglight {
    background: #f7f5f4
}

.imgsize {
    width: 100%
}

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

    .fullimg > img {
        width: 100%
    }

    .fullimg .txt {
        position: absolute;
        z-index: 9
    }

        .fullimg .txt h1 {
            color: #fff;
            font-size: 7.5rem;
            line-height: 8rem;
            letter-spacing: 3px;
        }

.button {
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: 3px;
    border: 1px solid #000;
    padding: 15px;
    display: block;
    float: left;
    transition: .5s;
}

    .button:hover {
        background: #000;
        color: #fff;
        /* letter-spacing: 5px; */
    }

    .button.mttop {
        margin-top: 30px
    }

.divalan video {
    width: 100%
}

.txtcenter {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.ichead {
}

    .ichead p {
        line-height: 2rem;
        font-size: 1.340rem;
        margin-bottom: 2rem;
        letter-spacing: .5px;
    }

    .ichead h1 {
        line-height: 2.4;
        font-size: 1.8rem;
        font-weight: 600;
    }

    .ichead h2 {
        line-height: 2.5rem;
        font-size: 1.8rem;
        margin-top: 15px;
        font-weight: 600;
    }

    .ichead h3 {
        /*font-family: 'Gloock', serif;*/
        line-height: 1.9rem;
        font-size: 1.375rem;
        margin-top: 15px;
        font-weight: 600;
    }

.bottompagedetay {
    width: 100%;
    position: relative;
    height: calc(90vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .bottompagedetay > .txt {
        position: absolute;
        z-index: 3;
    }

        .bottompagedetay > .txt > h1 {
            color: #fff;
            font-size: 10vw;
        }

        .bottompagedetay > .txt > h2 {
            color: #fff;
            font-size: 2vw;
            text-align: center;
            line-height: 1vw;
            letter-spacing: 15px;
        }

    .bottompagedetay > video, .bottompagedetay > img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        position: relative;
    }

button.mfp-close {
    background: #fff !important;
    color: #000 !important;
    border-radius: 100%;
    width: 60px !important;
    height: 60px !important;
    top: 10px !important;
}

.resimlist {
    display: flex;
    flex-wrap: wrap;
}

    .resimlist > div {
        width: calc(25% - 3px);
        margin: 0 3px 3px 0px;
    }

        .resimlist > div > img {
        }

.iletisim {
}

    .iletisim .tel {
        margin-top: 1vh;
        text-align: center;
        color: #000;
        font-size: 21px;
        font-weight: 300;
        letter-spacing: 3px;
    }

        .iletisim .tel > a {
            font-size: 10.8rem;
            margin-bottom: 50px;
            display: block;
            letter-spacing: 0;
            color: #000000;
            line-height: 11.8rem;
            font-weight: bold;
        }

    .iletisim .altbar {
        display: flex;
        justify-content: space-between;
        position: relative;
        height: calc(92vh - 170px);
        align-items: center;
        margin-bottom: 25px;
        min-height: 700px;
    }

        .iletisim .altbar > div:first-child {
            display: flex;
            flex-direction: column;
            color: #000000;
            width: 40%;
        }

            .iletisim .altbar > div:first-child > div {
                width: 100%;
            }

        .iletisim .altbar .form {
            margin-top: 35px;
        }

            .iletisim .altbar .form p {
                margin-bottom: 15px;
            }

            .iletisim .altbar .form button {
                background: #000;
                color: #fff;
                font-weight: 600;
                border-radius: 6px;
            }

        .iletisim .altbar.icortala {
            display: flex;
            flex-direction: column;
            margin-top: 45px;
            height: auto;
            min-height: auto;
        }

            .iletisim .altbar.icortala > div:last-child {
                width: 100%;
                max-width: 720px;
                display: flex;
                align-content: center;
                align-items: center;
            }

            .iletisim .altbar.icortala * {
                text-align: center
            }

.uk-text-right {
    text-align: right;
}

.iletisim .altbar .saat p {
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}

.iletisim .altbar .email {
    margin-bottom: 16px;
}

    .iletisim .altbar .email > p > span {
        font-size: 17px;
        font-weight: bold;
    }

    .iletisim .altbar .email a {
        text-align: left;
        color: #181e51;
        font-weight: bold;
    }

.iletisim .altbar > div:last-child {
    width: 55%;
}

.iletisim .maps {
    height: 60vh;
}

    .iletisim .maps > iframe {
        width: 100%;
        height: 100%;
    }

#form-contact-us > div {
    margin-bottom: 10px;
}

.iletisim .altbar .ofis h1 {
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 2.2rem;
}

.iletisim .altbar .ofis h2 {
    margin-bottom: 10px;
    font-size: 0.99rem;
    line-height: 1.7rem;
}

.iletisim .altbar .ofis p, .iletisim .altbar .ofis a {
    font-size: 1.1rem;
    line-height: 1.7rem;
    margin-bottom: 10px;
}

.projelist {
}

    .projelist > .section > div {
        width: 100%;
        height: 100vh;
        margin-top: 0 !important;
    }

.proje-head {
    position: absolute;
    z-index: 9;
    bottom: var(--yanmenugenislik);
    left: var(--yanmenugenislik);
}

    .proje-head h1 {
        color: #fff;
        font-size: 50px;
        line-height: 55px;
        font-weight: bold;
    }

    .proje-head h2 {
        color: #fff;
        font-size: 25px;
        line-height: 30px;
        max-width: 650px;
    }

.section {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

    .section.homepage {
    }

.product {
    width: calc(100% - 60px);
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    margin: 0 auto;
    justify-content: space-between;
    margin-top: 30px;
}

    .product > .menu {
        width: 350px;
        background: #f7f5f4;
        padding: 25px;
    }

        .product > .menu .item {
            margin-bottom: 25px;
        }

            .product > .menu .item > .categ {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #c4c4c4;
                padding: 7px 5px;
                margin-bottom: 15px;
                cursor: pointer;
            }

            .product > .menu .item .categ > h1 {
            }

            .product > .menu .item .categ > span {
            }

            .product > .menu .item .list {
                width: 100%;
                overflow: hidden;
                transition: .5s;
            }

                .product > .menu .item .list.active {
                    height: auto
                }

                .product > .menu .item .list > div {
                }

                    .product > .menu .item .list > div > span {
                        font-size: 16px;
                    }

.categ.active + .list {
    height: 0px !important
}

.product > .contant {
    width: calc(100% - 390px);
}

    .product > .contant .usttab {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
    }

        .product > .contant .usttab > div {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
        }

            .product > .contant .usttab > div input {
                width: 480px;
            }

            .product > .contant .usttab > div .icontop {
                position: absolute;
                right: 10px;
            }

                .product > .contant .usttab > div .icontop > span {
                }

    .product > .contant .praductlist {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

        .product > .contant .praductlist > div {
            width: calc((100% / 4) - 15px);
            margin-right: 20px;
            border: 1px solid #d1d1d1;
            padding: 25px;
            margin-bottom: 25px;
            position: relative;
        }

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

            .product > .contant .praductlist > div > div {
            }

                .product > .contant .praductlist > div > div > a {
                    display: block;
                }

                    .product > .contant .praductlist > div > div > a > div {
                        width: 100%;
                        margin-bottom: 7px;
                        font-weight: 500;
                    }

                        .product > .contant .praductlist > div > div > a > div img {
                            width: 100%;
                            margin-bottom: 15px;
                        }

        .product > .contant .praductlist .price {
            font-weight: 200;
        }

        .product > .contant .praductlist .butttons {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 10px;
            right: 10px;
        }

            .product > .contant .praductlist .butttons > div {
            }

                .product > .contant .praductlist .butttons > div > span {
                    margin-right: 5px;
                }

.favoribox > span, .sepetbox > span, .sharebox > span {
    color: #c0c0c0;
}

.favoribox, .sepetbox {
    cursor: pointer;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 15px;
    line-height: 18px;
    display: flex;
    align-items: center;
    border: 1px solid #cecece;
    transition: .5s;
    background: #fff;
    border-radius: 100%;
    width: 50px;
    height: 50px;
}

.sharebox {
    cursor: pointer;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 15px;
    line-height: 18px;
    display: flex;
    align-items: center;
    border: 1px solid #cecece;
    transition: .5s;
    background: #fff;
    border-radius: 5px;
}

.sepetbox {
}

    .sepetbox .txt {
        font-size: 18px;
        font-weight: 600;
        margin-left: 5px
    }

.sharebox > span {
    margin-right: 5px
}

.favoribox.active, .favoribox:hover, .sepetbox:hover, .sharebox:hover, .sepetbox.active {
    border: 1px solid #000;
    background: #000;
    color: #fff;
}

.favoribox.active {
    border-radius: 5px;
}

    .favoribox:hover > span, .sepetbox:hover > span, .favoribox.active > span, .sharebox:hover > span, .sepetbox:hover .txt, .sepetbox.active .txt, .sepetbox.active span {
        color: #fff;
    }

.sepetbox.active {
    border: 1px solid #009688;
    background: #009688;
}

.prodetail .alttab {
    width: 100%;
    margin-top: 55px;
}

    .prodetail .alttab > .produt-features_tab {
        display: flex;
        border-bottom: 1px solid #d1d1d1;
        border-top: 1px solid #d1d1d1;
    }

        .prodetail .alttab > .produt-features_tab > li {
            padding: 16px 4px;
            width: 200px;
            text-align: center;
            cursor: pointer;
            position: relative;
        }

            .prodetail .alttab > .produt-features_tab > li.active:after {
                border-bottom: 3px solid #414141;
                content: '';
                position: absolute;
                bottom: -2px;
                width: 100%;
                left: 0;
            }

.benzerurun {
    width: 100%;
    height: auto !important;
    margin-top: 35px;
}

    .benzerurun img {
        width: 100% !important;
        height: auto !important;
    }

    .benzerurun .slick-slide {
        position: relative
    }

    .benzerurun .imgbar {
        width: 100%;
    }

    .benzerurun .butttons {
        position: absolute;
        z-index: 1;
        right: 10px;
        top: 10px;
    }

    .benzerurun .imgbar > a {
        display: block;
        width: 100%
    }

        .benzerurun .imgbar > a > div {
            width: 100%;
            font-weight: 600;
            font-size: 18px;
            margin-block-start: 5px;
        }

            .benzerurun .imgbar > a > div.price {
                font-weight: 200;
            }

.prodetail .product-features_content {
    padding: 46px 0;
}

    .prodetail .product-features_content p {
        line-height: 1.3rem;
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .prodetail .product-features_content b, .prodetail .product-features_content strong {
        line-height: 1.3rem;
        font-size: 1.1rem;
    }

    .prodetail .product-features_content h1 {
        line-height: 1.4;
        font-size: 1.2rem;
        margin-bottom: 12px;
        margin-top: 0;
    }

    .prodetail .product-features_content span {
    }

    .prodetail .product-features_content ul > li {
        line-height: 1.3rem;
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

.prosort {
}

    .prosort > div {
    }

        .prosort > div.item {
            display: flex;
            align-items: center;
            border: 1px solid #d1d1d1;
            padding: 13px 20px;
            min-width: 300px;
            justify-content: space-between;
        }

            .prosort > div.item > .txt {
                font-size: 15px;
                font-weight: 400;
                line-height: 18px;
            }

            .prosort > div.item > .material-symbols-outlined {
            }

        .prosort > div.list {
            height: 0;
            overflow: hidden;
            width: 100%;
            position: absolute;
            top: 51px;
            z-index: 9;
            background: #fff;
            transition: .5s;
        }

            .prosort > div.list ul {
                border: 1px solid #d1d1d1;
                padding: 13px 20px;
                width: 100%;
            }

                .prosort > div.list ul > li {
                    font-size: 16px;
                    border-bottom: 1px solid #d1d1d1;
                    padding: 11px 5px;
                }

                    .prosort > div.list ul > li:hover {
                        color: #d57205;
                    }

                    .prosort > div.list ul > li:last-child {
                        border-bottom: 0px
                    }

                    .prosort > div.list ul > li > spa {
                    }

    .prosort .item:hover + .list, .prosort .list:hover {
        height: auto
    }

.prodetail {
}

    .prodetail .ustbar {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

.slick-slide img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
}

.prodetail .ustbar .info {
    width: 36%;
}

.prodetail .ustbar .galeri {
    width: 59%;
}

.prodetail .ustbar .info {
    width: 36%;
}

    .prodetail .ustbar .info .butttons {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 0;
    }

        .prodetail .ustbar .info .butttons > div {
            margin-right: 15px;
            display: flex;
            align-items: center;
        }

    .prodetail .ustbar .info .info-txt {
        width: 100%;
    }

        .prodetail .ustbar .info .info-txt > div {
            margin-top: 25px;
        }

            .prodetail .ustbar .info .info-txt > div h1 {
                line-height: 100%;
                margin-bottom: 11px;
            }

            .prodetail .ustbar .info .info-txt > div p {
                margin-bottom: 0;
                line-height: 1.45rem;
                font-size: 0.95rem;
            }

                .prodetail .ustbar .info .info-txt > div p.price {
                    font-weight: 600;
                    line-height: 2.45rem;
                    font-size: 1.45rem;
                }

            .prodetail .ustbar .info .info-txt > div span {
                margin-right: 5px;
            }

        .prodetail .ustbar .info .info-txt .box {
            font-size: 14px;
            font-weight: 600;
            padding: 9px 20px;
            border-radius: 6px;
            border: 1px solid #d1d1d1;
        }

.soft {
    color: #8c6933;
    background-color: #f7f5f4;
    border: 1px solid #ebe1dc !important;
}

.prodetail .ustbar .info .info-txt .box.soft {
    margin-right: 6px;
    padding: 5px 10px;
}

.softbg {
    background: #f7f5f4
}

.prodetail .ustbar .info .info-txt .ikili {
    display: flex;
}

.prodetail .ustbar .info .info-txt > div .sepetbox {
    width: 200px;
    border-radius: 9px;
    display: flex;
    justify-content: flex-start;
    font-size: 18px;
    font-weight: 600;
}

    .prodetail .ustbar .info .info-txt > div .sepetbox > span {
        width: 22px;
    }

.slider-nav .img {
    width: 100%
}

.slider-for .img {
}

.slider-nav {
    margin-top: 10px
}

    .slider-nav .slick-current {
        border: 1px solid #000;
    }

    .slider-nav .slick-track {
        display: flex;
        align-items: center
    }

    .slider-nav .slick-slide {
        padding: 15px;
        cursor: pointer;
    }

.moreplus {
    margin-top: 10px;
    width: 100%;
    cursor: pointer
}

    .moreplus > p {
        text-decoration: underline;
        text-underline-offset: 4px;
        font-size: 18px;
        font-weight: 400;
    }

    .moreplus.hide {
        display: none
    }

.section .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.section.homepage .container > img {
    width: 720px;
}

.section.homepage .container > div {
    width: 460px;
    text-align: right;
}

    .section.homepage .container > div > p {
        font-size: 19px;
        line-height: 33px;
        letter-spacing: 2px;
    }

.section.hakkimizda .container .icerik {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .section.hakkimizda .container .icerik .ciz {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .section.hakkimizda .container .icerik .ciz > div {
            background: #fff;
            width: 1px;
            height: 90%;
        }

    .section.hakkimizda .container .icerik h1 {
        font-size: 44px;
        line-height: 65px;
        margin-bottom: 22px;
        font-weight: 700;
    }

    .section.hakkimizda .container .icerik > div {
        width: calc(100% / 3);
    }

    .section.hakkimizda .container .icerik p {
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 16px;
    }

.hakkimizda .maxic {
    display: flex;
    flex-direction: row;
}

.maxic {
    width: 90%;
    max-width: 1280px
}

.detayslader {
    width: 100%;
    height: 100vw;
}

    .detayslader > carousel {
    }

.worklist {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-height: 100vh;
    overflow: hidden;
    flex-direction: column;
}

    .worklist > div {
        width: 100%;
        height: 25vh;
        overflow: hidden;
    }

        .worklist > div img {
            width: 100%;
            cursor: pointer;
            transition: .5s;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            position: relative;
        }

            .worklist > div img:hover {
                opacity: 0.40
            }

.beyazbg {
    background: #fff
}

.markalar .container > div {
    width: 90%;
}

    .markalar .container > div > img {
        width: 100%;
    }

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

    .hizmetlerlist > ul {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

        .hizmetlerlist > ul > li {
            background: url("/img/golge.jpg") no-repeat center left;
            width: 19%;
            padding: 0 46px;
            min-height: 340px;
        }

            .hizmetlerlist > ul > li:first-child {
                background-image: none
            }

            .hizmetlerlist > ul > li img {
                width: 60px;
                margin-bottom: 25px;
            }

            .hizmetlerlist > ul > li h2 {
                color: #000;
                font-size: 20px;
                line-height: 25px;
                margin-bottom: 15px;
                font-weight: 400;
            }

            .hizmetlerlist > ul > li p {
                color: #000;
                font-weight: 300;
                font-size: 16px;
                line-height: 23px;
            }

.sosyalmedya {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    max-width: 1360px;
    margin-top: 2vh;
}

    .sosyalmedya > div {
        display: flex;
        align-items: center;
    }

        .sosyalmedya > div:first-child {
        }

            .sosyalmedya > div:first-child > div {
                margin-right: 35px;
            }

                .sosyalmedya > div:first-child > div > a {
                    display: flex;
                    align-content: center;
                    align-items: center;
                }

                    .sosyalmedya > div:first-child > div > a > svg {
                        margin-right: 11px;
                        width: 33px;
                    }

                        .sosyalmedya > div:first-child > div > a > svg path {
                        }

                    .sosyalmedya > div:first-child > div > a p {
                        font-size: 15px;
                        line-height: 18px;
                    }

        .sosyalmedya > div:last-child {
            max-width: 387px;
        }

            .sosyalmedya > div:last-child p {
            }

                .sosyalmedya > div:last-child p > span {
                    display: block;
                }

            .sosyalmedya > div:last-child svg {
                margin-right: 10px;
            }

                .sosyalmedya > div:last-child svg path {
                }

/* Checkboxes */
body .facetwp-checkbox {
    background: none;
    margin-bottom: 0;
    padding: 5px 0 5px 25px;
    position: relative;
    font-size: 19px;
    line-height: 23px;
}

    body .facetwp-checkbox:before {
        border: 2px solid #000;
        content: "";
        height: 14px;
        left: 0;
        position: absolute;
        top: 8px;
        width: 14px;
    }

    body .facetwp-checkbox:after {
        content: "\e876";
        /* Material Symbols Outlined onay isareti karakteri */
        font-family: 'Material Symbols Outlined';
        display: none;
        font-size: 14px;
        font-weight: 700;
        left: 2px;
        margin-top: 1px;
        position: absolute;
        top: 5px;
    }

    body .facetwp-checkbox.checked {
        background: none
    }

        body .facetwp-checkbox.checked:after {
            display: block
        }

    body .facetwp-checkbox .facetwp-display-value {
        font-size: 14px;
        line-height: 1.2;
    }

.facetwp-type-checkboxes .facetwp-depth {
    display: none;
}

    .facetwp-type-checkboxes .facetwp-depth.visible {
        display: inherit;
    }

.facetwp-checkbox {
    background: url('/img/checkbox.png') 0 50% no-repeat;
    background-size: 14px 14px;
    margin-bottom: 4px;
    padding-left: 20px;
    cursor: pointer;
}

    .facetwp-checkbox.checked {
        background-image: url('../images/checkbox-on.png');
    }

    .facetwp-checkbox.disabled, .facetwp-radio.disabled {
        opacity: 0.4;
        cursor: default;
    }

    .facetwp-checkbox .facetwp-expand {
        float: right;
    }

.facetwp-display-value {
    padding-right: 5px;
}

.cookie-consent {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 390px;
    z-index: 10;
    /* border: 1px solid rgba(89,65,62,.4); */
    background: #f3f3f3;
    color: #ffffff;
    padding: 20px 15px;
    border-radius: 20px;
}

    .cookie-consent > div {
        padding: 10px 0;
    }

        .cookie-consent > div > div {
            display: flex;
            align-items: flex-start;
            width: 90%;
            margin: 0 auto;
            justify-content: space-between;
            flex-direction: column;
        }

        .cookie-consent > div p {
            font-size: 11px;
            letter-spacing: 1px;
            line-height: 19px;
            margin-bottom: 15px;
            font-weight: 400;
        }

            .cookie-consent > div p > a {
                color: #000;
                letter-spacing: 1px;
                margin-left: 5px;
                font-size: 11px;
                font-weight: bold;
            }

.cookie-ok {
    border: 1px solid #ffffff;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    letter-spacing: 2px;
    background: #000;
    PADDING: 14px 18px;
}

    .cookie-ok > span {
        color: #ffffff;
        cursor: pointer;
        font-size: 14px;
    }

@media(max-width: 1250px) {
    .header .menu > ul > li {
        margin-right: 10px;
    }

    .header .menu > ul:not(.icon) {
        display: none
    }

    .ichead p {
        line-height: 25px;
        font-size: 17px;
        margin-bottom: 10px;
    }

    .button {
        line-height: 18px;
        font-size: 14px;
    }

    .fourdiv > div {
        width: calc((100% /3) - 1vw);
        height: 30vw;
        margin-bottom: 1vw;
    }
}

@media(max-width: 700px) {
    .divalan {
        margin-top: 45px;
        margin-bottom: 45px;
    }

    .bottompagedetay, .slader {
        height: calc(40vh);
    }

    .arrow-scroll-down, .markalar {
        display: none
    }

    .ikilisatir {
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }

        .ikilisatir > div {
            width: 100%;
        }

        .ikilisatir .txt {
            display: flex;
            justify-content: center;
            text-align: center;
            flex-direction: column;
            padding: 25px 0;
            margin: 0 auto;
        }

    .archtive {
        display: flex;
        flex-direction: column;
    }

        .archtive h1 {
            margin: 0;
            line-height: 1.8rem;
        }

    .fullimg .txt h1 {
        font-size: 68px;
        line-height: 75px;
    }

    .fullimg img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        position: relative;
    }

    .mobilemenu > .menuicerik .menuler > div > a {
        font-size: 38px;
        line-height: 59px;
        font-weight: 300;
    }

    .mobilemenu > .menuicerik {
        margin-top: 0;
        height: calc(100% - 100px);
    }

    .resimlist {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }

        .resimlist > div {
            width: 100%;
            max-height: 40vh;
        }

    .mfp-wrap {
        width: 100% !important;
    }

    .iletisim {
    }

        .iletisim .altbar {
            display: flex;
            flex-direction: column;
            margin-top: 35px;
            height: auto;
        }

            .iletisim .altbar > div {
                width: 100% !important;
            }

        .iletisim .uk-text-right {
            text-align: left;
            margin-bottom: 34px !important;
        }

    .cookie-consent {
        width: 90%;
        left: 5%;
        bottom: 5vw;
    }

        .cookie-consent > div {
        }
}

/* ========== Acilir Menu (tes.css) ========== */
.acilirmenu {
    /* top ARTIK BURADA SABITLENMEZ - .centermenu yuksekligi sayfaya/
       responsive kirilim noktasina gore degistigi icin (bkz. .homepage
       .centermenu position:fixed, default.css), sabit piksel degerleri
       (95px/91px/75px, eskiden asagida media query'lerde de tekrarliyordu)
       her zaman DOGRU KALAMIYORDU. top artik main.js tarafindan
       .centermenu.offsetHeight okunarak inline style olarak yazilir (bkz.
       centermenuYuksekligiUygula fonksiyonu) - boylece her zaman dogru. */
    position: fixed;
    left: 0;
    width: 100%;
    height: 0;
    background: #fff;
    transition: all 0.8s ease-in-out;
    border-left: 0;
    border-right: 0;
    overflow: hidden;
    z-index: 9;
}

    .acilirmenu.acik {
        height: calc(100vh - 95px);
    }

    .acilirmenu > div {
        height: 100%
    }

    /* 4 sutun grid: 1. (durastone) %19, digerleri (doku/ebat/renk) %27'ser
   (19 + 27*3 = 100). Onceden flex + her sutuna AYRI flex-basis/max-width
   gecici bir degerdi (21/20/25/34) - grid-template-columns TEK yerden, net
   oranlarla yonetir. */
    .acilirmenu .menugeneldiv {
        display: grid;
        grid-template-columns: 19% 27% 27% 27%;
        align-items: stretch;
        width: 100%;
        height: 100%;
    }

        .acilirmenu .menugeneldiv > .menukolon {
            display: flex;
            border-right: 1px solid #F0F0F0;
            position: relative;
            transition: 0.5s;
            align-items: center;
            flex-direction: column;
            padding: 8vh 0;
        }

.menukolon:hover {
    background: #f7f5f4;
}

.acilirmenu .menugeneldiv > .menukolon--renk {
    border-right: 0;
}

.acilirmenu .menugeneldiv > .menukolon > div:first-child {
    height: calc(100%);
    width: 100%;
}

.acilirmenu .menugeneldiv > .menukolon > div:hover .acilirbaslik > div {
    color: #cbc7c5;
    -webkit-text-stroke-color: #cbc7c5;
}

.acilirmenu .menugeneldiv > .menukolon > div:first-child .acilirliste li:hover a {
    color: #F2293A;
}

.acilirmenu .menugeneldiv > .menukolon > div:first-child > div {
    display: flex;
    width: calc(100% - 40px);
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

    .acilirmenu .menugeneldiv > .menukolon > div:first-child > div > div:last-child {
        width: calc(100% - 130px)
    }

.acilirmenu .menugeneldiv .menudurastone {
    width: 100%;
    height: 70%;
    overflow: hidden;
}

    .acilirmenu .menugeneldiv .menudurastone a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .acilirmenu .menugeneldiv .menudurastone > div:last-child {
        width: calc(100% - 130px);
    }

    /* ONCEDEN sadece "height:100%" vardi - width HIC tanimli degildi, ayrica
   position:absolute icin top/left de yoktu. position:absolute verilen bir
   elementin genisligi width belirtilmezse tarayicinin kendi intrinsic
   boyutuna (ya da 0'a) duser - gorselin "genisligi almiyor" gorunmesinin
   asil sebebi buydu. width:100% + top/left:0 + object-fit ile hem alani
   tam kaplamasi hem de orani korumasi garantilendi. */
    .acilirmenu .menugeneldiv .menudurastone img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
    }

.acilirmenu .menugeneldiv > .menukolon > div > div > div {
    display: block;
    vertical-align: top;
    position: relative;
}

.acilirbaslik {
    width: 130px;
}

    .acilirbaslik > p, .acilirbaslik > div {
        font-size: 90px;
        letter-spacing: 4px;
        color: transparent;
        -webkit-text-stroke-color: #efefef;
        -webkit-text-stroke-width: 1px;
        transition: all 0.3s ease-in-out;
        font-family: 'DIN[T] Medium', sans-serif;
        cursor: pointer;
        transform: rotate(90deg);
        position: absolute;
        left: 0;
        top: 13px;
        width: 130px;
    }

.menugeneldiv .menualtbar {
}

    .menugeneldiv .menualtbar > div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

        .menugeneldiv .menualtbar > div a {
            text-align: center;
            font-size: 15px;
            padding: 15px;
            border: 2px solid #262626;
            background: none;
            transition: all 0.3s ease-in-out;
            display: inline-block;
            color: #262626;
            text-decoration: none;
        }

            .menugeneldiv .menualtbar > div a:hover {
                background: #262626;
                border-color: #262626;
                color: #fff;
            }

.acilirliste {
    width: calc(100% - 130px);
}

    .acilirliste > ul > li a {
        color: #000;
        font-size: 1.4vw;
        line-height: 3vw;
        font-family: 'DIN[T] Bold', sans-serif;
        text-decoration: none;
    }

/* DOKU:
   .menuresim) paylasir ama kart formunda sunar. */
.dokumenu.acilirliste {
    width: calc(100% - 130px);
}

.dokumenu > ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

    .dokumenu > ul > li {
        list-style: none;
    }

        /* Etiket gorsel UZERINDE (overlay) DEGIL — .menurenk (RENKLER) ile AYNI
   duzen: gorsel ustte duz akista, <span> ALTINDA, kucuk harf (sadece
   Tools.ilkbuyuk ile ilk harf buyuk — uppercase/tumu-buyuk YOK). */
        .dokumenu > ul > li > a {
            display: block;
            text-decoration: none;
            color: #000;
            padding: 0;
            margin: 0;
        }

.dokumenu_gorsel {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eee;
}

    .dokumenu_gorsel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .5s ease;
    }

.dokumenu > ul > li > a:hover .dokumenu_gorsel img {
    transform: scale(1.08);
}

.dokumenu > ul > li > a > span {
    display: block;
    margin: 6px 0 0 0;
    text-align: left;
    font-size: 12px;
}

/* Resmi olmayan doku kaydi: gorsel alani duz koyu renkle dolar, etiket
   AYNI konumda (altta) kalir. */
.dokumenu > ul > li > a:not(:has(.dokumenu_gorsel)) {
    background: #1a1a1a;
    aspect-ratio: 4 / 3;
}

/* Gap .dokumenu > ul (grid; gap:14px) ile AYNI deger (14px) - .ebatmenu
   grid DEGIL (kartlar degisken genislikte, inline style ile), bu yuzden
   gap yerine padding-right/margin-bottom KULLANILIR ama SAYISAL olarak
   dokumenu ile ESITLENIR. */
.ebatmenu li {
    display: inline-block;
    text-align: center;
    padding-right: 14px;
    margin-bottom: 14px;
}

    .ebatmenu li a {
        display: block;
        overflow: hidden;
        padding: 0;
        border: 1px solid #e3e3e3;
        position: relative;
        margin: 0 auto;
        margin-bottom: 0px;
    }

/* Su dolumu: TEK SVG (.imaGes_seviye) - govde (dalgali ust + duz alt
   blok, path'in "V 100 H 0 Z" kismi) VE dalganin sekli AYNI TEK path'te.
   Ikinci bir eleman/ikinci bir bottom-yuzdesi/senkronizasyon YOK. Bu tek
   SVG, .imaGes (overflow:hidden cerceve) icinde "transform:
   translateY(100%)" ile BASLANGICTA TAMAMEN ASAGIDA/GORUNMEZ durur (opacity
   DEGIL - fiziksel olarak cercevenin disinda, ilk acilista hicbir kabartı/
   iz KALMAZ). Hover'da translateY(0)'a kayarak asagidan yukari "girer". */
.ebatmenu > ul > li > a .imaGes {
    position: relative;
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.imaGes_seviye {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    transform: translateY(100%);
    transition: transform .5s ease-in-out;
}

.ebatmenu > ul > li:hover .imaGes_seviye {
    transform: translateY(0);
}

.ebatmenu li span {
    font-size: 12px;
    color: #000;
}

.menurenk {
    width: calc(100% - 130px);
}

    .menurenk > ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
    }

        /* Gap .dokumenu > ul (grid; gap:14px) ile AYNI deger (14px) - yatay
   ayrac (margin-right, 7px idi) ve dikey ayrac (margin-bottom, ONCEDEN
   HIC TANIMLI DEGILDI - satirlar arasi bosluk sifirdi) ikisi de 14px'e
   esitlendi. */
        .menurenk > ul > li {
            width: calc((100% / 3) - 10px);
        }

            .menurenk > ul > li:nth-child(3n) {
                margin-right: 0
            }

            .menurenk > ul > li > a {
                display: block;
                text-decoration: none;
                color: #000;
                padding: 0;
                margin: 0;
            }

                .menurenk > ul > li > a span {
                    text-align: left;
                    margin: 6px 0 0 0;
                    display: block;
                    font-size: 12px;
                }

                .menurenk > ul > li > a > div {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    aspect-ratio: 1;
                }

                    .menurenk > ul > li > a > div > img {
                        width: 100%;
                    }

                    .menurenk > ul > li > a > div .gorsell {
                        width: 100%;
                        min-height: 115px;
                    }

@media(max-width: 2000px) {
    .acilirmenu {
    }

        .acilirmenu.acik {
            height: calc(100vh - 91px);
        }
}

@media(max-width: 1600px) {
    .acilirmenu {
    }

        .acilirmenu.acik {
            height: calc(100vh - 75px);
        }
}

@media(max-width: 1450px) {
    .acilirbaslik.durastonebaslik div {
        font-size: 70px;
    }
}

@media(max-width: 1300px) {
    .acilirmenu .menugeneldiv > .menukolon > div:first-child > div {
        width: calc(100% - 20px)
    }

    .menurenk > ul > li {
        min-height: 155px;
    }

        .menurenk > ul > li > a > div {
            height: 95px;
        }

    .dokumenu > ul > li > a > span {
        font-size: 11px;
    }

    .acilirbaslik {
        width: 110px
    }

        .acilirbaslik > p, .acilirbaslik > div {
            font-size: 70px;
        }
}

@media(max-width: 1100px) {
    .acilirmenu {
        display: none
    }
}

@media(max-width: 900px) {
    .acilirmenu {
        display: none
    }
}

/* ========== Urun detay popup (tes.css) ========== */
.popupbilgiler .sosyal-icon {
    float: left;
}

    .popupbilgiler .sosyal-icon > ul {
        display: table-row;
    }

        .popupbilgiler .sosyal-icon > ul > li {
            display: table-cell;
            padding: 0 5px;
        }

            .popupbilgiler .sosyal-icon > ul > li:hover a {
                border-color: #999;
            }

            .popupbilgiler .sosyal-icon > ul > li:hover svg {
                fill: #999;
            }

            .popupbilgiler .sosyal-icon > ul > li svg {
                width: 32px;
                height: 32px;
            }

            .popupbilgiler .sosyal-icon > ul > li a {
                display: block;
                transition: all 0.2s ease-in-out;
                width: 32px;
                height: 32px;
            }

            .popupbilgiler .sosyal-icon > ul > li:last-child {
                margin-left: 10px;
                vertical-align: middle;
            }

.popup {
    position: fixed;
    bottom: -100%;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    transition: 1s;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.42, 0, 0, 0.73);
    transition-delay: 0s;
}

    .popup.active {
        bottom: 0
    }

    .popup .pop-slick-next, .popup .pop-slick-prev {
        position: absolute;
        top: 50%;
        cursor: pointer;
        z-index: 5;
    }

        .popup .pop-slick-next img {
            transform: rotate(180deg);
            float: right;
        }

    .popup .pop-slick-next {
        right: 20px;
    }

        .popup .pop-slick-next p {
            float: left !important;
            text-align: right
        }

    .popup .pop-slick-prev {
        left: 20px;
    }

        .popup .pop-slick-next p, .popup .pop-slick-prev p {
            float: right;
            width: 65%;
            line-height: 22px;
            margin-top: -15px;
        }

        .popup .pop-slick-next.slick-disabled, .popup .pop-slick-prev.slick-disabled {
            opacity: .3;
            pointer-events: none;
        }

/* Popup varyant slaytlamasi (Slick). height:100% zinciri slick'in tum
   sarmalayici seviyelerine (list/track/slide) uygulanmali, yoksa slick
   varsayilan height:auto birakir ve gorsel/bilgi alani cokup gorunmez. */
.pop-slick-wrap, .pop-slick-wrap > div, .pop-slick {
    height: 100%;
}

    .pop-slick .slick-list, .pop-slick .slick-track, .pop-slick .slick-slide, .pop-slick .slick-slide > div {
        height: 100%;
    }

.pop-slide {
    height: 100%;
}

.popanadiv {
    display: table;
    width: 100%;
    height: 100%
}

    .popanadiv > div {
        display: table-cell;
        vertical-align: middle;
        width: Calc(100% / 2)
    }

        .popanadiv > div:first-child {
            text-align: center
        }

.popupbilgiler {
    width: 100%
}

.popbaslik {
    display: table;
    width: 100%
}

    .popbaslik > div {
        display: table-cell;
        vertical-align: middle
    }

        .popbaslik > div h1 {
            color: #000;
            font-size: 20px;
        }

        .popbaslik > div:last-child {
            float: right
        }

.popup .icondiv > div > ul {
    text-align: right;
    margin: 0
}

    .popup .icondiv > div > ul > li {
        width: 35px;
        height: 35px;
        margin-bottom: 6px;
        position: relative;
        margin-right: 10px;
        cursor: pointer;
    }

        .popup .icondiv > div > ul > li img {
            width: 100%;
            opacity: .5;
        }

        .popup .icondiv > div > ul > li:hover .semboladi {
            opacity: 1;
            transition: all 0.5s ease-in-out;
        }

.pophead {
    display: table;
    width: 100%;
    text-align: center;
    margin-top: 22px
}

    .pophead > div {
        display: table;
        text-align: center;
        width: calc(100% - 2px);
    }

        .pophead > div:first-child {
            border: 1px solid #000;
        }

        .pophead > div ul {
            display: table-row
        }

        .pophead > div li {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: calc(100% / 4);
            padding: 10px 0
        }

.popupbilgi {
    width: calc(100% - 2px);
    margin: 0 auto;
    text-align: left;
    margin-top: 50px;
    border: 0.5px solid #BFBFBF;
}

    .popupbilgi > div > div {
        display: table;
        width: calc(100% - 50px);
        border-bottom: 0.5px solid #BFBFBF;
        padding: 17px 0;
        font-size: 16px;
        margin: 0 auto;
    }

        .popupbilgi > div > div:last-child {
            border: 0
        }

        .popupbilgi > div > div > div:first-child {
            width: 50%;
        }

        .popupbilgi > div > div > div:last-child {
            width: 200px;
        }

        .popupbilgi > div > div > div {
            display: table-cell;
            vertical-align: middle;
            line-height: 22px
        }

.poppaylas {
    display: table;
    width: 100%;
    margin-top: 32px;
}

    .poppaylas > div {
        width: 50%;
        display: table-cell;
        vertical-align: middle;
    }

        .poppaylas > div:first-child {
            width: 25%;
        }

    .poppaylas .indirin {
        display: table;
        padding: 15px 0;
        float: left;
        cursor: pointer;
    }

        .poppaylas .indirin img {
            float: left;
            width: auto;
        }

        .poppaylas .indirin p {
            float: right;
            line-height: 26px;
            padding-left: 10px;
            font-size: 17px;
        }

    .poppaylas .kendipdf {
        padding: 15px;
        background: #F2293A;
        float: right;
        cursor: pointer;
    }

        .poppaylas .kendipdf p {
            color: #fff;
            float: right;
            font-size: 16px;
            line-height: 25px;
            padding-left: 10px;
        }

.popikili {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-around;
}

.zemineuygula button {
    padding: 6px 15px;
    border: 0;
    background: #f2293a;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

    .zemineuygula button img {
        width: 45px;
        float: left;
    }

    .zemineuygula button p {
        color: #fff;
        padding-left: 11px;
        font-size: 17px;
    }

.pdfolusturma {
    position: fixed;
    width: 320px;
    height: auto;
    right: -100%;
    top: auto;
    z-index: 10000;
    background: #F5F5F5;
    transition: 1s;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.42, 0, 0, 0.73);
    transition-delay: 0
}

    .pdfolusturma > div {
        display: table;
        height: 100%;
        width: calc(100% - 50px);
        padding: 25px;
    }

        .pdfolusturma > div > a {
            position: relative;
            left: -20px;
            top: -20px;
            display: table;
        }

            .pdfolusturma > div > a:before, .pdfolusturma > div > a:after {
                background: #fff;
                width: 30px !important;
            }

    .pdfolusturma .popupsecim {
        width: calc(100%);
        position: relative;
        display: table;
        cursor: pointer;
        height: 60px;
    }

        .pdfolusturma .popupsecim > div {
            border: 1px solid #EBEBEB;
            border-radius: 0;
            width: calc(100%);
            z-index: 6;
            background: #fff;
            margin-bottom: 20px;
        }

            .pdfolusturma .popupsecim > div span {
                font-size: 13px;
                color: #000000;
                line-height: 13px;
                display: block;
                padding: 15px 20px;
            }

        .pdfolusturma .popupsecim .img > img {
            position: absolute;
            top: 19px;
            right: 20px;
            width: 11px;
            opacity: 1;
            transition: all 0.3s ease-in-out;
        }

        .pdfolusturma .popupsecim > div > a > ul {
            display: none;
            width: calc(100% - 41px);
            z-index: 99;
            padding: 0 20px;
        }

            .pdfolusturma .popupsecim > div > a > ul > li {
                font-size: 13px;
                padding: 3px 0;
                border-bottom: 2px solid #f5f5f5;
                color: #686a6c;
                cursor: pointer;
                line-height: 18px;
            }

    .pdfolusturma .pdfbuton {
        background: #262626;
        display: table;
        margin: 0 auto;
        margin-top: 130px;
    }

        .pdfolusturma .pdfbuton > div {
            padding: 15px;
            cursor: pointer;
        }

            .pdfolusturma .pdfbuton > div p {
                float: right;
                color: #fff;
                padding-left: 15px;
                line-height: 25px;
            }

#popSlick6 {
    width: 100%;
    height: 100%;
}

    #popSlick6 .pop-slide > div {
        text-align: center
    }

.lightbox--close {
    position: absolute;
    top: 10px;
    width: 27px;
    height: 27px;
    box-sizing: content-box;
    padding: 10px;
    z-index: 9999;
    right: 20px;
    right: calc((100% - 1356px) / 2);
    transition: background-color .3s linear;
    cursor: pointer;
}

@media screen and (max-width: 1396px) {
    .lightbox--close {
        right: 10px
    }
}

.lightbox--close:hover {
    -webkit-transform: rotateZ(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotateZ(-180deg)
}

html.csstransforms3d .lightbox--close:before, html.csstransforms3d .lightbox--close:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 1px;
    top: 50%;
    left: 50%;
    background: #878380;
    box-shadow: 0 0 1px 1px rgba(255,255,255,0.1);
    -webkit-transform: translateY(-0.5px) translateX(-50%) rotate(45deg) translateZ(0);
    transform: translateY(-0.5px) translateX(-50%) rotate(45deg) translateZ(0);
    transition: -webkit-transform 350ms;
    transition: transform 350ms;
    transition: transform 350ms,-webkit-transform 350ms;
    -webkit-backface-visibility: hidden
}

html.csstransforms3d .lightbox--close:after {
    -webkit-transform: translateY(-0.5px) translateX(-50%) rotate(-45deg) translateZ(0);
    transform: translateY(-0.5px) translateX(-50%) rotate(-45deg) translateZ(0);
    transition: -webkit-transform 450ms;
    transition: transform 450ms;
    transition: transform 450ms,-webkit-transform 450ms
}

html.csstransforms3d .lightbox--close:hover:before {
    -webkit-transform: translateY(-0.5px) translateX(-50%) rotate(-135deg) translateZ(0);
    transform: translateY(-0.5px) translateX(-50%) rotate(-135deg) translateZ(0)
}

html.csstransforms3d .lightbox--close:hover:after {
    -webkit-transform: translateY(-0.5px) translateX(-50%) rotate(-225deg) translateZ(0);
    transform: translateY(-0.5px) translateX(-50%) rotate(-225deg) translateZ(0)
}

html.csstransforms3d .lightbox--close:hover {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.popkapa {
    top: 80px;
    right: 80px
}

@media (max-width: 1450px) {
    .popanadiv {
        width: 95%;
    }

    .poppaylas > div:first-child {
        width: 40%;
    }
}

@media (max-width: 1300px) {
    .popanadiv {
        width: 80%;
        margin: 0 auto;
    }

        .popanadiv > div:first-child {
            width: 25%;
        }
}

@media (max-width: 1100px) {
    #popSlick6 .pop-slide {
        overflow-y: scroll;
        max-height: 750px;
    }

    .popanadiv {
        display: block;
        width: 70%;
        padding: 50px 0;
    }

        .popanadiv > div {
            display: block;
            margin: 0 auto;
            width: 100% !important;
        }

            .popanadiv > div:first-child {
                margin-bottom: 40px;
            }
}

@media (max-width: 600px) {
    .poppaylas > div {
        width: 100%;
        display: table;
    }

    .popbaslik > div {
        display: table;
        width: 100%;
        float: none !important
    }

        .popbaslik > div:first-child {
            margin-bottom: 20px
        }

    .popupbilgi > div > div > div {
        display: table;
        width: 100% !important;
    }

    .popanadiv > div:first-child img {
        width: 100%;
    }

    .popup .pop-slick-next p, .popup .pop-slick-prev p {
        display: none !important
    }

    .poppaylas .kendipdf {
        display: table;
        float: left
    }

    .popupbilgiler .sosyal-icon > ul > li:first-child {
        padding-left: 0
    }

    .popkapa {
        right: 25px;
        top: 25px
    }

    .popupbilgi > div > div > div, .pophead > div li {
        font-size: 13px !important
    }

    .poppaylas .indirin {
        padding: 25px 0
    }
}

/* ========== /popup ========== */
/* ========== Kurumsal (tes.css - full extract) ========== */
.headbig {
    font-size: 1.8em;
    font-family: 'bentonsansbold';
}

.headsmall {
    font-size: 1.5em;
    line-height: 1.7em;
    font-family: 'bentonsansthin';
}

.link--arrowed {
    display: block;
    /* margin: 20px 0; */
    position: relative;
    width: 60px;
    height: 60px;
    line-height: 60px;
    /* left: -26px; */
    /* top: 23px !important; */
}

    .link--arrowed .arrow-slider-icon {
        position: relative;
        transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        vertical-align: middle;
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    .link--arrowed .arrow-icon--polyline {
    }

    .link--arrowed .arrow-icon--circle {
        transition: stroke-dashoffset 0.3s ease;
        stroke-dasharray: 95;
        stroke-dashoffset: 95;
    }

    .link--arrowed:hover .arrow-slider-icon {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 1);
    }

    .link--arrowed:hover .arrow-slider-icon--circle {
        stroke-dashoffset: 0;
    }

.swiper-pagination-bullet-active .arrow-icon--circle {
    stroke-dashoffset: 0;
}

.swiper-pagination-bullet-active .arrow-icon {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 1);
}

.genelbaslik {
    text-align: center;
    margin: 55px 0 40px 0;
}

    .genelbaslik > p {
        margin-bottom: 15px;
        font-size: 1.2vw;
        font-family: 'bentonsansregular';
    }

    .genelbaslik .yazi {
        width: 100%;
        margin: 0 auto;
        margin-top: 20px;
        max-width: 1000px;
    }

.swiper-slide.koleksiyon:hover .arkabg {
    opacity: 1;
    transition: all 0.8s ease-in-out;
}

.swiper-button-prev7 {
    position: absolute;
    top: calc(50% - 120px);
    left: 0;
    z-index: 2;
}

.swiper-button-next7 {
    position: absolute;
    top: calc(50% - 120px);
    right: 0;
    z-index: 2;
}

    .swiper-button-next7 .arrow-icon g, .swiper-button-prev7 .arrow-icon g {
        stroke: #707070
    }

.swiper-button-prev7 .bottomsvg {
    transform: rotate(180deg)
}

.katalogbaslik {
    display: table;
    width: 100%;
    margin: 30px 0 10px 0;
}

    .katalogbaslik > h1 {
        color: #fff;
        text-align: center;
        font-size: 16px;
        margin-bottom: 5px;
    }

    .katalogbaslik > h2 {
        color: #fff;
        text-align: center;
        font-size: 15px;
        font-family: 'DIN[T] Regular';
        font-weight: 100;
    }

.katalogbaslik {
    display: table;
    width: 100%;
    margin: 35px 0 22px 0;
}

    .katalogbaslik > h2 {
        color: #fff;
        font-size: 24px;
    }

.altsayfa {
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 40px;
}

.ortala {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: table;
}

.kurumsalgovde {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    width: 96%;
    max-width: 1600px;
    margin: 0 auto;
}

.kurumsalsag {
    flex: 1 1 auto;
    min-width: 0;
}

.altsayfahead {
    display: block;
    width: 100%;
    height: 360px;
    position: relative;
    overflow: hidden;
}

    .altsayfahead > div {
    }

        .altsayfahead > div:first-child {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 360px;
            display: flex;
            align-items: center;
        }

            .altsayfahead > div:first-child > img {
                width: 100%;
                min-width: 100%;
                min-height: 100%;
                object-fit: cover;
            }

        .altsayfahead > div:nth-child(2) {
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 80%;
            display: table;
        }

            .altsayfahead > div:nth-child(2) > div {
                display: table-cell;
                vertical-align: bottom;
            }

            .altsayfahead > div:nth-child(2) h1 {
                color: #fff;
                text-align: center;
                font-size: 29px;
                line-height: 30px;
            }

            .altsayfahead > div:nth-child(2) h2 {
                color: #fff;
                text-align: center;
                font-size: 21px;
                line-height: 45px;
                font-weight: 100;
            }

            .altsayfahead > div:nth-child(2) p {
                max-width: 700px;
                margin: 0 auto;
                color: #fff;
                text-align: center;
                margin-top: 42px;
                font-size: 16px;
                line-height: 22px;
            }

.altsayfamenu {
    flex: 0 0 270px;
    width: 270px;
    position: sticky;
    margin-top: 5vh;
}

    .altsayfamenu > div {
        width: 100%;
    }

        .altsayfamenu > div > ul {
            display: block;
            border-left: 1px solid #E7E7E7;
        }

            .altsayfamenu > div > ul > li {
                display: block;
                width: 100%;
            }

                .altsayfamenu > div > ul > li > a {
                    font-size: 12px;
                    letter-spacing: .08em;
                    text-transform: uppercase;
                    padding: 7px 22px;
                    display: block;
                    text-align: left;
                    border-left: 2px solid transparent;
                    margin-left: -1px;
                    transition: color .2s ease, border-color .2s ease, background .2s ease;
                    font-weight: 500;
                    color: #000;
                }

                    .altsayfamenu > div > ul > li > a:hover {
                        color: #1a1a1a;
                        background: #FAFAFA;
                    }

                .altsayfamenu > div > ul > li.aktif > a {
                    color: #1a1a1a;
                    font-weight: 600;
                    border-left: 2px solid #1a1a1a;
                }

.kurumsalicerik.ortala {
    display: block;
    max-width: none;
    margin: 0;
    width: 100%;
    padding-top: 40px;
}

.kurumsalicerik > div:first-child {
    width: 100%;
}



    .kurumsalicerik > div:first-child > div > h1 {
        font-size: 2em;
        margin-bottom: 20px;
        text-align: left;
    }

    .kurumsalicerik > div:first-child > div > h2 {
        font-family: 'DIN[T] Regular';
        font-size: 30px;
        line-height: 45px;
        text-align: left;
        margin-bottom: 10px;
    }

    .kurumsalicerik > div:first-child > div li, .kurumsalicerik > div:first-child > div > p, .kurumsalicerik > div:first-child > div > p * {
        font-size: 15px;
        margin-bottom: 25px;
        line-height: 1.5;
    }

.fabrikalar {
    width: 100%;
    /* display:table; */
    height: 100%;
}

    .fabrikalar .swiper-container {
    }

.arkabg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    z-index: 1;
    opacity: 0;
    transition: all 0.8s ease-in-out;
}

.fabrikaresim {
    width: 100%;
    display: table;
}

    .fabrikaresim > img {
        width: 100%
    }

.fabrikayazi {
    display: table;
    width: calc(100% - 30px);
    padding: 21px 15px 40px 0;
    height: 108px;
}

    .fabrikayazi > h2 {
        font-size: 16px;
        line-height: 24px;
    }

    .fabrikayazi > p {
        font-size: 14px;
        line-height: 21px;
    }

.tarihce {
    position: relative;
}

.tarihce-cizgi {
    width: 100%;
    display: table;
    height: 1px;
    background: #E8E8E8;
    position: relative;
    margin-top: 60px;
}

    .tarihce-cizgi .tarihceyuvarlak {
        width: 10px;
        height: 10px;
        background: #707070;
        border-radius: 25px;
        position: absolute;
        top: -5px;
        display: none
    }

    .tarihce-cizgi .solyuvarlak {
        left: 0;
    }

    .tarihce-cizgi .sagyuvarlak {
        right: 0;
    }

.tarihce .swiper-pagination7 {
    position: absolute;
    bottom: -14px;
    width: 100%;
    display: table;
}

    .tarihce .swiper-pagination7 > div {
        display: table-cell;
        vertical-align: middle;
        width: calc(100% / 16) !important;
        position: relative;
        background: none !important;
        opacity: 1 !important
    }

        .tarihce .swiper-pagination7 > div > p {
            text-align: center;
            position: absolute;
            width: 100%;
            bottom: 50px;
            color: #707070;
            font-family: 'DIN[T] Regular';
            font-size: 18px;
            cursor: pointer;
        }

    .tarihce .swiper-pagination7 .swiper-pagination-bullet-active p {
        color: #000
    }

    .tarihce .swiper-pagination7 > div > div > div {
        width: 10px;
        height: 10px;
        background: #707070;
        border-radius: 25px;
        margin: 0 auto;
        cursor: pointer;
    }

    .tarihce .swiper-pagination7 .swiper-pagination-bullet-active div > div {
        width: 16px;
        height: 16px;
        background: #ed2025;
    }

.tarihce .swiper-slide.ikili {
}

.tarihce .swiper-slide.uclu > div {
    width: calc(100% / 3);
    float: left
}

.tarihce .swiper-slide.ikili > div {
    width: 50%;
    float: left
}

.tarihce .swiper-slide.ikili .tarihceslider > div, .tarihce .swiper-slide.uclu .tarihceslider > div {
    width: 100%;
    display: block
}

    .tarihce .swiper-slide.ikili .tarihceslider > div:last-child > div, .tarihce .swiper-slide.uclu .tarihceslider > div:last-child > div {
        width: 100%;
        margin-top: 25px
    }

.tarihce .swiper-pagination7 .swiper-pagination-bullet-active > div {
    border: 1px solid #9d0000;
    padding: 5px;
    display: table;
    border-radius: 25px;
    margin: 0 auto;
}

.tarihce .swiper-pagination7 .swiper-pagination-bullet-active {
    background: none !important
}

.tarihce .swiper-container {
    width: 87%;
    margin: 0 auto;
}

.tarihce.ortala {
    display: inherit
}

.tarihcehead {
    margin-bottom: 10px;
    margin-left: 40px
}

    .tarihcehead > h1 {
        color: transparent;
        -webkit-text-stroke-color: #E8E8E8;
        -webkit-text-stroke-width: 1px;
        transition: all 0.3s ease-in-out;
        font-size: 65px;
        font-family: 'DIN[T] Black';
    }

.tarihceslider {
    display: table;
    width: calc(100% - 20px);
    margin: 0 auto;
    margin-bottom: 50px;
    cursor: pointer
}

    .tarihceslider > div {
        display: table-cell;
        vertical-align: middle;
        width: calc(100% / 2);
    }

        .tarihceslider > div:first-child div {
            border: 7px solid #fff;
            box-shadow: 0px 0px 11px 0px #00000038;
        }

            .tarihceslider > div:first-child div img {
                width: 100%;
            }

        .tarihceslider > div:last-child > div {
            width: 85%;
            margin: 0 auto
        }

            .tarihceslider > div:last-child > div p {
                font-size: 21px;
                line-height: 30px;
                margin-bottom: 30px
            }

                .tarihceslider > div:last-child > div p span {
                    font-family: 'DIN[T] Medium';
                    font-size: 21px;
                    line-height: 30px;
                    font-weight: 100
                }

                .tarihceslider > div:last-child > div p bold {
                    font-family: 'DIN[T] Bold';
                }

.fabrikalarslider {
    display: table;
    margin: 0 auto;
}

    .fabrikalarslider > div {
        display: table-cell
    }

        .fabrikalarslider > div > div {
            width: calc((100% / 3) - 34px);
            float: left;
            margin-right: 50px;
            min-height: 510px
        }

            .fabrikalarslider > div > div:nth-child(3n) {
                margin-right: 0
            }

.katalogmenubaslik {
    margin: 0px 0 10px 0;
    background: #f1f1f1;
    padding: 19px 13px;
}

    .katalogmenubaslik h1 {
        font-size: 16px;
    }

.kataloglar {
    /*border-bottom:1px solid #F0F0F0;padding-bottom:25px;*/
    width: 100%;
}

    .kataloglar > div {
        width: 100%;
    }

        .kataloglar > div > ul {
            margin: 0;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 30px;
            align-items: stretch;
        }

            .kataloglar > div > ul > li {
                width: auto;
                margin: 0;
                transition: all 0.5s ease-in-out;
                border: 1px solid #eee;
                display: flex;
                flex-direction: column;
                height: 100%;
            }

                .kataloglar > div > ul > li > div {
                    border: 10px solid #fff;
                    display: flex;
                    flex-direction: column;
                    flex: 1 1 auto;
                }

                    .kataloglar > div > ul > li > div > a {
                        display: flex;
                        flex-direction: column;
                        flex: 1 1 auto;
                    }

                .kataloglar > div > ul > li:hover {
                    box-shadow: 0px 1px 12px 3px rgba(0, 0, 0, 0.20);
                    transition: all 0.5s ease-in-out;
                }

            /* Gorsel yerine satir/tablo gorunumu: tur alani 'katalog' olmayan bolumler
   (Sertifikalar, Teknik Ozellikler, Politikalar vb.) icin kullanilir. */
            .kataloglar > div > ul.tablogorunumu {
                display: block;
            }

                .kataloglar > div > ul.tablogorunumu > li {
                    display: block;
                    height: auto;
                    border: none;
                    border-bottom: 1px solid #eee;
                }

                    .kataloglar > div > ul.tablogorunumu > li:hover {
                        box-shadow: none;
                        background: #FAFAFA;
                    }

                    .kataloglar > div > ul.tablogorunumu > li > div {
                        border: none;
                        flex-direction: row;
                        align-items: center;
                        padding: 5px 16px;
                        gap: 20px;
                    }

                        .kataloglar > div > ul.tablogorunumu > li > div > a {
                            flex-direction: row;
                            align-items: center;
                            flex: 1 1 auto;
                            min-width: 0;
                        }

                    .kataloglar > div > ul.tablogorunumu > li .katalog-aciklama {
                        margin: 0;
                        width: auto;
                        flex: 1 1 auto;
                        min-width: 0;
                    }

                        .kataloglar > div > ul.tablogorunumu > li .katalog-aciklama > h2 {
                            display: inline;
                            margin-bottom: 0;
                            margin-right: 8px;
                        }

                        .kataloglar > div > ul.tablogorunumu > li .katalog-aciklama > p {
                            display: inline;
                        }

                    .kataloglar > div > ul.tablogorunumu > li .katalogindir {
                        width: auto;
                        margin: 0;
                        flex: 0 0 auto;
                        white-space: nowrap;
                        padding: 2px 31px;
                    }

.katalogindir {
    display: block;
    width: calc(100% - 21px);
    margin: 0 auto;
    border: 1px solid #000;
    padding: 10px;
    color: #000;
    font-size: 14px;
}

    .katalogindir.homekatalog {
        background: none;
        margin-top: 10px;
        width: fit-content;
        border-color: #ffffff;
        color: #fff;
    }

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

        .katalogindir:hover i {
            color: #fff;
        }

    .katalogindir.homekatalog i {
        color: #fff
    }

    .katalogindir i {
        font-size: 15px;
        color: #000;
        padding-right: 5px;
    }



.kataloglar > div > ul > li .katalog-aciklama {
    margin: 17px 0 17px 13px;
    width: calc(100% - 26px);
    flex: 1 1 auto;
}

    .kataloglar > div > ul > li .katalog-aciklama > h2 {
        font-size: 12px;
        margin-bottom: 2px;
        font-weight: 600;
    }

    .kataloglar > div > ul > li .katalog-aciklama > p {
        font-size: 13px;
        line-height: 24px;
        letter-spacing: 0;
    }

.link--arrowed {
    /* display: inline-block; */
    /* height: 2rem; */
}

    .link--arrowed .arrow-icon {
        position: relative;
        top: 0px;
        transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        vertical-align: middle;
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

.arrow-icon1 {
    position: absolute !important;
    left: -34px;
    width: 60px;
    height: 60px;
}

.arrow-icon2 {
    position: absolute !important;
    /* left: -24px; */
    /* top: -25px !important; */
    /* width: 60px; */
    /* height: 60px; */
}

.owl-nav .arrow-icon2 {
    left: 0 !important
}

.bottomsvg {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
}

.link--arrowed:hover .arrow-icon {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
}

.link--arrowed:hover .arrow-icon--circle {
    stroke-dashoffset: 0;
}

@media(max-width: 2000px) {
    .head > div > div > ul > li {
        padding: 0 24px;
    }

    #showcase-holder .swiper-pagination-bullet {
        margin: 46px 0 !important;
    }

    .head > div > div:nth-child(2), .head {
        height: 91px;
    }

    .altsayfa {
    }

    .smooth-scroll #content-scroll {
        height: calc(100% - 75px) !important;
    }

    .slideryazi > div:first-child {
        padding: 30px
    }

        .slideryazi > div:first-child > h1 {
            font-size: 55px
        }

        .slideryazi > div:first-child > p {
            font-size: 15px;
            line-height: 18px
        }

    .slideryazi > div:last-child > a {
        font-size: 14px;
        padding: 13px 30px
    }

    .head > div > div > ul > li > img {
        width: 20px
    }

    .tarzinibul {
        top: -75px;
    }

    .slider-icon {
        bottom: 30px
    }

    .slideryazi {
        width: 320px
    }
}

@media(max-width: 1600px) {
}

@media(max-width: 1450px) {
    .head > div > div > ul > li {
        padding: 0 16px;
    }

    .kataloglar > div > ul {
        grid-template-columns: repeat(4, 1fr);
    }

    .cerez > div {
        padding: 15px
    }

    .menurenk > ul > li > a span {
    }

    .popanadiv {
        width: 95%
    }

    .poppaylas > div:first-child {
        width: 40%
    }

    .koleksiyonresim > img {
        height: 100%;
        width: initial;
        left: 50%;
        position: relative;
        transform: translateX(-50%)
    }

    .fuarresim > img {
        width: initial;
        height: 100%
    }

    .hometainitim {
        display: flow-root
    }

    .swiper-slide.koleksiyon {
        width: calc((100% / 3) - 8px) !important
    }

    .acilirbaslik.durastonebaslik div {
        font-size: 70px;
    }

    .altsayfamenu > div > ul > li > a {
        font-size: 12px;
        padding: 20px 8px;
    }
}

@media(max-width: 1300px) {
    .acilirmenu .menugeneldiv > div > div:first-child > div {
        width: calc(100% - 20px)
    }

    .menurenk > ul > li {
        min-height: 155px;
    }

        .menurenk > ul > li > a > div {
            height: 95px;
        }

    .acilirbaslik {
        width: 110px
    }

        .acilirbaslik > p, .acilirbaslik > div {
            font-size: 70px;
        }

    .popanadiv {
        width: 80%;
        margin: 0 auto
    }

        .popanadiv > div:first-child {
            width: 25%
        }

    .altsayfahead {
        height: 260px
    }
}

@media(max-width: 1100px) {
    .iletisimgiris > ul > li {
        display: table;
        width: calc(100%)
    }

    .export {
        width: calc(100% - 60px)
    }

    .iletisimgiris > ul > li > div {
        width: 100%;
        float: none;
        margin: 25px 0
    }

    /*.iletisimbesli>ul>li:nth-child(4), .iletisimbesli>ul>li:first-child{margin-left:0}*/
    .iletisimbesli > ul > li {
        width: calc((100% / 3) - 30px);
        height: 200px
    }

    .iletisimgiris > ul > li > div > h2, .iletisimgiris > ul > li > div > p {
        width: 100%;
    }

    .iletisimgiris > ul > li:last-child {
        margin-top: 25px
    }

    .kataloglar > div > ul > li .katalog-aciklama > p {
        font-size: 14px
    }

    .urunler > div > ul > li {
        width: calc((100% / 4) - 0px)
    }

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

    .acilirmenu {
        display: none
    }

    #popSlick6 .pop-slide {
        overflow-y: scroll;
        max-height: 750px;
    }

    .popanadiv {
        display: block;
        width: 70%;
        padding: 50px 0;
    }

        .popanadiv > div {
            display: block;
            margin: 0 auto;
            width: 100% !important;
        }

            .popanadiv > div:first-child {
                margin-bottom: 40px
            }

    .altsayfamenu > div > ul > li {
        vertical-align: bottom
    }

    .slide1 {
        background-image: url(/img/slider/1-1080.jpg?v=34)
    }

    .slide2 {
        background-image: url(/img/slider/2-1080.jpg?v=34)
    }

    .slide3 {
        background-image: url(/img/slider/3-1080.jpg?v=34)
    }

    .slide4 {
        background-image: url(/img/slider/4-1080.jpg?v=34)
    }

    .slide5 {
        background-image: url(/img/slider/5-1080.jpg?v=34)
    }

    .slide6 {
        background-image: url(/img/slider/6-1080.jpg?v=34)
    }

    .slide7 {
        background-image: url(/img/slider/7-1080.jpg?v=34)
    }

    .slide8 {
        background-image: url(/img/slider/8-1080.jpg?v=34)
    }

    .slide9 {
        background-image: url(/img/slider/9-1080.jpg?v=34)
    }

    .slide10 {
        background-image: url(/img/slider/10-1080.jpg?v=34)
    }

    .altsayfahead {
        height: 260px
    }
}

@media(max-width: 950px) {
    .iletisimbesli > ul > li {
        width: calc((100% / 2) - 15px);
        height: 220px;
    }

        .iletisimbesli > ul > li:last-child .cizgi, .iletisimbesli > ul > li:nth-child(2n) .cizgi {
            display: none
        }

        /*  .iletisimbesli>ul>li:nth-child(4){margin-left:30px}*/
        .iletisimbesli > ul > li:last-child, .iletisimbesli > ul > li:nth-child(3) {
            margin-left: 0
        }

    .iletisimbesli {
        margin-top: 0
    }

    .yuvarlakbar, .tarzinibul, .ucgensag, .ucgen {
        display: none
    }

    .hometainitim > div {
        width: 100%;
        float: left
    }

    /*  .hometainitim>div>video{height: 465px;max-height: 465px;}*/
    .genelbaslik .yazi {
        width: 80%
    }

    .guncelhaberler > ul > li:last-child {
        display: none
    }

    .referansdetay .owl-carousel {
        height: auto;
        margin-bottom: 30px
    }

    .urunanarender {
        height: auto
    }
}

@media(max-width: 900px) {
    .head {
        display: none
    }

    .mobilhead {
        display: block;
    }

    .acilirmenu {
        display: none
    }

    .altsayfamenu {
        display: none
    }

    .swiper-slide.fabrika {
        width: calc((100% / 2) - 8px) !important;
    }

    .homebesli > ul > li {
        width: calc(100% / 2);
    }

    .urun-arama {
        margin-top: 20px
    }

    .urun-suzme {
        transition: all 0.8s ease-in-out;
        /* float: none !important; */
        width: 100%;
        height: 0;
        overflow: hidden;
        margin-top: 0px !important;
    }

    .medyadetay .solbar {
        display: none
    }

    .urun-detayli {
        display: block
    }

    .urun-liste > div:nth-child(2) {
        margin-left: 0
    }

    .urunsayfa, .kataloglar, .bizden-haberler, .medya-detayicerik {
        width: calc(100%);
        margin: 0
    }

        .kataloglar > div > ul {
            grid-template-columns: repeat(3, 1fr);
        }

        .medya-detayicerik > div:first-child > ul > li {
            display: table;
            width: 100%
        }

        .medya-detayicerik > div:first-child {
            max-height: inherit
        }

            .medya-detayicerik > div:first-child > ul > li:nth-child(2) {
                height: inherit !important
            }

                .medya-detayicerik > div:first-child > ul > li:nth-child(2) > div {
                    padding: 30px 0;
                    width: 100%
                }

            .medya-detayicerik > div:first-child > ul > li:first-child > img {
                width: 100%
            }

    .swiper-button-prev6 {
        top: calc(50% - 230px);
        left: 20px;
    }

    .swiper-button-next6 {
        top: calc(50% - 230px);
        right: 20px;
    }

    .swiper-slide.koleksiyon {
        width: calc((100% / 3) - 8px) !important;
    }

    .koleksiyonresim {
        height: 400px;
    }

        .koleksiyonresim > img {
            height: 100%;
            width: initial
        }

    .guncelhaberler > ul > li {
        width: 100%;
    }

    .sanalturuclu > div {
        width: 100% !important;
        height: 100% !important;
    }

    .sanalturuclu .homesosyal {
        height: 340px !important
    }

    .homesosyal > div:first-child > img, .homesosyal > div:first-child {
        width: 100%;
    }

    .fuarresim > img {
        height: 100%;
        width: initial;
    }

    .banyogrup > div {
        width: 100%;
        padding-right: 0 !important;
        margin-bottom: 15px;
    }

    .sanaltur {
        width: 100%;
        height: 100%;
        overflow: hidden
    }

    .banyogrup > div:first-child .durastone {
        height: 280px
    }

    #swiper-container4 {
        max-width: 815px
    }

    .banyogrup {
        overflow: hidden;
        display: block;
        margin-top: 15px;
    }

    .giris, .content > div {
        min-height: initial
    }

    .scroll-content {
        transform: translate3d(0px, 0px, 0px) !important;
    }

    .swiper-button-next {
        right: 0
    }

    .urunler > div > ul > li div:first-child > img {
        width: 100%
    }

    .link--arrowed:hover .arrow-icon--circle {
        stroke-dasharray: 95;
        stroke-dashoffset: 95;
    }

    .referansliste > ul > li {
        width: calc((100% / 2) - .8rem);
        float: left
    }

        .referansliste > ul > li:nth-child(2n) {
            padding-right: 0;
        }

        .referansliste > ul > li div:nth-child(2) {
            margin-bottom: 1.5rem;
        }

    .referansdetay > div > div:last-child ul {
        column-count: 2;
        -webkit-column-count: 2;
        -moz-column-count: 2;
    }

    .fabrikalarslider > div > div {
        width: calc((100% / 2) - 25px);
        min-height: initial
    }

        .fabrikalarslider > div > div:nth-child(2n) {
            margin-right: 0
        }

        .fabrikalarslider > div > div:nth-child(3) {
            margin-right: 50px
        }

    .banyogrup > div {
        display: block
    }

    .durastone {
        width: 100%;
        text-align: center;
        padding: 15px 0;
    }

        .durastone .headfont {
            margin: 20px auto 40px auto
        }

    .section-image img {
        width: auto;
        height: 100%
    }

    .footer > div > ul > li:first-child {
        width: inherit
    }

    .footer > div > ul > li {
        width: calc(100% / 3) !important;
        float: left;
        margin-bottom: 25px;
        min-height: 250px
    }

    .cerez > div > p {
        width: 75%
    }

    .tarihce-cizgi {
        display: none
    }

    .tarihceslider {
        margin-bottom: 0px
    }

        .tarihceslider > div, .tarihce .swiper-slide > div {
            width: 100% !important;
            float: none !important;
            display: table
        }

            .tarihceslider > div:last-child > div {
                width: 100%;
                margin-top: 25px
            }

    .tarihcehead.mbgizle {
        display: none
    }

    .swiper-button-prev7 {
        left: -25px
    }

    .swiper-button-next7 {
        right: 0px
    }

    .tarihceslider > div:last-child > div p {
        font-size: 18px;
        line-height: 23px
    }
}

@media(max-width: 700px) {
    .popupkampanya > .kampanyalar > div > div {
        width: 75%;
        margin-left: 8%;
    }

    .kataloglar > div > ul {
        grid-template-columns: repeat(2, 1fr);
    }

        .kataloglar > div > ul > li:nth-child(2n) {
            margin-right: 0
        }

    .medya-detayicerik > div:first-child > ul > li:nth-child(2) > div > h1 {
        line-height: 30px
    }

    .medya-detay-galeri > ul > li {
        width: calc((100% / 3) - 24px);
    }

    .swiper-slide.fabrika {
        width: calc((100%)) !important;
    }

    .altsayfahead > div:nth-child(2) {
        height: 100%;
    }

        .altsayfahead > div:nth-child(2) > div {
            vertical-align: middle;
        }

        .altsayfahead > div:nth-child(2) h2 {
            font-size: 20px
        }

        .altsayfahead > div:nth-child(2) p {
            font-size: 17px;
            margin-top: 20px
        }

    .homebesli > ul > li {
        width: calc(100%);
    }

    .fabrikalar .swiper-container {
        padding-bottom: 0
    }

    .swiper-slide.koleksiyon {
        width: calc((100% / 2) - 8px) !important
    }

    .koleksiyonresim {
        max-height: 300px
    }

    .banyogrup > div:first-child .durastone {
        width: 78%;
        height: 90%;
    }

    .firmaunvan > ul > li {
        width: calc(100% / 4);
        float: left;
        margin-bottom: 10px
    }

    .guncelhaberler {
        display: block
    }

        .guncelhaberler > ul {
            display: grid
        }

            .guncelhaberler > ul > li {
                width: 100%;
            }

    .hometainitim > div:last-child > div:nth-child(2) {
        top: calc(50% - 175px);
        left: 25px;
        width: 85%;
        text-align: center;
    }

    .genelbaslik .yazi {
        width: 100%;
        margin-top: 20px;
    }

    .swiper-slide.koleksiyon {
        width: 100% !important
    }

    .koleksiyonresim > img {
        width: initial;
        height: 100%;
    }

    .banyogrup > div:first-child .durastone {
        left: 5%;
        width: 90%;
        top: 5%;
    }

    .durastone > div {
        width: calc(100% - 60px);
        height: calc(100% - 60px);
        padding: 30px;
    }

        .durastone > div > div > p {
            font-size: 18px
        }

        .durastone > div > a {
            margin-top: 10px
        }

    .sirketlergrubu > div {
        padding: 30px 40px
    }

    .firmaunvan > ul > li {
        width: calc(100% / 2)
    }

    .haberyazi > h2 {
        font-size: 15px;
        line-height: 20px;
        font-weight: 600;
    }

    .swiper-slide.haber {
        width: 100%
    }

    /*   .hometainitim>div{height: 250px;}
   .hometainitim>div:first-child{height: 195px;}
   .hometainitim>div>video{height: 242px;max-height: 195px;}*/
    .koleksiyonlar .swiper-container, .durastone {
        padding: 0
    }

    .haberbulteni {
        margin-top: 15px
    }

    .banyogrup > div {
        margin-bottom: 0
    }

    .genelbaslik {
        margin: 30px 0
    }

    /*.sirketlergrubu>div, .sanalturuclu>div{margin-bottom: 16px;}*/
    .haberyazi > p {
        font-size: 11px;
        line-height: 15px;
    }

    /*.smooth-scroll #content-scroll, #showcase-holder-wrap,#showcase-tilt-wrap, #showcase-holder, .giris{height:350px!important}*/
    .swiper-pagination {
        display: none
    }

    .swiper-pagination {
        bottom: 20% !important;
        right: 20px !important;
    }

    .homesosyal .sosyal-icon {
        bottom: 35px
    }

    .haberresim {
        max-height: 200px;
        height: 200px;
    }

        .haberresim > img {
            width: initial;
            height: 240px;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            min-width: 100%;
        }

    .swiper-button-next4, .swiper-button-prev4 {
        top: calc(50% - 140px);
    }

    .urunler > div > ul > li {
        width: calc((100% / 2) - 0px)
    }

        .urunler > div > ul > li div:first-child > img {
            width: 100%
        }

    .sayfalama {
        display: flex
    }

        .sayfalama > div:first-child {
            margin: 0
        }

    .sayfailerigeri > div:last-child, .sayfailerigeri > div:first-child {
        top: 60px
    }

    .sayfailerigeri > div:first-child {
        left: 15px
    }

    .detay-seri, .detay-ebatlar {
        display: block;
        overflow: hidden
    }

        .detay-seri .seribaslik > h2 {
            font-size: 22px
        }

        .detay-seri .seribaslik, .detay-ebatlar {
            width: 100%;
            margin-left: 0
        }

    .udh-kart > h1 {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .udh-kart > p {
        width: 100%;
        margin-bottom: 15px
    }

    .udh-kart .dowland {
        height: 40px
    }

    .slider-icon {
        bottom: 13px;
        right: 40px;
    }

    .urun-ebatlari {
        margin-top: 50px;
        margin-left: 10px
    }

    .hometainitim > div:last-child > div h1 {
        font-size: 25px;
        letter-spacing: -1px;
        font-weight: 100;
    }

    .hometainitim > div:last-child > div h2 {
        font-size: 25px;
    }

    .hometainitim > div:last-child > div p {
        font-size: 19px;
        line-height: 24px;
        margin: 15px 0;
    }

    .genelbaslik > p {
        font-size: 25px;
        margin-bottom: 7px;
    }

    .hometainitim > div:last-child > div div {
        margin: 0 auto
    }

    .homevideoicerik > div > div:last-child {
        top: 15px
    }

    .swiper-button-prev {
        left: 5px
    }

    .homesosyal > div:nth-child(2) > div > h1, .fuaryazi > h1 {
        font-size: 25px
    }

    .homesosyal > div:nth-child(2) > div > h3 {
        font-size: 20px
    }

    .homesosyal > div:nth-child(2) > div > p {
        margin-top: 35px
    }

    .durastone > div > div > p {
        font-size: 19px;
        line-height: 24px;
    }

    .sirketlergrubu > div > h2 {
        font-weight: 100;
    }

    .sirketlergrubu > div > h1 {
        font-size: 28px;
    }

    .sirketlergrubu > div > p {
        font-size: 19px;
        line-height: 24px;
        margin-top: 20px;
    }

    .guncelhaberler > ul > li > div:first-child {
        padding: 50px 0 20px 0;
        width: 100%
    }

        .guncelhaberler > ul > li > div:first-child > h1 {
            font-size: 28px;
            line-height: 40px
        }

        .guncelhaberler > ul > li > div:first-child > p {
            font-size: 19px;
            line-height: 24px;
        }

    .haberyazi {
        margin: 0;
        width: 100%;
        margin: 20px 0 15px 0;
    }

    .haberlink {
        margin-top: 20px
    }

    .haberbulteni > div > div > p {
        font-size: 25px;
        line-height: 20px;
    }

    .haberbulteni > div > div > h1 {
        font-size: 28px
    }

    .akgunlogo > div > p {
        font-size: 17px;
    }

    .sanalturuclu > div:nth-child(2) {
        margin: 15px 0;
    }

    .referansdetay > div > div:last-child ul {
        column-count: 1;
        -webkit-column-count: 1;
        -moz-column-count: 1;
    }

    .bayiliste > ul li {
        width: calc((100%) - 44px);
    }

    .bayiliste, .satisbolum {
        display: block
    }

    .satisbolum {
        margin-top: 40px
    }

    .fabrikalarslider > div > div {
        width: calc((100%));
        margin-right: 0
    }

    .headsmall {
        font-size: 1.2em
    }

    .footer > div > ul > li {
        width: calc(100% / 2) !important;
        min-height: initial
    }

    .slideryazi > div:not(.grid__item) {
        /* display: none; */
        padding: 15px;
    }

    .swiper-pagination-1 {
        right: 25px;
        bottom: 25px
    }

    .headbig {
        font-size: 1.4rem
    }

    .homeblog > div:nth-child(2) > div p {
        font-size: 18px
    }

    .cerez > div > p {
        width: 100%;
        margin-bottom: 15px;
    }

        .cerez > div > p, .cerez > div > p a {
            font-size: 13px;
            line-height: 15px;
            text-align: center;
        }

    .cerez .cerezkapa {
        position: inherit;
        width: fit-content;
        margin: 0 auto;
    }

    .medyadetay {
        margin-top: 45px
    }

    .udh-kart .dowland > ul > li {
        display: table;
        width: 100% !important;
    }

        .udh-kart .dowland > ul > li:first-child {
            margin-bottom: 25px
        }

    .detay-sayfasi.ortala {
        display: inherit
    }

    .udh-kart .sosyal-icon, .dokumanyarat {
        margin: 0 auto
    }

        .dokumanyarat > div {
            display: block;
            margin-bottom: 10px
        }

    .urunhead > div > p {
        padding-left: 10px;
        line-height: 22px
    }

    .detay-ebatlar .ebatbaslik > ul > li:last-child > div > ul > li {
        min-width: 80px
    }

    .poppaylas > div {
        width: 100%;
        display: table;
    }

    .popbaslik > div {
        display: table;
        width: 100%;
        float: none !important
    }

        .popbaslik > div:first-child {
            margin-bottom: 20px
        }

    .popupbilgi > div > div > div {
        display: table;
        width: 100% !important;
    }

    .popanadiv > div:first-child img {
        width: 100%;
    }

    .popup .pop-slick-next p, .popup .pop-slick-prev p {
        display: none !important
    }

    .poppaylas .kendipdf {
        display: table;
        float: left
    }

    .popupbilgiler .sosyal-icon > ul > li:first-child {
        padding-left: 0
    }

    .popkapa {
        right: 25px;
        top: 25px
    }

    .popupbilgi > div > div > div, .pophead > div li {
        font-size: 13px !important
    }

    .icondiv .row {
        flex-wrap: wrap
    }

    .poppaylas .indirin {
        padding: 25px 0
    }

    .swiper-pagination-bulletspan > div {
        margin: 15px 0
    }

    .homesosyal .sosyal-icon > ul > li svg, .homesosyal .sosyal-icon > ul > li a {
        width: 13px;
        height: 13px
    }

    .homevideoicerik > div img {
        width: 100%
    }

    .blogsayfa > div > div {
        width: calc((100% / 2) - 8px);
    }

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

        .blogsayfa > div > div:nth-child(3n), .blogsayfa > div > div:nth-child(5n) {
            margin-right: 10px;
        }

    .blogdetay > div:first-child {
        height: 130px
    }

    .altsayfahead {
        height: 100px
    }

    .kurumsalicerik {
        padding-top: 30px;
    }

    .blogsayfa {
        margin-top: 0;
    }

    .altsayfahead > div:nth-child(2) h1 {
        font-size: 18px
    }

    .altsayfa.referanss {
        padding-top: 0
    }
}

/* ========== Kataloglar (tes.css) ========== */
.katalogresim {
    width: 175px;
    margin: 0 auto;
}

    .katalogresim > img {
        width: 100%
    }

.swiper-slide.katalog ul {
    display: table;
    width: calc(100% - 200px);
    height: 100%;
    margin: 0 auto;
}

    .swiper-slide.katalog ul li {
        display: table-cell;
        vertical-align: middle;
    }

        .swiper-slide.katalog ul li:first-child {
            width: 40%
        }

.katalogbaslik {
    display: table;
    width: 100%;
    margin: 35px 0 22px 0;
}

    .katalogbaslik > h1 {
        color: #fff;
        text-align: center;
        font-size: 16px;
        margin-bottom: 5px;
    }

    .katalogbaslik > h2 {
        color: #fff;
        font-size: 24px;
        text-align: center;
        font-family: 'DIN[T] Regular';
        font-weight: 100;
    }

.katalogresim {
    width: 75%;
    text-align: center;
}

    .katalogresim > img {
        width: 100%;
    }

.katalogyazi {
    display: table;
    width: 100%;
}

    .katalogyazi > h1 {
        color: #fff;
        font-size: 18px;
        font-family: 'bentonsansregular';
    }

.swiper-slide.katalog ul li span {
    color: #fff;
    margin-top: 15px;
    border: 1px solid #fff;
    display: table
}

.katalogmenubaslik {
    margin: 0px 0 10px 0;
    background: #f1f1f1;
    padding: 19px 13px;
}

    .katalogmenubaslik h1 {
        font-size: 16px;
    }

.kataloglar {
    width: 100%;
}



.katalogindir {
    display: block;
    width: calc(100% - 21px);
    margin: 0 auto;
    border: 1px solid #000;
    padding: 10px;
    color: #000;
    font-size: 14px;
}

    .katalogindir.homekatalog {
        background: none;
        margin-top: 10px;
        width: fit-content;
        border-color: #ffffff;
        color: #fff;
    }

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

        .katalogindir:hover i {
            color: #fff;
        }

    .katalogindir.homekatalog i {
        color: #fff
    }

    .katalogindir i {
        font-size: 15px;
        color: #000;
        padding-right: 5px;
    }

.kataloglar > div > ul > li .kataloggorsel {
    width: 100%;
    aspect-ratio: 1 / 1.4;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    flex: 0 0 auto;
}

    .kataloglar > div > ul > li .kataloggorsel > img {
        width: 100%;
        cursor: pointer;
        transition: .5s;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        position: relative;
    }

.kataloglar > div > ul > li .katalog-aciklama {
    margin: 17px 0 17px 13px;
    width: calc(100% - 26px);
    flex: 1 1 auto;
}



/* ========== /Kataloglar ========== */
/* ========== Medya ========== */
.urunhead {
    width: 100%;
    background: #F0F0F0;
    padding: 11px 0;
    margin-top: 36px;
}

    .urunhead > div > p {
        font-size: 14px;
        width: 100%;
        margin: 0 auto;
    }

        .urunhead > div > p a {
            font-family: 'DIN[T] Light'
        }

        .urunhead > div > p > span {
            font-family: 'bentonsansbold';
        }

.sayfalama {
    width: auto;
    display: table;
    position: relative;
    float: right;
    margin-top: 30px;
}

    .sayfalama > div:first-child {
        display: table;
        float: right;
        margin: 0 50px;
    }

        .sayfalama > div:first-child > ul {
            display: table-row
        }

            .sayfalama > div:first-child > ul .active a {
                font-family: 'bentonsansbold';
            }

            .sayfalama > div:first-child > ul > li {
                display: table-cell;
                vertical-align: middle;
                border: 1px solid #F0F0F0;
            }

                .sayfalama > div:first-child > ul > li:hover {
                    opacity: .7;
                }

                .sayfalama > div:first-child > ul > li > a {
                    text-align: center;
                    display: block;
                    font-size: 14px;
                    color: #777;
                    width: 20px;
                    height: 20px;
                    padding: 10px;
                    line-height: 20px;
                }

.sayfailerigeri .sayfayok {
    opacity: 0.5;
}

.sayfailerigeri > div {
    position: absolute;
}

    .sayfailerigeri > div:first-child {
        top: 17px;
    }

    .sayfailerigeri > div:last-child {
        right: 14px;
        top: 17px;
    }

.medyadetay {
    width: 100%;
    display: table;
}

    .medyadetay > div.ortala {
        width: 100%;
        display: flex;
        gap: 50px;
        flex-direction: column;
    }


    .medyadetay .solbar {
        float: left;
        width: 270px
    }

.solbar > ul .active {
    background: #262626
}

    .solbar > ul .active a {
        color: #fff;
    }

.solbar > ul > li {
    padding-left: 45px;
    border: 1px solid #F0F0F0;
    height: 45px;
}

    .solbar > ul > li > a {
        color: #262626;
        font-family: 'bentonsansbold';
        display: block;
        line-height: 45px;
    }

.bizden-haberler, .medya-detayicerik {
}

    .medya-detayicerik.blogdetay {
        width: 100%;
        margin: 0;
        float: none
    }

    .medya-detayicerik > div:first-child {
        width: 100%;
    }

        .medya-detayicerik > div:first-child > ul {
            display: table-row;
        }

            .medya-detayicerik > div:first-child > ul > li {
                display: table-cell;
                vertical-align: middle;
                width: calc(100% / 2);
                float: left;
            }

                .medya-detayicerik > div:first-child > ul > li:first-child {
                    overflow: hidden;
                    max-width: 770px;
                }

                    .medya-detayicerik > div:first-child > ul > li:first-child > img {
                        width: 100%;
                    }

                .medya-detayicerik > div:first-child > ul > li:nth-child(2) {
                }

                    .medya-detayicerik > div:first-child > ul > li:nth-child(2)::-webkit-scrollbar-track {
                        border-radius: 20px;
                        background-color: #F0F0F0;
                    }

                    .medya-detayicerik > div:first-child > ul > li:nth-child(2)::-webkit-scrollbar {
                        width: 4px;
                        background-color: #F0F0F0;
                    }

                    .medya-detayicerik > div:first-child > ul > li:nth-child(2)::-webkit-scrollbar-thumb {
                        border-radius: 20px;
                        background-color: #BFBFBF;
                    }

                    .medya-detayicerik > div:first-child > ul > li:nth-child(2) > div {
                        width: 85%;
                        margin: 0 auto;
                        padding-bottom: 30px;
                    }

                        .medya-detayicerik > div:first-child > ul > li:nth-child(2) > div > h1 {
                            font-family: 'DIN[T] Medium';
                            font-size: 23px;
                            line-height: 35px;
                            font-weight: 100;
                            margin-bottom: 20px;
                        }

                        .medya-detayicerik > div:first-child > ul > li:nth-child(2) > div > p {
                            font-size: 16px;
                            line-height: 23px;
                            margin-bottom: 10px;
                        }

.medya-detay-galeri {
    width: 100%;
    margin-top: 45px;
    padding-bottom: 25px;
    border-bottom: 1px solid #F0F0F0;
}

    .medya-detay-galeri > ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 30px;
        height: auto;
    }

        .medya-detay-galeri > ul > li {
            width: calc((100% / 5) - 24px);
            height: auto;
        }

            .medya-detay-galeri > ul > li a {
                display: block;
                height: auto;
            }

            .medya-detay-galeri > ul > li > a > img {
                width: 100%
            }

.medya-geri {
    width: 165px;
    height: 50px;
    float: right;
    border: 2px solid #262626;
    margin-top: 35px
}

    .medya-geri > a {
        color: #000;
        display: block;
        text-align: center;
        line-height: 50px
    }

.bizden-haberler {
    width: 100%;
    float: none;
    margin: 0;
}

    .bizden-haberler > div {
        width: 100%;
    }

        .bizden-haberler > div > ul {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin: 0;
        }

            .bizden-haberler > div > ul > li {
                width: auto;
                margin: 0;
                display: flex;
                flex-direction: column;
                background: #fff;
                border: 1px solid #eee;
                border-radius: 4px;
                overflow: hidden;
                transition: all 0.3s ease-in-out;
            }

                .bizden-haberler > div > ul > li:hover {
                    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.10);
                    transform: translateY(-3px);
                    transition: all 0.3s ease-in-out;
                }

                .bizden-haberler > div > ul > li > a {
                    display: flex;
                    flex-direction: column;
                    flex: 1 1 auto;
                }

                .bizden-haberler > div > ul > li > div {
                    display: flex;
                    flex-direction: column;
                    flex: 1 1 auto;
                }

                .bizden-haberler > div > ul > li .medyagorsel {
                    width: 100%;
                    aspect-ratio: 4 / 3;
                    overflow: hidden;
                    flex: 0 0 auto;
                    background: #F5F5F5;
                }

                    .bizden-haberler > div > ul > li .medyagorsel > img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform 0.4s ease;
                    }

                .bizden-haberler > div > ul > li:hover .medyagorsel > img {
                    transform: scale(1.05);
                }

                .bizden-haberler > div > ul > li .medya-aciklama {
                    margin: 0;
                    width: 100%;
                    padding: 18px 20px 22px;
                    flex: 1 1 auto;
                }

                    .bizden-haberler > div > ul > li .medya-aciklama > h2 {
                        font-size: 16px;
                        font-weight: 600;
                        line-height: 22px;
                        letter-spacing: 0;
                        margin-bottom: 10px;
                        color: #1a1a1a;
                    }

                    .bizden-haberler > div > ul > li .medya-aciklama > p {
                        font-size: 14px;
                        line-height: 21px;
                        color: #6b6b6b;
                    }

@media(max-width: 1100px) {
    .bizden-haberler > div > ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 600px) {
    .bizden-haberler > div > ul {
        grid-template-columns: 1fr;
    }
}

/* Reklamlar sayfasi: youtube oynat ikonu + video modal */
.medyagorsel-video {
    position: relative;
}

    .medyagorsel-video .reklam-oynat-ikon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.92;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

.bizden-haberler > div > ul > li:hover .reklam-oynat-ikon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}

.reklam-video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .reklam-video-modal.acik {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.reklam-video-modal-arkaplan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
}

.reklam-video-modal-icerik {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}

.reklam-video-modal-kapat {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.reklam-video-modal-oynatici {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

    .reklam-video-modal-oynatici > iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

@media(max-width: 700px) {
    .reklam-video-modal-icerik {
        width: 96%;
    }

    .reklam-video-modal-kapat {
        top: -38px;
        font-size: 28px;
    }
}

/* ========== /Medya ========== */
/* ========== Blog (tes.css) ========== */
.swiper-button-prev8 {
    position: absolute;
    bottom: 10px;
    right: 85px;
    z-index: 2;
}

.swiper-button-next8 {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 2;
}

.homeblog {
}

    .homeblog > div:first-child {
        height: 100%;
        display: table;
        width: 100%;
    }

        .homeblog > div:first-child img {
            height: 100%;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            width: 100%;
        }

    .homeblog > div:nth-child(2) {
        width: 80%;
        height: 80%;
        left: 10%;
        top: 10%;
        position: absolute;
        background: #262626;
    }

        .homeblog > div:nth-child(2) > div {
            height: 100%;
            text-align: center;
            display: table;
            width: 90%;
            margin: 0 auto;
        }

            .homeblog > div:nth-child(2) > div > div {
                display: table-cell;
                vertical-align: middle;
            }

            .homeblog > div:nth-child(2) > div h1 {
                font-size: 41px;
                color: #fff;
                font-family: "Blacksword";
                letter-spacing: 4px;
            }

            .homeblog > div:nth-child(2) > div p {
                font-size: 20px;
                line-height: 25px;
                color: #fff;
                margin: 25px 0;
            }

.button.blogbuton {
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 20px;
    font-size: 18px;
}

    .button.blogbuton:hover {
        border-color: #fff
    }

.blogtumunugor {
    display: table !important;
    width: 100% !important;
    float: none !important;
    text-align: right;
    margin: 0 !important;
    margin-bottom: 30px !important;
}

    .blogtumunugor > div {
        display: table;
        float: right !important;
        width: auto !important;
        margin: 0 !important;
    }

    .blogtumunugor a.button {
        color: #000;
        display: block;
        border: 1px solid #000;
        padding: 10px;
        text-decoration: none;
    }

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

.blogsayfa {
    display: table;
    width: 100%;
    margin-top: 50px
}

    .blogsayfa > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .blogsayfa > div > div {
            width: calc((100% / 5) - 8px);
            float: left;
            margin-right: 10px;
            margin-bottom: 50px;
        }

            .blogsayfa > div > div:nth-child(5n) {
                margin-right: 0
            }

            .blogsayfa > div > div .bloggorsel {
                width: 100%;
                overflow: hidden;
                position: relative
            }

.detaytarih {
    margin: 15px 0
}

    .detaytarih p {
        font-size: 22px
    }

.blogtarih {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 5px 10px;
}

.blogsayfa > div > div .bloggorsel > img {
    width: 100%;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.blogsayfa > div > div:hover .bloggorsel > img {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.blogsayfa > div > div .blogyazi {
    margin-top: 25px;
}

    .blogsayfa > div > div .blogyazi > h1 {
        font-size: 16px;
        font-weight: 100;
        line-height: 23px;
        margin-bottom: 7px;
    }

    .blogsayfa > div > div .blogyazi > p {
        font-size: 13px;
        line-height: 19px;
    }

.blogkategori {
    display: table;
    width: 100%;
    margin-bottom: 30px;
    font-size: 20px
}

.blogsayfa .katalogmenubaslik {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 20px;
    border: 0
}

.blogsayfa .blogtumunugor {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    float: none;
    margin-right: 0;
    border: 0
}

.blogdetay {
    width: 100%;
    margin-top: 20px
}

    .blogdetay > div:first-child {
        overflow: hidden;
        position: relative;
        max-height: 400px
    }

        .blogdetay > div:first-child img {
            width: 100%;
            position: relative;
        }

    .blogdetay > div h1 {
        font-size: 20px;
        line-height: 25px;
        margin: 20px 0
    }

    .blogdetay > div p {
        font-size: 15px;
        line-height: 25px;
    }

.blogresim {
    width: 100%;
}

    .blogresim img {
        width: 100%;
        display: block;
    }

.blogsosyalmedya {
    width: 150px;
    display: table;
    margin-top: 25px
}

    .blogsosyalmedya > ul {
        display: table-row;
    }

        .blogsosyalmedya > ul > li {
            display: table-cell;
            vertical-align: bottom;
            opacity: 1;
            padding: 0 5px;
        }

            .blogsosyalmedya > ul > li:last-child {
                vertical-align: middle
            }

            .blogsosyalmedya > ul > li:hover a {
                border-color: #ed2025;
            }

            .blogsosyalmedya > ul > li:hover svg {
                fill: #ed2025;
            }

            .blogsosyalmedya > ul > li svg {
                width: 15px;
                height: 15px;
            }

            .blogsosyalmedya > ul > li a {
                display: block;
                border: 2px solid #000;
                border-radius: 36px;
                padding: 10px;
                transition: all 0.2s ease-in-out;
                text-align: center;
            }

                .blogsosyalmedya > ul > li a, .blogsosyalmedya > ul > li a svg {
                    width: 13px;
                    height: 13px;
                }

@media(max-width: 1200px) {
    .blogsayfa > div > div {
        width: calc((100% / 4) - 8px);
    }

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

        .blogsayfa > div > div:nth-child(5n) {
            margin-right: 10px;
        }
}

@media(max-width: 900px) {
    .blogsayfa > div > div {
        width: calc((100% / 3) - 8px);
    }

        .blogsayfa > div > div:nth-child(3n) {
            margin-right: 0;
        }

        .blogsayfa > div > div:nth-child(4n), .blogsayfa > div > div:nth-child(5n) {
            margin-right: 10px;
        }
}

@media(max-width: 600px) {
    .blogsayfa > div > div {
        width: calc((100% / 2) - 8px);
    }

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

        .blogsayfa > div > div:nth-child(3n), .blogsayfa > div > div:nth-child(5n) {
            margin-right: 10px;
        }

    .blogdetay > div:first-child {
        height: 130px;
        max-height: 130px
    }

    .blogsayfa {
        margin-top: 0;
    }

    .homeblog > div:nth-child(2) > div p {
        font-size: 18px
    }
}

/* ========== /Blog ========== */
/* ========== /Kurumsal ========== */
/* ========== Urunler (from urunler.css) ========== */
/* Urunler listing pages icin extracted from tes.css */
.altsayfa {
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 40px;
}

/* Breadcrumb: her .altsayfa'nin en basinda gorunur, tum alt sayfalarda ortak */
.breadcrumb_wrap {
    width: 100%;
    padding: 18px 0;
    font-family: 'DIN[T] Light', sans-serif;
}

.breadcrumb_ic {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

.breadcrumb_liste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-content: center;
}

    .breadcrumb_liste li {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
        padding: 5px 0;
    }

.breadcrumb_item a {
    font-size: 11px;
    letter-spacing: 0;
    text-underline-offset: 3px;
    transition: .3s ease-out;
    color: #000;
}

    .breadcrumb_item a:hover {
        color: #161718;
    }

.breadcrumb_ayrac {
    color: #000;
}

    .breadcrumb_ayrac svg {
        width: 12px;
        height: 12px;
    }

.breadcrumb_item span, .breadcrumb_aktif span {
    color: #000;
    font-size: 11px;
    letter-spacing: 0;
}





/* Urun detay sayfasi - sag altta sabit (fixed) mini aksiyon menusu:
   Favori, Evinde Gor, Paylas, PDF. Sayfa herhangi bir yerine kaydirilsa da
   her zaman erisilebilir kalir. */
.udh-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.udh-fab_btn {
    appearance: none;
    border: 1px solid #e2e2e2;
    background: #fff;
    width: 46px;
    height: 46px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    transition: border-color .18s ease, background .18s ease, transform .15s ease, box-shadow .18s ease;
    position: relative;
}

    .udh-fab_btn svg {
        width: 19px;
        height: 19px;
    }

    .udh-fab_btn:hover {
        border-color: #1a1a1a;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,.16);
    }

    /* Evinde Gor (Roomvo) ve PDF butonlari .udh-fab_btn'in icini tam kaplayip ortalar */
    .udh-fab_btn.zemineuygula #someSection, .udh-fab_btn.zemineuygula .roomvo-container, .udh-fab_btn.pdfanadiv {
        width: 100%;
        height: 100%;
    }

        .udh-fab_btn.zemineuygula .roomvo-stimr, .udh-fab_btn.pdfanadiv .pdfyarat {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            border: 0;
            background: none;
            color: inherit;
            cursor: pointer;
        }

            .udh-fab_btn.zemineuygula .roomvo-stimr svg, .udh-fab_btn.pdfanadiv .pdfyarat svg {
                width: 19px;
                height: 19px;
            }

.udh-fab_sepet.udh-fab_sepet--eklendi {
    background: #2e9e5b;
    border-color: #2e9e5b;
    color: #fff;
    transform: scale(1.08);
}

/* Ikon uzerinde hover'da beliren etiket (sadece genis ekranlarda) */
.udh-fab_btn .udh-fab_etiket {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.udh-fab_btn:hover .udh-fab_etiket {
    opacity: 1;
}

.udh-fab_paylas {
    position: relative;
}

.udh-fab_paylas_liste {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.udh-fab_paylas.udh-fab_paylas--acik .udh-fab_paylas_liste {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.udh-fab_paylas_liste li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #555;
    transition: background .15s ease, color .15s ease;
}

    .udh-fab_paylas_liste li a:hover {
        background: #f4f4f4;
        color: #1a1a1a;
    }

    .udh-fab_paylas_liste li a svg {
        width: 16px;
        height: 16px;
    }

@media (max-width: 700px) {
    .udh-fab {
        right: 14px;
        bottom: 14px;
        gap: 8px;
    }

    .udh-fab_btn {
        width: 42px;
        height: 42px;
    }

        .udh-fab_btn .udh-fab_etiket {
            display: none;
        }

    .udh-fab_paylas_liste {
        right: calc(100% + 8px);
    }
}

@media (max-width: 700px) {
    .breadcrumb_wrap {
        padding: 14px 0;
    }

    .breadcrumb_item a, .breadcrumb_aktif span {
        font-size: 11.5px;
    }
}

.ortala {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    display: table;
}

.icortala {
    max-width: 1300px;
    margin: 0 auto;
}

    .icortala .urunsayfa {
        width: 100%;
    }

.urun-liste.icortala {
    max-width: 1600px;
}

.urun-liste {
    display: table;
    width: 100%;
    height: 100%;
}

    .urun-liste > div {
        margin-top: 0;
    }

        /*.urun-liste>div:first-child{float:left;}*/
        .urun-liste > div:nth-child(2) {
            margin-left: 25px;
            float: left;
        }

/* Filtre paneli solda, urunler sagda */
.gfp-satir {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-top: 30px;
}

.gfp-panel {
    flex: 0 0 300px;
    background: #f7f5f4;
    padding: 25px;
    overflow: hidden;
    opacity: 1;
    transition: flex-basis .35s ease, width .35s ease, opacity .25s ease, padding .35s ease, margin .35s ease;
}

    .gfp-panel.gfp-panel-kapali {
        flex: 0 0 0%;
        width: 0%;
        opacity: 0;
        padding: 25px 0;
        margin-right: -32px;
        pointer-events: none;
    }

.gfp-icerik {
    flex: 1;
    min-width: 0;
    width: 75%;
    transition: width .35s ease;
}

    .gfp-icerik.gfp-icerik-genis {
        width: 100%;
    }

.urunsayfa {
    width: calc(100% - 295px);
    height: 100%;
    border-bottom: 1px solid #F0F0F0;
}

.urunanarender {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 400px;
}

    .urunanarender img {
        width: 100%;
    }

    .urunanarender .hero-content {
        bottom: 0;
        top: 0;
        height: 100%;
        justify-content: center;
        padding: 0;
    }

    .urunanarender .hero-title {
        font-size: 56px;
    }

.urunler {
    width: 100%;
    height: 100%;
}

    .urunler > div {
        width: 100%;
        height: 100%;
    }

        .urunler > div > ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 40px;
            width: 100%
        }

            .urunler > div > ul > li {
                display: inline-table;
                vertical-align: top;
                width: calc((100% / 3) - 30px);
                float: left;
                position: relative;
                transition: box-shadow 0.3s ease, transform 0.3s ease;
                height: auto;
            }

                .urunler > div > ul > li .hover {
                    position: relative;
                    width: 100%;
                    height: auto;
                    background: #fff;
                    border-radius: 0;
                    overflow: hidden;
                }

                    .urunler > div > ul > li .hover > div {
                        border: none;
                        width: 100%;
                    }

                .urunler > div > ul > li:hover .hover {
                    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
                    /* transform: translateY(-3px); */
                }

                .urunler > div > ul > li a {
                    display: block;
                    height: 100%;
                }

                .urunler > div > ul > li div:first-child > img {
                    width: 100%;
                    height: 100%;
                    -o-object-fit: cover;
                    object-fit: cover;
                    position: relative;
                    transition: transform 0.4s ease;
                }

                .urunler > div > ul > li:hover div:first-child > img {
                    transform: scale(1.04);
                }

                .urunler > div > ul > li .urun-aciklama {
                    margin-left: 0;
                    padding: 14px 16px 16px;
                }

                .urunler > div > ul > li h2 {
                    margin-top: 0;
                    margin-bottom: 10px;
                    font-size: 16px;
                    line-height: 22px;
                    font-weight: 500;
                    letter-spacing: .2px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .urunler > div > ul > li .urun-meta {
                    margin: -6px 0 10px;
                    font-size: 12.5px;
                    line-height: 16px;
                    color: #8a8a8a;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: none;
                }

                .urunler > div > ul > li:nth-child(3n) {
                    margin-right: 0;
                }

            .urunler > div > ul#searchResultsGrid {
                gap: 30px;
                padding: 0 0 65px 0;
            }

                .urunler > div > ul#searchResultsGrid > li {
                    width: calc((100% / 6) - 30px);
                }

                    .urunler > div > ul#searchResultsGrid > li h2 {
                        font-size: 13px;
                    }

                    .urunler > div > ul#searchResultsGrid > li .urun-renk > ul {
                        gap: 2px;
                    }

                    .urunler > div > ul#searchResultsGrid > li .urun-renk > ul {
                        gap: 2px;
                    }

                        .urunler > div > ul#searchResultsGrid > li .urun-renk > ul > li {
                            width: 15px;
                            height: 15px;
                        }

.urunliste-resim {
    overflow: hidden;
    text-align: center;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    position: relative;
}

.urunliste-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.urunliste-slayt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
}

    .urunliste-slayt.aktif {
        opacity: 1;
        visibility: visible;
    }

    .urunliste-slayt img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.urunliste-ok {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .85);
    border: none;
    border-radius: 50%;
    color: #161718;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease;
}

.urunliste-resim:hover .urunliste-ok {
    opacity: 1;
}

.urunliste-ok:hover {
    background: #fff;
}

.urunliste-ok svg {
    width: 16px;
    height: 16px;
}

.urunliste-ok-sol {
    left: 8px;
}

.urunliste-ok-sag {
    right: 8px;
}

.urunler > div > ul > li .urun-acilir {
    height: auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent;
    left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.urunler > div > ul > li .urun-renk {
    width: 100%;
    overflow: hidden;
}

    /* Renk sayisi coksa (kullanicinin sikayeti: "genişlik patlıyor") ARTIK
       scroll'a birakilmaz — flex-wrap:wrap ile alt satira gecer, kartin
       genisligini asan/tasan chip'ler overflow:hidden (ustteki .urun-renk)
       ile GORUNMEZ olur (kullanicinin istedigi: "alana sığmayanları gizle").
       max-height ile de en fazla 2 satir kadar yer kaplar. */
    .urunler > div > ul > li .urun-renk > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        max-height: 56px;
        overflow: hidden;
    }

        .urunler > div > ul > li .urun-renk > ul > li {
            position: relative;
            flex: 0 0 auto;
            width: 24px;
            height: 24px;
            box-sizing: border-box;
            text-align: center;
            border-radius: 50%;
            border: 1px solid #eee;
        }

            .urunler > div > ul > li .urun-renk > ul > li.aktif::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 50%;
                box-shadow: inset 0 0 0 1px #ccc;
                pointer-events: none;
            }

            .urunler > div > ul > li .urun-renk > ul > li > img {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
            }

            .urunler > div > ul > li .urun-renk > ul > li.aktif > img {
                top: 4px;
                left: 4px;
                width: calc(100% - 8px);
                height: calc(100% - 8px);
            }

.urun-ebat {
    width: 100%;
    overflow: hidden;
}

    .urun-ebat > ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

        .urun-ebat > ul::-webkit-scrollbar {
            height: 4px;
        }

        .urun-ebat > ul::-webkit-scrollbar-thumb {
            background: #e2e2e2;
            border-radius: 4px;
        }

        .urun-ebat > ul > li {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            border: 1px solid #EEE;
            background: #FAFAFA;
            border-radius: 20px;
            padding: 5px 12px;
            margin-right: 0;
            float: none;
            transition: all 0.25s ease;
            margin-bottom: 0;
            white-space: nowrap;
        }

            .urun-ebat > ul > li:hover {
                border-color: #161718;
                background: #161718;
            }

                .urun-ebat > ul > li:hover > p {
                    color: #fff;
                }

            .urun-ebat > ul > li > p {
                text-align: center;
                font-size: 12px;
                white-space: nowrap;
                transition: color 0.25s ease;
            }

.sayfalama {
    width: auto;
    display: table;
    position: relative;
    float: right;
    margin-top: 30px;
}

    .sayfalama > div:first-child {
        display: table;
        float: right;
        margin: 0 50px;
    }

        .sayfalama > div:first-child > ul {
            display: table-row;
        }

            .sayfalama > div:first-child > ul .active a {
                font-family: 'bentonsansbold';
            }

            .sayfalama > div:first-child > ul > li {
                display: table-cell;
                vertical-align: middle;
                border: 1px solid #F0F0F0;
            }

                .sayfalama > div:first-child > ul > li:hover {
                    opacity: .7;
                }

                .sayfalama > div:first-child > ul > li > a {
                    text-align: center;
                    display: block;
                    font-size: 14px;
                    color: #777;
                    width: 20px;
                    height: 20px;
                    padding: 10px;
                    line-height: 20px;
                }

.sayfailerigeri {
}

    .sayfailerigeri .sayfayok {
        opacity: 0.5;
    }

    .sayfailerigeri > div {
        position: absolute;
    }

        .sayfailerigeri > div > img {
        }

        .sayfailerigeri > div:first-child {
            top: 17px;
        }

        .sayfailerigeri > div:last-child {
            right: 14px;
            top: 17px;
        }

.aramabos {
    display: table;
    height: 100%;
    width: 100%;
}

    .aramabos > div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

        .aramabos > div > div {
        }

            .aramabos > div > div > img {
                width: 100px;
            }

.aramabos-svg {
    width: 90px;
    height: 90px;
    color: #cbc7c5;
}

.aramabos > div p {
    margin: 0 auto;
}

/* ================================================================
   Urun filtre paneli (sol sidebar, accordion) - Urunler sayfasina ozel,
   kendine ait "gfp-" (Graniser Filtre Paneli) sinif setiyle yazilmistir;
   baska hicbir sayfayla sinif paylasmaz, cakisma riski yoktur.
   ================================================================ */
.gfp-satir, .gfp-alt-butonlar {
    font-family: 'DIN[T] Light', sans-serif;
}

.gfp-baslik, .gfp-daha-fazla, .gfp-temizle, .gfp-kapat, .gfp-ac, .gfp-sirala-kutu span, .gfp-sirala-secenek.gfp-sirala-secili {
    font-family: 'DIN[T] Medium', sans-serif;
}

.gfp-sirala-baslik {
    color: #8a8a8a;
    font-weight: 400;
    font-size: 12px;
}

.gfp-sirala-secim {
    color: #161718;
    font-weight: 600;
    font-size: 12px;
}

.gfp-panel form {
    width: 100%;
}

.gfp-ac {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 260px;
    width: 260px;
    height: 46px;
    background: #161718;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .gfp-ac svg {
        width: 16px;
        height: 16px;
    }

    .gfp-ac:hover {
        background: #ff2d16;
    }

.gfp-grup {
    border-bottom: 1px solid #EDEDED;
}

    .gfp-grup:last-child {
        border-bottom: none;
    }

.gfp-baslik {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 18px 22px 18px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1px;
    color: #161718;
}

    .gfp-baslik span {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .1px;
        color: #000;
    }

.gfp-ok {
    position: absolute;
    right: 2px;
    top: 50%;
    width: 11px;
    height: 11px;
    color: #161718;
    opacity: .55;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.gfp-grup.gfp-kapali .gfp-ok {
    transform: translateY(-50%) rotate(-90deg);
}

.gfp-liste {
    display: block;
    width: 100%;
    /* max-height: 240px; */
    /* overflow-y: auto; */
    margin: 0;
    padding: 0 0 18px 0;
    list-style: none;
}

.gfp-grup.gfp-kapali .gfp-liste {
    display: none;
}

.gfp-liste::-webkit-scrollbar {
    width: 5px;
}

.gfp-liste::-webkit-scrollbar-track {
    background: transparent;
}

.gfp-liste::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

.gfp-liste > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    line-height: 1.2;
    font-size: 13px;
}

    .gfp-liste > li.gfp-fazla {
        display: none;
    }

    .gfp-liste > li label {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
        color: #4a4a4a;
        font-size: 13px;
        cursor: pointer;
        transition: color .15s ease;
    }

    .gfp-liste > li:hover label {
        color: #161718;
    }

.gfp-etiket {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.gfp-sayi {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

/* Modern checkbox: native input tamamen gizlenir, gorseli .gfp-kutu (div) uzerinden cizilir */
.gfp-liste > li input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gfp-kutu {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid #000;
    border-radius: 4px;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease;
}

.gfp-liste > li:hover .gfp-kutu {
    border-color: #161718;
}

.gfp-liste > li input[type="checkbox"]:checked ~ .gfp-kutu, .gfp-liste > li input[type="checkbox"]:checked + .gfp-kutu {
    background-color: #161718;
    border-color: #161718;
}

    .gfp-liste > li input[type="checkbox"]:checked ~ .gfp-kutu::after, .gfp-liste > li input[type="checkbox"]:checked + .gfp-kutu::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 1px;
        width: 4px;
        height: 8px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

.gfp-liste > li input[type="checkbox"]:focus-visible ~ .gfp-kutu, .gfp-liste > li input[type="checkbox"]:focus-visible + .gfp-kutu {
    outline: 2px solid #161718;
    outline-offset: 2px;
}

.gfp-daha-fazla {
    display: block;
    background: none;
    border: none;
    padding: 4px 0 12px 26px;
    color: #161718;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

    .gfp-daha-fazla:hover {
        color: #ff2d16;
    }

.gfp-grup.gfp-kapali .gfp-daha-fazla {
    display: none;
}

.gfp-alt-sol {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.gfp-icerik-ust {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-bottom: 24px;
}

.gfp-alt-orta {
    flex: 1;
    min-width: 0;
}

.gfp-alt-sag {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.gfp-temizle, .gfp-kapat {
    flex: 1;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.gfp-temizle {
    background: transparent;
    border: 1.5px solid #d5d5d5;
    color: #161718;
}

    .gfp-temizle:hover {
        border-color: #161718;
    }

.gfp-kapat {
    background: #161718;
    border: 1.5px solid #161718;
    color: #fff;
}

    .gfp-kapat:hover {
        background: #ff2d16;
        border-color: #ff2d16;
    }

.gfp-arama-kutu {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 420px;
}

    .gfp-arama-kutu svg {
        position: absolute;
        left: 14px;
        width: 16px;
        height: 16px;
        color: #b3b3b3;
        pointer-events: none;
    }

    .gfp-arama-kutu input {
        width: 100%;
        height: 44px;
        padding: 0 16px 0 40px;
        border: 1.5px solid #e5e5e5;
        border-radius: 999px;
        font-size: 13px;
        color: #161718;
        transition: border-color .2s ease;
    }

        .gfp-arama-kutu input:focus {
            outline: none;
            border-color: #161718;
        }

/* Gorunum toggle: liste (varsayilan) / tablo */
.gfp-gorunum {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: #f5f5f5;
    border-radius: 999px;
}

.gfp-gorunum-buton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: #8a8a8a;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

    .gfp-gorunum-buton svg {
        width: 16px;
        height: 16px;
    }

    .gfp-gorunum-buton:hover {
        color: #161718;
    }

    .gfp-gorunum-buton.gfp-gorunum-secili {
        background: #161718;
        color: #fff;
    }

/* Tablo gorunumu: ayri bir <table> degil, ayni .urunler > div > ul > li kartlarini
   CSS ile satir duzenine cevirir (tek veri kaynagi, tek DOM, her seri = 1 satir). */
.urunler.gfp-gorunum-tablo > div > ul {
    display: block;
    border: 1px solid #ededed;
    border-radius: 6px;
    overflow: hidden;
}

    .urunler.gfp-gorunum-tablo > div > ul > li {
        display: flex;
        align-items: center;
        width: 100%;
        float: none;
        margin: 0;
        padding: 14px 16px;
        border-bottom: 1px solid #ededed;
        background: #fff;
    }

        .urunler.gfp-gorunum-tablo > div > ul > li:last-child {
            border-bottom: none;
        }

        .urunler.gfp-gorunum-tablo > div > ul > li:hover {
            background: #fafafa;
        }

        .urunler.gfp-gorunum-tablo > div > ul > li .hover {
            display: flex;
            align-items: center;
            width: 100%;
            box-shadow: none !important;
        }

            .urunler.gfp-gorunum-tablo > div > ul > li .hover > div {
                display: flex;
                align-items: center;
                width: 100%;
            }

                .urunler.gfp-gorunum-tablo > div > ul > li .hover > div > a {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    gap: 16px;
                }

.urunler.gfp-gorunum-tablo .urunliste-resim {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    aspect-ratio: unset;
    border-radius: 6px;
}

.urunler.gfp-gorunum-tablo .urunliste-ok {
    display: none;
}

/* .urun-aciklama ve .urun-acilir sadece sarmalayici katmanlardi (liste gorunumunde
   dikey stack icin); tablo gorunumunde "display:contents" ile bu katmanlari gorunmez
   yapip icindeki h2/urun-ebat'i dogrudan .a'nin flex satirina katiyoruz. */
.urunler.gfp-gorunum-tablo .urun-aciklama, .urunler.gfp-gorunum-tablo .urun-acilir {
    display: contents;
}

    .urunler.gfp-gorunum-tablo .urun-aciklama h2 {
        flex: 0 0 200px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        color: #000;
    }

.urunler.gfp-gorunum-tablo .urun-meta {
    display: none;
}

/* Genel (seri-geneli, ilk ebada gore) renk sutunu tablo gorusumunde kullanilmaz -
   renkler artik ebat bazinda .gfp-tablo-ebat-renkler icinde gosterilir, cunku her
   ebadin sahip oldugu renkler farkli olabilir (Seri_Varyant override mekanizmasi). */
.urunler.gfp-gorunum-tablo .urun-renk {
    display: none;
}

.urunler.gfp-gorunum-tablo .urun-ebat {
    flex: 1;
    min-width: 0;
}

    .urunler.gfp-gorunum-tablo .urun-ebat > ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: visible;
    }

        .urunler.gfp-gorunum-tablo .urun-ebat > ul > li {
            display: flex;
            align-items: center;
            gap: 16px;
            width: auto;
            height: auto;
            padding: 0;
            background: transparent;
            padding: 6px 0;
        }

            .urunler.gfp-gorunum-tablo .urun-ebat > ul > li p {
                flex: 0 0 90px;
                min-width: 0;
                margin: 0;
                font-weight: 600;
                color: #161718;
                white-space: normal;
            }

.gfp-tablo-ebat-renkler, .gfp-tablo-ebat-doku, .gfp-tablo-ebat-kullanim {
    display: none;
    color: #000;
    font-size: 11px;
}

.urunler.gfp-gorunum-tablo .gfp-tablo-ebat-renkler {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 200px;
    flex-wrap: wrap;
}

    .urunler.gfp-gorunum-tablo .gfp-tablo-ebat-renkler img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid #ededed;
    }

.urunler.gfp-gorunum-tablo .gfp-tablo-ebat-doku {
    display: block;
    flex: 0 0 140px;
}

.urunler.gfp-gorunum-tablo .gfp-tablo-ebat-kullanim {
    display: block;
    flex: 0 0 180px;
}

/* Siralama: native <select> yerine div tabanli custom dropdown, minimal (linke yakin) gorunum */
.gfp-sirala {
    position: relative;
    min-width: 150px;
}

.gfp-sirala-kutu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 32px;
    padding: 0 2px;
    border: none;
    border-bottom: 1.5px solid transparent;
    border-radius: 0;
    font-size: 12.5px;
    color: #6b6b6b;
    background: transparent;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
    border-bottom-color: #161718;
}

    .gfp-sirala-kutu svg {
        width: 12px;
        height: 12px;
        flex: 0 0 auto;
        transition: transform .2s ease;
    }

.gfp-sirala:hover .gfp-sirala-kutu, .gfp-sirala.gfp-sirala-acik .gfp-sirala-kutu {
    /* border-bottom-color: #161718; */
    color: #161718;
}

    .gfp-sirala.gfp-sirala-acik .gfp-sirala-kutu svg {
        transform: rotate(180deg);
    }

.gfp-sirala-liste {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    overflow: hidden;
    z-index: 20;
}

.gfp-sirala.gfp-sirala-acik .gfp-sirala-liste {
    display: block;
}

.gfp-sirala-secenek {
    padding: 11px 16px;
    font-size: 13px;
    color: #4a4a4a;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .gfp-sirala-secenek:hover {
        background: #f7f7f7;
        color: #161718;
    }

    .gfp-sirala-secenek.gfp-sirala-secili {
        color: #161718;
        font-weight: 600;
    }

.urunler a {
    text-decoration: none;
    color: inherit;
}

.pagination-container {
    display: flex;
    justify-content: center;
}

.pagination {
    margin: 20px 0;
    gap: 16px;
    display: flex;
}

    .pagination > li {
        width: 40px;
        height: 40px;
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

        .pagination > li > a, .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.4;
            /* color: #777; */
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            font-weight: 600;
        }

    .pagination > .active > a, .pagination > .active > span {
        z-index: 2;
        /* color: #000; */
        cursor: default;
        /* background-color: #f5f5f5; */
        border: 1px solid #F0F0F0;
        border-radius: 500%;
        width: 100%;
        height: 100%;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

.satisnoktalari {
}

    .satisnoktalari > div {
        width: calc((100% / 3) - 30px) !important;
        position: relative;
        float: left;
        height: 48px;
        margin-right: 30px;
        margin-bottom: 30px;
    }

/* Media query overrides (relevant selectors only) */
@media (max-width: 2000px) {
    .altsayfa {
    }
}

@media (max-width: 1600px) {
    .altsayfa {
        padding-top: 75px;
    }

    .ortala {
        max-width: 1200px;
    }
}

@media (max-width: 1100px) {
    .gfp-satir {
        flex-direction: column;
    }

    .gfp-panel {
        width: 100%;
        flex: 1 1 auto;
    }

    .gfp-ac {
        width: 100%;
        flex: 1 1 auto;
        justify-content: center;
    }

    .gfp-icerik-ust {
        width: 100%;
        flex-wrap: wrap;
    }

    .gfp-alt-orta {
        flex: 1 1 auto;
    }

    .gfp-arama-kutu {
        max-width: none;
    }

    .gfp-icerik.gfp-icerik-genis {
        width: 100%;
    }
}

@media (max-width: 1000px) {
    .urun-liste {
        display: initial;
    }
}

@media (max-width: 950px) {
    .urunanarender {
        height: auto;
    }
}

@media (max-width: 900px) {
    .urun-liste > div:nth-child(2) {
        margin-left: 0;
    }

    .urunsayfa {
        width: calc(100%);
        margin: 0;
    }

    .urunler > div > ul > li div:first-child > img {
        width: 100%;
    }
}

@media (max-width: 800px) {
    .urunler > div > ul > li {
        height: auto;
    }
}

@media (max-width: 700px) {
    .urunler > div > ul > li {
        width: calc((100% / 2) - 0px);
    }

        .urunler > div > ul > li div:first-child > img {
            width: 100%;
        }

    .sayfalama {
        display: flex;
    }

        .sayfalama > div:first-child {
            margin: 0;
        }

    .sayfailerigeri > div:last-child, .sayfailerigeri > div:first-child {
        top: 60px;
    }

    .sayfailerigeri > div:first-child {
        left: 15px;
    }

    .urun-liste {
        display: inherit;
    }
}

@media (max-width: 600px) {
    .urunler > div > ul > li {
        width: calc((100% / 1) - 0px);
    }
}

/* ========== /Urunler ========== */
/* ========== Urun Detay (from urundetay.css) ========== */
/* Urun detay + popup extracted from tes.css */
/* --- tes.css L100-115 --- */
.demo-1 .custom-cursor__inner:before {
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.demo-1 .custom-cursor__inner:after {
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    -ms-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg);
}

/*CURSOR FRESH*/
#swiper-container1 {
    height: 100%;
}

    #swiper-container1 .swiper-slide {
        overflow: hidden;
    }

.slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: cover;
    background-position: bottom;
}

.swiper-pagination-bullet {
    background: #fff !important;
    opacity: 0.7 !important;
    width: 11px !important;
    height: 11px !important
}

.swiper-pagination-bullet-active {
    background: #0759a5 !important;
    opacity: 1 !important
}

.prev-wrap, .next-wrap {
    width: 60px;
    height: 60px;
    float: left;
}

.swiper-button-prev-1, .swiper-button-next-1 {
    position: absolute;
    top: 0;
    width: 60px;
    height: 60px;
    z-index: 10;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat;
}

.swiper-pagination-1 {
    position: absolute;
    text-align: center;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 8;
    bottom: calc(50% - 220px);
    right: 60px;
}

.swiper-pagination-bulletspan > div {
    background: #fff;
    border-radius: 70px;
    padding: 3px;
    height: 2px !important;
    width: 2px !important;
    margin: 45px 0;
}

/* --- tes.css L200-210 --- */
.link--arrowed .arrow-icon--polyline {
}

.arrow-slider-icon1 {
    position: absolute !important;
    left: -29px;
    width: 56px;
    height: 56px;
    top: -25px;
}

.arrow-slider-icon2 {
    position: absolute !important;
    left: -24px;
    top: -16px !important;
    width: 60px;
    height: 60px;
}

.link--arrowed .arrow-icon--circle {
    transition: stroke-dashoffset 0.3s ease;
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
}

.link--arrowed:hover .arrow-slider-icon {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 1);
}

.link--arrowed:hover .arrow-slider-icon--circle {
    stroke-dashoffset: 0;
}

.swiper-pagination-bullet-active .arrow-icon--circle {
    stroke-dashoffset: 0;
}

.swiper-pagination-bullet-active .arrow-icon {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 1);
}

.genelbaslik {
    text-align: center;
    margin: 55px 0 40px 0;
}

/* --- tes.css L258-259 --- */
.swiper-button-prev5 {
    position: absolute;
    bottom: 75px;
    right: 110px;
    z-index: 2;
}

.swiper-button-next5 {
    position: absolute;
    bottom: 75px;
    right: 45px;
    z-index: 2;
}

/* --- tes.css L609-613 --- */
.urunhead {
    width: 100%;
    background: #F0F0F0;
    padding: 11px 0;
    margin-top: 36px;
}

.headortala {
    width: 95%;
    margin: 0 auto
}

.urunhead > div > p {
    font-size: 14px;
    width: 100%;
    margin: 0 auto;
}

    .urunhead > div > p a {
        font-family: 'DIN[T] Light'
    }

    .urunhead > div > p > span {
        font-family: 'bentonsansbold';
    }

/* --- tes.css L742-743 --- */
.fabrikaresim {
    width: 100%;
    display: table;
}

    .fabrikaresim > img {
        width: 100%
    }

/* --- Ust blok: tam genislikte hero gorsel + uzerine binen yari saydam bilgi
   karti (seri adi + kullanim alanlari satiri). Aciklama metni ve Ozellikler
   artik .udf-suzme (filtre paneli) icinde, .detay-ebatlar'in ustunde.
   .udh-hero SADECE bir kapsayici - icine .detay-ebatlar da girdi ve o dogal
   akista (degisken yukseklikte) kalmali; sabit oran + overlay SADECE
   .udh-gorsel-alan'da uygulanir. --- */
.udh-hero {
    position: relative;
    width: 100%;
}

.udh-gorsel-alan {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 10;
    max-height: 65vh;
    border-radius: 0;
    overflow: hidden;
    background: #ececec;
}

.udh-hero-gorsel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .udh-hero-gorsel.udg-sabit-render {
        border-radius: 0;
    }

        .udh-hero-gorsel.udg-sabit-render img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    .udh-hero-gorsel.udg-galeri {
        max-width: none;
        margin: 0;
        border-radius: 0;
    }

    .udh-hero-gorsel .udg-galeri-slick, .udh-hero-gorsel .slick-list, .udh-hero-gorsel .slick-track {
        height: 100%;
    }

    .udh-hero-gorsel .udg-galeri-kare {
        height: 100%;
        aspect-ratio: auto;
    }

        .udh-hero-gorsel .udg-galeri-kare img {
            border-radius: 0;
        }

.udh-gorsel-alan:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0));
    pointer-events: none;
    z-index: 1;
}

.udh-gorsel-alan.renderyok:before {
    display: none;
}

.udh-gorsel-alan.renderyok {
    background: #fff;
    aspect-ratio: auto;
    max-height: none;
}

    .udh-gorsel-alan.renderyok .udh-kart {
        position: static;
        max-width: 640px;
        margin: 0 auto;
        color: #1a1a1a;
        background: none;
        box-shadow: none;
        padding: 48px 0;
        backdrop-filter: none;
    }

        .udh-gorsel-alan.renderyok .udh-kart h1, .udh-gorsel-alan.renderyok .udh-kart h2 {
            color: inherit;
        }

            .udh-gorsel-alan.renderyok .udh-kart h1:after {
                background: #1a1a1a;
            }

    .udh-gorsel-alan.renderyok .udh-kart_baslik {
        -webkit-text-stroke: 2px #000;
    }

    .udh-gorsel-alan.renderyok .udh-kart_aciklama {
        color: #555;
        text-shadow: none;
    }

.udh-kart {
    position: absolute;
    left: 3vw;
    bottom: 1vw;
    z-index: 2;
}

.udh-kart_baslik {
    margin: 0;
    line-height: 1.05;
    font-size: 138px;
    font-family: 'DIN[T] Regular', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}

.udh-kart_aciklama {
    max-width: 560px;
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

.udh-kart > h2 {
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 14px;
}

/* Kullanim Alanlari: seri adinin altinda "/" ayracli minimal metin satiri. */
.udh-kullanim-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #666;
}

.udh-kullanim-grup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.udh-kullanim-satir span {
    color: #666;
    font-size: 14px;
    letter-spacing: 3px;
}

.udh-kullanim-ayrac {
    display: inline-block;
    margin: 0 10px;
    color: #ccc;
    font-weight: 400;
}

/* Kullanim Alanlari: doku metninden ayri, minimal etiket/pill gorunumu. */
.udh-kullanim-grup--etiket {
    gap: 6px;
}

.udh-kullanim-satir .udh-kullanim-etiket {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border: 1px solid #ede1db;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    color: #666;
    background: #f7f5f4;
    transition: border-color .15s ease, color .15s ease;
}

    .udh-kullanim-satir .udh-kullanim-etiket:hover {
        border-color: #999;
        color: #1a1a1a;
    }

.udh-kart .sosyal-icon {
    width: 150px;
    display: table;
}

    .udh-kart .sosyal-icon > ul {
        display: table-row;
    }

        .udh-kart .sosyal-icon > ul > li {
            display: table-cell;
            padding: 0 3px;
        }

            .udh-kart .sosyal-icon > ul > li:hover a {
                border-color: #999;
                transform: translateY(-2px);
            }

            .udh-kart .sosyal-icon > ul > li:hover svg {
                fill: #999;
            }

            .udh-kart .sosyal-icon > ul > li svg {
                width: 12px;
                height: 12px;
            }

            .udh-kart .sosyal-icon > ul > li a {
                display: block;
                border: 2px solid #000;
                border-radius: 36px;
                padding: 10px;
                transition: all 0.2s ease-in-out;
                width: 12px;
                height: 12px;
            }

            .udh-kart .sosyal-icon > ul > li:last-child {
                margin-left: 10px;
                display: block;
            }

.udh-kart .dowland {
    display: table;
    width: 100%;
    height: 35px;
    position: relative;
    margin-top: 20px;
}

    .udh-kart .dowland > ul {
        display: table-row;
    }

        .udh-kart .dowland > ul > li {
            display: table-cell;
            vertical-align: middle;
            width: 70%;
        }

            .udh-kart .dowland > ul > li:first-child {
                width: 40%;
            }

                .udh-kart .dowland > ul > li:first-child span {
                    display: table;
                    height: 100%;
                    padding-top: 10px;
                }

                .udh-kart .dowland > ul > li:first-child img {
                    width: 25px;
                    float: left;
                    margin-right: 10px;
                }

            .udh-kart .dowland > ul > li > a {
                display: block;
            }

.dokumanyarat {
    display: table;
}

    .dokumanyarat > div {
        display: table-cell;
        vertical-align: middle;
        padding-right: 15px;
        text-align: center;
    }

        .dokumanyarat > div:last-child {
            padding: 0
        }

        .dokumanyarat > div a {
            display: block;
            font-size: 13px;
            width: 99px
        }

.toplufavoriekle, .favoriekle {
    position: absolute;
    top: 7%;
    right: 0;
}

    .favoriekle a {
    }

    .toplufavoriekle img, .favoriekle img {
        width: 25px;
        margin-bottom: -8px;
    }

.pdfanadiv {
    position: relative;
}

.pdfdokuman {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition: 2s;
    overflow: hidden;
}

    .pdfdokuman > div {
        width: 100%;
        height: 0px;
        transition: 1s;
    }

        .pdfdokuman > div > div {
            padding: 60px 25px 25px 25px;
            width: calc(100% - 52px) !important;
            height: calc(100% - 112px);
            border: 1px solid #f0f0f0;
        }

.detay-ebatlar {
    display: block;
    width: 100%;
    overflow: visible;
}

/* Filtre panelinin ustunde: aciklama metni + Ozellikler (sembol ikonlari).
   Ayni kart dilinde ama .udf-suzme'den once, ust bilgi seridi olarak durur. */
.udf-ustbilgi {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #ececec;
}

.udf-ustbilgi_ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.udf-aciklama {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: #555;
}

/* Ozellikler: sadece ikon, hover'da (udh-fab pattern'i) ustte beliren etiket. */
.udh-rozetler--gomulu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}

.udh-rozet--ozellik {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-radius: 50%; */
    /* background: #f4f4f4; */
    color: #1a1a1a;
    cursor: default;
    transition: background .15s ease;
}

    .udh-rozet--ozellik:hover {
        /* background: #ffffff; */
    }

    .udh-rozet--ozellik img {
        width: 25px;
        height: 25px;
        object-fit: contain;
    }

.udh-rozet_ipucu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
    white-space: nowrap;
    padding: 6px 11px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.udh-rozet--ozellik:hover .udh-rozet_ipucu {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Ebat/Renk suzme paneli - kart gorunumu, editoryal baslik, buyutulmus renk swatch'lari */
.udf-suzme {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    width: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 0 0 0px;
    padding: 32px 36px 36px;
    box-shadow: 0 12px 32px rgba(0,0,0,.04);
}

.udf-sayac {
    flex: 1 1 100%;
    font-size: 12px;
    color: #aaa;
    letter-spacing: .3px;
    margin-bottom: -8px;
}

.udf-blok {
    flex: 1 1 320px;
    min-width: 260px;
}

.udf-ayrac {
    flex: 0 0 1px;
    width: 1px;
    align-self: stretch;
    background: #ececec;
}

.udf-baslik {
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: #666;
    font-size: 14px;
    letter-spacing: 3px;
}

.udf-pill-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.udf-pill {
    appearance: none;
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .15s ease, box-shadow .15s ease;
}

    .udf-pill:hover {
        border-color: #1a1a1a;
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0,0,0,.08);
    }

.udf-pill--aktif {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

    .udf-pill--aktif:hover {
        border-color: #1a1a1a;
        box-shadow: 0 6px 14px rgba(0,0,0,.18);
    }

.udf-pill:active {
    transform: scale(.96);
}

.udf-pill--pasif {
    opacity: .3;
    pointer-events: none;
}

.udf-renk-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 18px 12px;
}

.udf-renk {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.udf-renk-daire {
    position: relative;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px #e8e8e8;
    transition: box-shadow .18s ease, border-color .18s ease, transform .15s ease;
    background: #f4f4f4;
}

    .udf-renk-daire img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.udf-renk-daire--tumu {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
}

    .udf-renk-daire--tumu svg {
        width: 22px;
        height: 22px;
    }

.udf-renk:hover .udf-renk-daire {
    box-shadow: 0 0 0 1px #1a1a1a;
    transform: translateY(-2px);
}

.udf-renk:active .udf-renk-daire {
    transform: scale(.94);
}

.udf-renk--aktif .udf-renk-daire {
    border-color: #fff;
    box-shadow: 0 0 0 2px #1a1a1a;
}

.udf-renk-etiket {
    font-size: 11px;
    line-height: 14px;
    color: #888;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 76px;
}

.udf-renk--aktif .udf-renk-etiket {
    color: #1a1a1a;
    font-weight: 700;
}

.udf-renk--pasif {
    opacity: .28;
    pointer-events: none;
}

@media (max-width: 700px) {
    .udf-suzme {
        gap: 24px;
        padding: 24px 20px 28px;
        border-radius: 16px;
    }

    .udf-blok {
        flex: 1 1 100%;
    }

    .udf-ayrac {
        display: none;
    }
}

/* Hero icinde TEK render varsa sabit gorsel (Model.renderliste.Count == 1) */
.udg-sabit-render {
    width: 100%;
    display: block;
}

    .udg-sabit-render > img {
        width: 100%;
        display: block;
    }

/* Hero icinde BIRDEN FAZLA render varsa (Count > 1) SLICK slider - hero'nun
   tamamini kapsayacak sekilde .udh-hero-gorsel tarafindan boyutlandirilir. */
.udg-galeri {
    position: relative;
    width: 100%;
    height: 100%;
}

.udg-galeri-slick {
    height: 100%;
}

    .udg-galeri-slick .slick-list, .udg-galeri-slick .slick-track, .udg-galeri-slick .slick-slide, .udg-galeri-slick .slick-slide > div {
        height: 100% !important;
    }

.udg-galeri-kare {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

    .udg-galeri-kare img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: #f4f4f4;
    }

/* Minimal cizgi-tipi dot navigasyonu - ana sayfa hero slider'i (.nav-indicators)
   ile ayni gorsel dil: ince yatay cizgiler, aktif olan dolu beyaz. Ayni kurallar
   .udg-tam-ekran_slick (tam ekran galeri) icin de gecerlidir. */
.udg-galeri-slick .slick-dots, .udg-tam-ekran_slick .slick-dots {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: auto;
    width: auto;
    z-index: 3;
    display: flex !important;
    gap: 8px;
    margin: 0;
}

    .udg-galeri-slick .slick-dots li, .udg-tam-ekran_slick .slick-dots li {
        width: 28px;
        height: 12px;
        margin: 0;
        background: none;
    }

        .udg-galeri-slick .slick-dots li button, .udg-tam-ekran_slick .slick-dots li button {
            width: 28px;
            height: 12px;
            padding: 0;
            display: flex;
            align-items: center;
            font-size: 0;
            background: none;
        }

            .udg-galeri-slick .slick-dots li button:before, .udg-tam-ekran_slick .slick-dots li button:before {
                content: "";
                width: 100%;
                height: 2px;
                background: rgba(255,255,255,.4);
                opacity: 1;
                transition: background .2s ease;
            }

        .udg-galeri-slick .slick-dots li.slick-active button:before, .udg-tam-ekran_slick .slick-dots li.slick-active button:before {
            background: #fff;
        }

/* Ok butonlari: arka plansiz, sade cizgi ok - hero slider'in nav-prev/next'i
   ile ayni minimal dil (blur/daire kutu yok). Content/default.css'teki global
   .slick-arrow kurali .slick-prev'i rotate(-180deg) ile donduruyordu (kendi
   SVG ikonu icin tasarlanmis) - bu miras SIFIRLANMALI, yoksa bizim
   prev/next SVG'lerimiz gorsel olarak yer degistirmis gibi gorunur. */
.udg-galeri-slick .slick-prev, .udg-galeri-slick .slick-next, .udg-tam-ekran_slick .slick-prev, .udg-tam-ekran_slick .slick-next {
    z-index: 3;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    transition: opacity .2s ease;
    opacity: .85;
    transform: translateY(-50%) rotate(0deg);
}

    .udg-galeri-slick .slick-prev:hover, .udg-galeri-slick .slick-next:hover, .udg-tam-ekran_slick .slick-prev:hover, .udg-tam-ekran_slick .slick-next:hover {
        opacity: 1;
    }

.udg-galeri-slick .slick-prev, .udg-tam-ekran_slick .slick-prev {
    left: 12px;
}

.udg-galeri-slick .slick-next, .udg-tam-ekran_slick .slick-next {
    right: 12px;
}

    .udg-galeri-slick .slick-prev:before, .udg-galeri-slick .slick-next:before, .udg-tam-ekran_slick .slick-prev:before, .udg-tam-ekran_slick .slick-next:before {
        content: "";
        display: block;
        width: 22px;
        height: 16px;
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

.udg-galeri-slick .slick-prev:before, .udg-tam-ekran_slick .slick-prev:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='34' viewBox='0 0 46 34' fill='none'%3E%3Cpath d='M44.3334 17H1.66671M1.66671 17L17.6667 1M1.66671 17L17.6667 33' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.udg-galeri-slick .slick-next:before, .udg-tam-ekran_slick .slick-next:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='34' viewBox='0 0 46 34' fill='none'%3E%3Cpath d='M1.66675 17H44.3334M44.3334 17L28.3334 1M44.3334 17L28.3334 33' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.udg-galeri-slick .slick-disabled, .udg-tam-ekran_slick .slick-disabled {
    opacity: .3;
    pointer-events: none;
}

/* Kucuk galerinin sag-ust tam ekran ac butonu. */
.udg-galeri {
    position: relative;
}

.udg-galeri-tamekran-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

    .udg-galeri-tamekran-btn:hover {
        background: rgba(0,0,0,.55);
    }

    .udg-galeri-tamekran-btn svg {
        width: 18px;
        height: 18px;
    }

/* Tam ekran galeri: koyu overlay, buyuk gorsel, kapat butonu, slick draggable
   varsayilan acik oldugu icin mouse ile tut-surukle zaten calisir. */
.udg-tam-ekran {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,10,.96);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.udg-tam-ekran--acik {
    opacity: 1;
    visibility: visible;
}

.udg-tam-ekran_slick {
    position: relative;
    width: 100%;
    height: 100%;
}

    .udg-tam-ekran_slick, .udg-tam-ekran_slick .slick-list, .udg-tam-ekran_slick .slick-track, .udg-tam-ekran_slick .slick-slide, .udg-tam-ekran_slick .slick-slide > div {
        height: 100%;
    }

.udg-tam-ekran_kare {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
}

    .udg-tam-ekran_kare img {
        max-width: 92vw;
        max-height: 88vh;
        width: auto;
        height: auto;
        object-fit: contain;
        -webkit-user-select: none;
        user-select: none;
    }

.udg-tam-ekran_kapa {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

    .udg-tam-ekran_kapa:hover {
        background: rgba(255,255,255,.2);
    }

    .udg-tam-ekran_kapa svg {
        width: 18px;
        height: 18px;
    }

body.udg-tam-ekran-kilit {
    overflow: hidden;
}

body.pop-modal-kilit {
    overflow: hidden;
}

/* Teknik ozellikler paneli - ebat secimine gore guncellenen ozet kart seridi */
.teknik-ozellikler {
    display: block;
    width: 100%;
    margin-top: 24px;
    box-sizing: border-box;
}

    .teknik-ozellikler > h2 {
        font-size: 12px;
        line-height: 18px;
        font-weight: 700;
        letter-spacing: 1.8px;
        color: #b3b3b3;
        margin-bottom: 16px;
    }

    .teknik-ozellikler > ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 12px;
    }

        .teknik-ozellikler > ul > li {
            flex: 1 1 130px;
            min-width: 120px;
            padding: 16px 18px;
            box-sizing: border-box;
            background: #fafafa;
            border-radius: 12px;
            transition: transform .15s ease, box-shadow .15s ease;
        }

            .teknik-ozellikler > ul > li:hover {
                transform: translateY(-3px);
                box-shadow: 0 10px 20px rgba(0,0,0,.06);
            }

    .teknik-ozellikler .to-deger {
        display: block;
        font-size: 24px;
        line-height: 28px;
        font-weight: 600;
        color: #1a1a1a;
    }

        .teknik-ozellikler .to-deger small {
            font-size: 12px;
            margin-left: 4px;
            color: #999;
            font-weight: 400;
        }

    .teknik-ozellikler .to-etiket {
        display: block;
        font-size: 12px;
        line-height: 18px;
        color: #999;
        margin-top: 4px;
    }

/* Varyant grid'i - her kart, C# tarafinda hesaplanan gercek ebat oranina gore
   (inline width/height ile) boyutlanir: 60x60 ile 100x100 ayni kutuda degil,
   birbirine gore orantili buyuklukte gorunur; 60x120 gibi dikdortgen ebatlar
   da kendi gercek oranini korur. flex-wrap ile satirlar halinde dizilir. */
.urun-ebatlari {
    display: block;
    width: 100%;
    min-height: 220px;
    margin: 15px 0 50px 0;
    overflow: visible;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    width: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 0 0 20px;
    padding: 32px 36px 36px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .04);
}

    .urun-ebatlari > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: flex-start;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 28px;
    }

        .urun-ebatlari > ul > li {
            position: relative;
            cursor: pointer;
            flex: 0 0 auto;
            max-width: 100%;
            margin-top: 20px;
            transition: 0.35s;
        }

            .urun-ebatlari > ul > li > div {
                position: absolute;
                bottom: 0;
                transition: all 0.35s ease;
                width: 100%
            }

            .urun-ebatlari > ul > li:hover {
                transform: translate(0px, -20px);
            }

                .urun-ebatlari > ul > li:hover .ebat-resim {
                    box-shadow: 0 16px 32px rgba(0,0,0,.12);
                }

            .urun-ebatlari > ul > li .ebat-resim {
                position: relative;
                overflow: hidden;
                /* border-radius: 6px; */
                transition: box-shadow .35s ease;
                height: 100%;
            }

                .urun-ebatlari > ul > li .ebat-resim > div {
                    width: 100%;
                    display: table;
                    height: 100%;
                }

                    .urun-ebatlari > ul > li .ebat-resim > div:first-child > a {
                        height: 100%;
                        width: 100%;
                        display: block;
                    }

                        .urun-ebatlari > ul > li .ebat-resim > div:first-child > a > img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            display: block;
                        }

            .urun-ebatlari > ul > li .ue-sepet-btn {
                position: absolute;
                top: 8px;
                right: 8px;
                z-index: 2;
                appearance: none;
                border: none;
                padding: 0;
                box-sizing: border-box;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255,255,255,.92);
                color: #1a1a1a;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(0,0,0,.12);
                transition: background .15s ease, color .15s ease, transform .15s ease;
            }

                .urun-ebatlari > ul > li .ue-sepet-btn svg {
                    width: 15px;
                    height: 15px;
                }

                .urun-ebatlari > ul > li .ue-sepet-btn .ue-sepet-ikon-tik {
                    display: none;
                }

                .urun-ebatlari > ul > li .ue-sepet-btn:hover {
                    background: #1a1a1a;
                    color: #fff;
                    transform: scale(1.08);
                }

            .urun-ebatlari > ul > li .ue-sepet-btn--eklendi {
                background: #f7f5f4;
                color: #2e9e5b;
            }

                .urun-ebatlari > ul > li .ue-sepet-btn--eklendi:hover {
                    background: #c0392b;
                    transform: scale(1.08);
                }

                .urun-ebatlari > ul > li .ue-sepet-btn--eklendi .ue-sepet-ikon-sepet {
                    display: none;
                }

                .urun-ebatlari > ul > li .ue-sepet-btn--eklendi .ue-sepet-ikon-tik {
                    display: block;
                }

                .urun-ebatlari > ul > li .ue-sepet-btn--eklendi:hover .ue-sepet-ikon-tik {
                    display: none;
                }

                .urun-ebatlari > ul > li .ue-sepet-btn--eklendi:hover .ue-sepet-ikon-sepet {
                    display: block;
                }

            .urun-ebatlari > ul > li h1 {
                font-family: 'DIN[T] Light';
                font-size: 15px;
                line-height: 23px;
                margin-top: 10px;
                font-weight: 100;
            }

                .urun-ebatlari > ul > li h1 span {
                    display: block;
                    font-size: 15px;
                }

.detay-seri {
    display: block;
    width: 100%;
    margin-top: 80px;
}

    .detay-seri .seribaslik {
        margin-bottom: 28px;
    }

        .detay-seri .seribaslik > h2 {
            font-size: 26px;
            line-height: 34px;
            font-weight: 600;
            letter-spacing: -.3px;
        }

    .detay-seri .diger-urunler {
        width: 100%
    }

        .detay-seri .diger-urunler > ul {
            display: grid;
            grid-template-columns: repeat(auto-fill, 200px);
            gap: 24px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .detay-seri .diger-urunler > ul > li {
                position: relative;
                width: 200px;
            }

                .detay-seri .diger-urunler > ul > li > a {
                    display: block;
                }

    .detay-seri .diger-urun-gorsel {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        /* border-radius: 10px; */
        background: #f4f4f4;
    }

        .detay-seri .diger-urun-gorsel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s ease;
        }

    .detay-seri .diger-urunler > ul > li:hover .diger-urun-gorsel img {
        transform: scale(1.06);
    }

    .detay-seri .diger-urun-ad {
        margin-top: 14px;
    }

        .detay-seri .diger-urun-ad > h2 {
            font-size: 15px;
            line-height: 20px;
            font-weight: 500;
            position: relative;
            display: inline-block;
            padding-bottom: 4px;
        }

            .detay-seri .diger-urun-ad > h2:after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 0;
                height: 1px;
                background: #1a1a1a;
                transition: width .25s ease;
            }

    .detay-seri .diger-urunler > ul > li:hover .diger-urun-ad > h2:after {
        width: 100%;
    }

    .detay-seri .tum-seri {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
        border: 1px solid #e2e2e2;
    }

        .detay-seri .tum-seri > a {
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: .3px;
            padding: 12px 22px;
            border-radius: 999px;
            border: 1px solid #1a1a1a;
            transition: background .2s ease, color .2s ease;
        }

            .detay-seri .tum-seri > a:hover {
                background: #1a1a1a;
                color: #fff;
            }

/* --- tes.css L1081-1124 --- */
.icondiv {
    position: relative;
    width: 100%;
    height: 34px;
    display: table;
    margin-right: 10px;
}

    .icondiv .row {
        flex-wrap: initial
    }

.icon {
    position: absolute;
    left: 0px;
    top: 7px;
    /* width: 30px !important; */
    height: 30px;
}

icon > ul {
    text-align: right;
}

.icon > ul > li {
    width: 30px;
    height: 30px;
    margin-bottom: 6px;
    position: relative;
    margin-right: 10px
}

    .icon > ul > li img {
        width: 100%;
        opacity: .5;
    }

.semboladi {
    background: #000;
    display: table;
    position: absolute;
    margin-top: 10px;
    z-index: 2;
    left: -18px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    min-width: 60px;
    padding: 3px;
}

    .semboladi > div:first-child {
        z-index: 22;
        position: relative
    }

    .semboladi > div {
    }

.icon > ul > li:hover .semboladi {
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

.semboladi > div > p {
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 5px;
    line-height: 16px;
}

.ucgen1 {
    z-index: 1 !important;
    border-color: #000000 transparent transparent transparent;
    border-bottom: 28px solid #000000;
    border-left: 32px solid transparent;
    border-right: 28px solid transparent;
    position: absolute !important;
    width: calc(50% - 32px);
    left: 3px;
    top: -10px;
}

.ucgen2 {
    border-color: #000000 transparent transparent transparent;
    border-top: 35px solid #d20a0a;
    border-left: 35px solid transparent;
    position: absolute;
    display: none;
    width: calc(50% - 35px);
    right: 0;
    top: -15px;
}

.ebat-sosyal {
}

    .ebat-sosyal > div {
    }

        .ebat-sosyal > div:first-child {
            display: table
        }

            .ebat-sosyal > div:first-child > div {
                display: table-cell;
                vertical-align: middle
            }

.ebat-sosyal-icon ul {
    display: table-row;
}

    .ebat-sosyal-icon ul > li {
        display: table-cell;
        padding: 0 3px;
    }

        .ebat-sosyal-icon ul > li:hover a {
            border-color: #9d0000
        }

        .ebat-sosyal-icon ul > li:hover svg {
            fill: #9d0000
        }

        .ebat-sosyal-icon ul > li svg {
            width: 11px;
            height: 11px;
        }

        .ebat-sosyal-icon ul > li a {
            display: block;
            border: 2px solid #000;
            border-radius: 36px;
            padding: 10px;
            transition: all 0.2s ease-in-out;
            width: 11px;
            height: 11px;
        }

        .ebat-sosyal-icon ul > li:last-child {
        }

.paylas {
    position: absolute;
    border: 1px solid #fff;
    border-radius: 25px;
    line-height: 35px;
    transition: all 0.2s ease-in-out;
    padding: 7px 15px;
    /* right: 0; */
    left: calc(100% - 95px);
    background: #fff
}

.ebat-sosyal-icon > div {
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}

.paylas:hover {
    border: 1px solid #BFBFBF;
}

    .paylas:hover .ebat-sosyal-icon div {
        width: 150px;
    }

    .paylas:hover .ebat-sosyal-icon div {
        display: table;
        width: 100px
    }

.link {
    color: #2175ff;
    cursor: pointer;
    font-weight: 400;
    text-decoration: none;
}

.link--arrowed {
    /* display: inline-block; */
    /* height: 2rem; */
}

    .link--arrowed .arrow-icon {
        position: relative;
        top: 0px;
        transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        vertical-align: middle;
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    .link--arrowed .arrow-icon--polyline {
    }

.arrow-icon1 {
    position: absolute !important;
    left: -34px;
    width: 60px;
    height: 60px;
}

.arrow-icon2 {
    position: absolute !important;
    /* left: -24px; */
    /* top: -25px !important; */
    /* width: 60px; */
    /* height: 60px; */
}

.owl-nav .arrow-icon2 {
    left: 0 !important
}

.bottomsvg {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
}

.link--arrowed .arrow-icon--circle {
    transition: stroke-dashoffset 0.3s ease;
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
}

.link--arrowed:hover .arrow-icon {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
}

.link--arrowed:hover .arrow-icon--circle {
    stroke-dashoffset: 0;
}

/* --- tes.css L1284-1431 --- */
.popupbilgiler .sosyal-icon {
    float: left;
}

    .popupbilgiler .sosyal-icon > ul {
        display: table-row;
    }

        .popupbilgiler .sosyal-icon > ul > li {
            display: table-cell;
            padding: 0 5px;
        }

            .popupbilgiler .sosyal-icon > ul > li:hover a {
                border-color: #999;
            }

            .popupbilgiler .sosyal-icon > ul > li:hover svg {
                fill: #999;
            }

            .popupbilgiler .sosyal-icon > ul > li svg {
                width: 32px;
                height: 32px;
            }

            .popupbilgiler .sosyal-icon > ul > li a {
                display: block;
                /* border: 2px solid #000; */
                /* border-radius: 36px; */
                /* padding: 10px; */
                transition: all 0.2s ease-in-out;
                width: 32px;
                height: 32px;
            }

            .popupbilgiler .sosyal-icon > ul > li:last-child {
                margin-left: 10px;
                vertical-align: middle;
            }

.lityclose {
}

    .lityclose:before, .lityclose:after {
        background: #fff !important
    }

/**sefa ev bitis*/
/*POPUP*/
/*#modal-container {position: fixed;display: table;height: 100%;width: 100%;top: 0;left: 0;transform: scale(0);z-index: 99;}
#modal-container.six {transform: scale(1);}
#modal-container.six .modal-background {background: rgba(255, 255, 255, 1);animation: fadeIn 0.5s cubic-bezier(255, 255, 255, 1) forwards;}
#modal-container.six .modal-background .modal {background-color: transparent;animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six .modal-background .modal h2, #modal-container.six .modal-background .modal p {opacity: 0;position: relative;animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six .modal-background .modal .modal-svg rect { animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six.out {animation: quickScaleDown 0s .5s linear forwards;}
#modal-container.six.out .modal-background { animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six.out .modal-background .modal { animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six.out .modal-background .modal h2, #modal-container.six.out .modal-background .modal p {animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six.out .modal-background .modal .modal-svg rect {animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container .modal-background .modal .modal-svg {position: absolute;top: 0;left: 0;height: 100%;width: 100%;border-radius: 3px;}
#modal-container .modal-background .modal .modal-svg rect {stroke: #fff;stroke-width: 2px;stroke-dasharray: 778;stroke-dashoffset: 778;}
#modal-container .modal-background {background: rgba(0, 0, 0, 0.8);display:table-cell;vertical-align:middle}
#modal-container .modal-background>div{display:table;width:100%;height:100%}*/
/*#modal-container .modal-background>div>div{display:table-cell;vertical-align:middle;width:calc(100% / 2);}
#modal-container .modal-background>div>div:last-child{width:90%; margin:0 auto}*/
/*.popbolum{display:table;width: calc(100%);height:100%}
.popbolum>div{display:table-cell;vertical-align:middle;width:calc(100% / 2);}
.popbolum>div:first-child{}
.popbolum>div:first-child div{}
.popbolum>div:first-child div img{}
.popbolum>div:last-child{width:90%;margin:0 auto}
.popupbilgi>div>div:nth-child(2n){background:#eeeeee}
.popupbilgi{width: 100%;margin: 0 auto;text-align: left;}
.popupbilgi>h1{font-size: 60px;line-height: 80px;margin-bottom: 30px;}
.popupbilgi>div{}
.popupbilgi>div>div{display: table;width: calc(100% - 10px);padding: 15px 10px;}
.popupbilgi>div>div>div:first-child{width: 130px;}
.popupbilgi>div>div>div:last-child{width: 200px;}
.popupbilgi>div>div>div{display: table-cell;vertical-align: middle;}


#modal-container .popup-close{position: absolute;right: 100px;top: 50px;cursor: pointer;}
#modal-container .popup-close>div{}
#modal-container .popup-close>div img{width: 20px;}

#popSlick6 .pop-slide{}
#popSlick6 .pop-slide>div{text-align:center}
#popSlick6 .pop-slide>div img{}
#modal-container .ebat-paylas{margin-top:15px}
.popdokuman{margin-top:20px}
.popdokuman a{}*/
/*Popup*/
/*sefa*/
.popup {
    position: fixed;
    bottom: -100%;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: #000000ad;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    transition: 1s;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.42, 0, 0, 0.73);
    transition-delay: 0s;
    align-content: center;
}

    .popup.active {
        bottom: 0
    }

    .popup .pop-slick-next, .popup .pop-slick-prev {
        position: absolute;
        top: 50%;
        cursor: pointer;
    }

        .popup .pop-slick-next img {
            transform: rotate(180deg);
            float: right;
        }

        .popup .pop-slick-next img, .popup .pop-slick-prev img {
        }

    .popup .pop-slick-next {
        right: 20px;
    }

        .popup .pop-slick-next p {
            float: left !important;
            text-align: right
        }

    .popup .pop-slick-prev {
        left: 20px;
    }

        .popup .pop-slick-next p, .popup .pop-slick-prev p {
            float: right;
            width: 65%;
            line-height: 22px;
            margin-top: -15px;
        }

.popanadiv {
    display: table;
    width: 100%;
    height: 100%
}

    .popanadiv > div {
        display: table-cell;
        vertical-align: middle;
        width: Calc(100% / 2)
    }

        .popanadiv > div:first-child {
            text-align: center
        }

            .popanadiv > div:first-child img {
            }

.popupbilgiler {
    width: 100%
}

.popbaslik {
    display: table;
    width: 100%
}

    .popbaslik > div {
        display: table-cell;
        vertical-align: middle
    }

        .popbaslik > div:first-child {
        }

        .popbaslik > div h1 {
            color: #000;
            font-size: 20px;
        }

        .popbaslik > div:last-child {
            float: right
        }

.icon {
}

.icondiv > div > ul {
    text-align: right;
    margin: 0
}

    .icondiv > div > ul > li {
        width: 35px;
        height: 35px;
        margin-bottom: 6px;
        position: relative;
        margin-right: 10px;
        cursor: pointer;
    }

        .icondiv > div > ul > li img {
            width: 100%;
            opacity: .5;
        }

        .icondiv > div > ul > li:hover .semboladi {
            opacity: 1;
            transition: all 0.5s ease-in-out;
        }

.pophead {
    display: table;
    width: 100%;
    text-align: center;
    margin-top: 22px
}

    .pophead > div {
        display: table;
        text-align: center;
        width: calc(100% - 2px);
    }

        .pophead > div:first-child {
            border: 1px solid #000;
        }

        .pophead > div ul {
            display: table-row
        }

        .pophead > div li {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: calc(100% / 4);
            padding: 10px 0
        }

        .pophead > div:last-child {
        }

.popupbilgi {
    width: calc(100% - 2px);
    margin: 0 auto;
    text-align: left;
    margin-top: 50px;
    border: 0.5px solid #BFBFBF;
}

    .popupbilgi > div {
    }

        .popupbilgi > div > div {
            display: table;
            width: calc(100% - 50px);
            border-bottom: 0.5px solid #BFBFBF;
            padding: 17px 0;
            font-size: 16px;
            margin: 0 auto;
        }

            .popupbilgi > div > div:last-child {
                border: 0
            }

            .popupbilgi > div > div > div:first-child {
                width: 50%;
            }

            .popupbilgi > div > div > div:last-child {
                width: 200px;
            }

            .popupbilgi > div > div > div {
                display: table-cell;
                vertical-align: middle;
                line-height: 22px
            }

.poppaylas {
    display: table;
    width: 100%;
    margin-top: 32px;
}

    .poppaylas > div {
        width: 50%;
        display: table-cell;
        vertical-align: middle;
    }

        .poppaylas > div:first-child {
            width: 25%;
        }

        .poppaylas > div:last-child {
        }

    .poppaylas .indirin {
        display: table;
        padding: 15px 0;
        float: left;
        cursor: pointer;
    }

        .poppaylas .indirin img {
            float: left;
            width: auto;
        }

        .poppaylas .indirin p {
            float: right;
            line-height: 26px;
            padding-left: 10px;
            font-size: 17px;
        }

    .poppaylas .kendipdf {
        padding: 15px;
        background: #F2293A;
        float: right;
        cursor: pointer;
    }

        .poppaylas .kendipdf img {
        }

        .poppaylas .kendipdf p {
            color: #fff;
            float: right;
            font-size: 16px;
            line-height: 25px;
            padding-left: 10px;
        }

.popikili {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-around;
}

.zemineuygula {
}

    .zemineuygula button {
        padding: 6px 15px;
        border: 0;
        background: #f2293a;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

        .zemineuygula button img {
            width: 45px;
            float: left;
        }

        .zemineuygula button p {
            color: #fff;
            padding-left: 11px;
            font-size: 17px;
        }

p {
}

.pdfolusturma {
    position: fixed;
    width: 320px;
    height: auto;
    right: -100%;
    top: auto;
    z-index: 999;
    background: #F5F5F5;
    transition: 1s;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.42, 0, 0, 0.73);
    transition-delay: 0
}

    .pdfolusturma > div {
        display: table;
        height: 100%;
        width: calc(100% - 50px);
        padding: 25px;
    }

        .pdfolusturma > div > a {
            position: relative;
            left: -20px;
            top: -20px;
            display: table;
        }

            .pdfolusturma > div > a:before, .pdfolusturma > div > a:after {
                background: #fff;
                width: 30px !important;
            }

    .pdfolusturma .popupsecim {
        width: calc(100%);
        position: relative;
        display: table;
        cursor: pointer;
        height: 60px;
    }

        .pdfolusturma .popupsecim > div {
            border: 1px solid #EBEBEB;
            border-radius: 0;
            width: calc(100%);
            /* position: absolute; */
            z-index: 6;
            background: #fff;
            margin-bottom: 20px;
        }

            .pdfolusturma .popupsecim > div span {
                font-size: 13px;
                color: #000000;
                line-height: 13px;
                display: block;
                padding: 15px 20px;
            }

        .pdfolusturma .popupsecim .img > img {
            position: absolute;
            top: 19px;
            right: 20px;
            width: 11px;
            opacity: 1;
            transition: all 0.3s ease-in-out;
        }

        .pdfolusturma .popupsecim > div > a > ul {
            display: none;
            width: calc(100% - 41px);
            z-index: 99;
            /* max-height: 400px; */
            /* overflow-y: scroll !important; */
            padding: 0 20px;
        }

            .pdfolusturma .popupsecim > div > a > ul > li {
                font-size: 13px;
                padding: 3px 0;
                border-bottom: 2px solid #f5f5f5;
                color: #686a6c;
                cursor: pointer;
                line-height: 18px;
            }

    .pdfolusturma .pdfbuton {
        background: #262626;
        display: table;
        margin: 0 auto;
        margin-top: 130px;
    }

        .pdfolusturma .pdfbuton > div {
            padding: 15px;
            cursor: pointer;
        }

            .pdfolusturma .pdfbuton > div img {
            }

            .pdfolusturma .pdfbuton > div p {
                float: right;
                color: #fff;
                padding-left: 15px;
                line-height: 25px;
            }

/*sefa*/
/* --- tes.css L1459-1483 --- */
.lightbox--close {
    position: absolute;
    top: 10px;
    width: 27px;
    height: 27px;
    box-sizing: content-box;
    padding: 10px;
    z-index: 9999;
    right: 20px;
    right: calc((100% - 1356px) / 2);
    transition: background-color .3s linear;
}

@media screen and (max-width: 1396px) {
    .lightbox--close {
        right: 10px
    }
}

.lightbox--close:hover {
    -webkit-transform: rotateZ(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotateZ(-180deg)
}

.lightbox.as-transparent .lightbox--close {
    display: none;
    right: 0;
    top: -57px
}

.lightbox-v2 .lightbox--close, .as-lightbox-v2 .lightbox--close {
    top: 32px
}

html.no-csstransforms3d .lightbox-v2 .lightbox--close::before, html.csstransforms3d .lightbox-v2 .lightbox--close::before, html.no-csstransforms3d .as-lightbox-v2 .lightbox--close::before, html.csstransforms3d .as-lightbox-v2 .lightbox--close::before {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%) !important;
    -ms-transform: translate(-50%,-50%) !important;
    transform: translate(-50%,-50%) !important;
    background-color: transparent;
    box-shadow: none
}

html.no-csstransforms3d .lightbox-v2 .lightbox--close::after, html.csstransforms3d .lightbox-v2 .lightbox--close::after, html.no-csstransforms3d .as-lightbox-v2 .lightbox--close::after, html.csstransforms3d .as-lightbox-v2 .lightbox--close::after {
    content: none
}

.lightbox-s20 .lightbox--close, .as-lightbox-s20 .lightbox--close {
    display: none;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    padding: 5px
}

@media(max-width: 750px) {
    .lightbox-s20 .lightbox--close, .as-lightbox-s20 .lightbox--close {
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px
    }
}

html.no-csstransforms3d .lightbox-s20 .lightbox--close::before, html.csstransforms3d .lightbox-s20 .lightbox--close::before, html.no-csstransforms3d .as-lightbox-s20 .lightbox--close::before, html.csstransforms3d .as-lightbox-s20 .lightbox--close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%) !important;
    -ms-transform: translate(-50%,-50%) !important;
    transform: translate(-50%,-50%) !important;
    background-color: transparent;
    box-shadow: none;
    width: 20px !important;
    height: 20px !important
}

@media(max-width: 750px) {
    html.no-csstransforms3d .lightbox-s20 .lightbox--close::before, html.csstransforms3d .lightbox-s20 .lightbox--close::before, html.no-csstransforms3d .as-lightbox-s20 .lightbox--close::before, html.csstransforms3d .as-lightbox-s20 .lightbox--close::before {
        width: 16px !important;
        height: 16px !important
    }
}

html.no-csstransforms3d .lightbox-s20 .lightbox--close::after, html.csstransforms3d .lightbox-s20 .lightbox--close::after, html.no-csstransforms3d .as-lightbox-s20 .lightbox--close::after, html.csstransforms3d .as-lightbox-s20 .lightbox--close::after {
    content: none
}

.lightbox--close--label {
    position: absolute;
    right: 20px;
    top: 14px;
    padding-right: 30px;
    font-weight: 700;
    font-size: 14px;
    font-size: .77778rem;
    color: #878380;
    white-space: nowrap;
    transition: all 300ms cubic-bezier(0.42,0,0.175,1);
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%
}

@media(max-width: 750px) {
    .lightbox--close--label {
        font-size: 12px
    }
}

.lightbox-v2 .lightbox--close--label, .as-lightbox-v2 .lightbox--close--label {
    display: none
}

.lightbox-s20 .lightbox--close--label, .as-lightbox-s20 .lightbox--close--label {
    display: none
}

html.no-csstransforms3d .lightbox--close:after {
    right: auto
}

html.csstransforms3d .lightbox--close:before, html.csstransforms3d .lightbox--close:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 1px;
    top: 50%;
    left: 50%;
    background: #878380;
    box-shadow: 0 0 1px 1px rgba(255,255,255,0.1);
    -webkit-transform: translateY(-0.5px) translateX(-50%) rotate(45deg) translateZ(0);
    transform: translateY(-0.5px) translateX(-50%) rotate(45deg) translateZ(0);
    transition: -webkit-transform 350ms;
    transition: transform 350ms;
    transition: transform 350ms,-webkit-transform 350ms;
    -webkit-backface-visibility: hidden
}

html.csstransforms3d .lightbox--close:after {
    -webkit-transform: translateY(-0.5px) translateX(-50%) rotate(-45deg) translateZ(0);
    transform: translateY(-0.5px) translateX(-50%) rotate(-45deg) translateZ(0);
    transition: -webkit-transform 450ms;
    transition: transform 450ms;
    transition: transform 450ms,-webkit-transform 450ms
}

html.csstransforms3d .lightbox--close:hover:before {
    -webkit-transform: translateY(-0.5px) translateX(-50%) rotate(-135deg) translateZ(0);
    transform: translateY(-0.5px) translateX(-50%) rotate(-135deg) translateZ(0)
}

html.csstransforms3d .lightbox--close:hover:after {
    -webkit-transform: translateY(-0.5px) translateX(-50%) rotate(-225deg) translateZ(0);
    transform: translateY(-0.5px) translateX(-50%) rotate(-225deg) translateZ(0)
}

html.csstransforms3d .lightbox--close:hover {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.popkapa {
    top: 80px;
    right: 80px
}

/* --- tes.css L1801-1801 --- */
.sitegizle {
    display: none !important
}

/* --- responsive (detay / popup) --- */
@media (max-width: 1450px) {
    .popanadiv {
        width: 95%;
    }

    .poppaylas > div:first-child {
        width: 40%;
    }
}

@media (max-width: 1300px) {
    .popanadiv {
        width: 80%;
        margin: 0 auto;
    }

        .popanadiv > div:first-child {
            width: 25%;
        }
}

@media (max-width: 1100px) {
    #popSlick6 .pop-slide {
        overflow-y: scroll;
        max-height: 750px;
    }

    .popanadiv {
        display: block;
        width: 70%;
        padding: 50px 0;
    }

        .popanadiv > div {
            display: block;
            margin: 0 auto;
            width: 100% !important;
        }

            .popanadiv > div:first-child {
                margin-bottom: 40px;
            }
}

@media (max-width: 1000px) {
    .udh-gorsel-alan {
        aspect-ratio: 16 / 9;
    }

    .udh-kart {
        max-width: 92%;
        left: 4%;
        bottom: 4%;
        padding: 28px 28px;
    }
}

@media (max-width: 800px) {
    .popikili {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 40px;
    }

        .popikili > div {
            margin-bottom: 20px;
        }

    .zemineuygula.detay {
        display: table;
        margin: 0 auto;
    }
}

@media (max-width: 750px) {
    .udh-gorsel-alan:not(.renderyok) {
        aspect-ratio: 4 / 3;
    }

    .udh-kart {
        position: static;
        max-width: 100%;
        margin-top: -40px;
        border-radius: 14px 14px 0 0;
    }

        .udh-kart > h1 {
            font-size: 26px;
            margin-bottom: 8px;
        }

    .udf-ustbilgi {
        flex-direction: column;
        align-items: flex-start;
    }

    .urun-ebatlari {
        margin-top: 50px;
        margin-left: 10px;
    }

    .teknik-ozellikler > ul > li {
        flex: 1 1 45%;
    }
}

@media (max-width: 600px) {
    .udh-kart .dowland > ul > li {
        display: table;
        width: 100% !important;
    }

        .udh-kart .dowland > ul > li:first-child {
            margin-bottom: 25px;
        }

    .udh-kart .sosyal-icon, .dokumanyarat {
        margin: 0 auto;
    }

    .detay-seri .diger-urunler > ul {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

        .detay-seri .diger-urunler > ul > li {
            width: auto;
        }

    .poppaylas > div {
        width: 100%;
        display: table;
    }

    .popbaslik > div {
        display: table;
        width: 100%;
        float: none !important
    }

        .popbaslik > div:first-child {
            margin-bottom: 20px
        }

    .popupbilgi > div > div > div {
        display: table;
        width: 100% !important;
    }

    .popanadiv > div:first-child img {
        width: 100%;
    }

    .popup .pop-slick-next p, .popup .pop-slick-prev p {
        display: none !important
    }

    .poppaylas .kendipdf {
        display: table;
        float: left
    }

    .popupbilgiler .sosyal-icon > ul > li:first-child {
        padding-left: 0
    }

    .popkapa {
        right: 25px;
        top: 25px
    }

    .popupbilgi > div > div > div, .pophead > div li {
        font-size: 13px !important
    }

    .poppaylas .indirin {
        padding: 25px 0
    }

    .urun-detayli {
        display: block;
    }
}

/* ========== /Urun Detay ========== */
/* ========== Iletisim (tes.css) ========== */
.iletisimpage {
    width: 100%;
    height: 100%;
    margin-top: 45px;
}

.iletisimgiris {
    display: table;
    width: 100%;
    height: 10%;
}

    .iletisimgiris > ul {
        display: table-row;
    }

        .iletisimgiris > ul > li {
            display: table-cell;
            vertical-align: middle;
            width: 50%;
        }

            .iletisimgiris > ul > li > div {
                width: 90%;
                float: right;
            }

                .iletisimgiris > ul > li > div > h2 {
                    font-size: 20px;
                    line-height: 25px;
                    margin-bottom: 20px;
                }

                .iletisimgiris > ul > li > div > p {
                    font-size: 15px;
                    line-height: 21px;
                    width: 70%;
                    margin-bottom: 15px;
                }

            .iletisimgiris > ul > li a {
            }

            .iletisimgiris > ul > li > div > p span {
                font-weight: 600;
                font-size: 15px;
                line-height: 21px;
            }

    .iletisimgiris fieldset {
        border: 1px solid #cccc;
        padding: 16px;
    }

        .iletisimgiris fieldset legend {
            font-weight: 600;
            font-size: 15px;
            line-height: 21px;
        }


        .iletisimgiris fieldset p {
            font-size: 15px;
            line-height: 21px;
            width: 70%;
            margin-bottom: 15px;
        }

        .iletisimgiris fieldset a {
        }

        .iletisimgiris fieldset span {
            font-weight: 600;
            font-size: 15px;
            line-height: 21px;
        }

.iletisimpage .content.form {
    margin: 5vh 0;
    background: #f7f5f4;
    padding: 6vh;
    border-radius: 8px;
}

.export ul > li {
    padding: 30px;
    background: #eaeaea;
}

    .export ul > li:last-child {
        padding: 30px;
        background: #f5f5f5;
    }

    .export ul > li > div {
        float: none;
        width: 100%;
    }

.iletisimbesli {
    margin: 50px 0;
}

    .iletisimbesli > ul > li {
        vertical-align: middle;
        width: calc((100% / 3) - 14px);
        text-align: center;
        position: relative;
        padding: 0 14px 14px 0px;
    }

        .iletisimbesli > ul > li .cizgi {
            height: 100%;
            background: #EFEFEF;
            width: 1px;
            margin: 0 auto;
            position: absolute;
            right: 0;
            top: 0;
        }

    .iletisimbesli > ul.row, .iletisimpage .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 -7px;
    }

        .iletisimbesli > ul.row:before, .iletisimbesli > ul.row:after, .iletisimpage .row:before, .iletisimpage .row:after {
            content: "";
            display: table;
            clear: both;
        }

    .iletisimbesli > ul > li > div:first-child {
        border: 1px solid #e4e4e4;
        padding: 30px;
        aspect-ratio: 3/1.4;
    }

        .iletisimbesli > ul > li > div:first-child > h2 {
            font-size: 16px;
            line-height: 15px;
            text-align: left;
        }

        .iletisimbesli > ul > li > div:first-child > p {
            font-size: 15px;
            line-height: 19px;
            margin-top: 10px;
            margin-bottom: 20px;
            text-align: left;
        }

        .iletisimbesli > ul > li > div:first-child > a {
            text-align: left;
            display: block;
            font-family: 'DIN[T] Light';
            line-height: 26px;
            font-size: 15px;
        }

            .iletisimbesli > ul > li > div:first-child > a span {
                font-size: 15px;
                font-family: 'DIN[T] Bold';
            }

.iletisimbg {
    background: #262626;
}

    .iletisimbg a, .iletisimbg h2, .iletisimbg p, .iletisimbg span {
        color: #fff
    }

@media(max-width: 1100px) {
    .iletisimgiris > ul > li {
        display: table;
        width: calc(100%)
    }

    .export {
        width: calc(100% - 60px)
    }

    .iletisimgiris > ul > li > div {
        width: 100%;
        float: none;
        margin: 25px 0
    }

    .iletisimbesli > ul > li {
        width: calc((100% / 3) - 30px);
        height: 200px
    }

    .iletisimgiris > ul > li > div > h2, .iletisimgiris > ul > li > div > p {
        width: 100%;
    }

    .iletisimgiris > ul > li:last-child {
        margin-top: 25px
    }
}

@media(max-width: 1000px) {
    .iletisimbg li > div:first-child {
        padding: 0 15px
    }

    .iletisimbg li:first-child {
        width: calc(100% - 30px)
    }
}

@media(max-width: 900px) {
    .iletisimbesli > ul > li {
        width: calc((100% / 2) - 15px);
        height: 220px;
    }

        .iletisimbesli > ul > li:last-child .cizgi, .iletisimbesli > ul > li:nth-child(2n) .cizgi {
            display: none
        }

        .iletisimbesli > ul > li:last-child, .iletisimbesli > ul > li:nth-child(3) {
            margin-left: 0
        }

    .iletisimbesli {
        margin-top: 0
    }
}

@media(max-width: 600px) {
    .iletisimbesli > ul > li {
        width: calc((100% / 1));
        margin: 0;
        height: auto;
        min-height: 170px
    }

        .iletisimbesli > ul > li:nth-child(4) {
            margin: 0
        }

        .iletisimbesli > ul > li > div:first-child {
            height: auto
        }
}

/* ========== /Iletisim ========== */
/* ========== Detayli Arama (gfp-detayli-arama butonu + da-* modal/panel) ========== */
.gfp-detayli-arama {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    height: 34px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #161718;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

    .gfp-detayli-arama:hover {
        border-color: #161718;
        background: rgba(0, 0, 0, .03);
    }

.gfp-detayli-arama-svg {
    position: static;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.da-modal-arkaplan {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

    .da-modal-arkaplan.da-modal-acik {
        display: flex;
    }

body.da-modal-kilit {
    overflow: hidden;
}

.da-modal-govde {
    width: 100%;
    max-width: 1100px;
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
}

.da-sayfa-sarmal {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.da-panel {
    display: flex;
    flex-direction: column;
}

/* Modal icinde yukseklik sinirlanir (kendi ici scroll); tam sayfada (.da-sayfa-sarmal)
   sinirsiz uzayip sayfanin kendi scroll'unu kullanir. */
.da-modal-govde .da-panel {
    max-height: 88vh;
}

.da-sayfa-sarmal .da-govde {
    overflow-y: visible;
}

.da-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #ededed;
    flex: 0 0 auto;
}

.da-baslik {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #161718;
}

.da-kapat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #161718;
    cursor: pointer;
    transition: background-color .2s ease;
}

    .da-kapat:hover {
        background: #f5f5f5;
    }

    .da-kapat svg {
        width: 18px;
        height: 18px;
    }

/* Ust arama kutusu: govdenin disinda, sabit */
.da-panel > .da-arama-kutu {
    margin: 20px 24px 0;
}

.da-arama-kutu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid #ededed;
    border-radius: 999px;
    flex: 0 0 auto;
}

    .da-arama-kutu svg {
        width: 18px;
        height: 18px;
        color: #999;
        flex: 0 0 auto;
    }

    .da-arama-kutu input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        font-size: 14px;
        color: #161718;
    }

/* Govde: dikey yiginlanmis bolumler, sidebar yok (yurtbayseramik duzeni) */
.da-govde {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 24px 20px;
}

.da-bolum {
    position: relative;
    padding: 22px 0 22px 46px;
    border-bottom: none;
}

    /* Numaralari birbirine baglayan dikey adim cizgisi: bolumun sol kenarinda,
   rozetin ortasindan bir sonraki bolume kadar tam yukseklikte uzanir. */
    .da-bolum::before {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        width: 2px;
        height: 100%;
        background: #ededed;
    }

    .da-bolum:last-child::before {
        display: none;
    }

.da-bolum-baslik {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: #161718;
    text-transform: uppercase;
    letter-spacing: .5px;
}

    .da-bolum-baslik i {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        margin-left: -46px;
        border-radius: 50%;
        background: #161718;
        color: #fff;
        font-style: normal;
        font-size: 13px;
        font-weight: 700;
        z-index: 1;
    }

/* Doku / Renk / Kullanim Alani: resimli kart + etiket grid */
.da-kart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}

.da-kart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .da-kart input[type=checkbox] {
        display: none;
    }

.da-kart-resim {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: #f5f5f5;
    transition: border-color .2s ease;
}

    .da-kart-resim img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.da-kart-resim-bos {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ececec, #f7f7f7);
}

.da-kart input[type=checkbox]:checked + .da-kart-resim {
    border-color: #161718;
}

.da-kart-tik {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #161718;
    border-radius: 50%;
    color: #fff;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .15s ease, transform .15s ease;
}

.da-kart input[type=checkbox]:checked + .da-kart-resim .da-kart-tik {
    opacity: 1;
    transform: scale(1);
}

.da-kart-tik svg {
    width: 11px;
    height: 11px;
}

.da-kart-etiket {
    font-size: 12.5px;
    font-weight: 500;
    color: #333;
    text-align: center;
}

/* Ebat / Kalinlik: duz metin link listesi, satir sarabilen (yurtbayseramik duzeni) */
.da-ebat-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}

.da-ebat-secenek {
    display: flex;
    align-items: baseline;
    gap: 4px;
    width: 25%;
    padding: 5px 10px 5px 0;
    cursor: pointer;
}

    .da-ebat-secenek input[type=checkbox] {
        display: none;
    }

.da-ebat-metin {
    font-size: 13.5px;
    color: #333;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}

.da-ebat-secenek input[type=checkbox]:checked ~ .da-ebat-metin {
    color: #161718;
    font-weight: 700;
}

/* Ozellikler: checkbox listesi */
.da-ozellik-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 20px;
}

.da-ozellik-secenek {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

    .da-ozellik-secenek input[type=checkbox] {
        display: none;
    }

.da-kutu {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1.5px solid #d5d5d5;
    border-radius: 4px;
    position: relative;
    transition: border-color .2s ease, background-color .2s ease;
}

.da-ozellik-secenek input[type=checkbox]:checked + .da-kutu {
    background: #161718;
    border-color: #161718;
}

    .da-ozellik-secenek input[type=checkbox]:checked + .da-kutu::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 1px;
        width: 5px;
        height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

.da-etiket {
    font-size: 13px;
    color: #333;
}

.da-sayi {
    font-size: 12px;
    color: #999;
}

/* Alt sabit sece bar: secili pill'ler + Temizle/Ara butonlari */
.da-alt-sabit {
    flex: 0 0 auto;
    border-top: 1px solid #ededed;
    padding: 16px 24px;
    background: #fff;
}

.da-secili-etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 20px;
    margin-bottom: 12px;
}

    .da-secili-etiketler:empty {
        display: none;
        margin: 0;
    }

.da-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    background: #f5f5f5;
    border-radius: 999px;
    font-size: 12.5px;
    color: #161718;
}

.da-pill-kaldir {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: none;
    color: #666;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.da-alt-butonlar {
    display: flex;
    gap: 10px;
}

.da-temizle, .da-ara {
    flex: 1;
    padding: 13px 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.da-temizle {
    background: transparent;
    border: 1.5px solid #d5d5d5;
    color: #161718;
}

    .da-temizle:hover {
        border-color: #161718;
    }

.da-ara {
    background: #161718;
    border: 1.5px solid #161718;
    color: #fff;
}

    .da-ara:hover {
        background: #ff2d16;
        border-color: #ff2d16;
    }

@media (max-width: 768px) {
    .da-kart-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }

    .da-ebat-secenek {
        width: 50%;
    }

    .da-ozellik-liste {
        grid-template-columns: 1fr;
    }
}

/* ========== /Detayli Arama ========== */
/* ========== Sepet (header ikonu + acilir panel) ========== */
.basket {
    position: relative;
}

    .basket > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        color: #1a1a1a;
        transition: background .15s ease;
    }

        .basket > a:hover {
            background: #f7f7f7;
        }

        .basket > a svg {
            width: 20px;
            height: 20px;
        }

.basket-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #1a1a1a;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    font-weight: 600;
    pointer-events: none;
}

.sepet-panel-katman {
    position: fixed;
    inset: 0;
    background: rgba(20,20,20,.28);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.sepet-panel-katman--acik {
    opacity: 1;
    visibility: visible;
}

.sepet-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 380px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -12px 0 40px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s ease;
}

.sepet-panel-katman--acik .sepet-panel {
    transform: translateX(0);
}

.sepet-panel_ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 18px;
}

    .sepet-panel_ust h2 {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        margin: 0;
        color: #1a1a1a;
    }

.sepet-panel_kapa {
    appearance: none;
    border: none;
    background: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, color .15s ease;
}

    .sepet-panel_kapa:hover {
        background: #f7f7f7;
        color: #1a1a1a;
    }

    .sepet-panel_kapa svg {
        width: 15px;
        height: 15px;
    }

.sepet-panel_ozet {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid #efefef;
    font-size: 12px;
    color: #999;
}

.sepet-panel_ozet_temizle {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #bbb;
    cursor: pointer;
    transition: color .15s ease;
}

    .sepet-panel_ozet_temizle:hover {
        color: #c0392b;
    }

    .sepet-panel_ozet_temizle svg {
        width: 15px;
        height: 15px;
    }

.sepet-panel_ozet_ayrac {
    color: #ddd;
}

#sepetOzetM2 {
    color: #1a1a1a;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sepet-panel_govde {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 24px 32px;
}

.sepet-panel_bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: #bbb;
    text-align: center;
}

    .sepet-panel_bos svg {
        width: 36px;
        height: 36px;
        opacity: .5;
    }

    .sepet-panel_bos p {
        font-size: 13px;
        margin: 0;
    }

.sepet-grup {
    border-bottom: 1px solid #efefef;
}

    .sepet-grup:first-child {
        border-top: 1px solid #efefef;
    }

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

.sepet-grup_baslik {
    appearance: none;
    border: none;
    background: none;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 2px;
    cursor: pointer;
    text-align: left;
}

.sepet-grup_sil {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
    transition: color .15s ease;
}

    .sepet-grup_sil:hover {
        color: #c0392b;
    }

    .sepet-grup_sil svg {
        width: 14px;
        height: 14px;
    }

.sepet-grup_ok {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: #bbb;
    transition: transform .2s ease;
}

.sepet-grup--acik .sepet-grup_ok {
    transform: rotate(90deg);
    color: #1a1a1a;
}

.sepet-grup_adi {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Seri basligindaki doku etiketi - sepet-grup_adi'nin ICINDE (ayni <span>,
   seri adinin yaninda), ayri bir flex sutunu DEGIL. sepet-varyant_doku'nun
   gorsel stilini (kirmizi, buyuk harf) miras alir, sadece marj eklenir.
   Tum varyantlarda ayni oldugu icin SERI seviyesinde TEK SEFER gosterilir. */
.sepet-grup_doku {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.sepet-grup_m2 {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.sepet-grup_govde {
    padding: 0 2px 18px;
}

.sepet-grup_link {
    display: inline-block;
    font-size: 11px;
    color: #999;
    letter-spacing: .02em;
    margin-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

    .sepet-grup_link:hover {
        color: #1a1a1a;
        border-color: #1a1a1a;
    }

.sepet-varyant-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .sepet-varyant-liste li {
        display: flex;
        align-items: center !important;
        gap: 6px;
    }

.sepet-varyant_gorsel {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: #f7f7f7;
    flex-shrink: 0;
}

    .sepet-varyant_gorsel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.sepet-varyant_bilgi {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sepet-varyant_etiket {
    font-size: 11.5px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sepet-varyant_kod {
    font-size: 11px;
    color: #b3b3b3;
}

.sepet-varyant_adet {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: #1a1a1a;
    border-radius: 29px;
}

.sepet-varyant_sil {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
    transition: color .15s ease;
}

    .sepet-varyant_sil:hover {
        color: #c0392b;
    }

    .sepet-varyant_sil svg {
        width: 13px;
        height: 13px;
    }

/* ============================================================
   /Sepet SAYFASINA AIT (.sepetsayfa-*) - sepet modal panelinden
   (.sepet-grup*/
.sepet-varyant*/.sepet-adet*, yukarida) TAMAMEN BAGIMSIZ class isimleri. Hicbir isim paylasilmiyor, boylece birini degistirmek digerini BOZMAZ. ============================================================ */ .sepetsayfa-grup {
    border-bottom: 1px solid #efefef;
}

.sepetsayfa-grup:first-child {
    border-top: 1px solid #efefef;
}

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

.sepetsayfa-grup_baslik {
    appearance: none;
    border: none;
    background: none;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 2px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sepetsayfa-grup_sil {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
    transition: color .15s ease;
}

    .sepetsayfa-grup_sil:hover {
        color: #c0392b;
    }

    .sepetsayfa-grup_sil svg {
        width: 18px;
        height: 18px;
    }

.sepetsayfa-grup_ok {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: #bbb;
    transition: transform .2s ease;
}

.sepetsayfa-grup--acik .sepetsayfa-grup_ok {
    transform: rotate(90deg);
    color: #1a1a1a;
}

.sepetsayfa-grup_adi {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Seri basligindaki doku etiketi - sepetsayfa-grup_adi'nin ICINDE (ayni
   <span>, seri adinin yaninda), ayri bir flex sutunu DEGIL. Tum
   varyantlarda ayni oldugu icin SERI seviyesinde TEK SEFER gosterilir. */
.sepetsayfa-varyant_doku {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a61e22;
}

.sepetsayfa-grup_doku {
    margin-left: 6px;
    vertical-align: middle;
}

.sepetsayfa-grup_m2 {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.sepetsayfa-grup_govde {
    padding: 0 2px 18px;
    border: 1px solid #efefef;
    padding: 25px;
}

.sepetsayfa-grup_link {
    display: inline-block;
    font-size: 11px;
    color: #999;
    letter-spacing: .02em;
    margin-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

    .sepetsayfa-grup_link:hover {
        color: #1a1a1a;
        border-color: #1a1a1a;
    }

.sepetsayfa-varyant-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .sepetsayfa-varyant-liste li {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 6px 0;
    }

.sepetsayfa-varyant_gorsel {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f7f7f7;
    flex-shrink: 0;
}

    .sepetsayfa-varyant_gorsel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.sepetsayfa-varyant_bilgi {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 2px;
}

.sepetsayfa-varyant_etiket {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: normal;
}

.sepetsayfa-varyant_kod {
    font-size: 11.5px;
    color: #b3b3b3;
}

.sepetsayfa-varyant_kullanim {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sepetsayfa-varyant_kullanim-etiket {
    font-size: 10.5px;
    color: #777;
    background: #f4f4f4;
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
}

/* sepetsayfa-varyant_bilgi'nin ICINDE degil, satirin (li) DOGRUDAN bir
   sutunu - bilgi hucresinin YANINDA durur, yeterli genis alan (1600px)
   oldugu icin alt alta yigilmasina gerek yok. */
.sepetsayfa-varyant_ozellikler {
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    align-items: center;
    gap: 9px;
    max-width: 240px;
    flex-shrink: 0;
}

.sepetsayfa-varyant_ozellik {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    flex-shrink: 0;
}

    .sepetsayfa-varyant_ozellik img {
        width: 100%;
        object-fit: contain;
    }

.sepetsayfa-varyant_sil {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
    transition: color .15s ease;
}

    .sepetsayfa-varyant_sil:hover {
        color: #c0392b;
    }

    .sepetsayfa-varyant_sil svg {
        width: 18px;
        height: 18px;
    }

@media (max-width: 640px) {
    .sepetsayfa-varyant_gorsel {
        width: 48px;
        height: 48px;
    }
}

.sepet-adet-btn {
    appearance: none;
    border: none;
    background: none;
    width: 18px;
    height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    transition: color .15s ease;
}

    .sepet-adet-btn:hover {
        color: #1a1a1a;
    }

.sepet-adet-input {
    appearance: none;
    -moz-appearance: textfield;
    width: 70px;
    height: 22px;
    padding: 0;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fafafa;
    color: #1a1a1a;
    font-size: 11px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
    font-weight: 600;
}

    .sepet-adet-input:hover {
        border-color: #ccc;
    }

    .sepet-adet-input:focus {
        outline: none;
        border-color: #1a1a1a;
        background: #fff;
    }

    .sepet-adet-input::-webkit-outer-spin-button, .sepet-adet-input::-webkit-inner-spin-button {
        appearance: none;
        -webkit-appearance: none;
        margin: 0;
    }

/* /Sepet sayfasina AIT, sepet modal panelinden (.sepet-varyant_adet/
   .sepet-adet-btn/.sepet-adet-input) TAMAMEN BAGIMSIZ class'lar - ayni
   adlari paylasmiyorlar, boylece biri degistirilince digeri BOZULMAZ. */
.sepetsayfa-adet {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #1a1a1a;
    background: #f1f1f1;
    padding: 10px 18px;
    border-radius: 29px;
}

.sepetsayfa-adet-btn {
    appearance: none;
    border: none;
    background: none;
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    transition: color .15s ease;
}

    .sepetsayfa-adet-btn:hover {
        color: #1a1a1a;
    }

.sepetsayfa-adet-input {
    appearance: none;
    -moz-appearance: textfield;
    width: 80px;
    height: 26px;
    padding: 0;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fafafa;
    color: #1a1a1a;
    font-size: 12.5px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}

    .sepetsayfa-adet-input:hover {
        border-color: #ccc;
    }

    .sepetsayfa-adet-input:focus {
        outline: none;
        border-color: #1a1a1a;
        background: #fff;
    }

    .sepetsayfa-adet-input::-webkit-outer-spin-button, .sepetsayfa-adet-input::-webkit-inner-spin-button {
        appearance: none;
        -webkit-appearance: none;
        margin: 0;
    }

.sepet-panel_alt {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid #efefef;
    background: #fff;
}

.sepet-panel_alt_btn {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    box-sizing: border-box;
}

.sepet-panel_alt_git {
    flex: 1 1 auto;
    border: 1px solid #e2e2e2;
    color: #1a1a1a;
}

    .sepet-panel_alt_git:hover {
        border-color: #1a1a1a;
    }

.sepet-panel_alt_teklif {
    flex: 1 1 auto;
    background: #1a1a1a;
    color: #fff;
}

    .sepet-panel_alt_teklif:hover {
        background: #333;
    }

.sepet-panel_paylas {
    position: relative;
    flex: 0 0 auto;
}

.sepet-panel_paylas_tetik {
    padding: 0 16px;
    border: 1px solid #e2e2e2;
    color: #666;
}

    .sepet-panel_paylas_tetik:hover {
        border-color: #1a1a1a;
        color: #1a1a1a;
    }

.sepet-panel_paylas_liste {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    display: flex;
    flex-direction: column;
    min-width: 130px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.sepet-panel_paylas--acik .sepet-panel_paylas_liste {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.sepet-panel_paylas_liste a, .sepet-panel_paylas_liste button {
    display: block;
    width: 100%;
    appearance: none;
    border: none;
    background: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    color: #333;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .sepet-panel_paylas_liste a:hover, .sepet-panel_paylas_liste button:hover {
        background: #f7f7f7;
        color: #1a1a1a;
    }

@media (max-width: 500px) {
    .sepet-panel {
        width: 100%;
        max-width: 100vw;
    }
}

/* ========== /Sepet ========== */
/* ========== Sepet Sayfasi (/Sepet) ========== */
.sepetsayfa {
    max-width: 1600px;
    padding: 50px 20px 80px;
}

.sepetsayfa_ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 8px;
}

    .sepetsayfa_ust h1 {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: .02em;
        margin: 0;
        color: #1a1a1a;
    }

.sepetsayfa_ozet {
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}

.sepetsayfa_ozet_istatistikler {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 18px;
    background: #f7f7f7;
    border-radius: 12px;
}

.sepetsayfa_ozet_istatistik {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.sepetsayfa_ozet_sayi {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.sepetsayfa_ozet_etiket {
    font-size: 11.5px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sepetsayfa_ozet_ayrac {
    width: 1px;
    align-self: stretch;
    background: #e2e2e2;
}

.sepetsayfa_ozet_temizle {
    appearance: none;
    border: 1px solid #eee;
    background: none;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    color: #999;
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

    .sepetsayfa_ozet_temizle * {
        font-size: 12px;
    }

    .sepetsayfa_ozet_temizle svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }

    .sepetsayfa_ozet_temizle:hover {
        border-color: #c0392b;
        color: #c0392b;
        background: #fdf3f2;
    }

@media (max-width: 700px) {
    .sepetsayfa_ozet {
        flex-wrap: wrap;
        gap: 10px;
    }

    .sepetsayfa_ozet_istatistikler {
        gap: 12px;
        padding: 6px 14px;
    }
}

.sepetsayfa_bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
    color: #bbb;
    text-align: center;
}

    .sepetsayfa_bos svg {
        width: 40px;
        height: 40px;
        opacity: .5;
    }

    .sepetsayfa_bos p {
        font-size: 14px;
        margin: 0;
    }

.sepetsayfa_bos_link {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
}

.sepetsayfa_alt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 24px;
    margin-top: 8px;
    /* border-top: 1px solid #efefef; */
}

.sepetsayfa_teklif {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 28px;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 8px;
    transition: background .15s ease;
}

    .sepetsayfa_teklif * {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .02em;
        color: #fff
    }

    .sepetsayfa_teklif:hover {
        background: #333;
    }

    .sepetsayfa_teklif svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* Paylas + Indir - "Teklif Al" ile AYNI boy (42px), ama disaridan cerceveli
   (Menu.cshtml'deki sepet-panel_alt_btn ile AYNI gorsel dil). */
.sepetsayfa_alt_btn {
    appearance: none;
    border: 1px solid #e2e2e2;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    color: #1a1a1a;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .sepetsayfa_alt_btn * {
        font-size: 12px;
        font-family: inherit;
        font-weight: 600;
    }

    .sepetsayfa_alt_btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .sepetsayfa_alt_btn:hover {
        border-color: #1a1a1a;
    }

.sepetsayfa_paylas {
    position: relative;
}

.sepetsayfa_paylas_liste {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.sepetsayfa_paylas--acik .sepetsayfa_paylas_liste {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.sepetsayfa_paylas_liste a, .sepetsayfa_paylas_liste button {
    display: block;
    width: 100%;
    appearance: none;
    border: none;
    background: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    color: #333;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .sepetsayfa_paylas_liste a:hover, .sepetsayfa_paylas_liste button:hover {
        background: #f7f7f7;
        color: #1a1a1a;
    }

@media (max-width: 600px) {
    .sepetsayfa_alt {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .sepetsayfa_teklif, .sepetsayfa_alt_btn {
        flex: 1 1 auto;
    }

    .sepetsayfa_paylas {
        flex: 1 1 auto;
        display: flex;
    }

        .sepetsayfa_paylas .sepetsayfa_paylas_tetik {
            width: 100%;
        }
}

@media (max-width: 600px) {
    .sepetsayfa_ust {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ========== /Sepet Sayfasi ========== */
/* ========== Sepet Onay Modali (minimal) ========== */
.sepet-onay-katman {
    position: fixed;
    inset: 0;
    /* .popup (z-index:9999) ve icindeki .popkapa (100000)/.pop-face-tam-ekran
       (99999) acikken bile sepet-onay HER ZAMAN en ustte kalmali - aksi
       halde popup'in altinda gizli kaliyordu. */
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,20,20,.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.sepet-onay-katman--acik {
    opacity: 1;
    visibility: visible;
}

.sepet-onay {
    width: 300px;
    max-width: 88vw;
    background: #fff;
    border-radius: 14px;
    padding: 24px 22px 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    transform: translateY(6px);
    transition: transform .2s ease;
}

.sepet-onay-katman--acik .sepet-onay {
    transform: translateY(0);
}

.sepet-onay p {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

.sepet-onay_btnler {
    display: flex;
    gap: 8px;
}

.sepet-onay_vazgec, .sepet-onay_sil {
    appearance: none;
    border: none;
    padding: 0;
    box-sizing: border-box;
    flex: 1 1 auto;
    height: 38px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.sepet-onay_vazgec {
    background: none;
    border: 1px solid #e2e2e2;
    color: #666;
}

    .sepet-onay_vazgec:hover {
        border-color: #1a1a1a;
        color: #1a1a1a;
    }

.sepet-onay_sil {
    background: #c0392b;
    color: #fff;
}

    .sepet-onay_sil:hover {
        background: #a5301f;
    }

/* ========== /Sepet Onay Modali ========== */
/* ========== Sepet Teklif Modali + Yukleniyor/Basari katmanlari ========== */
.sepetsayfa-teklif-katman {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20,20,20,.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.sepetsayfa-teklif-katman--acik {
    opacity: 1;
    visibility: visible;
}

.sepetsayfa-teklif-modal {
    position: relative;
    width: 860px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
    transform: translateY(8px);
    transition: transform .2s ease;
}

.sepetsayfa-teklif-katman--acik .sepetsayfa-teklif-modal {
    transform: translateY(0);
}

.sepetsayfa-teklif-kapat {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    appearance: none;
    border: none;
    background: #1a1a1a;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background .15s ease;
    padding: 11px;
}

    .sepetsayfa-teklif-kapat:hover {
        background: #333;
    }

.sepetsayfa-teklif-modal h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #1a1a1a;
}

.sepetsayfa-teklif-alt {
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.5;
    color: #777;
    max-width: 90%;
}

#sepetTeklifForm {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

@media (max-width: 720px) {
    #sepetTeklifForm {
        grid-template-columns: 1fr 1fr;
    }
}

.sepetsayfa-teklif-alan {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sepetsayfa-teklif-alan--genis {
    grid-column: 1 / -1;
}

.sepetsayfa-teklif-alan label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #333;
}

    .sepetsayfa-teklif-alan label span {
        font-weight: 400;
        color: #999;
        text-transform: none;
        font-size: 10px;
    }

.sepetsayfa-teklif-alan input, .sepetsayfa-teklif-alan textarea, .sepetsayfa-teklif-alan select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 12px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    background: #fafafa;
    transition: border-color .15s ease, background .15s ease;
}

    .sepetsayfa-teklif-alan input:focus, .sepetsayfa-teklif-alan textarea:focus, .sepetsayfa-teklif-alan select:focus {
        outline: none;
        border-color: #1a1a1a;
        background: #fff;
    }

/* Native select oku tarayicidan tarayiciya tutarsiz gorundugu icin
       gizlenir, yerine input/textarea ile AYNI olcek/renkte tek bir SVG
       ok konur - select artik input'lardan gorsel olarak ayirt edilemez. */
.sepetsayfa-teklif-alan select {
    cursor: pointer;
    padding-right: 34px;
    background-color: #fafafa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: right 10px center;
    background-size: 16px 16px;
}

    .sepetsayfa-teklif-alan select:focus {
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat !important;
        background-position: right 10px center;
        background-size: 16px 16px;
    }

    .sepetsayfa-teklif-alan select::-ms-expand {
        display: none;
    }

/* Sehir secici - native <select> yerine ozel/aranabilir dropdown (81 il,
   sabit liste). ".sepetsayfa-teklif-alan input/textarea" ile AYNI gorsel
   dil (border/radius/font) korunur, sadece tetik BUTON oldugu icin ayri
   selector'lar gerekir. */
.sepetsayfa-sehir-secici {
    position: relative;
}

.sepetsayfa-sehir-tetik {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    background: #fafafa;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .sepetsayfa-sehir-tetik #teklifSehirEtiket {
        font-size: 13px;
    }

    .sepetsayfa-sehir-tetik svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        color: #999;
        transition: transform .15s ease;
    }

.sepetsayfa-sehir-secici--acik .sepetsayfa-sehir-tetik {
    border-color: #1a1a1a;
    background: #fff;
}

    .sepetsayfa-sehir-secici--acik .sepetsayfa-sehir-tetik svg {
        transform: rotate(180deg);
    }

.sepetsayfa-sehir-liste {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 5;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(0,0,0,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.sepetsayfa-sehir-secici--acik .sepetsayfa-sehir-liste {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sepetsayfa-sehir-ara {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #efefef;
    border-radius: 10px 10px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    background: none;
}

    .sepetsayfa-sehir-ara:focus {
        outline: none;
        background: #fafafa;
    }

#teklifSehirSecenekler {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.sepetsayfa-sehir-secenek {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

    .sepetsayfa-sehir-secenek:hover {
        background: #f7f7f7;
        color: #1a1a1a;
    }

.sepetsayfa-sehir-secenek--aktif {
    background: #1a1a1a;
    color: #fff;
    font-weight: 600;
}

    .sepetsayfa-sehir-secenek--aktif:hover {
        background: #1a1a1a;
        color: #fff;
    }

.sepetsayfa-sehir-secenek--bos {
    color: #999;
    cursor: default;
    text-align: center;
}

    .sepetsayfa-sehir-secenek--bos:hover {
        background: none;
    }

/* Telefon alani (intl-tel-input v25) - minimal boyut/genislik ayarlari.
   Class isimleri v18+ yapisina gore (.iti__country-container,
   .iti__selected-country, .iti__dial-code, .iti__flag, .iti__country-name)
   jsdelivr uzerindeki gercek build CSS'i sorgulanarak dogrulandi. */
.sepetsayfa-teklif-alan .iti {
    width: 100%;
}

    .sepetsayfa-teklif-alan .iti input {
        width: 100%;
        padding-left: 30px;
    }

    .sepetsayfa-teklif-alan .iti .iti__selected-dial-code {
        font-size: 14px;
    }

.sepetsayfa-teklif-alan .iti__country-list .iti__flag, .sepetsayfa-teklif-alan .iti__country-name {
    font-size: 11px;
}

.sepetsayfa-teklif-alan .iti__dial-code {
    font-size: 11px;
}

.sepetsayfa-teklif-alan .iti__country-container {
    border-radius: 8px 0 0 8px;
}

.sepetsayfa-teklif-alan .iti__selected-country {
    border-radius: 8px 0 0 8px;
}

.sepetsayfa-teklif-alan .iti__dropdown-content {
    border: 1px solid #e2e2e2;
    box-shadow: 0 12px 30px rgba(0,0,0,.14);
    font-size: 13px;
}

.sepetsayfa-teklif-alan textarea {
    resize: vertical;
    min-height: 64px;
}

.sepetsayfa-teklif-hata {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdecea;
    color: #c0392b;
    font-size: 12.5px;
}

.sepetsayfa-teklif-gonder {
    grid-column: 1 / -1;
    appearance: none;
    border: none;
    height: 46px;
    margin-top: 4px;
    background: #1a1a1a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}

    .sepetsayfa-teklif-gonder:hover {
        background: #333;
    }

@media (max-width: 600px) {
    #sepetTeklifForm {
        grid-template-columns: 1fr;
    }
}

/* Iletisim sayfasi formu - Sepet/TeklifKatman ile AYNI gorsel dil
   (.sepetsayfa-teklif-alan/input/textarea/gonder class'lari zaten
   paylasiliyor), sadece grid container kendi selector'una sahip
   (modal degil, sayfa ici sabit form oldugu icin ayri isim). */
.sepetsayfa-teklif-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

@media (max-width: 720px) {
    .sepetsayfa-teklif-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .sepetsayfa-teklif-form {
        grid-template-columns: 1fr;
    }
}

.iletisim-kvkk {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    /* Native checkbox tarayici/tema temalarinda tik isareti gorunmez
       kalabildigi icin appearance:none ile sifirlanip kendi SVG tik
       isaretimizle (:checked durumunda) yeniden cizilir. */
    .iletisim-kvkk input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 18px;
        height: 18px;
        margin: 2px 0 0;
        flex-shrink: 0;
        border: 1px solid #cfcfcf;
        border-radius: 4px;
        background-color: #fafafa;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px 12px;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
    }

        .iletisim-kvkk input[type="checkbox"]:hover {
            border-color: #999;
        }

        .iletisim-kvkk input[type="checkbox"]:checked {
            border-color: #1a1a1a;
            background-color: #1a1a1a;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
        }

    .iletisim-kvkk label {
        font-size: 12.5px;
        line-height: 1.5;
        color: #555;
        font-weight: 400;
        cursor: pointer;
    }

.iletisim-recaptcha {
    display: flex;
    justify-content: center;
}

/* Yukleniyor katmani - form gonderilirken sepet-onay/teklif modaliyle AYNI
   z-index kademesinde, doner SVG spinner (CSS animasyonlu, harici gif YOK). */
.sepetsayfa-yukleniyor-katman {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,20,20,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.sepetsayfa-yukleniyor-katman--acik {
    opacity: 1;
    visibility: visible;
}

.sepetsayfa-yukleniyor-icerik {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 320px;
    text-align: center;
}

    .sepetsayfa-yukleniyor-icerik p {
        margin: 0;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .02em;
    }

.sepetsayfa-yukleniyor-uyari {
    margin-top: -8px !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.7) !important;
    line-height: 1.5;
}

.sepetsayfa-yukleniyor-spinner {
    width: 44px;
    height: 44px;
    animation: sepetsayfaSpin 1s linear infinite;
}

    .sepetsayfa-yukleniyor-spinner circle {
        stroke: #fff;
        stroke-linecap: round;
        stroke-dasharray: 90 60;
    }

@keyframes sepetsayfaSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sepetsayfa-yukleniyor-spinner {
        animation: none;
    }
}

/* Basari katmani - teklif basariyla gonderildikten sonra. */
.sepetsayfa-basari-katman {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20,20,20,.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.sepetsayfa-basari-katman--acik {
    opacity: 1;
    visibility: visible;
}

.sepetsayfa-basari-icerik {
    width: 380px;
    max-width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 36px 28px 28px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
    transform: translateY(8px);
    transition: transform .2s ease;
}

.sepetsayfa-basari-katman--acik .sepetsayfa-basari-icerik {
    transform: translateY(0);
}

.sepetsayfa-basari-icerik svg {
    width: 48px;
    height: 48px;
    color: #2e9c5a;
    margin-bottom: 16px;
}

.sepetsayfa-basari-icerik h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.sepetsayfa-basari-icerik p {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.5;
    color: #777;
}

.sepetsayfa-basari-kapat {
    appearance: none;
    border: none;
    height: 42px;
    padding: 0 32px;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}

    .sepetsayfa-basari-kapat:hover {
        background: #333;
    }

/* ========== /Sepet Teklif Modali + Yukleniyor/Basari katmanlari ========== */
/* ========== Urun Detay Popup (varyant karti) - GENEL BILGI / FACES / TUKETIM
   HESAPLA sekmeli modern modal. .popup zaten tam ekran; ic alan burada
   max-width:1600px ile ortalanir. ========== */
/* .popkapa .lightbox--close class'ini da tasidigi icin eski :before/:after X
   cizimi ile bizim yeni SVG ikonumuz cakisir - svg'yi tek gorunur kaynak
   yapmak icin eski pseudo-element'leri burada devre disi birakiyoruz. */
.popkapa.lightbox--close {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: rgb(255 255 255);
    color: #1a1a1a;
    /* FACES tam ekran galerisi (.pop-face-tam-ekran, z-index:99999) acikken
       bile popup'in genel kapat butonu HER ZAMAN erisilebilir kalmali. */
    z-index: 1;
}

    .popkapa.lightbox--close:hover {
        transform: none;
        background: rgba(0,0,0,.1);
    }

html.csstransforms3d .popkapa.lightbox--close:before, html.csstransforms3d .popkapa.lightbox--close:after, html.no-csstransforms3d .popkapa.lightbox--close:before, html.no-csstransforms3d .popkapa.lightbox--close:after {
    display: none;
}

.popkapa.lightbox--close svg {
    width: 18px;
    height: 18px;
}

/* Eski ".popup > div, .popup > div > div, .popup > div > div > div { height:100% }"
   genel lightbox kurali kaldirildi - .pop-sag_ust/.pop-tab-baslik gibi "icerigi
   kadar yer kapla" bloklarini zorla tam yukseklige cekiyordu. Yerine hepsi
   .pop-modal/.pop-sag altinda bagimsiz, kendi flex kurallariyla tanimlandi. */
.popup .pop-modal {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 1600px;
    height: 90vh;
    max-height: 90vh;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
}

.popup .pop-sol {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Ust satir: secili varyantin galerisi (varyant gorseli + varsa render'lar).
   flex-basis:0 ile yuksekligini TAMAMEN flex hesabindan alir (icerigin
   height:100% zinciri buradan baslar), alt sabit bar disinda kalani kaplar. */
.pop-sol_ust {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    padding: 25px;
    box-sizing: border-box;
}

/* Galeri sayaci (slick-dots yerine): sag-alt kose, arka planssiz - aktif
   slayt buyuk/kalin, toplam sayi kucuk/ince, golge ile her gorsel uzerinde
   okunabilir kalir. */
.pop-galeri-sayac {
    position: absolute;
    bottom: 30px;
    right: 36px;
    z-index: 4;
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    /* text-shadow: 0 1px 6px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4); */
}

    .pop-galeri-sayac * {
        color: #d7d7d7;
    }

.pop-galeri-sayac_aktif {
    font-size: 13px;
    font-weight: 100;
    line-height: 1.2;
}

.pop-galeri-sayac_ayrac {
    font-size: 19px;
}

.pop-galeri-sayac_toplam {
    font-size: 43px;
    font-weight: 100;
}

/* Sag-ust sepet butonu: .urun-ebatlari > ul > li .ue-sepet-btn ile AYNI
   gorsel dil, sadece secili varyantin secili gorseli uzerine (galeri karesi
   degil, .pop-sol_ust'un kendisi) sabitlenir - slaytlar kayarken yerinde kalir. */
.pop-sol-sepet-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    appearance: none;
    border: none;
    padding: 0;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

    .pop-sol-sepet-btn svg {
        width: 18px;
        height: 18px;
    }

    .pop-sol-sepet-btn .ue-sepet-ikon-tik {
        display: none;
    }

    .pop-sol-sepet-btn:hover {
        background: #1a1a1a;
        color: #fff;
        transform: scale(1.08);
    }

    .pop-sol-sepet-btn.ue-sepet-btn--eklendi {
        background: #f7f5f4;
        color: #2e9e5b;
    }

        .pop-sol-sepet-btn.ue-sepet-btn--eklendi:hover {
            background: #c0392b;
            transform: scale(1.08);
        }

        .pop-sol-sepet-btn.ue-sepet-btn--eklendi .ue-sepet-ikon-sepet {
            display: none;
        }

        .pop-sol-sepet-btn.ue-sepet-btn--eklendi .ue-sepet-ikon-tik {
            display: block;
        }

.pop-galeri-slick, .pop-galeri-slick .slick-list, .pop-galeri-slick .slick-track, .pop-galeri-slick .slick-slide, .pop-galeri-slick .slick-slide > div {
    height: 100%;
}

.pop-galeri-kare {
    height: 100%;
}

/* Global ".slick-slide img { object-fit:cover }" kuralini (Content/
       default.css satir ~1503) ezmek icin secici .slick-slide ile ayni
       seviyeye (2 class + element) cikarildi - bkz. .pop-sol-diger-slick
       .pop-sol-diger-resim img'deki ayni not. */
.pop-galeri-slick .pop-galeri-kare img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Render karesi (seriye ait fabrika/lifestyle fotograflari): urun
       gorselinden farkli olarak alani doldurmali, kirpilmasi sorun degil. */
.pop-galeri-slick .pop-galeri-kare--render img {
    object-fit: cover;
}

/* Ust galeri (#popGaleriSlick) icin ozel ok/nokta boyutlari. */
.pop-galeri-slick .slick-arrow {
    width: 35px;
    height: 35px;
}

.pop-galeri-slick .slick-dots li {
    width: 40px;
    height: 40px;
}

/* Alt satir: seriye ait DIGER varyantlar (ebat/renk kartlari) - secili
   varyanta tiklandiginda tum popup icerigi o varyanta gore yeniden yuklenir.
   Sol/sag'da SABIT ileri-geri kolonlari, ortada kayan kart alani.
   16vh ekrana gore dinamik ama max-height:158px ile (120px kare resim +
   10px bosluk + 28px iki-satirli etiket = 158px) tasma engellenir. */
.pop-sol_alt {
    flex: 0 0 170px;
    height: 170px;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    border-top: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
    padding: 20px 0;
}

.pop-sol-diger-ok {
    flex: 0 0 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    box-sizing: border-box;
    color: #999;
    cursor: pointer;
    transition: color .15s ease;
}

    .pop-sol-diger-ok:hover {
        color: #1a1a1a;
    }

    .pop-sol-diger-ok:disabled {
        color: #ddd;
        cursor: default;
    }

    .pop-sol-diger-ok svg {
        width: 10px;
        height: 10px;
    }

.pop-sol-diger-govde {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    padding: 5px 0;
    box-sizing: border-box;
}

.pop-sol-diger-slick, .pop-sol-diger-slick .slick-list, .pop-sol-diger-slick .slick-track {
    height: 100%;
}

    /* NOT: Slick, .pop-sol-diger-kare'nin KENDISINE hem "slick-slide" class'ini
       hem (variableWidth:true ile) inline width stilini yazar (ayni DOM
       elementi, sarmalayici degil). Bu elemente display:flex/inline-flex
       VERILMEZ - Slick genislik olcumunu elementin DOGAL (block) genisligine
       gore yapar, flex verilirse tum slide'lar container genisligine
       (orn. 933px) esitlenip olcum bozulur. Dikey ortalama bu yuzden
       margin: auto (block-level teknik) ile ic butona uygulanir. */
    .pop-sol-diger-slick .slick-slide {
        height: 100%;
    }

/* Kartlar arasi bosluk 10px (sag+sol 5px = kare araliginda toplam 10px). */
.pop-sol-diger-slick {
    margin: 0 -5px;
}

.pop-sol-diger-kare {
    padding: 0;
    box-sizing: border-box;
    height: 100%;
}

.pop-sol-diger-btn {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    box-sizing: border-box;
}

/* Resim SABIT KARE (120x120), cover ile alani doldurur - ebat oranindan
   bagimsiz, tum kartlar ayni boyut. */
.pop-sol-diger-resim {
    display: block;
    width: 80px;
    height: 80px;
    flex: 0 0 auto;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    border: 2px solid transparent;
    transition: border-color .15s ease;
}

.pop-sol-diger-btn:hover .pop-sol-diger-resim {
    border-color: rgba(0,0,0,.15);
}

.pop-sol-diger-btn--aktif .pop-sol-diger-resim {
    border-color: #1a1a1a;
}

/* Global ".slick-slide img { object-fit:cover }" kuralini (Content/
       default.css satir ~1503) burada MUTLAKA ezmeli - ayni specificity'de
       CSS sirasi kazanir ama garanti icin secici .slick-slide ile ayni
       seviyeye (2 class + element) cikarildi. */
.pop-sol-diger-slick .pop-sol-diger-resim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Etiket icin SABIT 28px yukseklik ayrilir (120 resim + 10 bosluk + 28
   iki-satirli etiket = 158px, .pop-sol_alt'in max-height'i ile tam oturur).
   Ebat ve renk alt alta iki ayri satir olarak gosterilir. */
.pop-sol-diger-etiket {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 0 0 28px;
    margin-top: 5px;
    max-width: 100%;
}

.pop-sol-diger-etiket_ebat {
    font-size: 10px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pop-sol-diger-etiket_renk {
    font-size: 10px;
    color: #888;
    line-height: 1.3;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup .pop-sag {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
    height: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Ust footer: baslik (pop-sag_ust) + sekme cubugu (pop-tab-baslik) tek bir
   sabit blokta birlesir, ortalanir; icerik kaydirilsa da yerinde kalir. */
.pop-sag .pop-sag_ust-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    padding: 40px 48px 0;
    box-sizing: border-box;
}

.pop-sag .pop-sag_ust {
    display: flex;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.pop-sag_ust h1 {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
}

.pop-sag_ust .pop-alt-baslik {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.pop-sag .pop-tab-baslik {
    flex: 0 0 auto;
    height: auto;
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    border-bottom: 1px solid #ececec;
}

.pop-tab-btn {
    appearance: none;
    border: none;
    background: none;
    padding: 10px 16px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

    .pop-tab-btn:hover {
        color: #1a1a1a;
    }

.pop-tab-btn--aktif {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
}

/* Orta govde: kalan yuksekligi (ust/alt footer disindaki tum alani) flex ile
   otomatik hesaplar, kendi icinde min-height:0 ile scroll'a izin verir -
   sayfa degil SADECE tablo/panel icerigi kayar. */
.pop-sag .pop-tab-govde {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 24px 48px;
    box-sizing: border-box;
}

.pop-tab-panel {
    display: none;
    height: 100%;
}

/* Sekme icerigi: SADECE bu alan kayar (sayfa/modal degil), modern minimal
   scrollbar ile. */
.pop-tab-panel--aktif {
    display: block;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #e2e2e2 transparent;
    padding: 0 15px 0 0;
}

    .pop-tab-panel--aktif::-webkit-scrollbar {
        width: 6px;
    }

    .pop-tab-panel--aktif::-webkit-scrollbar-track {
        background: transparent;
    }

    .pop-tab-panel--aktif::-webkit-scrollbar-thumb {
        background: #e2e2e2;
        border-radius: 999px;
    }

        .pop-tab-panel--aktif::-webkit-scrollbar-thumb:hover {
            background: #c9c9c9;
        }

.pop-bilgi-tablo {
    width: 100%;
    border-collapse: collapse;
}

    .pop-bilgi-tablo tr {
        border-bottom: 1px solid #f0f0f0;
    }

    .pop-bilgi-tablo td {
        padding: 10px 0;
        font-size: 13px;
        color: #555;
        vertical-align: top;
        line-height: 1.1;
    }

        .pop-bilgi-tablo td:first-child {
            color: #999;
            width: 46%;
        }

        .pop-bilgi-tablo td:last-child {
            color: #1a1a1a;
            font-weight: 600;
            text-align: right;
        }

.pop-face-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* .pop-face-kare artik <button> - reset.css'teki global button{padding:13px
   20px} kuralini ezmek icin appearance/padding/border SIFIRLANMALI. */
.pop-face-kare {
    appearance: none;
    display: block;
    width: 100%;
    /*    aspect-ratio: 1 / 1;*/
    padding: 0;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    background: #f4f4f4;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity .15s ease;
}

    .pop-face-kare:hover {
        opacity: .85;
    }

    .pop-face-kare img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
    }

/* FACES tam ekran galerisi - .udg-tam-ekran ile ayni desen, popup icinde.
   .popup zaten z-index:9999 tasiyor ve kendi stacking context'ini olusturuyor,
   bu yuzden .pop-face-tam-ekran'in z-index'i SADECE popup'in diger
   cocuklarina (.pop-modal, .popkapa) gore kiyaslanir - yine de altta kalan
   footer ikonlarinin (roomvo/paylas gibi 3. parti widget'lar dahil) hicbir
   sekilde sizmamasi icin hem cok yuksek bir z-index hem de TAM OPAK
   (rgba degil duz renk) arka plan verildi. */
.pop-face-tam-ekran {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.pop-face-tam-ekran--acik {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pop-face-tam-ekran_slick {
    position: relative;
    width: 100%;
    height: 100%;
}

    .pop-face-tam-ekran_slick, .pop-face-tam-ekran_slick .slick-list, .pop-face-tam-ekran_slick .slick-track, .pop-face-tam-ekran_slick .slick-slide, .pop-face-tam-ekran_slick .slick-slide > div {
        height: 100%;
    }

.pop-face-tam-ekran_kare {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
}

    .pop-face-tam-ekran_kare img {
        max-width: 92vw;
        max-height: 88vh;
        width: auto;
        height: auto;
        object-fit: contain;
        -webkit-user-select: none;
        user-select: none;
    }

.pop-face-tam-ekran_kapa {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

    .pop-face-tam-ekran_kapa:hover {
        background: rgba(255,255,255,.2);
    }

    .pop-face-tam-ekran_kapa svg {
        width: 18px;
        height: 18px;
    }

/* Tam ekran galerinin ok/nokta stili - ana .udg-galeri-slick ile ayni dil. */
.pop-face-tam-ekran_slick .slick-prev, .pop-face-tam-ekran_slick .slick-next {
    z-index: 3;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    transition: opacity .2s ease;
    opacity: .85;
    transform: translateY(-50%) rotate(0deg);
}

    .pop-face-tam-ekran_slick .slick-prev:hover, .pop-face-tam-ekran_slick .slick-next:hover {
        opacity: 1;
    }

.pop-face-tam-ekran_slick .slick-prev {
    left: 12px;
}

.pop-face-tam-ekran_slick .slick-next {
    right: 12px;
}

    .pop-face-tam-ekran_slick .slick-prev:before, .pop-face-tam-ekran_slick .slick-next:before {
        content: "";
        display: block;
        width: 22px;
        height: 16px;
        opacity: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

.pop-face-tam-ekran_slick .slick-prev:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='34' viewBox='0 0 46 34' fill='none'%3E%3Cpath d='M44.3334 17H1.66671M1.66671 17L17.6667 1M1.66671 17L17.6667 33' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pop-face-tam-ekran_slick .slick-next:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='34' viewBox='0 0 46 34' fill='none'%3E%3Cpath d='M1.66675 17H44.3334M44.3334 17L28.3334 1M44.3334 17L28.3334 33' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pop-face-tam-ekran_slick .slick-dots {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: auto;
    width: auto;
    z-index: 3;
    display: flex !important;
    gap: 8px;
    margin: 0;
}

    .pop-face-tam-ekran_slick .slick-dots li {
        width: 28px;
        height: 12px;
        margin: 0;
        background: none;
    }

        .pop-face-tam-ekran_slick .slick-dots li button {
            width: 28px;
            height: 12px;
            padding: 0;
            display: flex;
            align-items: center;
            font-size: 0;
            background: none;
        }

            .pop-face-tam-ekran_slick .slick-dots li button:before {
                content: "";
                width: 100%;
                height: 2px;
                background: rgba(255,255,255,.4);
                opacity: 1;
                transition: background .2s ease;
            }

        .pop-face-tam-ekran_slick .slick-dots li.slick-active button:before {
            background: #fff;
        }

.pop-bos-mesaj {
    font-size: 13px;
    color: #999;
    margin: 0;
}

.pop-tuketim-form {
    margin-top: 18px;
}

.pop-tuketim-alan {
    margin-bottom: 16px;
}

    .pop-tuketim-alan label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #999;
        margin-bottom: 6px;
    }

.pop-tuketim-alan--ikili {
    display: flex;
    gap: 12px;
}

    .pop-tuketim-alan--ikili > div {
        flex: 1 1 50%;
    }

.pop-tuketim-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    font-size: 14px;
    color: #1a1a1a;
    transition: border-color .15s ease;
}

    .pop-tuketim-input:focus {
        outline: none;
        border-color: #1a1a1a;
    }

.pop-tuketim-sonuc {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
    padding: 14px 16px;
    background: #f7f7f7;
    border-radius: 8px;
}

    .pop-tuketim-sonuc span {
        font-size: 28px;
        font-weight: 700;
        color: #1a1a1a;
        font-variant-numeric: tabular-nums;
    }

    .pop-tuketim-sonuc small {
        font-size: 12px;
        color: #888;
    }

.miniType {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

    .miniType .form-check {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .miniType .form-check-label {
        font-size: 12px;
        color: #555;
        cursor: pointer;
    }

/* Alt footer: sabit, ortalanmis - PDF/Satis Noktalari/Soru Sor ve paylasim
   ikonlari her zaman ayni yerde durur, sekme icerigi kaysa da yerinden oynamaz. */
.pop-sag .pop-sag_alt {
    flex: 0 0 auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 48px 32px;
    box-sizing: border-box;
    border-top: 1px solid #ececec;
}

/* Paylas ikonlari: eski .popupbilgiler .sosyal-icon kurallari yeni markup'ta
   (.popikili > .sosyal-icon, .popupbilgiler wrapper'i yok) hic eslesmiyordu
   - svg'ler kendi inline width/height="100%" attribute'lariyle kaldigi icin
   kapsayici kadar buyuyorlardi. */
.pop-sag_alt .sosyal-icon ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pop-sag_alt .sosyal-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f4f4f4;
    color: #555;
    transition: background .15s ease, color .15s ease;
}

    .pop-sag_alt .sosyal-icon a:hover {
        background: #1a1a1a;
        color: #fff;
    }

.pop-sag_alt .sosyal-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.pop-sag_alt .popikili {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 16px;
}

.miniButton {
    width: 100%;
}

    .miniButton ul {
        display: flex;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .miniButton li {
        flex: 1 1 auto;
    }

        .miniButton li a, .miniButton li > button {
            display: block;
            width: 100%;
            appearance: none;
            text-align: center;
            padding: 12px 8px;
            margin: 0;
            border: 1px solid #e2e2e2;
            border-radius: 6px;
            background: none;
            font-family: inherit;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .3px;
            color: #1a1a1a;
            text-decoration: none;
            cursor: pointer;
            box-sizing: border-box;
            transition: background .15s ease, color .15s ease, border-color .15s ease;
        }

            .miniButton li a:hover, .miniButton li > button:hover {
                background: #1a1a1a;
                color: #fff;
                border-color: #1a1a1a;
            }

/* Paylas dropdown: PDF/Evinde Gor ile ayni miniButton satirinda, ustte acilan
   minimal WhatsApp/Kopyala listesi. */
/* Paylas dropdown: .udh-fab_paylas_liste ile ayni gorsel dil - daire ikon
   butonlar, yatay pill icinde, tetikleyicinin ustunde acilir. */
.pop-paylas {
    position: relative;
}

.pop-paylas_liste {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateY(6px) translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 5;
}

.pop-paylas--acik .pop-paylas_liste {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) translateX(-50%);
}

/* .miniButton li { flex:1 1 auto } ile AYNI specificity'de oldugundan
   (kaynak sirasina guvenmek yerine) kasti olarak spesiklestirildi. */
.miniButton .pop-paylas_liste li {
    flex: 0 0 auto;
}

/* .miniButton li a/button (width:100%, padding:12px 8px, border:1px solid)
   .pop-paylas_liste'nin DAIRE ikon butonlarini eziyordu (".miniButton li a"
   specificity'si ".pop-paylas_liste a"dan yuksekti) - bu yuzden WhatsApp/
   Kopyala butonlari 34x34 daire yerine ebeveyn <li>'nin tam genisligine
   yayilip ekran goruntusundeki bozuk "hap" gorunumunu olusturuyordu.
   ".miniButton .pop-paylas_liste a" ile specificity kasti olarak yukseltilip
   TUM miniButton stillerini (width/padding/border/font) sifirlar. */
.miniButton .pop-paylas_liste a, .miniButton .pop-paylas_liste button {
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: none;
    background: none;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border-radius: 50%;
    color: #555;
    font-size: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .miniButton .pop-paylas_liste a:hover, .miniButton .pop-paylas_liste button:hover {
        background: #f4f4f4;
        color: #1a1a1a;
    }

    .miniButton .pop-paylas_liste a svg, .miniButton .pop-paylas_liste button svg {
        width: 16px;
        height: 16px;
    }

.pop-paylas_kopyala--tamam {
    background: #2e9e5b;
    color: #fff;
}

    .pop-paylas_kopyala--tamam:hover {
        background: #2e9e5b;
        color: #fff;
    }

@media (max-width: 1100px) {
    .pop-modal {
        flex-direction: column;
        overflow-y: auto;
    }

    .pop-sol, .pop-sag {
        flex-basis: auto;
        max-width: 100%;
    }

    .pop-sol {
        height: 45vh;
    }

    .pop-sag {
        height: auto;
        overflow-y: visible;
        padding: 28px 24px;
    }
}

@media (max-width: 600px) {
    .pop-sag_alt .popikili {
        flex-direction: column;
        align-items: stretch;
    }

    .miniButton ul {
        flex-direction: column;
    }
}

/* ========== /Urun Detay Popup ========== */