* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  background-color: #bb3534;
  color: #ffffff;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.hero-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: #b8282b;
}

/* --- LOGO & NAV HEADER --- */
/* --- HEADER CONTAINER --- */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
}

.logo-img {
  position: absolute;
  top: 6.38vh;
  left: 4.16vw;
  width: 9.6vw;
  height: 4.62vh;
  display: block;
  pointer-events: auto;
}

/* --- TOMBOL HOME --- */
.home-btn {
  position: absolute;
  top: 6.11vh;
  left: 92.97vw;

  height: 5.09vh;
  aspect-ratio: 1 / 1;

  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  z-index: 101;
  transition:
    background 0.3s ease,
    transform 0.2s ease;
}

.home-btn:hover {
  /* background: rgba(255, 255, 255, 0.4); */
  /* transform: scale(1.05); */
}

.home-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --- PANAH NAVIGASI --- */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  height: 5.09vh;
  aspect-ratio: 1 / 1;

  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  z-index: 20;
  transition:
    background 0.3s ease,
    transform 0.2s ease;
}

.prev-arrow {
  left: 4.2vw;
}

.next-arrow {
  right: 4.2vw;
}

.nav-arrow:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.05);
}

.nav-arrow img,
.nav-arrow .arrow-img,
.nav-arrow svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --- SLIDER MANAGEMENT --- */
.slider-wrapper {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.slide {
  background: linear-gradient(180deg, #bc3535 38%, #561818 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease-in-out,
    visibility 0.6s ease-in-out;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}
.title {
  position: absolute;
  top: 32.648vh; /* y: 331px */
  left: 9.531vw; /* x: 183px */
  width: 34.792vw; /* w: 668px */
  height: 22.222vh; /* h: 240px */

  font-size: 4.25vw;
  font-weight: 500;
  line-height: 120%;
  color: #ffffff;
  margin: 0;
}

/* --- TOMBOL RUN PAYROLL --- */
.btn-payroll {
  position: absolute;
  top: 56.574vh; /* y: 611px */
  left: 9.583vw; /* x: 184px */
  width: 34.739vw; /* w: 667px */
  height: 9.259vh; /* h: 100px */

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  font-size: 1.2vw;
  font-weight: 600;
  background-color: #4b61dd; /* Background Blue */
  color: #ffffff; /* Text White */
  border: none;
  border-radius: 0.62vw;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.btn-payroll:hover {
  background-color: #3b4eba;
  transform: translateY(-0.3vh) scale(1.01);
}

/* --- GAMBAR HERO --- */
.hero-image {
  position: absolute;
  top: 12.96vh;
  left: 39.43vw;
  width: 54.48vw;
  height: 70.28vh;
  z-index: 2;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.slide {
  display: none;
  width: 100vw;
  height: 100vh;
}

.slide.active {
  display: flex !important;
}

/* --- SLIDE 2 --- */
.modal-card {
  position: absolute;
  top: 15.65vh;
  left: 26.56vw;
  width: 46.87vw;
  height: 62.5vh;

  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  animation: modalSlide 0.5s ease;
}

/* GAMBAR MODAL UI */
.modal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes modalSlide {
  from {
    transform: translateY(2vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.step-wizard {
  display: flex;
  justify-content: center;
  gap: 3vw;
  margin-bottom: 1.5vw;
}

.step {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.9vw;
  color: #888;
}

.step.completed span {
  background: #22c55e;
  color: white;
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step.active {
  color: #b8282b;
  font-weight: 600;
}

.step.active span {
  border: 2px solid #b8282b;
  color: #b8282b;
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-grid {
  display: flex;
  justify-content: space-between;
  background: #f8fafc;
  padding: 1vw;
  border-radius: 0.6vw;
  margin-bottom: 1vw;
}

.info-box {
  display: flex;
  flex-direction: column;
  font-size: 0.85vw;
}

.info-box .label {
  color: #666;
}
.highlight-text {
  color: #b8282b;
  font-size: 1.1vw;
}

.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85vw;
}

.table-wrapper th,
.table-wrapper td {
  padding: 0.6vw;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.modal-action-btn {
  width: 100%;
  background-color: #4b61dd;
  color: #ffffff;
  border: none;
  padding: 0.8vw;
  font-size: 1vw;
  font-weight: 600;
  border-radius: 0.6vw;
  margin-top: 1vw;
  cursor: pointer;
}

.slide-caption {
  position: absolute;
  bottom: 8vh;
  width: 100%;
  text-align: center;
  font-size: 1.8vw;
  font-weight: 500;
  color: #ffffff;
}

.slide-content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 2vw;
}

/* ==========================================
   SLIDE 3 STYLING
   ========================================== */
#slide-3 {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide3-main-card {
  position: absolute;
  left: 28.54vw;
  top: 20.83vh;
  width: 42.97vw;
  height: 57.29vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-sync-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* --- FLOATING CARDS BASE --- */
.floating-card {
  position: absolute;
  width: 18.49vw;
  height: auto;
  background: transparent;
  box-shadow: none;
  padding: 0;
  z-index: 5;
}

/* Posisi Kartu Kiri Atas */
.float-top-left {
  left: 12.29vw;
  top: 34.22vh;
}

/* Posisi Kartu Kiri Bawah */
.float-bottom-left {
  left: 12.29vw;
  top: 56.89vh;
}

/* Posisi Kartu Kanan */
.float-right {
  left: 65.57vw;
  top: 48.8vh;
}

/* --- GAMBAR KONTEN KARTU --- */
.card-body-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0.8vw 1.5vw rgba(0, 0, 0, 0.12));
}

/* --- GAMBAR LOGO MENGAMBANG --- */
.card-logo-img {
  position: absolute;
  top: -1.6vw;
  left: 2.5vw;
  width: 3.2vw;
  height: auto;
  z-index: 10;
  transform: translate(-30%, -30%);
  filter: drop-shadow(0 0.4vw 0.8vw rgba(0, 0, 0, 0.2));
}

/* Logo khusus kartu kanan */
.float-right .card-logo-img {
  left: auto;
  right: 3.2vw;
  transform: translate(30%, -30%);
}

/* --- ANIMASI MUNCUL BERSAMAAN --- */
#slide-3 .floating-card {
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  will-change: transform, opacity;
}

#slide-3.active .floating-card {
  animation: floatPopIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes floatPopIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- SLIDE 4 BASE --- */
#slide-4 {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* CONTAINER CARD UTAMA */
.slide4-main-card {
  position: absolute;
  left: 28.54vw;
  top: 15.83vh;
  width: 42.97vw;
  background: #fafafa;
  border-radius: 1.5vw;
  padding: 2vw;
  box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  z-index: 2;
}

.run-payroll-title {
  text-align: center;
  font-size: 1vw;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.05em;
  margin-bottom: 1.5vw;
}

/* STEPPER HEADER */
.stepper-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vw;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4vw;
}

.step-icon {
  width: 1.8vw;
  height: 1.8vw;
  border-radius: 50%;
  background: #e52320;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon.current {
  background: #ffffff;
  border: 2px solid #e52320;
  color: #e52320;
  font-weight: 700;
  font-size: 0.9vw;
}

.step-label {
  font-size: 0.75vw;
  color: #6b7280;
  font-weight: 500;
}

.step-label.active {
  color: #e52320;
  font-weight: 700;
}

.step-line {
  width: 4vw;
  height: 2px;
  background: #e5e7eb;
  margin: 0 0.8vw;
  margin-bottom: 1.2vw;
}

.step-line.active {
  background: #e52320;
}

/* INNER WHITE CARD (PROGRESS AREA) */
.process-inner-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1.2vw;
  padding: 3vw 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 0.4vw 1.2vw rgba(0, 0, 0, 0.03);
}

/* CIRCULAR PROGRESS SVG */
.progress-circle-container {
  position: relative;
  width: 9vw;
  height: 9vw;
  margin-bottom: 1.5vw;
}

.progress-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* Memutar agar progress mulai dari atas */
}

.circle-bg {
  fill: none;
  stroke: #f3f4f6;
  stroke-width: 6;
}

.circle-bar {
  fill: none;
  stroke: #e52320;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 326.72; /* keliling lingkaran (2 * PI * 52) */
  stroke-dashoffset: 326.72; /* posisi awal 0% */
  transition: stroke-dashoffset 0.1s linear;
}

.progress-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
  font-weight: 700;
  color: #111827;

  font-variant-numeric: tabular-nums;
}

#employeeProgressText {
  display: inline-block;
  min-width: 3vw;
  text-align: center;
  font-variant-numeric: tabular-nums; /* Mencegah getaran pada angka karyawan */

  /* --- PERBAIKAN GETARAN --- */
  vertical-align: bottom;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: contents;
}

