* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      background: #dcdcdc;
      display: grid;
      place-items: center;
      font-family: Arial, Helvetica, sans-serif;
      overflow: hidden;
    }


    #presentation {
      width: min(100vw, 177.78vh);
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      background: #071d35;
    }

    #presentation:fullscreen {
      width: 100vw;
      height: 100vh;
      aspect-ratio: auto;
    }

    #presentation::backdrop {
      background: #071d35;
    }

    .slide-page {
      display: none;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .slide-page.active {
      display: block;
    }

    /* ================= SLIDE 1 ================= */

    .slide-cover {
      background: #071d35;
      color: #ffffff;
    }

    .cover-bar-red {
      position: absolute;
      left: 0;
      top: 0;
      width: 0.8%;
      height: 100%;
      background: #ff2020;
      z-index: 20;
    }

    .cover-bar-yellow {
      position: absolute;
      left: 0.8%;
      top: 0;
      width: 1.25%;
      height: 100%;
      background: #fff200;
      z-index: 20;
    }

    .cover-content {
      position: relative;
      z-index: 10;
      width: 100%;
      height: 100%;
      padding-left: 6.3%;
      padding-top: 3.2%;
    }

    .cover-header {
      display: flex;
      align-items: center;
      gap: 1.4%;
    }

    .cover-logo {
      width: 5.2%;
      aspect-ratio: 1 / 1;
      object-fit: contain;
    }

    .cover-campus {
      font-size: clamp(16px, 1.35vw, 28px);
      line-height: 1.25;
      font-weight: 700;
    }

    .cover-title {
      margin-top: 4.2%;
      width: 43%;
      font-size: clamp(30px, 3.05vw, 58px);
      line-height: 1.18;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    .cover-underline {
      display: flex;
      align-items: center;
      gap: 0.35%;
      margin-top: 1%;
    }

    .cover-line-gold {
      width: 7.6%;
      height: 0.7%;
      min-height: 5px;
      background: #b69a4e;
    }

    .cover-line-blue {
      width: 17.2%;
      height: 0.7%;
      min-height: 5px;
      background: #2464ef;
    }

    .cover-footer {
      position: absolute;
      left: 6.3%;
      bottom: 4.7%;
      z-index: 10;
      color: #ffffff;
      font-size: clamp(12px, 1vw, 18px);
      font-weight: 800;
      letter-spacing: 0.2px;
    }

    .cover-visual {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .cover-circle {
      position: absolute;
      border-radius: 50%;
      background: #2f66e8;
      z-index: 5;
    }

    .cover-circle-large {
      width: 22%;
      aspect-ratio: 1 / 1;
      right: 16.7%;
      top: 10.3%;
    }

    .cover-circle-medium {
      width: 16%;
      aspect-ratio: 1 / 1;
      right: 4.8%;
      top: 43.2%;
    }

    .cover-circle-small {
      width: 8.5%;
      aspect-ratio: 1 / 1;
      right: 25.4%;
      top: 70.8%;
    }

    .cover-circle-yellow {
      width: 4.1%;
      aspect-ratio: 1 / 1;
      right: 15.1%;
      top: 67%;
      background: #fff200;
      z-index: 4;
    }

    .cover-network {
      position: absolute;
      right: 3.6%;
      top: 2.1%;
      width: 40%;
      height: 88%;
      z-index: 3;
    }

    .cover-network line {
      stroke: #2367ff;
      stroke-width: 1.6;
    }

    .cover-network circle {
      fill: #ffffff;
      stroke: #2367ff;
      stroke-width: 3;
    }

    /* ================= SLIDE 2 ================= */

    .slide-structure {
      background: #f5f7fa;
      color: #071d35;
      padding: 4.2% 6.3%;
    }

    .structure-page-number {
      position: absolute;
      top: 6%;
      right: 5.5%;
      width: 3.7%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      background: #071d35;
      color: #ffffff;
      display: grid;
      place-items: center;
      font-size: clamp(12px, 1.2vw, 22px);
      font-weight: 800;
    }

    .structure-title {
      font-size: clamp(28px, 2.7vw, 54px);
      font-weight: 800;
      letter-spacing: 0.3px;
      margin-bottom: 1.6%;
    }

    .structure-underline {
      display: flex;
      align-items: center;
      gap: 0.35%;
      margin-bottom: 1.1%;
    }

    .structure-line-gold {
      width: 5.8%;
      height: 0.65vh;
      min-height: 5px;
      background: #b89a4a;
    }

    .structure-line-blue {
      width: 18.5%;
      height: 0.65vh;
      min-height: 5px;
      background: #245be8;
    }

    .structure-subtitle {
      font-size: clamp(13px, 1.12vw, 22px);
      color: #536982;
      margin-bottom: 3.2%;
    }

    .structure-main {
      display: grid;
      grid-template-columns: 36% 1fr;
      gap: 3.4%;
      align-items: center;
    }

    .identity-card {
      background: #071d35;
      color: #ffffff;
      border-radius: 16%;
      min-height: 60vh;
      padding: 7.5% 9%;
    }

    .identity-card h2 {
      font-size: clamp(22px, 2vw, 40px);
      line-height: 1.2;
      font-weight: 800;
      margin-bottom: 7%;
    }

    .identity-card-line {
      width: 26%;
      height: 0.65vh;
      min-height: 5px;
      background: #b89a4a;
      margin-bottom: 5%;
    }

    .identity-row {
      display: grid;
      grid-template-columns: 42% 1fr;
      gap: 4%;
      margin-bottom: 7.8%;
      font-size: clamp(11px, 0.95vw, 18px);
      line-height: 1.35;
    }

    .identity-label {
      font-weight: 800;
      color: #eaf1ff;
    }

    .identity-value {
      font-weight: 800;
      color: #ffffff;
    }

    .agenda {
      display: flex;
      flex-direction: column;
      gap: 2vh;
    }

    .agenda-item {
      min-height: 10.5vh;
      background: #ffffff;
      border: 2px solid #dce4ec;
      border-radius: 16px;
      display: grid;
      grid-template-columns: 11% 31% 1fr;
      align-items: center;
      padding: 0 3.2%;
    }

    .agenda-number {
      width: 58%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      background: #245be8;
      color: #ffffff;
      display: grid;
      place-items: center;
      font-size: clamp(10px, 0.8vw, 15px);
      font-weight: 800;
    }

    .agenda-title {
      font-size: clamp(14px, 1.25vw, 25px);
      font-weight: 800;
      color: #071d35;
      line-height: 1.2;
    }

    .agenda-desc {
      font-size: clamp(11px, 0.93vw, 18px);
      line-height: 1.25;
      color: #546984;
    }

    .structure-footer-line {
      position: absolute;
      left: 5%;
      right: 5%;
      bottom: 5.4%;
      height: 1px;
      background: #dce4ec;
    }

    .structure-footer-text {
      position: absolute;
      left: 6.3%;
      bottom: 2.8%;
      font-size: clamp(10px, 0.8vw, 15px);
      color: #536982;
    }

    .structure-footer-page {
      position: absolute;
      right: 5.6%;
      bottom: 2.8%;
      font-size: clamp(10px, 0.8vw, 15px);
      color: #536982;
      font-weight: 700;
    }

/* ================= ANIMASI PREMIUM SLIDE 1 ================= */

/* jaringan hanya geser halus, tidak terlalu goyang */
.slide-cover .cover-network {
  animation: networkDrift 12s ease-in-out infinite alternate;
  transform-origin: center;
}

/* garis bergerak sangat halus */
.slide-cover .cover-network line {
  stroke-dasharray: 14 18;
  animation: softLineFlow 8s linear infinite;
  opacity: 0.75;
}

/* titik putih bernapas pelan */
.slide-cover .cover-network circle {
  animation: softNodePulse 4s ease-in-out infinite;
  transform-origin: center;
}

/* beri delay berbeda agar tidak serentak */
.slide-cover .cover-network circle:nth-of-type(2n) {
  animation-delay: 0.8s;
}

.slide-cover .cover-network circle:nth-of-type(3n) {
  animation-delay: 1.4s;
}

/* lingkaran biru besar bergerak sangat pelan */
.slide-cover .cover-circle-large {
  animation: circleLargeMove 14s ease-in-out infinite alternate;
}

/* lingkaran biru sedang bergerak beda arah */
.slide-cover .cover-circle-medium {
  animation: circleMediumMove 16s ease-in-out infinite alternate;
}

/* lingkaran biru kecil lebih ringan */
.slide-cover .cover-circle-small {
  animation: circleSmallMove 11s ease-in-out infinite alternate;
}

/* lingkaran kuning cukup pulse kecil */
.slide-cover .cover-circle-yellow {
  animation: yellowSoftPulse 5s ease-in-out infinite;
}

/* jaringan utama */
@keyframes networkDrift {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-10px, 8px);
  }
}

/* aliran garis */
@keyframes softLineFlow {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -64;
  }
}

