/* PusakoNews: interaksi terasa lebih hidup tanpa animasi saat halaman dimuat. */

/* Navigasi desktop: umpan balik warna dan gerak yang sangat ringan. */
@media (hover: hover) and (pointer: fine) {
  .aria-menu a,
  .sub-menu a,
  .pn-menuScrollBtn,
  .pn-burgerBtn {
    display: inline-block;
    transition: color .18s ease, background-color .18s ease,
      transform .18s ease, box-shadow .18s ease;
  }

  .aria-menu a:hover,
  .sub-menu a:hover {
    transform: translateY(-1px);
  }

  .pn-menuScrollBtn:hover,
  .pn-burgerBtn:hover {
    transform: translateY(-1px);
  }
}

/* Dropdown kategori desktop muncul dengan fade dan gerak pendek. */
@media (min-width: 768px) {
  .menus .main-menu .aria-menu ul li > ul {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .18s ease, transform .18s ease,
      visibility 0s linear .18s;
  }

  .menus .main-menu .aria-menu ul li:hover > ul,
  .menus .main-menu .aria-menu ul li:focus-within > ul,
  .menus .main-menu .aria-menu ul li > ul > li:hover > ul,
  .menus .main-menu .aria-menu ul li > ul > li:focus-within > ul {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

/* Panel dan lapisan gelap HP bergerak hanya ketika tombol menu dibuka. */
@keyframes pn-motion-menu-panel-in {
  from { opacity: .72; transform: translate3d(42px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pn-motion-menu-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pn-motion-menu-item-in {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Isi menu mobile ikut masuk berurutan saat panel dibuka. */
@media (max-width: 767px) {
  /* Tahan overscroll pada lapisan menu; area daftar tetap dapat digulir. */
  .pn-burger[data-open="1"] {
    overscroll-behavior: none;
  }

  .pn-burger[data-open="1"] .pn-burger__overlay {
    touch-action: none;
  }

  .pn-burger[data-open="1"] .pn-burger__panel,
  .pn-burger[data-open="1"] .pn-burger__content {
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .pn-burger[data-open="1"] .pn-burger__panel {
    overflow: hidden;
  }

  .pn-burger[data-open="1"] .pn-burger__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pn-burger[data-open="1"] .pn-burger__panel {
    animation: pn-motion-menu-panel-in .36s cubic-bezier(.22,1,.36,1) both;
    will-change: transform, opacity;
  }

  .pn-burger[data-open="1"] .pn-burger__overlay {
    animation: pn-motion-menu-overlay-in .28s ease-out both;
  }

  .pn-burger[data-open="1"] .pn-burger__head {
    animation: pn-motion-menu-item-in .28s cubic-bezier(.22,1,.36,1) .04s both;
  }

  .pn-burger[data-open="1"] .pn-burger__member {
    animation: pn-motion-menu-item-in .3s cubic-bezier(.22,1,.36,1) .08s both;
  }

  .pn-burger[data-open="1"] .pn-burger__item {
    animation: pn-motion-menu-item-in .32s cubic-bezier(.22,1,.36,1) both;
  }

  .pn-burger[data-open="1"] .pn-burger__item:nth-child(1) { animation-delay: .08s; }
  .pn-burger[data-open="1"] .pn-burger__item:nth-child(2) { animation-delay: .12s; }
  .pn-burger[data-open="1"] .pn-burger__item:nth-child(3) { animation-delay: .16s; }
  .pn-burger[data-open="1"] .pn-burger__item:nth-child(4) { animation-delay: .20s; }
  .pn-burger[data-open="1"] .pn-burger__item:nth-child(5) { animation-delay: .24s; }
  .pn-burger[data-open="1"] .pn-burger__item:nth-child(6) { animation-delay: .28s; }
  .pn-burger[data-open="1"] .pn-burger__item:nth-child(7) { animation-delay: .32s; }
  .pn-burger[data-open="1"] .pn-burger__item:nth-child(8) { animation-delay: .36s; }
  .pn-burger[data-open="1"] .pn-burger__item:nth-child(9) { animation-delay: .40s; }
  .pn-burger[data-open="1"] .pn-burger__item:nth-child(10) { animation-delay: .44s; }

  .pn-burger__link,
  .pn-burger__sublink {
    display: inline-block;
    transition: color .16s ease, transform .16s ease;
  }

  .pn-burger__link:active,
  .pn-burger__sublink:active,
  .pn-burger__link:focus-visible,
  .pn-burger__sublink:focus-visible {
    color: #8f743a;
    transform: translateX(4px);
  }
}

/* Kartu berita yang memang dipakai Pusako di homepage. */
@media (hover: hover) and (pointer: fine) {
  .sxr1a img,
  .sxv1a img,
  .sxh1a img {
    transition: transform .28s cubic-bezier(.2,.7,.25,1),
      filter .28s ease;
    transform-origin: center;
  }

  .sxr1-nopad:hover .sxr1a img,
  .sxv1-nopad:hover .sxv1a img,
  .sxh1-nopad:hover .sxh1a img,
  .sxr1-nopad:focus-within .sxr1a img,
  .sxv1-nopad:focus-within .sxv1a img,
  .sxh1-nopad:focus-within .sxh1a img {
    filter: grayscale(1);
    transform: scale(1.04);
  }
}

/* Sentuhan pada layar ponsel terasa merespons, tanpa bergantung pada hover. */
.aria-menu a,
.sub-menu a,
.pn-menuScrollBtn,
.pn-burgerBtn,
.pn-burger__link,
.pn-burger__sublink,
.pn-burger__close {
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease, background-color .16s ease,
    transform .16s ease, opacity .16s ease;
}

.sxr1a img,
.sxv1a img,
.sxh1a img {
  transition: transform .18s ease, filter .18s ease;
}

.aria-menu a:active,
.sub-menu a:active,
.pn-menuScrollBtn:active,
.pn-burgerBtn:active,
.pn-burger__link:active,
.pn-burger__sublink:active,
.pn-burger__close:active {
  transform: scale(.98);
}

.sxr1-nopad:active .sxr1a img,
.sxv1-nopad:active .sxv1a img,
.sxh1-nopad:active .sxh1a img {
  filter: grayscale(1);
  transform: scale(.985);
}

/* HP: foto berita dalam kartu yang sedang melewati tengah layar menjadi hitam-putih. */
@media (max-width: 767px) and (hover: none) {
  .pn-motion-mobile-highlight .sxr1a img,
  .pn-motion-mobile-highlight .sxv1a img,
  .pn-motion-mobile-highlight .sxh1a img {
    filter: grayscale(1);
  }
}

/* Hormati setelan aksesibilitas pengguna. */
@media (prefers-reduced-motion: reduce) {
  .aria-menu a,
  .sub-menu a,
  .pn-menuScrollBtn,
  .pn-burgerBtn,
  .pn-burger__link,
  .pn-burger__sublink,
  .pn-burger__close,
  .sxr1a img,
  .sxv1a img,
  .sxh1a img {
    transition-duration: .01ms !important;
  }

  .menus .main-menu .aria-menu ul li > ul {
    transition-duration: .01ms !important;
  }

  .aria-menu a:hover,
  .sub-menu a:hover,
  .pn-menuScrollBtn:hover,
  .pn-burgerBtn:hover,
  .aria-menu a:active,
  .sub-menu a:active,
  .pn-menuScrollBtn:active,
  .pn-burgerBtn:active,
  .pn-burger__link:active,
  .pn-burger__sublink:active,
  .pn-burger__close:active,
  .sxr1a:hover img,
  .sxv1a:hover img,
  .sxh1a:hover img,
  .sxr1a:active img,
  .sxv1a:active img,
  .sxh1a:active img {
    transform: none !important;
  }

  .pn-burger[data-open="1"] .pn-burger__panel,
  .pn-burger[data-open="1"] .pn-burger__overlay,
  .pn-burger[data-open="1"] .pn-burger__item {
    animation: none !important;
  }

  .menus .main-menu .aria-menu ul li > ul {
    transform: none !important;
  }
}