/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 08 2026 | 09:39:09 */
/* =========================
   SPOILER WRAPPER
   ========================= */
.wp-spoiler {
  width: 100%;
}

/* =========================
   SPOILER SECTION
   ========================= */
.wp-spoiler .section {
  position: relative;
  margin-bottom: 14px;
}

/* =========================
   TITLE
   ========================= */
.wp-spoiler .section h2 {
  position: relative;
  cursor: pointer;
  font-size: clamp(1.3em, 2.5vw, 1.55em);
  font-weight: 700;
  line-height: 1.4;
  padding-right: 36px;
  margin: 0;
  color: inherit;
  transition: transform .25s ease;
}

/* hover gerak dikit */
.wp-spoiler .section:hover h2 {
  transform: translateX(3px);
}

/* + / - icon */
.wp-spoiler .section h2 span {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.1em;
  opacity: .75;
  transition: transform .25s ease, opacity .25s ease;
}

.wp-spoiler .section:hover h2 span {
  transform: scale(1.15);
  opacity: 1;
}

/* =========================
   GARIS ANIMASI
   ========================= */

/* garis default */
.wp-spoiler .section::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.4em + 8px);
  height: 2px;
  width: 0%;
  background: currentColor;
  opacity: .6;
  transition: width .35s ease;
}

/* hover judul → garis muncul sampai icon + */
.wp-spoiler .section:hover::after {
  width: calc(100% - 28px);
}

/* saat dibuka → garis penuh selebar konten */
.wp-spoiler .section:not(.hidden)::after {
  width: 100%;
  opacity: .8;
}

/* =========================
   CONTENT
   ========================= */
.wp-spoiler .spoiler-content {
  overflow: hidden;
  transition: height .35s ease, opacity .3s ease;
}

.wp-spoiler .section.hidden .spoiler-content {
  height: 0;
  opacity: 0;
}

.wp-spoiler .section:not(.hidden) .spoiler-content {
  opacity: 1;
}

/* spacing isi */
.wp-spoiler .spoiler-content > *:first-child {
  margin-top: 12px;
}
/* ==============================
   OPEN ANIMATION (HALUS)
============================== */
@keyframes spoilerFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wp-spoiler .section:not(.hidden) h2 {
  animation: spoilerFade .35s ease;
}