/**
 * kupon-sobek.css
 * Efek sobek kupon — styling lengkap
 * Folder: /wp-content/themes/TEMA-ANDA/legalova-effects/css/kupon-sobek.css
 */

/* ============================================
   GRID
============================================ */
.elementor-element-ef43e73 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
}

/* ============================================
   KUPON UTAMA — wrapper <a>
============================================ */
.elementor-element-ef43e73 .elementor-cta {
  position: relative !important;
  width: 100% !important;
  min-height: 260px !important;
  border-radius: 20px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: block !important;
  text-decoration: none !important;
  filter: drop-shadow(0 12px 30px rgba(3,115,115,0.4)) !important;
  transition: filter 0.4s ease !important;
}

/* ============================================
   BAGIAN ATAS KUPON
============================================ */
.elementor-element-ef43e73 .kupon-top {
  position: relative !important;
  width: 100% !important;
  height: 130px !important;
  background: linear-gradient(145deg, #04C4C4, #03A0A0) !important;
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden !important;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform-origin: center bottom !important;
  /* Notch bulat kiri & kanan bawah */
  -webkit-mask-image:
    radial-gradient(circle 16px at -1px 100%, transparent 98%, white 100%),
    radial-gradient(circle 16px at calc(100% + 1px) 100%, transparent 98%, white 100%),
    linear-gradient(white, white) !important;
  -webkit-mask-composite: destination-out, destination-out, destination-over !important;
  mask-image:
    radial-gradient(circle 16px at -1px 100%, transparent 98%, white 100%),
    radial-gradient(circle 16px at calc(100% + 1px) 100%, transparent 98%, white 100%),
    linear-gradient(white, white) !important;
  mask-composite: exclude, exclude, add !important;
  z-index: 2 !important;
}

/* Shimmer highlight */
.elementor-element-ef43e73 .kupon-top::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 45% !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0.13), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ============================================
   BAGIAN BAWAH KUPON
============================================ */
.elementor-element-ef43e73 .kupon-bottom {
  position: relative !important;
  width: 100% !important;
  height: 130px !important;
  background: linear-gradient(145deg, #03A0A0, #027878) !important;
  border-radius: 0 0 20px 20px !important;
  overflow: hidden !important;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform-origin: center top !important;
  /* Notch bulat kiri & kanan atas */
  -webkit-mask-image:
    radial-gradient(circle 16px at -1px 0%, transparent 98%, white 100%),
    radial-gradient(circle 16px at calc(100% + 1px) 0%, transparent 98%, white 100%),
    linear-gradient(white, white) !important;
  -webkit-mask-composite: destination-out, destination-out, destination-over !important;
  mask-image:
    radial-gradient(circle 16px at -1px 0%, transparent 98%, white 100%),
    radial-gradient(circle 16px at calc(100% + 1px) 0%, transparent 98%, white 100%),
    linear-gradient(white, white) !important;
  mask-composite: exclude, exclude, add !important;
  z-index: 1 !important;
}

/* ============================================
   BACKGROUND LOGO
============================================ */
.elementor-element-ef43e73 .kupon-bg {
  position: absolute !important;
  inset: -10px !important;
  background-size: 80% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.15 !important;
  filter: brightness(3) !important;
  transition: transform 0.5s ease, opacity 0.4s ease !important;
  pointer-events: none !important;
}

.elementor-element-ef43e73 .kupon-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.15) 100%) !important;
  pointer-events: none !important;
}

/* ============================================
   GARIS TITIK-TITIK SOBEK (tengah kupon)
============================================ */
.elementor-element-ef43e73 .kupon-tear-line {
  position: relative !important;
  width: 100% !important;
  height: 3px !important;
  z-index: 10 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Garis awalnya dari tengah, melebar ke kiri-kanan saat hover/tap */
.elementor-element-ef43e73 .kupon-tear-line::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  right: 50% !important;
  height: 100% !important;
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.9) 0px,
    rgba(255,255,255,0.9) 8px,
    transparent 8px,
    transparent 16px
  ) !important;
  transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              right 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ============================================
   KONTEN TEKS (di dalam kupon-bottom)
============================================ */
.elementor-element-ef43e73 .kupon-content {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 20px !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.elementor-element-ef43e73 .kupon-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ============================================
   HOVER EFEK (Desktop)
============================================ */
.elementor-element-ef43e73 .elementor-cta:hover {
  filter: drop-shadow(0 20px 50px rgba(3,115,115,0.6)) !important;
}

.elementor-element-ef43e73 .elementor-cta:hover .kupon-top {
  transform: translateY(-14px) rotate(-0.5deg) !important;
}

.elementor-element-ef43e73 .elementor-cta:hover .kupon-bottom {
  transform: translateY(14px) rotate(0.5deg) !important;
}

.elementor-element-ef43e73 .elementor-cta:hover .kupon-tear-line::after {
  left: 0 !important;
  right: 0 !important;
}

.elementor-element-ef43e73 .elementor-cta:hover .kupon-bg {
  transform: scale(1.08) !important;
  opacity: 0.22 !important;
}

.elementor-element-ef43e73 .elementor-cta:hover .kupon-title {
  transform: translateY(4px) !important;
}

/* ============================================
   ACTIVE / TAP EFEK (Tablet & Mobile via JS)
============================================ */
.elementor-element-ef43e73 .elementor-cta:active .kupon-top,
.elementor-element-ef43e73 .elementor-cta.kupon-tapped .kupon-top {
  transform: translateY(-20px) rotate(-1deg) !important;
}

.elementor-element-ef43e73 .elementor-cta:active .kupon-bottom,
.elementor-element-ef43e73 .elementor-cta.kupon-tapped .kupon-bottom {
  transform: translateY(20px) rotate(1deg) !important;
}

.elementor-element-ef43e73 .elementor-cta:active .kupon-tear-line::after,
.elementor-element-ef43e73 .elementor-cta.kupon-tapped .kupon-tear-line::after {
  left: 0 !important;
  right: 0 !important;
}

/* ============================================
   RESPONSIVE — TABLET
============================================ */
@media (max-width: 1024px) {
  .elementor-element-ef43e73 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }
  .elementor-element-ef43e73 .kupon-top,
  .elementor-element-ef43e73 .kupon-bottom {
    height: 110px !important;
  }
  .elementor-element-ef43e73 .elementor-cta {
    min-height: 223px !important;
  }
  .elementor-element-ef43e73 .kupon-title {
    font-size: 16px !important;
  }
}

/* ============================================
   RESPONSIVE — MOBILE
============================================ */
@media (max-width: 600px) {
  .elementor-element-ef43e73 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .elementor-element-ef43e73 .kupon-top,
  .elementor-element-ef43e73 .kupon-bottom {
    height: 90px !important;
  }
  .elementor-element-ef43e73 .elementor-cta {
    min-height: 183px !important;
  }
  .elementor-element-ef43e73 .kupon-title {
    font-size: 13px !important;
  }
}

@media (max-width: 360px) {
  .elementor-element-ef43e73 {
    grid-template-columns: 1fr !important;
  }
  .elementor-element-ef43e73 .kupon-title {
    font-size: 16px !important;
  }
}