* {





    margin: 0;





    padding: 0;





    box-sizing: border-box;





    font-family: inherit;





    font-size: inherit;





}











img {





    max-width: 100%;





}











a {





    text-decoration: none;





    color: inherit;





}











:root {





    --primary-color: #7650ff;





    --secondary-color: #494949;





    --text-light-color: #555;





    --text-lighter-color: #999;





    --light-gray-color: #f9f9f9;





    --background-color: #fff;





    --text-color: white;





    --light-bg-color: #f9f9f9;





    --black: #1d1d1d;











    --border-radius: 5px;











    --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);





    --box-shadow-md: 0 0 10px rgba(0, 0, 0, 0.2);











    --body-font: "Montserrat", sans-serif;





    --body-font-size: 16px;





    --body-text-color: var(--text-color);











    --header-height: 70px;





}











html,





body {





    height: 100vh;





}











body {





    font-family: var(--body-font);





    font-size: var(--body-font-size);





    background-color: var(--black);





    color: var(--body-text-color);























}











/* Header */











header {





    position: fixed;





    z-index: 99999;





    width: 100%;





    height: var(--header-height);





    background-color: var(--primary-color);





    padding: 0 1rem;





    color: var(--background-color);





    background-color: #171717;





    box-shadow: 0px 8px 46px 5px rgba(0, 0, 0, 0.67);





    display: flex;





    justify-content: space-between;





    align-items: center;











    transition: 0.3s ease;





}











header.no-scroll {





    top: 0 !important;





}











header .action-box {





    --action-box-size: 40px;











    cursor: pointer;





    user-select: none;











    display: flex;





    align-items: center;





    justify-content: center;











    width: var(--action-box-size);





    height: var(--action-box-size);











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





    color: #171717;





    border-radius: var(--border-radius);





    box-shadow: var(--box-shadow);





    font-size: 20px;





    transition: 0.4s ease-in-out;





}











header .action-box .action:not(.active) {





    display: none;





}











header .action-box .action {





    display: flex;





    justify-content: center;





    align-items: center;





    width: 100%;





    height: 100%;





}











header .action-box.active {





    display: flex;





    justify-content: center;





    align-items: center;





    width: 100%;





    height: 100%;





}











header .action-box:hover {





    background-color: var(--secondary-color);





    color: white;





}











header .language-dropdown-box {





    --language-dropdown-box-size: 40px;











    cursor: pointer;





    position: relative;





    user-select: none;











    display: flex;





    align-items: center;





    justify-content: center;











    min-width: var(--language-dropdown-box-size);





    height: var(--language-dropdown-box-size);











    padding: 0 0.75rem;











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





    color: #171717;





    border-radius: var(--border-radius);





    box-shadow: var(--box-shadow);





    font-size: var(--body-font-size);





    font-weight: 700;





    transition: 0.4s ease-in-out;





}











header .language-dropdown-box .language-label {





    display: flex;





    align-items: center;





}











header .language-dropdown-box:not(.single-language):hover,





header .language-dropdown-box:not(.single-language).active {





    background-color: var(--secondary-color);





    color: white;





}











header .language-dropdown-box i {





    margin-left: 5px;





    font-size: 18px;





}











header .language-dropdown-box.single-language i {





    display: none;





}











header .language-dropdown-box .dropdown-content {





    display: none;











    position: absolute;





    top: calc(100% + 10px);





    left: 0;











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





    width: 100%;





    border-radius: var(--border-radius);





    box-shadow: var(--box-shadow-md);











    overflow: hidden;





}











header .language-dropdown-box .dropdown-content .dropdown-item {





    padding: 0.5rem 0.75rem;





    transition: 0.4s ease-in-out;





    color: var(--text-light-color);





}











header .language-dropdown-box .dropdown-content .dropdown-item a {





    display: block;





}











header .language-dropdown-box .dropdown-content .dropdown-item:hover {





    background-color: var(--secondary-color);





    color: white;





}











/* Main */











main {





    background-color: var(--black);





    height: calc(100vh - 70px);





    display: flex;





    flex-direction: column;





    max-width: 1200px;





    margin: auto;





}











.container {





    max-width: 1200px;





    margin: 0 auto;





    padding: 0 1rem;





}











/* Dealer Intro */











