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, background-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;
        }

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

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

        .navbar {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .hero {
            padding: 6rem 0;
            text-align: center;
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 700;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 2rem;
        }

        .project-card img {
            border-radius: 0.5rem;
        }

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

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

        /* 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;
        }  

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

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

        .foto {
          margin-top: -4.6rem;
        }

        .photo {
          margin-bottom: 1.25rem;
          margin-top: -6.5rem;
          filter: brightness(200%) contrast(110%) saturate(140%);
        }

        .glow-ring {
          position: relative;
          width: 260px;
          height: 260px;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1;
          filter: drop-shadow(0 2px 10px #000000c8);
        }

        [data-bs-theme="dark"] .glow-ring {
          filter: drop-shadow(0 0px 10px #ffffffc8);
          transition: 0s ease-in-out;
        }

        .photo-inner {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          overflow: hidden;
          background-color: transparent;
        }

        @keyframes spinGradient {
          0%   { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        /* style navv */

        .navv {
            font-size: 2rem;
            font-weight: bold;
            background: linear-gradient(
              90deg,
              lime,
              cyan,
              rgb(77, 169, 255),
              cyan,
              lime
            );
            background-size: 300% auto;
            background-position: 0 0;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
            animation: textShine 6s linear infinite;
        }

        .navv2 {
            font-family: 'Organetto UltraBold SemiExt';
            src: url('/static/fonts/Organetto-UltraBoldSemiExt.woff2') format('woff2');
            font-weight: bold;
            font-style: normal;
            font-display: swap;

            margin-left: -0.5rem;
        }

        @keyframes textShine {
          0%   { background-position: 0% 0%; }
          100% { background-position: 300% 0%; }
        }

        /* 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;
        }

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

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

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

          .navv {
              font-size: 1.3rem;
              font-weight: 600;
          }

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

          .dynamic-btn.e {
            width: 12.5rem;
            margin: 0 auto;
            margin-top: 0.75rem;
          }

          .glow-ring {
            filter: drop-shadow(0 0 20px #000000c8);
          }

          [data-bs-theme="dark"] .glow-ring {
            filter: drop-shadow(0 8 20px #ffffffc8);
            transition: 0s ease-in-out;
          }

          .burdir {
            width: 85% !important;
          }

          h2 {
            font-size: clamp(1.1rem, 4vw, 1.5rem);
          }

          p {
            font-size: clamp(0.775rem, 2.25vw, 0.9rem);
          }

          .h2 {
            font-size: clamp(1.7rem, 4.8vw, 2.25rem);
          }

          .pe {
            font-size: clamp(1rem, 2.8vw, 1.3rem);
          }

          .foto {
            width: clamp(12.5rem, 15.25rem, 18rem);
            height: clamp(12.55rem, 15.25rem, 18rem);
            border-radius: 50%;
            margin-top: 4rem;
          }
          
          .pp {
            font-size: 85%;
          }

          .navv2 {
            margin-left: -5px;
            font-size: 1.4rem;
          }

        }