/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 22 2026 | 17:37:30 */
/* =========================
   MINI SPOILER WRAPPER
========================= */
.wp-spoiler.mini {
  width: 100%;
}

/* =========================
   SECTION
========================= */
.wp-spoiler.mini .section {
  position: relative;
  margin-bottom: 12px;
}

/* =========================
   TITLE (LEBIH KECIL)
========================= */
.wp-spoiler.mini .section h3 {
  position: relative;
  cursor: pointer;
  padding-bottom: 10px;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.4;
  padding-right: 34px;
  margin: 0;
  transition: color .25s ease, transform .25s ease;
}

.wp-spoiler.mini .section:hover h3 {
  transform: translateX(2px);
}

/* toggle */
.wp-spoiler.mini .section h3 span {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.1em;
  opacity: .7;
  transition: transform .25s ease, opacity .25s ease;
}

.wp-spoiler.mini .section:hover h3 span {
  transform: scale(1.15);
  opacity: 1;
}

/* =========================
   GARIS BAWAH JUDUL
========================= */
.wp-spoiler.mini .section::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.4em + 6px);
  height: 2px;
  width: 0;
  background: currentColor;
  opacity: .4;
  transition: width .35s ease, opacity .3s ease;
}

.wp-spoiler.mini .section:hover::after {
  width: calc(100% - 30px);
}

.wp-spoiler.mini .section:not(.hidden)::after {
  width: 100%;
  opacity: .6;
}

/* =========================
   CONTENT BOX
========================= */
.wp-spoiler.mini .spoiler-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease, opacity .3s ease;
  opacity: 0;
}

/* =========================
   ACCENT CONTENT BOX
========================= */
.wp-spoiler.mini .spoiler-content > .inner {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, #9676c1 12%, transparent);
  border: 1px solid color-mix(in srgb, #9676c1 35%, transparent);
  box-shadow: 0 6px 18px rgba(150,118,193,.12);
}

/* saat open, lebih “hidup” dikit */
.wp-spoiler.mini .section:not(.hidden) .spoiler-content > .inner {
  animation: accentPop .35s ease;
}

/* dark mode */
body.dark .wp-spoiler.mini .spoiler-content > .inner {
  background: color-mix(in srgb, #9676c1 18%, #0f1012);
  border-color: color-mix(in srgb, #9676c1 45%, transparent);
  box-shadow: 0 6px 22px rgba(150,118,193,.18);
}

/* =========================
   BOX ANIMATION
========================= */
@keyframes accentPop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.wp-spoiler.mini .section:not(.hidden) h3 {
  animation: miniFade .3s ease;
}