#dealer-intro {





    padding: 1rem 1rem;





    background-color: var(--black);





    border-bottom: 2px solid var(--black);





}











#dealer-intro .content {





    display: flex;





    justify-content: center;





    align-items: center;





    flex-direction: column;





    text-align: center;





}











#dealer-intro .content img {
    width: 728px;
    height: 242px;
    border-radius: 10px;

}











#dealer-intro .content h1 {





    margin-top: 10px;





    font-size: 1.25rem;





    line-height: 1;





    margin-bottom: 5px;





}











#dealer-intro .content p {





    font-size: 0.975rem;





    margin-top: 0;





    margin-bottom: 0;





}











/* Main Category Carousel */











#main-category-carousel-wrapper {





    background-color: var(--black);





    position: sticky;





}











#main-category-carousel {





    padding: 1rem;





    overflow: hidden;





}











#main-category-carousel .category-item {





    border-radius: 10px;





    cursor: pointer;





    user-select: none;





    transition: 0.4s ease-in-out box-shadow;





    /* overflow: hidden; */





    width: 100%;





}











#main-category-carousel .category-item .icon {





    height: 120px;





    display: flex;





    justify-content: center;





    align-items: center;





    background: white;





    border-top-right-radius: 10px;





    border-top-left-radius: 10px;





}











#main-category-carousel .category-item .icon img {





    width: 80px;





    height: 80px;





    object-fit: cover;





}











#main-category-carousel .category-item > img {





    width: 100%;





    height: 100%;





    object-fit: cover;





    display: block;





    height: 120px;





    border-top-right-radius: 10px;





    border-top-left-radius: 10px;





}











#main-category-carousel .category-item p {





    font-size: 0.9rem;





    font-weight: 600;





    padding: 0.75rem 0.75rem;





    margin-bottom: 0;





    background: rgb(51, 51, 51);





    border-bottom-right-radius: 10px;





    border-bottom-left-radius: 10px;





    text-align: center;





}











#main-category-carousel .category-item.active {





    box-shadow: 0 0 0 2px var(--primary-color);





}











/* Main Product List */











html {





    --product-grid-template-columns: repeat(1, 1fr);





    --product-grid-gap: 1rem;





}











@media (min-width: 768px) {





    html {





        --product-grid-template-columns: repeat(2, 1fr);





        --product-grid-gap: 1rem;





    }





}











@media (min-width: 1200px) {





    html {





        --product-grid-template-columns: repeat(3, 1fr);





        --product-grid-gap: 1rem;





    }





}











@media (min-width: 1600px) {





    html {





        --product-grid-template-columns: repeat(4, 1fr);





        --product-grid-gap: 1rem;





    }





}











.product-list-grid {





    display: block;





}











#main-product-list {





    padding: 1rem;





    /*flex: 1;*/





}











.product-card {





    border-radius: 10px;





    cursor: pointer;





    user-select: none;





    transition: 0.4s ease-in-out box-shadow;





    box-shadow: var(--box-shadow);





    margin-bottom: 52px;





    box-shadow: 0px 6px 23px 2px rgba(0, 0, 0, 0.31) !important;





    padding: 15px 24px;





}





.product-card .image-area-wrap {





    display: flex;





    align-items: end;





    margin-top: -34px;





}











.product-card .image-box > img {





    object-fit: cover;





    border-radius: 10px;





    display: block;





    max-width: 100px;





    height: 100px;





    box-shadow: 7px 11px 23px -9px rgba(0, 0, 0, 0.38) !important;





    margin-right: 14px;





}











.product-card .product-info {





    flex: 1;





}











.product-card .product-name {





    font-size: 1rem;





    font-weight: 700;





    margin-bottom: 5px;





    overflow: hidden;





    text-overflow: ellipsis;





}











.product-card .product-info .product-description {





    opacity: 0.7;





    font-size: 0.8rem;





    margin-bottom: 10px;





    font-weight: 500;





    max-width: 100%;





    line-height: 1.4;





    margin-top: 25px;





}











.product-card .product-price {





    font-size: 0.875rem;





    font-weight: 500;





    text-align: end;





}











.product-card .original {





    margin-right: 5px;





    text-decoration: line-through;





    color: var(--text-lighter-color);





}











