/* ============================================
   section-7-tanda-kasih.css — Section 08_Tanda_Kasih
   Based on Figma frame: 08_Tanda_Kasih (393 x 569)
   ============================================ */

/* --- Section Wrapper --- */
#section-7-tanda-kasih {
  position: relative;
  width: 100%;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--s7-bg-color);
  overflow-x: hidden;
  overflow-y: visible;
}

/* --- Scale Box Container --- */
.section-7-scale-box {
  position: relative;
  display: flex;
  justify-content: center;
}

/* --- Mobile Preview Container --- */
.section-7-wrapper {
  position: relative;
  width: var(--s7-width);
  height: var(--s7-height);
  background-color: var(--s7-bg-color);
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: top center;
}

/* ============================================
   ELEMENTS
   ============================================ */

/* Spacer Rectangle */
.s7-spacer-rectangle {
  position: absolute;
  left: var(--s7-spacer-x);
  top: var(--s7-spacer-y);
  width: var(--s7-spacer-width);
  height: var(--s7-spacer-height);
  background-color: var(--s7-spacer-bg-color);
  opacity: var(--s7-spacer-opacity);
  border-radius: var(--s7-spacer-border-radius);
  z-index: var(--s7-spacer-z);
  pointer-events: none;
}

/* Icon 7 */
.s7-icon-7 {
  position: absolute;
  left: var(--s7-icon-7-x);
  top: var(--s7-icon-7-y);
  width: var(--s7-icon-7-width);
  height: var(--s7-icon-7-height);
  opacity: var(--s7-icon-7-opacity);
  z-index: var(--s7-icon-7-z);
  pointer-events: none;
}
.s7-icon-7 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Judul */
.s7-judul {
  position: absolute;
  left: var(--s7-judul-x);
  top: var(--s7-judul-y);
  width: var(--s7-judul-width);
  height: var(--s7-judul-height);
  font-family: var(--s7-judul-font-family);
  font-size: var(--s7-judul-font-size);
  color: var(--s7-judul-color);
  z-index: var(--s7-judul-z);
  text-align: center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Isi */
.s7-isi {
  position: absolute;
  left: var(--s7-isi-x);
  top: var(--s7-isi-y);
  width: var(--s7-isi-width);
  height: var(--s7-isi-height);
  font-family: var(--s7-isi-font-family);
  font-size: var(--s7-isi-font-size);
  color: var(--s7-isi-color);
  z-index: var(--s7-isi-z);
  text-align: center;
  pointer-events: none;
  white-space: pre-line;
}

/* Info Rekening */
.s7-info-rek {
  position: absolute;
  left: var(--s7-info-rek-x);
  top: var(--s7-info-rek-y);
  width: var(--s7-info-rek-width);
  height: var(--s7-info-rek-height);
  opacity: var(--s7-info-rek-opacity);
  z-index: var(--s7-info-rek-z);
  pointer-events: none;
}
.s7-info-rek img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Teks Salin 1 */
.s7-salin-1 {
  position: absolute;
  left: var(--s7-salin-1-x);
  top: var(--s7-salin-1-y);
  width: var(--s7-salin-1-width);
  height: var(--s7-salin-1-height);
  font-family: var(--s7-salin-1-font-family);
  font-size: var(--s7-salin-1-font-size);
  color: var(--s7-salin-1-color);
  z-index: var(--s7-salin-1-z);
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  /* Area klik sedikit diperbesar untuk kenyamanan mobile */
  padding: 10px;
  transform: translate(-10px, -10px);
}

.s7-salin-1:hover {
  opacity: 0.7;
}

/* Teks Disalin 1 */
.s7-disalin-1 {
  position: absolute;
  left: var(--s7-disalin-1-x);
  top: var(--s7-disalin-1-y);
  width: var(--s7-disalin-1-width);
  height: var(--s7-disalin-1-height);
  font-family: var(--s7-disalin-1-font-family);
  font-size: var(--s7-disalin-1-font-size);
  color: var(--s7-disalin-1-color);
  z-index: var(--s7-disalin-1-z);
  text-align: center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

/* State Disalin 1 */
.is-copied-1 .s7-salin-1 {
  opacity: 0 !important;
  visibility: hidden !important;
}
.is-copied-1 .s7-disalin-1 {
  opacity: 1;
  visibility: visible;
}

/* Teks Salin 2 */
.s7-salin-2 {
  position: absolute;
  left: var(--s7-salin-2-x);
  top: var(--s7-salin-2-y);
  width: var(--s7-salin-2-width);
  height: var(--s7-salin-2-height);
  font-family: var(--s7-salin-2-font-family);
  font-size: var(--s7-salin-2-font-size);
  color: var(--s7-salin-2-color);
  z-index: var(--s7-salin-2-z);
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  padding: 10px;
  transform: translate(-10px, -10px);
}

.s7-salin-2:hover {
  opacity: 0.7;
}

/* Teks Disalin 2 */
.s7-disalin-2 {
  position: absolute;
  left: var(--s7-disalin-2-x);
  top: var(--s7-disalin-2-y);
  width: var(--s7-disalin-2-width);
  height: var(--s7-disalin-2-height);
  font-family: var(--s7-disalin-2-font-family);
  font-size: var(--s7-disalin-2-font-size);
  color: var(--s7-disalin-2-color);
  z-index: var(--s7-disalin-2-z);
  text-align: center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

/* State Disalin 2 */
.is-copied-2 .s7-salin-2 {
  opacity: 0 !important;
  visibility: hidden !important;
}
.is-copied-2 .s7-disalin-2 {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   ENTRANCE ANIMATION
   ============================================ */

/* Initial State */
#section-7-tanda-kasih .s7-icon-7,
#section-7-tanda-kasih .s7-judul,
#section-7-tanda-kasih .s7-isi,
#section-7-tanda-kasih .s7-salin-1,
#section-7-tanda-kasih .s7-salin-2 {
  opacity: 0;
  visibility: hidden;
}

/* Keyframes */
@keyframes s7RaiseUp {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateY(var(--s7-reveal-distance));
  }

  1% {
    visibility: visible;
  }

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

/* Animation triggers */
#section-7-tanda-kasih.is-visible .s7-icon-7 {
  animation: s7RaiseUp var(--s7-reveal-duration) var(--s7-reveal-easing) var(--s7-icon-7-anim-delay) forwards;
}

#section-7-tanda-kasih.is-visible .s7-judul {
  animation: s7RaiseUp var(--s7-reveal-duration) var(--s7-reveal-easing) var(--s7-judul-anim-delay) forwards;
}

#section-7-tanda-kasih.is-visible .s7-isi {
  animation: s7RaiseUp var(--s7-reveal-duration) var(--s7-reveal-easing) var(--s7-isi-anim-delay) forwards;
}

#section-7-tanda-kasih.is-visible .s7-salin-1 {
  animation: s7RaiseUp var(--s7-reveal-duration) var(--s7-reveal-easing) var(--s7-salin-1-anim-delay) forwards;
}

#section-7-tanda-kasih.is-visible .s7-salin-2 {
  animation: s7RaiseUp var(--s7-reveal-duration) var(--s7-reveal-easing) var(--s7-salin-2-anim-delay) forwards;
}