body {
      font-family: 'Organetto';
      font-optical-sizing: auto;
      font-weight: normal;
      font-style: normal;
      background-color: var(--bs-body-bg);
      color: var(--bs-body-color);
      transition: all 0.3s ease-in-out, color 0.3s ease-in-out;
    }

    :root {
      --bs-body-bg: white;
      --bs-body-color: black;
    }

    [data-bs-theme="dark"] {
      --bs-body-bg: rgb(21, 23, 27);  
      --bs-body-color: white; 
    }

    @font-face {
      font-family: 'Organetto';
      src: url('/static/fonts/Organetto-Regular.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    .navbar {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      transition: background-color 0.3s ease;
    }

    .hero {
      padding: 6rem 0;
      text-align: center;
      transition: background-color 0.3s ease-in-out;
    }

    .hero h1 {
      font-size: 3rem;
      font-weight: 700;
      transition: background-color 0.3s ease-in-out;
    }

    .section-title {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 2rem;
      transition: 0.3s ease-in-out;
    }

    .project-card img {
      border-radius: 0.5rem;
      transition:  0.3s ease-in-out;
    }

    footer {
      background-color: var(--bs-body-bg);
      padding: 2rem 0;
      text-align: center;
      border-top: 1px solid var(--bs-border-color);
      transition: background-color 0.3s ease;
    }

    .social-icons a {
      color: var(--bs-body-color);
      margin: 0 0.5rem;
      font-size: 1.25rem;
      transition: color 0.3s ease;
    }

    .social-icons a:hover {
      color: var(--bs-primary);
    }
    
     /* Default: terang */
    .dynamic-btn {
      color: #212529;
      border: 1px solid #212529;
      background-color: transparent;
      animation: 0.5s ease-in-out;
    }
    .dynamic-btn:hover {
      background-color: #212529;
      animation: 0.5s ease-in-out;
      color: #fff;
    }

    /* Mode gelap */
    [data-bs-theme="dark"] .dynamic-btn {
      color: #c0c8ca;
      border: 1px solid #c0c8ca;
      background-color: transparent;
      transition: all 0.3s ease-in-out;
    }
    
    [data-bs-theme="dark"] .dynamic-btn:hover {
      background-color: #c0c8ca;
      color: #000;
      transition: all 0.3s ease-in-out;
    }  

    .burdir {
      border-color: #444 !important; 
      border-width: 1px !important;  
      opacity: 1 !important;
    }

    [data-bs-theme="dark"] .burdir {
      border-color: #bbb !important; 
    }

    .zoom-on-load {
      opacity: 0;
      transform: scale(0.8);
      animation: zoomIn 0.35s ease-out forwards;
      animation-delay: 0.2s;
    }

    @keyframes zoomIn {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .nav-link {
      display: inline-flex; 
      position: relative;    
      text-decoration: none; 
      color: inherit;
    }

    .nav-link.active {
      font-weight: bold;
      position: relative;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 3px;
      width: 100%;           
      height: 2px;
      background-color: #000;
      opacity: 0.5;
      border-radius: 0.5px;
      transition: all 0.3s ease-in-out;
    }

    [data-bs-theme="dark"] .nav-link.active::after {
      background-color: #fff;
    }

    /* untuk multibahasa */
    [data-i18n] {
      transition: opacity 0.3s ease;
      opacity: 1;
    }

    [data-i18n].fade-out {
      opacity: 0;
    }

     #langToggleBtn {
      padding: 0;
      border: 1px solid transparent; 
      width: 30px;
      height: 30px;
      background: none;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    #langToggleBtn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 4px; 
    }

    @keyframes click-scale {
      0%   { transform: scale(1); }
      50%  { transform: scale(0.85); }
      100% { transform: scale(1); }
    }

    .flag-animate {
      animation: click-scale 0.2s ease;
    }

    @keyframes zoomInSmooth {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .zoom-in {
      animation: zoomInSmooth 0.6s ease forwards;
    }

    .swiper {
      padding: 20px 0;
      padding-left: 10px;
      padding-right: 10px;
      position: relative;
      transition: transform 0.4s ease;
    }

    .swiper-slide {
      background: var(--bs-body-bg);
      border-radius: 10px;
      text-align: center;
      transition: transform 0.4s ease;
    }

    [data-bs-theme="dark"] .swiper-slide {
      transition: 0s ease-in-out;
    }

    .swiper-slide:hover {
      transform: scale(1.02);
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: var(--bs-body-color);
      background-color: transparent;
      padding: 12px;
      border-radius: 50%;
      transition: all 0.3s ease;
      top: 50%;

      /* Button always on */
      opacity: 1 !important;
      visibility: visible !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      z-index: 9999 !important;  
      pointer-events: auto !important;
      position: absolute;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
      background-color: transparent;
      transform: scale(1.1);
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
      display: none;
    }

    .b-1 {
      left: 0;
      transform: translate(-100%, -50%);
    }

    .b-2 {
      right: 0;
      transform: translate(100%, -50%);
    }

    .b-logo {
      transition: filter 0.3s ease;
      margin-top: 2.5rem;
    }

   
    [data-bs-theme="dark"] .b-logo {
      filter: invert(1); 
    }

    /* kode responsive */
      @media (max-width: 768px) { 
        html {
          font-size: 90%;
        }

        body {
            font-size: 1rem;
            padding: 0rem;
            width: 90%;
            margin: 0 auto;
        }

        .navbar-nav {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
        }

        .navbar-nav .nav-item {
            margin-right: 1rem;
        }
        
         .navbar-collapse.navbarr {
            display: flex !important;
            justify-content: flex-end;
            align-items: center;
            gap: 1rem;
            font-size: 0.8125rem;
            margin-top: 0;
          }

          .navbar-collapse.navbarr ul.navbar-nav {
            flex-direction: row;
            gap: 0.4rem;
          }

          .navbar-collapse.navbarr .dynamic-btn {
            margin-left: 1.25rem;
          }

          .navv {
            font-size: 0.75rem;
            margin-top: 0.5625rem;
            opacity: 90%;
          }

          .atur {
            margin-top: 0.46875rem;
            font-size: 0.75rem;
            font-weight: 600;
          }

          .pro {
            margin: 0 auto;
            width: 100%;
            max-width: 95%;
            font-size: clamp(0.9rem, 2.5vw, 1rem);
            line-height: 1.5;
          }

          .project-title {
            font-size: clamp(1.2rem, 4vw, 1.5rem);
          }

          .project-desc {
            font-size: clamp(0.9rem, 3vw, 1.1rem);
          }

          .pon {
            font-size: clamp(0.75rem, 1rem, 1.1rem);
          }

          .pp {
                font-size: 85%;
          }

          .burdir {
            width: 92.5%;
          }

          .teks {
            font-weight: 600;
          }

          .swiper-button-next,
          .swiper-button-prev {
            width: 0.9375rem;
            height: 0.9375rem;
            top: 50%;
          }

          .b-logo {
            margin-top: 3.5rem;
          }

        }