@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: "Poppins", sans-serif;
    background-color: #fff;
    position: relative; /* Pseudo-element için gerekli */
}

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../img/bgimg.png');
        background-size: cover; /* Resmin tüm alanı kaplamasını sağlar */
        background-position: center;
        object-fit: fill; /* Resmi object-fit gibi davranmasını sağlar */
        opacity: 0.18; /* Opaklığı %18'e ayarlar */
        z-index: -1; /* Pseudo-elementi body's contentinin arkasına koyar */
        pointer-events: none; /* Pseudo-elementin kullanıcı etkileşimlerine müdahale etmesini engeller */
    }

.fs-8px {
    font-size: 8px !important;
}

.fs-12px {
    font-size: 12px !important;
}

.storySlider-slider .storySlider img {
    display: block;
    width: 100%;
    border-radius: 50%;
    background: rgb(6,169,110);
    border: 5px solid transparent;
    object-fit: cover;
    width: 100px;
    height: 100px;
    margin-right: 21px;
}

.homeSlider-slider .swiper {
    width: 100%;
    height: 100%;
    border-radius: 37px;
}

.homeSlider-slider .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 37px;
}

    .homeSlider-slider .swiper-slide img {
        display: block;
        width: 100%;
        height: 508px;
        object-fit: cover;
    }

.homeSlider-slider .swiper-pagination-bullet {
    width: 34px;
    height: 34px;
    text-align: center;
    bottom: 2rem;
    font-size: 17px;
    color: transparent;
    opacity: 1;
    background: rgba(0,0,0, 0.4);
    top: 20px !important;
    transition: all 200ms ease-in-out;
}

.me-14 {
    margin-left: 14px;
}

.searchInput-input {
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.homeSlider-slider .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 5rem !important;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px) !important;
}

.homeSlider-slider .swiper-pagination-bullet:hover {
    transform: scale(1.1);
    transition: all 200ms ease-in-out;
}

.homeSlider-slider .swiper-pagination-bullet-active {
    color: transparent;
    border: solid 1px #fff;
    background: rgba(255,255, 255, 0.6);
    transition: all 200ms ease-in-out;
    transform: scale(1.1);
}

    .homeSlider-slider .swiper-pagination-bullet-active:focus {
        transition: all 200ms ease-in-out
    }

.featuredCollection .featuredCollectionCard img {
    -webkit-box-shadow: 5px 13px 24px -13px rgba(0,0,0,0.6);
    -moz-box-shadow: 5px 13px 24px -13px rgba(0,0,0,0.6);
    box-shadow: 5px 13px 24px -13px rgba(0,0,0,0.6);
    transition: all 400ms ease-in-out;
    object-fit: cover;
}

.featuredCollection .featuredCollectionCard .image-wrapper {
    position: relative;
    display: inline-block;
    transition: all 400ms ease-in-out;
}

    .featuredCollection .featuredCollectionCard .image-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #FF4848;
        opacity: 0.2;
        border-radius: 1rem;
        transition: all 400ms ease-in-out;
    }

    .featuredCollection .featuredCollectionCard .image-wrapper:hover {
        transform: scale(1.1);
        transition: all 400ms ease-in-out;
    }

        .featuredCollection .featuredCollectionCard .image-wrapper:hover::after {
            opacity: 0;
            transition: all 400ms ease-in-out;
        }

.featuredCollection .featuredDiscount .productCard .productCardImg img {
    width: 100%;
    height: 303.75px;
    border-radius: 139.89px 139.89px 0 0;
    object-fit: cover;
}

.addCardButton {
    background-color: #06A93D;
    border: solid 1px #06A93D;
}

.discount {
    bottom: 7px;
    left: -16px;
}

.productCard {
    border-radius: 139.89px 139.89px 0 0;
    transition: all 200ms ease-in-out;
}

    .productCard:hover {
        transform: scale(1.01);
        transition: all 200ms ease-in-out;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
    }