/* titik putih */
@keyframes softNodePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.75;
    transform: scale(1.12);
  }
}

/* lingkaran besar */
@keyframes circleLargeMove {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(8px, -8px) scale(1.015);
  }
}

/* lingkaran sedang */
@keyframes circleMediumMove {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-9px, 10px) scale(1.018);
  }
}

/* lingkaran kecil */
@keyframes circleSmallMove {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(7px, -6px) scale(1.025);
  }
}

/* lingkaran kuning */
@keyframes yellowSoftPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.06);
    opacity: 0.95;
  }
}

/* ================= EFEK MASUK SLIDE 2 ================= */

/* kondisi awal elemen slide 2 */
.slide-structure .structure-page-number,
.slide-structure .structure-title,
.slide-structure .structure-underline,
.slide-structure .structure-subtitle,
.slide-structure .identity-card,
.slide-structure .agenda-item,
.slide-structure .structure-footer-line,
.slide-structure .structure-footer-text,
.slide-structure .structure-footer-page {
  opacity: 0;
}

/* saat slide 2 aktif */
.slide-structure.active .structure-page-number {
  animation: zoomIn 0.7s ease forwards;
}

.slide-structure.active .structure-title {
  animation: slideDown 0.8s ease forwards;
}

.slide-structure.active .structure-underline {
  animation: lineReveal 0.8s ease forwards;
  animation-delay: 0.2s;
}

.slide-structure.active .structure-subtitle {
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.35s;
}

.slide-structure.active .identity-card {
  animation: slideFromLeft 0.9s ease forwards;
  animation-delay: 0.45s;
}

.slide-structure.active .agenda-item {
  animation: slideFromRight 0.7s ease forwards;
}

/* delay agenda satu per satu */
.slide-structure.active .agenda-item:nth-child(1) {
  animation-delay: 0.55s;
}

.slide-structure.active .agenda-item:nth-child(2) {
  animation-delay: 0.7s;
}

.slide-structure.active .agenda-item:nth-child(3) {
  animation-delay: 0.85s;
}

.slide-structure.active .agenda-item:nth-child(4) {
  animation-delay: 1s;
}

.slide-structure.active .agenda-item:nth-child(5) {
  animation-delay: 1.15s;
}

.slide-structure.active .structure-footer-line {
  animation: fadeIn 0.7s ease forwards;
  animation-delay: 1.2s;
}

.slide-structure.active .structure-footer-text,
.slide-structure.active .structure-footer-page {
  animation: fadeUp 0.7s ease forwards;
  animation-delay: 1.3s;
}

/* ================= KEYFRAMES ================= */

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }

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

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }

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

