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

    @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;
    }

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

    .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);
      color: var(--bs-body-color);
      transition: background-color 0.3s ease-in-out;
    }

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

    .progress-bar {
      transition: width 1s ease-in-out;
    }

    .dynamic-btn {
      color: black;
      border: 1px solid black;
      background-color: transparent;
      transition: 0.3s ease-in-out;
    }
    .dynamic-btn:hover {
      background-color: black;
      color: white;
      transition: all 0.3s ease-in-out;
    }

    [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;
    }  
    
    h2 {
      font-weight: weight;
    }

    .chart-container {
      background-color: var(--bs-body-bg); 
      border-radius: 12px;
      max-width: 1000px;
      height: 400px;
      margin: auto;
      padding: 2rem;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    }

    /* untuk tulisan navbar */
    .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;
    }

    .btn-animated {
      transition: all 0.3s ease;
    }

    .btn-animated:hover {
      transform: scale(1.05); 
      box-shadow: 0 8px 16px rgba(0,0,0,0.2); 
    }

    /* biodata */
    .biodata-grid {
      display: grid;
      width: 97.85%;
      grid-template-columns: 1fr 2fr;
      gap: 1.2rem 1.5rem;
      padding: 2rem;
      background-color: var(--bs-body-bg); 
      border-radius: 12px;
      color: black; 
    }

    .biodata-grid .label {
      font-weight: 600;
      color: black; 
    }

    .biodata-grid .value {
      font-weight: 400;
      color: black;
    }

    .biodata-grid a {
      color: #0d6efd;
      text-decoration: underline;
     }

     /* Dark Mode Styling */
    [data-bs-theme="dark"] .biodata-grid {
      color: white;
    }

    [data-bs-theme="dark"] .biodata-grid .label {
      color: white;
    }

    [data-bs-theme="dark"] .biodata-grid .value {
      color: white;
    }

    [data-bs-theme="dark"] .biodata-grid a {
      color: #4dd0e1;
    }
    
    .skill-section {
      max-width: 1000px;
      margin: auto;
      padding: 20px 10px;
    }

    .section-title {
      text-align: center;
      font-size: 28px;
      margin-bottom: 30px;
    }

    .skill {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      position: relative;
    }

    .skill .bar {
      flex: 1 1 auto;
      height: 12px;
      background: #ddd;
      border-radius: 2px;
      overflow: hidden;
      max-width: 100%;
    }

    .skills {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 1rem;
    }
    .skill {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .skill img {
      width: 28px;
      height: 28px;
    }

    .skill span {
      min-width: 80px;
      font-weight: 600;
    }

    .bar {
      flex: 1;
      height: 12px;
      background: #eee;
      border-radius: 2px;
      overflow: hidden;
      position: relative;
    }

    .fill {
      height: 100%;
      width: 0%;
      background: var(--bar-fill);
      transition: width 1s ease-out;
      border-radius: 2px;
    }

    .percent {
      width: 50px;
      text-align: right;
      font-weight: bold;
      font-size: 14px;
    }

    /* Default (light mode) */
    :root {
      --bar-fill: #0d6efd;
    }

    /* Dark mode */
    [data-bs-theme="dark"] {
      --bar-fill: #0d6efd; 
    }

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

    /* 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.8s ease forwards;
    }

    .kard {
      opacity: 50%;
    }

    [data-bs-theme="dark"] .kard {
      transition: 0s ease-in-out;
      opacity: 50%;
    }

    .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); 
    }

    .orgn-b {
      font-family: 'Organetto UltraBold SemiExt';
      src: url('/static/fonts/Organetto-UltraBoldSemiExt.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      color: var(--bs-body-color);
      text-decoration: none;
    }

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

      body {
        font-size: 1rem;
        padding: 0px; 
        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: 0;
        font-size: 0.8125rem;
        margin-top: 0;
      }

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

      .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;
        gap: none;
      }

      .biodata-grid {
        grid-template-columns: 1fr;
        width: 95.15%;
      }

      .biodata-grid .label,
      .biodata-grid .value {
        grid-template-columns: 1fr;
        font-size: clamp(0.8rem, 2.5vw, 1rem);
      }

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

      .pp {
        font-size: 85%;
      }

      .skill {
        flex-direction: column;
        align-items: flex-start;
      }
      .skill img {
        width: 28px;
        height: 28px;
      }
      .skill .bar {
        width: 100%;
      }
      .skill .percent {
        align-self: flex-end;
      }

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

    }