/* saat halaman sudah siap */
      body.loaded {
        opacity: 1;
      }
      /* END ANIMASI */
      body {
        background-color: #0f0f0f;
        color: #f5f5f5;
        overflow-x: hidden;
      }
      ::-webkit-scrollbar {
        width: 10px;
      }
      ::-webkit-scrollbar-track {
        background: #0f0f0f;
      }
      ::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 5px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #ffd60a;
      }

      /* FAQ Accordion */
      .faq-answer {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .faq-answer.open {
        grid-template-rows: 1fr;
      }
      .faq-answer > div {
        overflow: hidden;
      }

      /* Gallery Hover */
      .gallery-item overflow-hidden img {
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .gallery-item:hover img {
        transform: scale(1.08);
      }

      /* SPA Page Transition */
      .page-view {
        display: none;
      }
      .page-view.active {
        display: block;
        animation: fadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      /* Page Header Background Overlay */
      .page-header-bg {
        background: linear-gradient(to bottom, rgba(17, 17, 17, 0.4), #0f0f0f);
      }

      /* Modern Nav Underline Interaction */
      .nav-underline-hover {
        position: relative;
      }
      .nav-underline-hover::after {
        content: "";
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 24px;
        left: 0;
        background-color: #ffd60a;
        transform-origin: bottom right;
        transition: transform 0.3s ease-out;
      }
      .nav-underline-hover:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
      }