/* =========================
   PRODUCTS PAGE
========================= */
.products-page-hero {
  position: relative;
  min-height: 160px;
  overflow: hidden;
}

.products-page-hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/home1.jpeg") center/cover no-repeat;
  transform: scale(1.02);
}

.products-page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(7, 21, 45, 0.30),
    rgba(7, 21, 45, 0.45)
  );
}

.products-page-hero-content {
  position: relative;
  z-index: 2;
  padding: 28px 0 30px;
}

.products-page-hero-content h1 {
  color: #ffffff;
  font-size: 58px;
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.products-page-section {
  background: #efefef;
  padding: 42px 0 56px;
}

.products-showcase-list {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.product-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 30px;
  min-height: 180px;
}

.product-showcase.left .product-showcase-text {
  order: 1;
}

.product-showcase.left .product-showcase-visual {
  order: 2;
}

.product-showcase.right .product-showcase-text {
  order: 2;
  text-align: right;
}

.product-showcase.right .product-showcase-visual {
  order: 1;
}

.product-showcase-text h2 {
  font-size: 54px;
  line-height: 1.05;
  font-weight: 900;
  color: #10284f;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.product-showcase-btn {
  display: inline-block;
  background: #f28c28;
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
  transition: 0.25s;
}

.product-showcase-btn:hover {
  transform: translateY(-2px);
  background: #ff9b37;
}

.product-showcase-visual {
  display: flex;
  justify-content: center;
}

.product-showcase.right .product-showcase-visual {
  justify-content: flex-start;
}

.product-showcase.left .product-showcase-visual {
  justify-content: center;
}

/* =========================
   PRODUCT HEXAGON
========================= */

.product-hex-outer{
  width:260px;
  height:240px;

  background:#f28c28;

  transition:transform .5s ease;

  clip-path:polygon(
    25% 6%,
    75% 0%,
    100% 30%,
    86% 86%,
    32% 100%,
    0% 58%
  );

  display:flex;
  align-items:center;
  justify-content:center;

  transform:rotate(-8deg);

  box-shadow:0 18px 32px rgba(0,0,0,0.22);
}

.product-showcase:hover .product-hex-outer{
  transform:rotate(-8deg) scale(1.05);
}

.product-hex-inner{
  width:85%;
  height:85%;

  background:#ffffff;

  clip-path:polygon(
    25% 6%,
    75% 0%,
    100% 30%,
    86% 86%,
    32% 100%,
    0% 58%
  );

  display:flex;
  align-items:center;
  justify-content:center;

  transform:rotate(8deg);
}

.product-hex-inner img{
  width:70%;
  height:auto;
  object-fit:contain;

  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

/* =========================
   PRODUCT HEXAGON PREMIUM
========================= */

.product-showcase-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-showcase.right .product-showcase-visual {
  justify-content: flex-start;
}

.product-showcase.left .product-showcase-visual {
  justify-content: center;
}

.product-hex-wrap {
  position: relative;
  width: 340px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-hex-wrap::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 54px;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.12) 45%,
    rgba(0, 0, 0, 0) 78%
  );
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

.product-hex-outer {
  position: relative;
  width: 255px;
  height: 255px;
  background: #f59a2f;
  clip-path: polygon(
    50% 0%,
    93.3% 25%,
    93.3% 75%,
    50% 100%,
    6.7% 75%,
    6.7% 25%
  );
  transform: rotate(-14deg) translateY(0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.14),
    0 32px 48px rgba(0, 0, 0, 0.10);
  transition:
    transform 0.7s ease,
    box-shadow 0.7s ease,
    filter 0.5s ease;
  animation: productFloat 5.8s ease-in-out infinite;
}

.product-hex-outer::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(0, 0, 0, 0.08) 100%
  );
  pointer-events: none;
}

.product-hex-inner {
  position: relative;
  width: 82.5%;
  height: 82.5%;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  clip-path: polygon(
    50% 0%,
    93.3% 25%,
    93.3% 75%,
    50% 100%,
    6.7% 75%,
    6.7% 25%
  );
  transform: rotate(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.03),
    inset 0 10px 18px rgba(255, 255, 255, 0.65),
    inset 0 -12px 20px rgba(0, 0, 0, 0.05);
}

.product-hex-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 20%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
  pointer-events: none;
}

.product-hex-inner img {
  position: relative;
  z-index: 2;
  width: 66%;
  height: 66%;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.22))
    drop-shadow(0 22px 18px rgba(0, 0, 0, 0.12));
  transform: translateY(0);
  transition:
    transform 0.7s ease,
    filter 0.7s ease;
}

.product-showcase:hover .product-hex-outer {
  transform: rotate(-14deg) translateY(-8px) scale(1.035);
  box-shadow:
    0 22px 34px rgba(0, 0, 0, 0.18),
    0 40px 58px rgba(0, 0, 0, 0.12);
  filter: saturate(1.02);
}

.product-showcase:hover .product-hex-inner img {
  transform: translateY(-4px) scale(1.03);
  filter:
    drop-shadow(0 14px 14px rgba(0, 0, 0, 0.24))
    drop-shadow(0 28px 22px rgba(0, 0, 0, 0.14));
}

@keyframes productFloat {
  0% {
    transform: rotate(-14deg) translateY(0);
  }
  50% {
    transform: rotate(-14deg) translateY(-6px);
  }
  100% {
    transform: rotate(-14deg) translateY(0);
  }
}

/* responsive */
@media (max-width: 992px) {
  .product-showcase,
  .product-showcase.left,
  .product-showcase.right {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .product-showcase.left .product-showcase-text,
  .product-showcase.left .product-showcase-visual,
  .product-showcase.right .product-showcase-text,
  .product-showcase.right .product-showcase-visual {
    order: unset;
    text-align: center;
  }

  .product-showcase-visual,
  .product-showcase.left .product-showcase-visual,
  .product-showcase.right .product-showcase-visual {
    justify-content: center;
  }

  .product-showcase-text h2 {
    font-size: 40px;
  }

  .products-page-hero-content h1 {
    font-size: 42px;
  }
}

/* Tambahan baru 12:38 13/03/2026 */
  .product-hex-wrap {
    width: 290px;
    height: 260px;
  }

  .product-hex-outer {
    width: 220px;
    height: 220px;
  }

  .product-showcase:hover .product-hex-outer {
    transform: rotate(-14deg) translateY(-4px) scale(1.02);
  }
/* SAMPE SINI 12:38 13/03/2026 */

@media (max-width: 520px) {
  .products-page-section {
    padding: 32px 0 42px;
  }

  .products-showcase-list {
    gap: 30px;
  }

  .product-showcase-text h2 {
    font-size: 30px;
  }

  .product-showcase-btn {
    font-size: 15px;
    padding: 11px 22px;
  }
}

/* Tambahan Baru 12:39 13/03/2026 */

  .product-hex-wrap {
    width: 250px;
    height: 220px;
  }

  .product-hex-outer {
    width: 190px;
    height: 190px;
  }

  .product-hex-inner img {
    width: 64%;
    height: 64%;
  }

  /* SAMPE SINI 12:39 13/03/2026