/* TEKS PROSES BAWAH CIRCLE */
.process-title {
  font-size: 1.25vw;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5vw;
}

.process-subtitle {
  font-size: 0.9vw;
  color: #6b7280;
  margin: 0;
}

/* ==========================================
   SLIDE 6 CONTAINER
   ========================================== */
#slide-6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden; /* Mencegah video keluar dari layar */
  transition:
    opacity 0.5s ease-in-out,
    visibility 0.5s ease-in-out;
}

#slide-6.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  z-index: 10;
}

/* ==========================================
   HERO VIDEO FULLSCREEN BACKGROUND
   ========================================== */
#slide-6 .disbursement-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1; /* Angka z-index kecil agar berada di belakang */
  pointer-events: none; /* Mencegah video menghalangi klik pada tombol/teks */
  opacity: 1;
  will-change: transform, opacity;
}

#slide-6 .disbursement-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Memastikan video fullscreen tanpa terdistorsi/gepeng */
  display: block;
}

/* ==========================================
   KONTEN UTAMA (DI ATAS VIDEO)
   ========================================== */
#slide-6 .slide-content {
  position: relative;
  z-index: 2; /* Angka z-index lebih tinggi dari video (1) */
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

#slide-6 .disbursement-title {
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
}

/* ==========================================
   TRIGGER ANIMASI SAAT SLIDE 6 AKTIF
   ========================================== */

