/*
 * Ornamen diambil langsung dari aset transparan yang disetujui pengguna.
 * File dipisahkan agar dapat dinonaktifkan tanpa mengubah desain utama.
 */

:root {
  --korpri-batik-corner: url('../batik-korpri-corner-transparent.webp');
}

.section,
.stats-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Biarkan ornamen statistik menyambung sedikit ke section layanan di bawahnya. */
.stats-section {
  overflow: visible;
}

/* Potongan kiri/kanan dibuat kecil agar hanya menjadi pemanis tiap bagian. */
.section::after,
.stats-section::before,
.stats-section::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 0;
  width: 285px;
  height: 300px;
  background-image: var(--korpri-batik-corner);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 620px 620px;
  opacity: 0.14;
  pointer-events: none;
}

/* Dua ornamen yang mengapit statistik dimulai dari tinggi yang sama. */
.stats-section::before {
  left: 0;
  background-position: left top;
}

.section:nth-of-type(even)::after {
  right: 0;
  left: auto;
  background-position: right top;
}

/* Statistik berada tepat di atas section pertama: pindahkan ke kanan agar sudut tidak bertumpuk. */
.stats-section::after {
  right: 0;
  left: auto;
  background-position: right top;
}

/* Ornamen kiri layanan sudah dipindahkan ke statistik agar sejajar dengan kanan. */
.stats-section + .services-section::after {
  display: none;
}

.section > .container,
.stats-section > .container {
  position: relative;
  z-index: 1;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 0;
  z-index: 1;
  width: 260px;
  height: 270px;
  background: var(--korpri-batik-corner) left top / 570px 570px no-repeat;
  opacity: 0.13;
  pointer-events: none;
}

.page-hero > .container {
  position: relative;
  z-index: 2;
}

.site-footer::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 245px;
  height: 250px;
  background: var(--korpri-batik-corner) left top / 540px 540px no-repeat;
  opacity: 0.1;
  transform: rotate(180deg);
  transform-origin: center;
  pointer-events: none;
}

.footer-bottom {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .section::after,
  .stats-section::before,
  .stats-section::after {
    top: 8px;
    width: 168px;
    height: 185px;
    background-size: 370px 370px;
    opacity: 0.1;
  }

  .page-hero::before {
    top: 12px;
    left: 0;
    width: 155px;
    height: 170px;
    background-size: 350px 350px;
    opacity: 0.09;
  }

  .site-footer::after {
    width: 165px;
    height: 175px;
    background-size: 370px 370px;
    opacity: 0.07;
  }
}