@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap');
@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');

:root {
   --main-color: #2ecc71;
   /* Kimya için yeşil tonları */
   --secondary-color: #1e90ff;
   /* Mavi tonları */
   --highlight-color: #f39c12;
   /* Vurgulayıcı turuncu */
   --danger-color: #e74c3c;
   /* Uyarı kırmızı */
   --black: #2c3e50;
   /* Koyu renkler */
   --white: #fff;
   --light-color: #95a5a6;
   /* Hafif gri tonları */
   --light-bg: #ecf0f1;
   /* Açık gri arka plan */
   --border: .2rem solid var(--black);
   --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
   --transition-speed: 0.3s;
   /* Geçiş hızı */
   --border-radius: 8px;
   /* Kenar yuvarlama */
}

* {
   /*font-family: 'Nunito', sans-serif;*/
   font-family: "Poppins", system-ui;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
   transition: all var(--transition-speed) ease-in-out;
}

*::selection {
   background-color: var(--main-color);
   color: var(--white);

}

::-webkit-scrollbar {
   height: .5rem;
   width: 1rem;
}

::-webkit-scrollbar-track {
   background-color: transparent;
}

::-webkit-scrollbar-thumb {
   background-color: var(--main-color);
   border-radius: var(--border-radius);
}

html {
   /*font-size: 62.5%;*/
   overflow-x: hidden;
   /* Yatay kaydırmayı engeller */
   width: 100%;
   /* Genişliğin aşılmasını engeller */
   max-width: 100%;
   max-height: 100%;
}

body {
   background-color: var(--light-bg);
   color: var(--black);
   overflow-x: hidden;
   /* Yatay kaydırmayı engeller */
   width: 100%;
   /* Genişliğin aşılmasını engeller */
   max-width: 100%;
}

section {
   padding: 2rem;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
   /* Genişliğin aşılmasını engeller */
   max-width: 100%;
}

.heading {
   font-size: 3.5rem;
   color: var(--black);
   margin-bottom: 2rem;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.1rem;
   border-bottom: var(--border);
   padding-bottom: 1rem;
}

.btn,
.delete-btn,
.option-btn {
   display: block;
   width: 100%;
   margin-top: 1rem;
   border-radius: var(--border-radius);
   padding: 1rem 2rem;
   font-size: 1.6rem;
   text-transform: capitalize;
   color: var(--white);
   cursor: pointer;
   text-align: center;
   transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.btn:hover,
.delete-btn:hover,
.option-btn:hover {
   background-color: var(--black);
   transform: translateY(-0.2rem);
   box-shadow: 0 .8rem 1.5rem rgba(0, 0, 0, .2);
}

.btn {
   background-color: var(--main-color);
}

.option-btn {
   background-color: var(--highlight-color);
}

.delete-btn {
   background-color: var(--danger-color);
}

.flex-btn {
   display: flex;
   gap: 1rem;
}

.message {
   position: sticky;
   top: 0;
   max-width: 1200px;
   margin: 0 auto;
   background-color: var(--white);
   padding: 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   z-index: 1100;
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
}

.message span {
   font-size: 1.8rem;
   color: var(--black);
}

.message i {
   cursor: pointer;
   color: var(--danger-color);
   font-size: 2rem;
}

.message i:hover {
   color: var(--black);
}

.empty {
   padding: 1.5rem;
   background-color: var(--white);
   border: var(--border);
   box-shadow: var(--box-shadow);
   text-align: center;
   color: var(--danger-color);
   border-radius: var(--border-radius);
   font-size: 1.8rem;
   text-transform: capitalize;
}

.disabled {
   pointer-events: none;
   user-select: none;
   opacity: .5;
}

@keyframes fadeIn {
   0% {
      opacity: 0;
      transform: translateY(1rem);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}


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

   .message {
      flex-direction: column;
      text-align: center;
   }

}

#menu-btn {
   display: none;
}