#slide-6.active .disbursement-hero {
  animation: none !important;
  /* animation: zoomInHero 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards; */
}

#slide-6.active .disbursement-title {
  animation: slideInLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

/* Keyframes */
@keyframes zoomInHero {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================
   1. PEMBUNGKUS UTAMA SLIDE 7
   ========================================== */

#slide-7 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

#slide-7.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10;
}

/* ==========================================
   2. GAMBAR BANK CARD
   ========================================== */

.slide7-container {
  position: absolute;
  left: 28.87vw;
  top: 19.93vh;
  width: 42.22vw;
  height: 42.43vh;
  z-index: 5;

  /* Kondisi Awal Sebelum Aktif */
  opacity: 0;
  transform: scale(0.92);
  will-change: transform, opacity;
}

.bank-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================
   3. TEKS CAPTION UTAMA
   ========================================== */

#slide-7 .slide-caption {
  position: absolute;
  left: 50%;
  top: 73.42vh;
  transform: translateX(-50%);

  width: 100%;
  max-width: 85vw;
  text-align: center;

  font-family: "Inter", sans-serif;
  font-size: 1.8vw;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
  z-index: 10;

  /* Kondisi Awal Sebelum Aktif */
  opacity: 0;
  will-change: transform, opacity;
}

/* ==========================================
   4. NOTE / CATATAN BAWAH 
   ========================================== */