.getOffBG {
    background: rgb(15,255,96);
    background: linear-gradient(28deg, rgba(15,255,96,1) 0%, rgba(192,243,209,1) 58%, rgba(250,255,251,1) 73%, rgba(192,243,209,1) 86%, rgba(11,210,78,1) 100%);
}

.bx-customCSS {
    border: solid 2px #000;
    width: 24px;
    height: 24px;
    font-weight: bolder;
    font-size: 22px;
    transition: all 200ms ease-in-out;
}

    .bx-customCSS:hover {
        background-color: #000;
        color: #fff;
        transform: scale(1.4);
        transition: all 200ms ease-in-out;
    }

.img-container {
    width: 100%;
    height: 0;
    padding-bottom: 150%;
    position: relative;
    overflow: hidden;
    transition: transform .2s;
}

    .img-container img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Görüntüyü kırpmadan ve bozmadan sığdırır */
        transform: translate(-50%, -50%);
    }

.inputSize {
    width: auto;
    height: 50px;
}


.filterNavigatorTitle {
    color: #000;
    text-decoration: none;
}

.ml-auto {
    margin-left: auto;
}

.checkBoxTitle {
    transition: 200ms ease-in-out;
    border-radius: 8px;
}

    .checkBoxTitle:hover {
        opacity: 1;
        transform: scale(1.02);
        transition: 80ms ease-in-out;
        background-color: rgb(6, 169, 61, .3);
        color: #000;
        border-radius: 8px;
    }

.titleHover {
    display: inline-block;
    position: relative;
}

    .titleHover::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: rgb(168 144 104 / 30%);
        transform-origin: bottom right;
        opacty: .5;
        transition: transform 0.25s ease-out;
    }

    .titleHover:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

.bg-yellow {
    background-color: rgb(6, 169, 61);
}


.btn-quantity {
    outline: 0;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff7ec;
    border: none;
    color: #f28e00;
    transition: 300ms all;
    line-height: 0;
}


    .btn-quantity:hover {
        color: #ffff;
        background-color: #f28e00;
    }

    .btn-quantity:hover {
        cursor: pointer;
    }

.quantity #decrease {
    margin-right: -4px;
    border-radius: 8px 0 0 8px;
}

.quantity #increase {
    margin-left: -4px;
    border-radius: 0 8px 8px 0;
}


.quantity #increase {
    margin-left: -4px;
    border-radius: 0 8px 8px 0;
}


.input-quantity {
    text-align: center;
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 0px;
    width: 83px;
    height: 40px;
    line-height: 1.65;
    display: block;
    padding: 0;
    margin: 0 10px;
    border: 1px solid #eee;
    font-size: 1.4rem;
    color: #f28e00;
    outline: 0;
    background-color: #fff7ec;
    border-radius: 25px;
    box-shadow: inset 0 1px 3px 0 #00000012;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.filter-title {
    max-height: 125px;
    overflow: hidden;
    transition: 400ms ease-in-out;
}

    .filter-title:hover {
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: rgb(6, 169, 61, .60) rgb(6, 169, 61, .0);
        transition: 400ms ease-in-out;
    }


        .filter-title:hover::-webkit-scrollbar-track {
            background-color: transparent;
        }


        .filter-title:hover::-webkit-scrollbar-thumb {
            background-color: transparent !important;
            border-radius: 20px;
            border: 7px solid #ffffff;
            transition: 400ms ease-in-out;
        }

.search {
    width: max-content;
    display: flex;
    align-items: center;
    padding: 8px;
    border: 1px solid #0000008c;
    border-radius: 14px;
    background: transparent;
}

.searchInput {
    font-size: 16px;
    color: #333;
    margin-left: 14px;
    outline: none;
    border: none;
    background: transparent;
}

    .searchInput::placeholder {
        font-size: 14px;
        opacity: .5;
        width: 100%;
    }

.userİcon {
    border: none;
    background: transparent;
}