.home-bg {
   width: 100%;
   /* Tam genişlik */
   height: 30vh;
   /* Ekran yüksekliğinin %30'u kadar yüksekliği */
   overflow: hidden;
   /* Görselin dışa taşmasını engeller */
   display: flex;
   /* İçerikleri ortalamak için */
   align-items: center;
   /* Dikey ortalama */
   justify-content: center;
   /* Yatay ortalama */
   position: relative;
   /* İçerik konumlaması için */
}

.home-bg img {
   position: absolute;
   /* Konumlandırma */
   top: 0;
   left: 0;
   width: 100%;
   /* Tam genişlik */
   height: 100%;
   /* Tam yükseklik */
   object-fit: cover;
   /* Görselin kapsayıcıya uyacak şekilde kırpılması */
}


.category .slide {
   margin-bottom: 5rem;
   box-shadow: var(--box-shadow);
   border: var(--border);
   text-align: center;
   padding: 2rem;
   background: var(--white);
   border-radius: .5rem;
}

.category .slide:hover {
   background-color: var(--black);
}

.category .slide:hover img {
   filter: invert();
}

.category .slide:hover h3 {
   color: var(--white);
}

.category .slide img {
   height: 7rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem;
   user-select: none;
}

.category .slide h3 {
   font-size: 2rem;
   color: var(--black);
   user-select: none;
}

.products .box-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap: 1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.products .box-container .box {
   position: relative;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border: var(--border);
   padding: 2rem;
   overflow: hidden;
}

.products .box-container .box img {
   height: 20rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem;
}