#slide-7 .slide-note {
  position: absolute;
  left: 50%;
  top: 85.93vh;
  transform: translateX(-50%);

  width: 100%;
  max-width: 85vw;
  text-align: center;

  font-family: "Inter", sans-serif;
  font-size: 1.56vw;
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
  margin: 0;
  z-index: 10;

  /* Kondisi Awal Sebelum Aktif */
  opacity: 0;
  will-change: transform, opacity;
}

/* ==========================================
   5. TRIGGER ANIMASI SAAT SLIDE 7 AKTIF
   ========================================== */

#slide-7.active .slide7-container {
  animation: zoomInHero 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}

#slide-7.active .slide-caption {
  animation: fadeInUpCenter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

#slide-7.active .slide-note {
  animation: fadeInUpCenter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.45s forwards;
}

/* ==========================================
   6. KEYFRAMES ANIMASI
   ========================================== */

@keyframes fadeInUpCenter {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

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

#slide-8 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* Penampil saat slide 8 aktif */
#slide-8.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10;
}

/* ==========================================
   1. GAMBAR LOGO GROUP
   ========================================== */

.slide8-container {
  position: absolute;
  left: 32.656vw;
  top: 25.555vh;
  width: 26.281vw;
  height: 48.917vh;
  z-index: 5;

  /* Condition awal sebelum animasi */
  opacity: 0;
  transform: scale(0.92);
  will-change: transform, opacity;
}

.slide8-container .logo-group-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================
   2. TEKS CAPTION UTAMA
   ========================================== */

#slide-8 .slide-caption {
  position: absolute;
  left: 50%;
  top: 76.85vh;
  transform: translateX(-50%);

  width: 100%;
  max-width: 85vw;
  text-align: center;

  font-family: "Inter", sans-serif;
  font-size: 1.8vw;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
  z-index: 10;

  /* Condition awal sebelum animasi */
  opacity: 0;
  will-change: transform, opacity;
}

/* ==========================================
   3. ANIMASI SAAT SLIDE 8 AKTIF
   ========================================== */

/* Gambar logo group: Zoom In */
#slide-8.active .slide8-container {
  animation: zoomInHero 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}

/* Teks caption: Fade In Up */
#slide-8.active .slide-caption {
  animation: fadeInUpCenter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

/* Keyframe Animasi Center X */
@keyframes fadeInUpCenter {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

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

#slide-9 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* Penampil saat slide 9 aktif */
#slide-9.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10;
}

/* ==========================================
   1. GAMBAR JOURNAL ENTRY
   ========================================== */

.slide9-container {
  position: absolute;
  left: 26.5625vw;
  top: 15.648vh;
  width: 46.875vw;
  height: 62.5vh;
  z-index: 5;

  /* State awal sebelum animasi */
  opacity: 0;
  transform: scale(0.92);
  will-change: transform, opacity;
}

.slide9-container .journal-entry-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================
   2. TEKS CAPTION UTAMA
   ========================================== */

#slide-9 .slide-caption {
  position: absolute;

  /* Posisi Horizontal Center */
  left: 50%;
  transform: translateX(-50%);

  /* Posisi Vertikal y: 900px */
  top: 83.333vh;

  width: 100%;
  max-width: 85vw;
  text-align: center;

  font-family: "Inter", sans-serif;
  font-size: 1.8vw;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
  z-index: 10;

  /* State awal sebelum animasi */
  opacity: 0;
  will-change: transform, opacity;
}

/* ==========================================
   3. ANIMASI SAAT SLIDE 9 AKTIF
   ========================================== */

/* Gambar Journal Entry: Zoom In */
#slide-9.active .slide9-container {
  animation: zoomInHero 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}

/* Teks Caption: Fade In Up */
#slide-9.active .slide-caption {
  animation: fadeInUpCenter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

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

#slide-10 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* Penampil saat slide 10 aktif */
#slide-10.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10;
}

/* ==========================================
   1. GAMBAR PAYROLL HISTORY 
   ========================================== */

.slide10-container {
  position: absolute;
  left: 26.5625vw;
  top: 16.574vh;
  width: 46.875vw;
  height: 62.5vh;
  z-index: 5;

  /* State awal sebelum animasi */
  opacity: 0;
  transform: scale(0.92);
  will-change: transform, opacity;
}