.login-signin-button, button {
    background: #c6303e;
    padding: 6px;
    transition: 200ms ease-in-out;
    border-radius: 20px;
    color: #fff;
}

.userIcon-Login {
    width: 100%;
    height: 100%;
}

.login, button {
    border: none;
}

.cursor-pointer {
    cursor: pointer;
}

.pointer-none {
    pointer-events: none;
}

.coutDown {
    max-width: 150px;
    min-width: 150px;
}
/*CARD COMPONENT*/

.cardComponent {
    min-width: 306px !important;
    max-width: 306px !important;
    border-radius: 306px 306px 0 0 !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px !important;
    transition: 200ms ease-in-out !important;
}

    .cardComponent:hover {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px !important;
        transition: 200ms ease-in-out !important;
    }

.cardComponentImg {
    border-radius: 280px 280px 0 0;
    min-height: 250px;
    max-height: 250px;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}
/*CARD COMPONENT*/


@media (min-width: 992px) {
    .getOffTitle-innerTitle {
        color: #198754 !important;
    }
}

@media (min-width: 992px) {
    .getOffTitle-innerTitle {
        color: #fff !important;
    }
}

/* Dropdown menülerin hover ile açılması */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

/* Navbar renkleri siyah yapılıyor */
.navbar-nav .nav-link, .navbar-brand, .navbar-nav .nav-link i, .btn, .search-input {
    color: black;
}

    /* Hover ile kırmızıya dönüşme */
    .navbar-nav .nav-link:hover, .navbar-brand:hover, .navbar-nav .nav-link i:hover, .btn:hover {
        color: red;
    }

/* Arama kutusu içinde ikon */
.search-input-wrapper {
    position: relative;
}

.search-input {
    border-radius: 50px;
    padding-left: 40px;
}

    .search-input::placeholder {
        padding-left: 20px; /* Yalnızca placeholder'a boşluk veriliyor */
        color: black; /* Placeholder'ın rengini de siyah yapabilirsiniz */
    }

.search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: black;
}

/* İkonların boyutlandırılması */
.navbar-nav .nav-link i {
    font-size: 1.2rem;
}

/* Arama kutusu üzerinde odaklanma (focus) efekti */
.search-form {
    position: relative;
    transition: all 1s;
    width: 50px;
    height: 50px;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
    padding: 5px;
}

    .search-form input {
        position: absolute;
        top: 4px;
        left: 0;
        width: 100%;
        height: 42.5px;
        line-height: 30px;
        outline: 0;
        border: 1px solid;
        display: none;
        font-size: 1em;
        border-radius: 20px;
        padding: 0 20px;
        box-sizing: border-box;
        background: white;
    }

    .search-form .bi-search {
        box-sizing: border-box;
        padding: 10px;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: -10px;
        border-radius: 50%;
        color: #07051a;
        text-align: center;
        font-size: 1.2em;
        font-weight: bold;
    }

    .search-form:hover {
        width: 300px;
        cursor: pointer;
    }

        .search-form:hover input {
            display: block;
        }

        .search-form:hover .bi-search {
            background: #07051a;
            color: white;
        }