.products .box-container .box .fa-heart,
.products .box-container .box .fa-eye {
   position: absolute;
   top: 1rem;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.2rem;
   font-size: 2rem;
   background-color: var(--white);
   border: var(--border);
   border-radius: .5rem;
   text-align: center;
   color: var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.products .box-container .box .fa-heart {
   right: -6rem;
}

.products .box-container .box .fa-eye {
   left: -6rem;
}

.products .box-container .box .fa-heart:hover,
.products .box-container .box .fa-eye:hover {
   background-color: var(--black);
   color: var(--white);
}

.products .box-container .box:hover .fa-heart {
   right: 1rem;
}

.products .box-container .box:hover .fa-eye {
   left: 1rem;
}

.products .box-container .box .name {
   font-size: 2rem;
   color: var(--black);
}

.products .box-container .box .flex {
   display: flex;
   align-items: center;
   gap: 1rem;
}

.products .box-container .box .flex .qty {
   width: 7rem;
   padding: 1rem;
   border: var(--border);
   font-size: 1.8rem;
   color: var(--black);
   border-radius: .5rem;
}

.products .box-container .box .flex .price {
   font-size: 2rem;
   color: var(--red);
   margin-right: auto;
}

.shopping-cart .fa-edit {
   height: 4.5rem;
   border-radius: .5rem;
   background-color: var(--orange);
   width: 5rem;
   font-size: 2rem;
   color: var(--white);
   cursor: pointer;
}

.shopping-cart .fa-edit:hover {
   background-color: var(--black);
}

.shopping-cart .sub-total {
   margin: 2rem 0;
   font-size: 2rem;
   color: var(--light-color);
}

.shopping-cart .sub-total span {
   color: var(--red);
}

.cart-total {
   max-width: 50rem;
   margin: 0 auto;
   margin-top: 3rem;
   background-color: var(--white);
   border: var(--border);
   border-radius: .5rem;
   ;
   padding: 2rem;
   text-align: center;
}

.cart-total p {
   font-size: 2.5rem;
   color: var(--black);
   margin-bottom: 2rem;
}

.cart-total p span {
   color: var(--red);
}

.display-orders {
   text-align: center;
   padding-bottom: 0;
}

.display-orders p {
   display: inline-block;
   padding: 1rem 2rem;
   margin: 1rem .5rem;
   font-size: 2rem;
   text-align: center;
   border: var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.display-orders p span {
   color: var(--red);
}

.display-orders .grand-total {
   margin-top: 1.5rem;
   margin-bottom: 2.5rem;
   font-size: 2.5rem;
   color: var(--light-color);
}

.display-orders .grand-total span {
   color: var(--red);
}

.checkout-orders form {
   padding: 2rem;
   border: var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.checkout-orders form h3 {
   border-radius: .5rem;
   background-color: var(--black);
   color: var(--white);
   padding: 1.5rem 1rem;
   text-align: center;
   text-transform: uppercase;
   margin-bottom: 2rem;
   font-size: 2.5rem;
}

.checkout-orders form .flex {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   justify-content: space-between;
}

.checkout-orders form .flex .inputBox {
   width: 49%;
}

.checkout-orders form .flex .inputBox .box {
   width: 100%;
   border: var(--border);
   border-radius: .5rem;
   font-size: 1.8rem;
   color: var(--black);
   padding: 1.2rem 1.4rem;
   margin: 1rem 0;
   background-color: var(--light-bg);
}

.checkout-orders form .flex .inputBox span {
   font-size: 1.8rem;
   color: var(--light-color);
}

.orders .box-container {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   align-items: flex-start;
}

.orders .box-container .box {
   padding: 1rem 2rem;
   flex: 1 1 40rem;
   border: var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.orders .box-container .box p {
   margin: .5rem 0;
   line-height: 1.8;
   font-size: 2rem;
   color: var(--light-color);
}

.orders .box-container .box p span {
   color: var(--main-color);
}


@media (max-width:991px) {

   html {
      font-size: 55%;
   }

}

@media (max-width:768px) {

   #menu-btn {
      display: inline-block;
   }

   .home-bg .home .slide .content {
      text-align: center;
   }

   .home-bg .home .slide .content h3 {
      font-size: 3rem;
   }

}

@media (max-width:450px) {

   html {
      font-size: 50%;
   }

   .heading {
      font-size: 3rem;
   }

   .flex-btn {
      flex-flow: column;
      gap: 0;
   }

   .quick-view form .row .image-container .sub-image img {
      width: 8rem;
   }

   .checkout-orders form .flex .inputBox {
      width: 100%;
   }

}





.swiper {
   width: 100%;
   height: auto;
}

.swiper-pagination-bullet {
   background-color: var(--main-color);
}

.main-slider {
   width: 100%;
   height: 50rem !important;
   overflow: hidden !important;
   position: relative;
}

.main-slider img {
   position: absolute;
   inset: 0;
   height: 100%;
   width: auto;
}

@media (max-width:992px) {

   .main-slider {
      width: 100%;
      height: 20rem !important;
      overflow: hidden !important;
      position: relative;
   }


}

.swiper-button-prev::after,
.swiper-button-next::after {
   color: #ffffff;
   font-weight: bolder;
}


.hover-effect>div::after {
   content: '';
   width: 50rem;
   height: 100rem;
   background-color: #ffffff50;
   position: absolute;
   transform: rotate(45deg);
   transform-origin: center center;
   top: 0;
   left: 0;
   transition: all 1.5s ease;
   top: -100rem;
   left: -30rem;
   /* transition buraya taşındı */
}

.hover-effect:hover>div::after {
   top: 100rem;
   left: 30rem;
}


.product-card img {
   transition: all 0.3s ease;
}

.product-card:hover img {
   transform: rotate(5deg) scale(1.25);
}



.profile-icon:hover .profile-icon-dropdown {
   display: flex !important;
   z-index: 5 !important;
}


.product-name {
   position: relative !important;
}

.product-name .product-hover-name {
   position: absolute;
   opacity: 1;
   bottom: 100%;
   left: 0;
   right: 0;
   z-index: 50 !important;
   transition: all 0.3s ease;
}

.product-name:hover .product-hover-name {
   opacity: 1 !important;
}