.slide10-container .payroll-history-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================
   2. TEKS CAPTION UTAMA
   ========================================== */

#slide-10 .slide-caption {
  position: absolute;

  /* Posisi Horizontal Center */
  left: 50%;
  transform: translateX(-50%);

  top: 83.333vh;

  width: 100%;
  max-width: 85vw;
  text-align: center;

  font-family: "Inter", sans-serif;
  font-size: 1.8vw;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
  z-index: 10;

  /* State awal sebelum animasi */
  opacity: 0;
  will-change: transform, opacity;
}

/* ==========================================
   3. ANIMASI SAAT SLIDE 10 AKTIF
   ========================================== */

/* Gambar Payroll History: Zoom In */
#slide-10.active .slide10-container {
  animation: zoomInHero 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}

/* Teks Caption: Fade In Up */
#slide-10.active .slide-caption {
  animation: fadeInUpCenter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

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

#slide-11 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* Penampil saat slide 11 aktif */
#slide-11.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10;
}

/* ------------------------------------------
   1. GAMBAR DONE ICON
   ------------------------------------------ */
.slide11-container {
  position: absolute;
  left: 45.85vw;
  top: 27.131vh;
  width: 8.3vw;
  height: 14.755vh;

  transform: translateX(-50%) scale(0.92);
  z-index: 5;

  opacity: 0;
  will-change: transform, opacity;
}

.slide11-container .done-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ------------------------------------------
   2. TEKS CAPTION UTAMA (h1)
   ------------------------------------------ */
#slide-11 .slide-caption {
  position: absolute;
  left: 50%;
  top: 47.46vh;
  transform: translateX(-50%);

  width: 100%;
  max-width: 85vw;
  text-align: center;

  font-family: "Inter", sans-serif;
  font-size: clamp(32px, 3.646vw, 70px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
  z-index: 10;

  opacity: 0;
  will-change: transform, opacity;
}

/* ------------------------------------------
   3. TOMBOL RESET
   ------------------------------------------ */
#slide-11 .btn-reset {
  position: absolute;
  left: 50%;
  top: 64.537vh;
  transform: translateX(-50%);

  width: 41.875vw;
  height: 6.944vh;

  /* Flexbox untuk memastikan tulisan tepat di tengah tombol */
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Inter", sans-serif;
  font-size: clamp(18px, 1.5625vw, 30px);
  font-weight: 700;
  color: #4b61dd;

  background-color: #ffffff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  z-index: 10;

  opacity: 0;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
  will-change: transform, opacity;
}

#slide-11 .btn-reset:hover {
  background-color: #f0f0f0;
}

/* ------------------------------------------
   4. ANIMASI SAAT SLIDE 11 AKTIF
   ------------------------------------------ */
#slide-11.active .slide11-container {
  animation: zoomInHero 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}

#slide-11.active .slide-caption {
  animation: fadeInUpCenter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

#slide-11.active .btn-reset {
  animation: fadeInUpCenter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

/* --- CAPTION TEXT BAWAH --- */
.slide-caption {
  position: absolute;
  bottom: 5vh;
  left: 0;
  width: 100vw;
  text-align: center;
  font-size: 1.8vw;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
  z-index: 3;
}

/* --- FOOTER --- */
.footer {
  position: absolute;
  top: 79.259vh; /* y: 856px */
  left: 9.583vw; /* x: 184px */
  width: 18.75vw; /* w: 360px */
  height: 3.056vh; /* h: 33px */
  z-index: 10;
}

.footer-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  gap: 0.677vw; /* spacing: 13px */

  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.4vw;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.footer-icon {
  width: 4.271vw; /* w: 82px */
  height: 1.481vh; /* h: 16px */
  display: inline-block;
  object-fit: contain;
}

.footer-link:hover {
  opacity: 1;
  transform: translate;
}