.customCard-glass {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2.2px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.custom-card {
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

    .custom-card img {
        object-fit: cover;
        height: 200px;
        width: 100%;
    }

    .custom-card .card-body {
        position: absolute;
        height: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        color: white;
        background-color: transparent;
        border-radius: 0 0 15px 15px;
        padding: 20px;
        transition: background 0.3s ease;
    }

    /* Hover efekti - tüm kartlara uygulanacak */
    .custom-card:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

        .custom-card:hover .card-body {
            background: rgba(250, 0, 0, 0.22);
        }


/* Başlık ve metin stilleri */
.card-title {
    margin-top: 25%;
    font-size: 1.5rem;
    font-weight: bold;
}

.card-text {
    font-size: 1.2rem;
    font-weight: 500;
}


/*DETAILS*/
.thumbnail {
    cursor: pointer;
    border: 2px solid transparent;
}

    .thumbnail.active {
        border-color: orange;
    }

.product-image {
    width: auto;
    height: 356px;
    object-fit: cover;
}

.product-thumbnails {
    max-width: 100%;
    height: 80px;
    object-fit: cover;
}

.star-rating i {
    font-size: 1.5rem;
}

.vr {
    border-left: 1px solid #ccc;
    height: 20px;
    margin: 0 10px;
}


/*BUTTON*/
.decrement-btn {
    border: 1px solid #ff0331;
    color: #f0a020;
    display: none; /* Başlangıçta gizli */
}

.increment-btn {
    border: 1px solid #ff0331;
    color: #ff0331;
}

.counter {
    background-color: #ff0331;
    color: #ff0331;
}


.bg-light {
    background-color: #fef7ef !important;
}

.text-warning {
    color: #f0a020 !important;
}

.border-start {
    border-left: 1px solid #f0e4d7;
}

.border-end {
    border-right: 1px solid #f0e4d7;
}

/*comments tabs*/
.custom-nav-link {
    background-color: rgba(250, 0, 0, 0.1); /* bg-info's 10% lighter tone */
    color: black !important; /* Inactive buttons text color is black */
    width: 200px; /* Fixed width */
    height: 80px; /* Fixed height */
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center; /* Center text */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Remove underline */
}

    .custom-nav-link.active {
        background-color: #ff0331; /* bg-info */
        color: white !important; /* Active button text color is white */
    }

    /* Add border-radius to Product Features and Contact */
    .custom-nav-link.rounded-left {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .custom-nav-link.rounded-right {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

.star-wrapper {
    display: inline-block;
    background: linear-gradient(90deg, #ffc107 50%, #e4e5e9 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.custom-nav-tabs .nav-link {
    flex-grow: 1;
}



/*DETAILS*/


/*MY CARD*/
.img-thumbnail {
    margin-left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

@media (max-width: 768px) {
    .d-flex {
        flex-direction: column;
    }

    .product-details {
        text-align: center;
        margin-bottom: 1rem;
    }

    .product-quantity {
        justify-content: center;
    }
}

.btn-outline-success:hover{
    color:#fff !important;
}

/*MY CARD*/
    .card {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.offcanvas-header {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1rem;
}

.offcanvas-body {
    padding-top: 1rem;
}

.btn-outline-primary {
    border-radius: 4px;
}

textarea {
    resize: none;
}
.customCard-border {
    border: 0.1px solid #00000015 !important;
}

/*My Orders*/ 

.list-group-item {
    border: none;
}  
.dropdown-toggle::after {
    margin-left: 5px;
}

.customCard-Shadow:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    transition: 200ms ease-in-out;
}

.orderHeader {
    border-bottom: solid 1px #e2e2e2;
    border-radius: 8px 8px 0 0;
    background-color: #ffffffae;
    padding: 15px 20px;
}
.orderHeader-info {
    color: #666;
    font-weight: bold;
    font-size: 13px;
}
.orderHeader-info, b {
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #333;
    width: auto;
    font-weight: 400;
}
.delivered {
    color: #0bc15c;
}

.orderItemImg-img {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.orderDetail-header{
    display:flex;
    align-items:center;
    justify-content:center;
}
.orderDetail-header strong small {
   font-size:10px;
}
.orderDetail-header p {
    font-size: 10px;
}

.btn-outline-danger:hover{
    color:#fff !important;
}
    .btn-outline-danger:hover .bi-arrow-repeat {
        color: #fff !important;
    }


.customCard-border {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.customCard-Shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.addressTitle p {
    font-weight: 600;
}

.bg-light-subtle {
    background-color: rgba(248, 249, 250, 0.85);
}

.adressButton button, .adressButton a {
    font-size: 0.9rem;
}

.modal-content {
    border-radius: 15px;
}

.modal-header {
    border-bottom: none;
}