/* Ürün kartı stil varyantları — ProductCardStyleCatalog ile eşleşir */

/* Hover yalnızca fare hangi kartın üstündeyse o kartta (.product-card:hover) */



.public-site .site-main .product-grid .product-card[class*="product-card--"] {

  position: relative;

  z-index: 1;

  cursor: default;

  transform: translateY(0) scale(1);

  transition:

    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),

    box-shadow 0.28s ease,

    border-color 0.28s ease,

    z-index 0s;

}



.public-site .site-main .product-grid .product-card__media {

  overflow: hidden;

  border-radius: 10px;

}



.public-site .site-main .product-grid .product-card__media img {

  transition: transform 0.35s ease;

  transform: scale(1);

}



.product-card--outline {

  box-shadow: none;

  border: 2px solid #e2e8f0;

}



.product-card--outline .product-card__link {

  display: inline-block;

  align-self: flex-start;

  margin-top: auto;

  padding: 0.4rem 0.85rem;

  border: 1px solid var(--portal-blue, #1e5a8a);

  border-radius: 8px;

  text-decoration: none;

}



.product-card--outline .product-card__link:hover {

  background: rgba(30, 90, 138, 0.06);

  text-decoration: none;

}



.product-card--ribbon {

  padding-top: 0;

  overflow: visible;

  isolation: isolate;

}



.product-card--ribbon .product-card__ribbon-bar {

  display: block;

  height: 7px;

  margin: 0 -1.35rem 1rem;

  border-radius: 14px 14px 0 0;

  background: linear-gradient(90deg, #1e5a8a, #4da3ff, #1e5a8a);

  box-shadow: 0 2px 8px rgba(30, 90, 138, 0.25);

  transition: height 0.28s ease, box-shadow 0.28s ease;

}



.product-card--ribbon::before,

.product-card--ribbon::after {

  display: none !important;

  content: none !important;

}



.product-card--ribbon .product-card__ribbon-bar::after {

  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  pointer-events: none;

}



.public-site .site-main .product-card--ribbon .product-card__ribbon-bar {

  position: relative;

  overflow: hidden;

}



/* —— Yalnızca hover edilen kart (site ön yüz grid) —— */

@media (hover: hover) {

  .public-site .site-main .product-grid .product-card[class*="product-card--"]:hover {

    z-index: 5;

    transform: translateY(-8px) scale(1.02);

    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);

  }



  .public-site .site-main .product-grid .product-card--outline:hover {

    border-color: rgba(30, 90, 138, 0.45);

    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);

  }



  .public-site .site-main .product-grid .product-card--ribbon:hover {

    box-shadow: 0 18px 36px rgba(30, 90, 138, 0.18);

  }



  .public-site .site-main .product-grid .product-card--lift:hover {

    transform: translateY(-10px) scale(1.025);

    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);

  }



  .public-site .site-main .product-grid .product-card:hover .product-card__media img {

    transform: scale(1.06);

  }



  /* Mavi şerit animasyonu — sadece hover edilen kartta */

  .public-site .site-main .product-grid .product-card--ribbon:hover .product-card__ribbon-bar {

    height: 8px;

    background: linear-gradient(

      105deg,

      #0a1f38 0%,

      #1e5a8a 15%,

      #2d7bc4 30%,

      #7ec8ff 50%,

      #2d7bc4 70%,

      #1e5a8a 85%,

      #0a1f38 100%

    );

    background-size: 320% 100%;

    animation: sd-card-ribbon-flow 2.2s linear infinite;

    box-shadow: 0 4px 18px rgba(77, 163, 255, 0.55);

  }



  .public-site .site-main .product-grid .product-card--ribbon:hover .product-card__ribbon-bar::after {

    opacity: 1;

    background: linear-gradient(

      90deg,

      transparent 0%,

      rgba(255, 255, 255, 0.2) 40%,

      rgba(255, 255, 255, 0.85) 50%,

      rgba(255, 255, 255, 0.2) 60%,

      transparent 100%

    );

    background-size: 45% 100%;

    background-repeat: no-repeat;

    animation: sd-card-ribbon-shine 1.8s ease-in-out infinite;

  }

}



@keyframes sd-card-ribbon-flow {

  0% {

    background-position: 0% 50%;

  }

  100% {

    background-position: 320% 50%;

  }

}



@keyframes sd-card-ribbon-shine {

  0% {

    background-position: -45% 0;

  }

  100% {

    background-position: 145% 0;

  }

}



@media (prefers-reduced-motion: reduce) {

  .public-site .site-main .product-grid .product-card[class*="product-card--"]:hover {

    transform: none;

  }



  .public-site .site-main .product-grid .product-card:hover .product-card__media img {

    transform: none;

  }



  .public-site .site-main .product-grid .product-card--ribbon:hover .product-card__ribbon-bar,

  .public-site .site-main .product-grid .product-card--ribbon:hover .product-card__ribbon-bar::after {

    animation: none;

  }

}



.product-card--lift .product-card__media {

  aspect-ratio: 16 / 10;

}