.product-card .product-price .discounted {





    font-size: 1.1rem;





    font-weight: 700;





    opacity: 0.8;





}











#product-detail-page .product-image {





    max-height: 280px;





    max-width: 280px;





    width: 100%;





    object-fit: contain;





    display: block;





    border-radius: 20px;





    margin: auto;





    box-shadow: 0px 7px 21px 3px rgba(0, 0, 0, 0.45);





    z-index: 4;





    position: relative;





}





@media (max-width: 760px) {





    #product-detail-page .product-image {





        max-height: 200px;





        max-width: 200px;





    }





}











#product-detail-page .product-detail {





    padding: 1rem;





    position: relative;





    box-shadow: 0px 10px 32px 10px rgba(0, 0, 0, 0.18);





    margin-top: -30px;





    padding-top: 70px;





    padding-bottom: 30px;





    border-radius: 20px;





    text-align: center;





}











#product-detail-page .product-detail .product-name {





    font-size: 1.15rem;





    font-weight: 700;





    margin-bottom: 10px;





    color: white;





}











#product-detail-page .product-detail .product-price {





    font-size: 1rem;





    font-weight: 500;





}











#product-detail-page .product-detail .original {





    margin-right: 5px;





    text-decoration: line-through;





    color: var(--text-lighter-color);





}











#product-detail-page .product-detail .product-price .discounted {





    font-size: 1.15rem;





    font-weight: 700;





    color: white;





}











#product-detail-page .product-fav {





    position: absolute;





    top: 1.75rem;





    right: 1.75rem;





    cursor: pointer;





    user-select: none;





    color: white;





    font-size: 1.25rem;





    width: 2.5rem;





    height: 2.5rem;





    display: flex;





    justify-content: center;





    align-items: center;





    border-radius: 100%;





}











#product-detail-page .product-detail .product-fav span {





    opacity: 0;





    transition: 0.4s ease;





    position: absolute;





    top: 50%;





    left: 50%;





    transform: translate(-50%, -50%);





}











#product-detail-page .product-detail .product-fav.active .fav-true {





    display: block;





    color: red;





    opacity: 1;





    animation: fav-true 0.4s ease;





    animation-iteration-count: 1;





}











#product-detail-page .product-detail .product-fav:not(.active) .fav-false {





    display: block;





    opacity: 1;





    animation: fav-true 0.4s ease;





    animation-iteration-count: 1;





}











#product-detail-page .product-description {





    font-weight: 500;





    max-width: 620px;





    margin: auto;





    padding-top: 12px;





    line-height: 22px;





    font-size: 14px;





}











@keyframes fav-true {





    0% {





        transform: translate(-50%, -50%) scale(1);





    }





    50% {





        transform: translate(-50%, -50%) scale(1.5);





    }





    100% {





        transform: translate(-50%, -50%) scale(1);





    }





}











/* Pages */











::-webkit-scrollbar {





    width: 6px;





}











/* Track */





::-webkit-scrollbar-track {





    border-radius: 0px;





}











/* Handle */





::-webkit-scrollbar-thumb {





    background: #565656;





    border-radius: 0px;





}











.page {





    height: 100%;





    width: 100vw;











    padding-top: calc(var(--header-height) + 30px);





    background-color: var(--black);











    position: fixed;





    top: 0;





    left: 0;





    transition: 0.4s ease;





    visibility: hidden;





    opacity: 0;





    transform: translateX(-100%);





    overflow-x: hidden;





    overflow-y: auto;





}











.page.active {





    visibility: visible;





    opacity: 1;





    transform: translateX(0);





}























       /* Stil düzenlemeleri */
       #wifiButton {
        cursor: pointer;
        padding: 10px;
        background-color: #3498db;
        color: #fff;
        border-radius: 5px;
        margin-right: 10px;
    }

    #wifiPopup {
        display: none;
        position: fixed;
        color:#171717;
        margin: 5px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        z-index: 1000;
        width: 250px;
    }

    #langModal {
        display: none;
        position: fixed;
        color:#171717;
        margin: 5px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        z-index: 1000;
        width: 250px;
    }

    /* WiFi Popup Stilleri */
#wifiPopup {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}


#langModal {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.popupButton {
    padding: 10px 15px;
    background-color: #171717; /* Yeşil renk kullanabilirsiniz, tercihe bağlı */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}