@keyframes slideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-45px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromRight {
  0% {
    opacity: 0;
    transform: translateX(45px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lineReveal {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ================= SLIDE 3, 4, 5 UMUM ================= */

.slide-intro,
.slide-framework,
.slide-impact {
  background: #f5f7fa;
  color: #071d35;
  padding: 4.2% 5.8%;
  overflow: hidden;
}

.page-badge {
  position: absolute;
  top: 6%;
  right: 5.4%;
  width: 3.8%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #071d35;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: clamp(12px, 1.1vw, 22px);
  font-weight: 800;
}

.slide-title {
  font-size: clamp(30px, 2.9vw, 58px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.title-line {
  display: flex;
  align-items: center;
  gap: 0.4%;
  margin-top: 1.9%;
  margin-bottom: 1.2%;
}

.line-gold {
  width: 5.8%;
  height: 0.7vh;
  min-height: 5px;
  background: #c59d3d;
}

.line-blue {
  width: 18.5%;
  height: 0.7vh;
  min-height: 5px;
  background: #2454e8;
}

.slide-subtitle {
  width: 88%;
  font-size: clamp(13px, 1.08vw, 22px);
  line-height: 1.4;
  color: #526984;
}

.slide-footer-line {
  position: absolute;
  left: 4.8%;
  right: 4.8%;
  bottom: 6%;
  height: 1px;
  background: #dce4ec;
}

.slide-footer-text {
  position: absolute;
  left: 5.8%;
  bottom: 3.2%;
  font-size: clamp(9px, 0.75vw, 15px);
  color: #536982;
}

.slide-footer-page {
  position: absolute;
  right: 5.6%;
  bottom: 3.2%;
  font-size: clamp(9px, 0.75vw, 15px);
  color: #536982;
  font-weight: 700;
}


/* ================= SLIDE 3 ================= */

.intro-card-wrapper {
  margin-top: 3.1%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2%;
}

.intro-card {
  min-height: 29vh;
  background: #ffffff;
  border: 2px solid #dce4ec;
  border-radius: 34px;
  padding: 2.3% 2.3%;
  display: grid;
  grid-template-columns: 14% 1fr;
  gap: 4%;
  align-items: start;
  position: relative;
  overflow: hidden;
}

.intro-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4%;
  height: 100%;
  background: #2454e8;
}

.intro-card.intro-green::before {
  background: #0c7b70;
}

.intro-card.intro-gold::before {
  background: #c59d3d;
}

.intro-number {
  width: 72%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #2454e8;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: clamp(10px, 0.85vw, 17px);
  font-weight: 800;
}

.intro-green .intro-number {
  background: #0c7b70;
}

.intro-gold .intro-number {
  background: #c59d3d;
}

.intro-card h2 {
  font-size: clamp(15px, 1.35vw, 28px);
  line-height: 1.18;
  font-weight: 800;
  margin-bottom: 2.8%;
}

.intro-card p {
  font-size: clamp(11px, 0.96vw, 18px);
  line-height: 1.35;
  color: #1f2e45;
}

.problem-box {
  margin: 5.2% auto 0;
  width: 88%;
  min-height: 15vh;
  border-radius: 26px;
  border: 2px solid #cbd6e6;
  background: #eaf0ff;
  display: grid;
  grid-template-columns: 17% 1fr;
  align-items: center;
  padding: 0 2.7%;
}

.problem-box h3 {
  font-size: clamp(18px, 1.55vw, 32px);
  font-weight: 800;
}

.problem-box p {
  font-size: clamp(18px, 1.75vw, 36px);
  line-height: 1.22;
  font-weight: 800;
}

/* ================= PERBAIKAN SLIDE 3 ================= */

.intro-card {
  grid-template-columns: clamp(42px, 3.4vw, 58px) 1fr;
  gap: clamp(14px, 1.2vw, 22px);
  padding: 2.6% 4.2% 2.6% 5.2%;
  align-items: start;
}

.intro-number {
  width: clamp(42px, 3.4vw, 58px);
  height: clamp(42px, 3.4vw, 58px);
  aspect-ratio: auto;
  margin-top: 2px;
  flex-shrink: 0;
}

.intro-card h2 {
  margin-bottom: 2.2%;
}

.intro-card p {
  max-width: 95%;
}

/* ================= SLIDE 4 ================= */

.framework-flow {
  margin: 6.1% auto 0;
  width: 87%;
  display: grid;
  grid-template-columns: 1fr 8% 1fr 8% 1fr;
  align-items: center;
}

.flow-card {
  min-height: 20vh;
  background: #ffffff;
  border: 2px solid #cbd6e6;
  border-radius: 0 0 28px 28px;
  padding: 8.5% 9%;
  position: relative;
}

.flow-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.8vh;
  background: #2454e8;
}

.flow-gold .flow-bar {
  background: #c59d3d;
}

.flow-green .flow-bar {
  background: #0c7b70;
}

.flow-card h2 {
  font-size: clamp(16px, 1.35vw, 28px);
  line-height: 1.2;
  font-weight: 800;
  margin-bottom: 6%;
}

.flow-card p {
  font-size: clamp(12px, 0.98vw, 19px);
  line-height: 1.28;
  color: #34455f;
}

.flow-arrow {
  height: 2px;
  background: #2454e8;
  position: relative;
}

.flow-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 16px solid #2454e8;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

.concept-title {
  margin-top: 6.5%;
  margin-left: 1.6%;
  font-size: clamp(20px, 1.7vw, 34px);
  font-weight: 800;
}

.concept-wrapper {
  margin: 2.1% auto 0;
  width: 96%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4%;
}

.concept-card {
  min-height: 14vh;
  background: #ffffff;
  border: 2px solid #dce4ec;
  border-radius: 18px;
  padding: 4.8% 5%;
  display: grid;
  grid-template-columns: 16% 1fr;
  gap: 5%;
  align-items: center;
}

.concept-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #071d35;
}

.concept-card h3 {
  font-size: clamp(14px, 1.18vw, 23px);
  line-height: 1.2;
  font-weight: 800;
  margin-bottom: 4%;
}

.concept-card p {
  font-size: clamp(11px, 0.9vw, 17px);
  line-height: 1.3;
  color: #34455f;
}


/* ================= SLIDE 5 ================= */

.impact-wrapper {
  margin: 4.3% auto 0;
  width: 92%;
  height: 58vh;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 4.5%;
  row-gap: 13%;
}

.impact-card {
  background: #ffffff;
  border: 2px solid #dce4ec;
  border-radius: 26px;
  padding: 6.5% 7%;
  display: grid;
  grid-template-columns: 24% 1fr;
  gap: 8%;
  align-items: center;
  grid-column: span 2;
}

.impact-bottom-left {
  grid-column: 2 / span 2;
}

.impact-bottom-right {
  grid-column: 4 / span 2;
}

.impact-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #eaf1ff;
  border: 2px solid #d2e2ff;
  display: grid;
  place-items: center;
}

.impact-icon svg {
  width: 67%;
  height: 67%;
  fill: #2454e8;
  stroke: #2454e8;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact-gold-icon svg {
  fill: none;
  stroke: #c59d3d;
}

.impact-red-icon svg {
  fill: none;
  stroke: #d83232;
}

.impact-red-icon svg path:last-child {
  fill: #d83232;
}

.impact-green-icon svg {
  fill: none;
  stroke: #0c7b70;
}

.impact-dark-icon svg {
  fill: none;
  stroke: #34455f;
}

.impact-dark-icon svg circle,
.impact-dark-icon svg path:nth-child(2) {
  fill: #34455f;
}

.impact-card h2 {
  font-size: clamp(15px, 1.3vw, 26px);
  line-height: 1.2;
  font-weight: 800;
  margin-bottom: 6%;
}

.impact-card p {
  font-size: clamp(11px, 0.9vw, 18px);
  line-height: 1.3;
  color: #34455f;
}


/* ================= ANIMASI MASUK SLIDE 3, 4, 5 ================= */

.slide-intro .page-badge,
.slide-intro .slide-title,
.slide-intro .title-line,
.slide-intro .slide-subtitle,
.slide-intro .intro-card,
.slide-intro .problem-box,
.slide-intro .slide-footer-line,
.slide-intro .slide-footer-text,
.slide-intro .slide-footer-page,
.slide-framework .page-badge,
.slide-framework .slide-title,
.slide-framework .title-line,
.slide-framework .slide-subtitle,
.slide-framework .flow-card,
.slide-framework .flow-arrow,
.slide-framework .concept-title,
.slide-framework .concept-card,
.slide-framework .slide-footer-line,
.slide-framework .slide-footer-text,
.slide-framework .slide-footer-page,
.slide-impact .page-badge,
.slide-impact .slide-title,
.slide-impact .title-line,
.slide-impact .slide-subtitle,
.slide-impact .impact-card,
.slide-impact .slide-footer-line,
.slide-impact .slide-footer-text,
.slide-impact .slide-footer-page {
  opacity: 0;
}

.slide-intro.active .page-badge,
.slide-framework.active .page-badge,
.slide-impact.active .page-badge {
  animation: sZoomIn 0.7s ease forwards;
}

.slide-intro.active .slide-title,
.slide-framework.active .slide-title,
.slide-impact.active .slide-title {
  animation: sSlideDown 0.8s ease forwards;
}

.slide-intro.active .title-line,
.slide-framework.active .title-line,
.slide-impact.active .title-line {
  animation: sLineReveal 0.8s ease forwards;
  animation-delay: 0.18s;
}

.slide-intro.active .slide-subtitle,
.slide-framework.active .slide-subtitle,
.slide-impact.active .slide-subtitle {
  animation: sFadeUp 0.8s ease forwards;
  animation-delay: 0.32s;
}

/* slide 3 */
.slide-intro.active .intro-card:nth-child(1) {
  animation: sSlideFromLeft 0.8s ease forwards;
  animation-delay: 0.45s;
}

.slide-intro.active .intro-card:nth-child(2) {
  animation: sFadeUp 0.8s ease forwards;
  animation-delay: 0.6s;
}

.slide-intro.active .intro-card:nth-child(3) {
  animation: sSlideFromRight 0.8s ease forwards;
  animation-delay: 0.75s;
}

.slide-intro.active .problem-box {
  animation: sFadeUp 0.8s ease forwards;
  animation-delay: 0.95s;
}

/* slide 4 */
.slide-framework.active .flow-card:nth-child(1) {
  animation: sSlideFromLeft 0.8s ease forwards;
  animation-delay: 0.45s;
}

.slide-framework.active .flow-arrow:nth-child(2) {
  animation: sLineArrow 0.7s ease forwards;
  animation-delay: 0.65s;
}

.slide-framework.active .flow-card:nth-child(3) {
  animation: sFadeUp 0.8s ease forwards;
  animation-delay: 0.8s;
}

.slide-framework.active .flow-arrow:nth-child(4) {
  animation: sLineArrow 0.7s ease forwards;
  animation-delay: 1s;
}

.slide-framework.active .flow-card:nth-child(5) {
  animation: sSlideFromRight 0.8s ease forwards;
  animation-delay: 1.15s;
}

.slide-framework.active .concept-title {
  animation: sFadeUp 0.7s ease forwards;
  animation-delay: 1.25s;
}

.slide-framework.active .concept-card:nth-child(1) {
  animation: sFadeUp 0.7s ease forwards;
  animation-delay: 1.35s;
}

.slide-framework.active .concept-card:nth-child(2) {
  animation: sFadeUp 0.7s ease forwards;
  animation-delay: 1.5s;
}

.slide-framework.active .concept-card:nth-child(3) {
  animation: sFadeUp 0.7s ease forwards;
  animation-delay: 1.65s;
}

/* slide 5 */
.slide-impact.active .impact-card:nth-child(1) {
  animation: sSlideFromLeft 0.75s ease forwards;
  animation-delay: 0.45s;
}

.slide-impact.active .impact-card:nth-child(2) {
  animation: sFadeUp 0.75s ease forwards;
  animation-delay: 0.6s;
}

.slide-impact.active .impact-card:nth-child(3) {
  animation: sSlideFromRight 0.75s ease forwards;
  animation-delay: 0.75s;
}

.slide-impact.active .impact-card:nth-child(4) {
  animation: sSlideFromLeft 0.75s ease forwards;
  animation-delay: 0.95s;
}

.slide-impact.active .impact-card:nth-child(5) {
  animation: sSlideFromRight 0.75s ease forwards;
  animation-delay: 1.1s;
}

.slide-intro.active .slide-footer-line,
.slide-framework.active .slide-footer-line,
.slide-impact.active .slide-footer-line {
  animation: sFadeIn 0.7s ease forwards;
  animation-delay: 1.35s;
}

.slide-intro.active .slide-footer-text,
.slide-intro.active .slide-footer-page,
.slide-framework.active .slide-footer-text,
.slide-framework.active .slide-footer-page,
.slide-impact.active .slide-footer-text,
.slide-impact.active .slide-footer-page {
  animation: sFadeUp 0.7s ease forwards;
  animation-delay: 1.45s;
}


/* ================= KEYFRAMES TAMBAHAN ================= */

@keyframes sSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }

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

@keyframes sFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

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

@keyframes sSlideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-45px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sSlideFromRight {
  0% {
    opacity: 0;
    transform: translateX(45px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sLineReveal {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes sLineArrow {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes sFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* =========================================================
   CSS SLIDE 6 SAMPAI 12
   Tempel di paling bawah file style.css
   Hapus CSS slide 6-12 yang lama dulu agar tidak bentrok.
========================================================= */

/* ================= BAGIAN UMUM ================= */

.slide-social,
.slide-dependence,
.slide-hoax,
.slide-culture,
.slide-gap,
.slide-strategy,
.slide-conclusion {
  overflow: hidden;
}

.slide-social,
.slide-dependence,
.slide-hoax,
.slide-culture,
.slide-gap,
.slide-strategy {
  background: #f5f7fa;
  color: #071d35;
  padding: 4.2% 5.8%;
}

/* Badge nomor halaman */
.page-badge {
  position: absolute;
  top: 6%;
  right: 5.4%;
  width: 3.8%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #071d35;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: clamp(12px, 1.1vw, 22px);
  font-weight: 800;
}

/* Judul */
.slide-title {
  font-size: clamp(30px, 2.9vw, 58px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: 0.3px;
  max-width: 86%;
}

/* Garis judul */
.title-line {
  display: flex;
  align-items: center;
  gap: 0.4%;
  margin-top: 1.2%;
  margin-bottom: 1.2%;
}

.line-gold {
  width: 5.8%;
  height: 0.7vh;
  min-height: 5px;
  background: #c59d3d;
}

.line-blue {
  width: 18.5%;
  height: 0.7vh;
  min-height: 5px;
  background: #2454e8;
}

/* Subjudul */
.slide-subtitle {
  width: 88%;
  font-size: clamp(13px, 1.08vw, 22px);
  line-height: 1.4;
  color: #526984;
}

/* Footer */
.slide-footer-line {
  position: absolute;
  left: 4.8%;
  right: 4.8%;
  bottom: 6%;
  height: 1px;
  background: #dce4ec;
}

.slide-footer-text {
  position: absolute;
  left: 5.8%;
  bottom: 3.2%;
  font-size: clamp(9px, 0.75vw, 15px);
  color: #536982;
}

.slide-footer-page {
  position: absolute;
  right: 5.6%;
  bottom: 3.2%;
  font-size: clamp(9px, 0.75vw, 15px);
  color: #536982;
  font-weight: 700;
}

/* Arrow umum */
.flow-arrow {
  height: 2px;
  background: #2454e8;
  position: relative;
}

.flow-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 16px solid #2454e8;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

/* Warna umum */
.blue {
  background: #2454e8;
}

.gold {
  background: #caa143;
}

.red {
  background: #c9161d;
}

.green {
  background: #0c7b70;
}


/* ================= SLIDE 6 ================= */

.two-panel {
  margin: 1.8% auto 0;
  width: 94%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4%;
}

.big-panel {
  min-height: 57vh;
  background: #ffffff;
  border: 2px solid #dce4ec;
  border-radius: 54px;
  padding: 3.1% 4%;
  position: relative;
}

.big-panel h2 {
  font-size: clamp(20px, 1.7vw, 34px);
  font-weight: 800;
  margin-bottom: 5%;
}

.big-panel ul {
  font-size: clamp(15px, 1.32vw, 26px);
  line-height: 1.32;
  color: #34455f;
  padding-left: 3%;
}

.people-visual {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 12%;
  height: 12%;
  border-bottom: 2px solid #dce4ec;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.people-visual span {
  width: 9%;
  height: 70%;
  border: 3px solid #8da0ba;
  background: #dbe8f9;
  position: relative;
}

.people-visual span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -50%;
  width: 130%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #2454e8;
  transform: translateX(-50%);
}

.people-visual span:nth-child(even)::before {
  background: #65788f;
}

.key-note {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 12%;
  background: #eaf1ff;
  border: 2px solid #d2e2ff;
  border-radius: 14px;
  padding: 3.5%;
  font-size: clamp(13px, 1.1vw, 22px);
  font-weight: 800;
  text-align: center;
}


/* ================= SLIDE 7 ================= */

.dependence-layout {
  margin: 3.8% auto 0;
  width: 92%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5%;
}

.dependence-left,
.dependence-right {
  min-height: 60vh;
  border-radius: 52px;
  padding: 3.4% 4%;
}

.dependence-left {
  background: #ffffff;
  border: 2px solid #dce4ec;
}

.dependence-right {
  background: #071d35;
  color: #ffffff;
  position: relative;
}

.dependence-left h2,
.dependence-right h2 {
  font-size: clamp(20px, 1.75vw, 34px);
  font-weight: 800;
  margin-bottom: 7%;
}

.step-row {
  display: grid;
  grid-template-columns: 12% 1fr;
  gap: 5%;
  align-items: center;
  margin-bottom: 7%;
}

.step-number {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(12px, 1vw, 20px);
}

.step-row h3 {
  font-size: clamp(15px, 1.35vw, 27px);
  font-weight: 800;
  margin-bottom: 1.5%;
}

.step-row p {
  font-size: clamp(12px, 0.95vw, 18px);
  color: #536982;
}

.dependence-right ul {
  font-size: clamp(15px, 1.32vw, 26px);
  line-height: 1.32;
  padding-left: 4%;
}

.gold-note {
  position: absolute;
  left: 6.5%;
  right: 6.5%;
  bottom: 10%;
  background: #caa143;
  color: #071d35;
  padding: 3%;
  border-radius: 10px;
  font-size: clamp(12px, 1vw, 19px);
  font-weight: 800;
  text-align: center;
}


/* ================= SLIDE 8 ================= */

.hoax-flow {
  margin: 5.3% auto 0;
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 9% 1fr 9% 1fr;
  align-items: center;
}

.hoax-card {
  min-height: 38vh;
  background: #ffffff;
  border: 2px solid #dce4ec;
  border-radius: 34px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8%;
}

.hoax-card h2 {
  font-size: clamp(17px, 1.45vw, 30px);
  font-weight: 800;
}

.hoax-card p {
  font-size: clamp(12px, 1vw, 20px);
  color: #34455f;
  line-height: 1.35;
}

.warning-icon {
  width: 64px;
  height: 58px;
  position: relative;
  margin-bottom: 14px;
  font-size: 0;
}

/* segitiga merah luar */
.warning-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #c9161d;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* segitiga putih dalam */
.warning-icon::after {
  content: "!";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 46px;
  height: 40px;
  background: #ffffff;
  color: #c9161d;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  padding-top: 12px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.paper-icon {
  width: 58px;
  height: 44px;
  border: 4px solid #2454e8;
  border-radius: 8px;
  position: relative;
}

.paper-icon::after {
  content: "";
  position: absolute;
  right: -15px;
  top: -8px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 24px solid #c9161d;
}

.group-icon {
  width: 64px;
  height: 38px;
  background: #0c7b70;
  border-radius: 6px;
  position: relative;
}

.group-icon::before,
.group-icon::after {
  content: "";
  position: absolute;
  top: -24px;
  width: 20px;
  height: 20px;
  background: #0c7b70;
  border-radius: 50%;
}

.group-icon::before {
  left: 10px;
}

.group-icon::after {
  right: 10px;
}

.literacy-box {
  margin: 4.2% auto 0;
  width: 86%;
  background: #eaf1ff;
  border: 2px solid #d2e2ff;
  border-radius: 14px;
  padding: 2%;
  text-align: center;
  font-size: clamp(15px, 1.25vw, 25px);
  font-weight: 800;
}


/* ================= SLIDE 9 ================= */

.culture-layout {
  margin: 3.2% auto 0;
  width: 93%;
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 4.5%;
}

.culture-left,
.culture-right {
  min-height: 58vh;
  border-radius: 52px;
  padding: 3.2% 4%;
}

.culture-left {
  background: #ffffff;
  border: 2px solid #dce4ec;
}

.culture-right {
  background: #071d35;
  color: #ffffff;
  position: relative;
}

.culture-left h2,
.culture-right h2 {
  font-size: clamp(20px, 1.7vw, 34px);
  font-weight: 800;
  margin-bottom: 6%;
}

.culture-left ul {
  font-size: clamp(15px, 1.32vw, 26px);
  line-height: 1.32;
  color: #34455f;
  padding-left: 3%;
}

.triangle-box {
  position: relative;
  width: 78%;
  height: 36vh;
  margin: 0 auto;
}

.triangle-box svg {
  width: 100%;
  height: 100%;
}

.triangle-box line {
  stroke: #ffffff;
  stroke-width: 2;
}

.triangle-box circle {
  fill: #caa143;
}

.tri-label {
  position: absolute;
  color: #ffffff;
  font-size: clamp(14px, 1.3vw, 26px);
  font-weight: 800;
}

.tri-label.top {
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
}

.tri-label.left {
  bottom: 3%;
  left: 4%;
}

.tri-label.right {
  bottom: 3%;
  right: 2%;
}

.culture-note {
  position: absolute;
  left: 12%;
  right: 10%;
  bottom: 8%;
  font-size: clamp(12px, 1vw, 19px);
  line-height: 1.35;
  font-weight: 700;
}


/* ================= SLIDE 10 ================= */

.data-table-wrap {
  margin: 3% auto 0;
  width: 94%;
  border-radius: 0 0 52px 52px;
  overflow: hidden;
  border: 1px solid #dce4ec;
  background: #ffffff;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th {
  background: #071d35;
  color: #ffffff;
  text-align: left;
  padding: 2.1% 2.4%;
  font-size: clamp(11px, 0.95vw, 18px);
  font-weight: 800;
}

.data-table td {
  padding: 2.2% 2.4%;
  font-size: clamp(10px, 0.82vw, 16px);
  line-height: 1.25;
  font-weight: 700;
  color: #071d35;
  vertical-align: top;
  border: 1px solid #e3e9f1;
}

.data-table tbody tr:nth-child(even) {
  background: #edf2f8;
}


/* ================= SLIDE 11 ================= */

.strategy-grid {
  margin: 3.8% auto 0;
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vh 4%;
}

.strategy-card {
  min-height: 18vh;
  background: #ffffff;
  border: 2px solid #dce4ec;
  border-radius: 28px;
  display: grid;
  grid-template-columns: 18% 1fr;
  gap: 5%;
  align-items: center;
  padding: 4% 5%;
}

.strategy-number {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: clamp(15px, 1.2vw, 24px);
  font-weight: 800;
}

.strategy-card h2 {
  font-size: clamp(18px, 1.5vw, 30px);
  font-weight: 800;
  margin-bottom: 3%;
}

.strategy-card p {
  font-size: clamp(12px, 1vw, 19px);
  line-height: 1.3;
  color: #34455f;
}

.role-box {
  margin: 3.8% auto 0;
  width: 69%;
  background: #071d35;
  color: #ffffff;
  text-align: center;
  padding: 1.7%;
  border-radius: 8px;
  font-size: clamp(12px, 1vw, 20px);
  font-weight: 800;
}


/* ================= SLIDE 12 ================= */

.slide-conclusion {
  background: #071d35;
  color: #ffffff;
  padding: 6% 6.5%;
}

.conclusion-title {
  font-size: clamp(36px, 3.2vw, 64px);
  font-weight: 800;
}

.conclusion-line {
  margin-top: 2%;
}

.conclusion-content {
  margin-top: 5.5%;
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: 5%;
  align-items: center;
}

.conclusion-list {
  display: flex;
  flex-direction: column;
  gap: 8vh;
}

.conclusion-item {
  display: grid;
  grid-template-columns: 10% 1fr;
  gap: 4%;
  align-items: center;
}

.conclusion-number {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #caa143;
  color: #071d35;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(15px, 1.1vw, 22px);
  font-weight: 800;
}

.conclusion-item h2 {
  font-size: clamp(18px, 1.45vw, 30px);
  line-height: 1.2;
  font-weight: 800;
  margin-bottom: 2.3%;
}

.conclusion-item p {
  font-size: clamp(12px, 0.9vw, 18px);
  line-height: 1.35;
  font-weight: 700;
}

.conclusion-visual {
  position: relative;
  width: 80%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.conclusion-visual svg {
  width: 100%;
  height: 100%;
}

.conclusion-visual line {
  stroke: #4ca0ff;
  stroke-width: 2;
}

.conclusion-visual circle {
  fill: #ffffff;
  stroke: #2e74ff;
  stroke-width: 4;
}

.conclusion-yellow {
  position: absolute;
  left: 48%;
  top: 48%;
  width: 18%;
  aspect-ratio: 1 / 1;
  background: #fff200;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.conclusion-footer-text {
  position: absolute;
  left: 6.5%;
  bottom: 6%;
  font-size: clamp(10px, 0.85vw, 17px);
  font-weight: 700;
}

.conclusion-footer-page {
  position: absolute;
  right: 6.5%;
  bottom: 6%;
  font-size: clamp(10px, 0.85vw, 17px);
  font-weight: 700;
}


/* ================= ANIMASI MASUK ================= */

/* Kondisi awal */
.slide-social .page-badge,
.slide-social .slide-title,
.slide-social .title-line,
.slide-social .slide-subtitle,
.slide-social .big-panel,
.slide-social .slide-footer-line,
.slide-social .slide-footer-text,
.slide-social .slide-footer-page,
.slide-dependence .page-badge,
.slide-dependence .slide-title,
.slide-dependence .title-line,
.slide-dependence .slide-subtitle,
.slide-dependence .dependence-left,
.slide-dependence .dependence-right,
.slide-dependence .slide-footer-line,
.slide-dependence .slide-footer-text,
.slide-dependence .slide-footer-page,
.slide-hoax .page-badge,
.slide-hoax .slide-title,
.slide-hoax .title-line,
.slide-hoax .slide-subtitle,
.slide-hoax .hoax-card,
.slide-hoax .flow-arrow,
.slide-hoax .literacy-box,
.slide-hoax .slide-footer-line,
.slide-hoax .slide-footer-text,
.slide-hoax .slide-footer-page,
.slide-culture .page-badge,
.slide-culture .slide-title,
.slide-culture .title-line,
.slide-culture .slide-subtitle,
.slide-culture .culture-left,
.slide-culture .culture-right,
.slide-culture .slide-footer-line,
.slide-culture .slide-footer-text,
.slide-culture .slide-footer-page,
.slide-gap .page-badge,
.slide-gap .slide-title,
.slide-gap .title-line,
.slide-gap .slide-subtitle,
.slide-gap .data-table-wrap,
.slide-gap .slide-footer-line,
.slide-gap .slide-footer-text,
.slide-gap .slide-footer-page,
.slide-strategy .page-badge,
.slide-strategy .slide-title,
.slide-strategy .title-line,
.slide-strategy .slide-subtitle,
.slide-strategy .strategy-card,
.slide-strategy .role-box,
.slide-strategy .slide-footer-line,
.slide-strategy .slide-footer-text,
.slide-strategy .slide-footer-page,
.slide-conclusion .conclusion-title,
.slide-conclusion .conclusion-line,
.slide-conclusion .conclusion-item,
.slide-conclusion .conclusion-visual,
.slide-conclusion .conclusion-footer-text,
.slide-conclusion .conclusion-footer-page {
  opacity: 0;
}

/* Header animasi */
.slide-social.active .page-badge,
.slide-dependence.active .page-badge,
.slide-hoax.active .page-badge,
.slide-culture.active .page-badge,
.slide-gap.active .page-badge,
.slide-strategy.active .page-badge {
  animation: sZoomIn 0.7s ease forwards;
}

.slide-social.active .slide-title,
.slide-dependence.active .slide-title,
.slide-hoax.active .slide-title,
.slide-culture.active .slide-title,
.slide-gap.active .slide-title,
.slide-strategy.active .slide-title,
.slide-conclusion.active .conclusion-title {
  animation: sSlideDown 0.8s ease forwards;
}

.slide-social.active .title-line,
.slide-dependence.active .title-line,
.slide-hoax.active .title-line,
.slide-culture.active .title-line,
.slide-gap.active .title-line,
.slide-strategy.active .title-line,
.slide-conclusion.active .conclusion-line {
  animation: sLineReveal 0.8s ease forwards;
  animation-delay: 0.18s;
}

.slide-social.active .slide-subtitle,
.slide-dependence.active .slide-subtitle,
.slide-hoax.active .slide-subtitle,
.slide-culture.active .slide-subtitle,
.slide-gap.active .slide-subtitle,
.slide-strategy.active .slide-subtitle {
  animation: sFadeUp 0.8s ease forwards;
  animation-delay: 0.32s;
}

/* Slide 6 */
.slide-social.active .big-panel:nth-child(1) {
  animation: sSlideFromLeft 0.85s ease forwards;
  animation-delay: 0.5s;
}

.slide-social.active .big-panel:nth-child(2) {
  animation: sSlideFromRight 0.85s ease forwards;
  animation-delay: 0.65s;
}

/* Slide 7 */
.slide-dependence.active .dependence-left {
  animation: sSlideFromLeft 0.85s ease forwards;
  animation-delay: 0.5s;
}

.slide-dependence.active .dependence-right {
  animation: sSlideFromRight 0.85s ease forwards;
  animation-delay: 0.65s;
}

/* Slide 8 */
.slide-hoax.active .hoax-card:nth-child(1) {
  animation: sSlideFromLeft 0.8s ease forwards;
  animation-delay: 0.5s;
}

.slide-hoax.active .flow-arrow:nth-child(2) {
  animation: sLineArrow 0.7s ease forwards;
  animation-delay: 0.72s;
}

.slide-hoax.active .hoax-card:nth-child(3) {
  animation: sFadeUp 0.8s ease forwards;
  animation-delay: 0.88s;
}

.slide-hoax.active .flow-arrow:nth-child(4) {
  animation: sLineArrow 0.7s ease forwards;
  animation-delay: 1.05s;
}

.slide-hoax.active .hoax-card:nth-child(5) {
  animation: sSlideFromRight 0.8s ease forwards;
  animation-delay: 1.18s;
}

.slide-hoax.active .literacy-box {
  animation: sFadeUp 0.75s ease forwards;
  animation-delay: 1.35s;
}

/* Slide 9 */
.slide-culture.active .culture-left {
  animation: sSlideFromLeft 0.85s ease forwards;
  animation-delay: 0.5s;
}

.slide-culture.active .culture-right {
  animation: sSlideFromRight 0.85s ease forwards;
  animation-delay: 0.65s;
}

/* Slide 10 */
.slide-gap.active .data-table-wrap {
  animation: sFadeUp 0.9s ease forwards;
  animation-delay: 0.5s;
}

/* Slide 11 */
.slide-strategy.active .strategy-card:nth-child(1) {
  animation: sSlideFromLeft 0.75s ease forwards;
  animation-delay: 0.5s;
}

.slide-strategy.active .strategy-card:nth-child(2) {
  animation: sSlideFromRight 0.75s ease forwards;
  animation-delay: 0.65s;
}

.slide-strategy.active .strategy-card:nth-child(3) {
  animation: sSlideFromLeft 0.75s ease forwards;
  animation-delay: 0.8s;
}

.slide-strategy.active .strategy-card:nth-child(4) {
  animation: sSlideFromRight 0.75s ease forwards;
  animation-delay: 0.95s;
}

.slide-strategy.active .role-box {
  animation: sFadeUp 0.75s ease forwards;
  animation-delay: 1.15s;
}

/* Slide 12 */
.slide-conclusion.active .conclusion-item:nth-child(1) {
  animation: sSlideFromLeft 0.8s ease forwards;
  animation-delay: 0.45s;
}

.slide-conclusion.active .conclusion-item:nth-child(2) {
  animation: sSlideFromLeft 0.8s ease forwards;
  animation-delay: 0.65s;
}

.slide-conclusion.active .conclusion-item:nth-child(3) {
  animation: sSlideFromLeft 0.8s ease forwards;
  animation-delay: 0.85s;
}

.slide-conclusion.active .conclusion-visual {
  animation: sZoomIn 0.9s ease forwards;
  animation-delay: 0.75s;
}

.slide-conclusion.active .conclusion-visual svg line {
  stroke-dasharray: 8 10;
  animation: conclusionLineMove 5s linear infinite;
}

.slide-conclusion.active .conclusion-yellow {
  animation: yellowSoftPulse 4s ease-in-out infinite;
}

.slide-conclusion.active .conclusion-footer-text,
.slide-conclusion.active .conclusion-footer-page {
  animation: sFadeUp 0.75s ease forwards;
  animation-delay: 1.25s;
}

/* Footer animasi */
.slide-social.active .slide-footer-line,
.slide-dependence.active .slide-footer-line,
.slide-hoax.active .slide-footer-line,
.slide-culture.active .slide-footer-line,
.slide-gap.active .slide-footer-line,
.slide-strategy.active .slide-footer-line {
  animation: sFadeIn 0.7s ease forwards;
  animation-delay: 1.25s;
}

.slide-social.active .slide-footer-text,
.slide-social.active .slide-footer-page,
.slide-dependence.active .slide-footer-text,
.slide-dependence.active .slide-footer-page,
.slide-hoax.active .slide-footer-text,
.slide-hoax.active .slide-footer-page,
.slide-culture.active .slide-footer-text,
.slide-culture.active .slide-footer-page,
.slide-gap.active .slide-footer-text,
.slide-gap.active .slide-footer-page,
.slide-strategy.active .slide-footer-text,
.slide-strategy.active .slide-footer-page {
  animation: sFadeUp 0.7s ease forwards;
  animation-delay: 1.35s;
}


/* ================= KEYFRAMES WAJIB ================= */

@keyframes sSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }

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

@keyframes sFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

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

@keyframes sSlideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-45px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sSlideFromRight {
  0% {
    opacity: 0;
    transform: translateX(45px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sLineReveal {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes sLineArrow {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes sFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes conclusionLineMove {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -60;
  }
}

@keyframes yellowSoftPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0.9;
  }
}