#videoUrl {
      max-height: 10em;
      resize: none; /* Agar textarea tidak bisa diubah ukurannya */
    }
    
    
    /* Mode terang */
    body {
    background-color: #ffffff;
    color: #000000;
    }
    
    /* Mode gelap */
    body.dark-mode {
    background-color: #121212;
    color: #ffffff;
    }
    
    /* Pastikan semua elemen mengikuti warna body */
    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode p,
    body.dark-mode li a {
    color: #ffffff;
    }
    
    
    
    
    
    
    
    
    
    img {
    cursor: pointer;
    }
    
    .bor {
    border: 1px solid #2D2D2;
    }
    
    .titles {
    
    font-size: 18px;
           line-height: 28px;
           display: -webkit-box;
           -webkit-line-clamp: 2; /* Limit text to 2 lines */
           -webkit-box-orient: vertical;
           overflow: hidden;
       }
    
      .navbar-blurred {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px); /* Untuk Safari */
      }
      
      
   
      .placeholder {
      width: 100%;
      height: 20px;
      background-color: #e0e0e0;
      border-radius: 4px;
      animation: loading 1.5s infinite ease-in-out;
      }
      
      body.dark-mode .placeholder {
      width: 100%;
      height: 20px;
      background-color: #353535;
      border-radius: 4px;
      animation: loading 1.5s infinite ease-in-out;
      }
      
      body.dark-mode .placeholderimg {
      width: 100%;
      height: 200px;
      background-color: #353535;
      border-radius: 4px;
      animation: loading 1.5s infinite ease-in-out;
      }
      
      .placeholderimg {
      width: 100%;
      height: 200px;
      background-color: #e0e0e0;
      border-radius: 4px;
      animation: loading 1.5s infinite ease-in-out;
      }
      
      /* Animasi untuk efek loading */
      @keyframes loading {
      0% {
      background-color: #e0e0e0;
      }
      50% {
      background-color: #c0c0c0;
      }
      100% {
      background-color: #e0e0e0;
      }
      }
      
      body.dark-mode @keyframes loading {
      0% {
      background-color: #353535;
      }
      50% {
      background-color: #252525;
      }
      100% {
      background-color: #202020;
      }
      }
      
      
      
      
      
     .form-group {
     position: relative;
     margin-top: 30px;
     }
     
     .label-text {
     background-color: #fff; /* Latar belakang label */
     padding: 0 5px;
     position: absolute;
     top: -10px;
     left: 15px;
     font-size: 14px;
     color: #666;
     }
     
     body.dark-mode .label-text {
     background-color: #121212; /* Latar belakang label */
     padding: 0 5px;
     position: absolute;
     top: -10px;
     left: 15px;
     font-size: 14px;
     color: #fff;
     }
     
     textarea {
     width: 100%;
     padding-right: 40px; /* Ruang untuk ikon clear */
     }
     
     .clear-icon {
     position: absolute;
     bottom: 15px; /* Jarak dari bawah textarea */
     right: 20px;   /* Jarak dari kiri textarea */
     cursor: pointer;
     color: #aaa;
     font-size: 16px;
     background-color: #fff;
     border-radius: 50%;
     padding: 2px;
     transition: color 0.3s ease;
     }
     
     body.dark-mode .clear-icon {
     position: absolute;
     bottom: 15px; /* Jarak dari bawah textarea */
     right: 20px;   /* Jarak dari kiri textarea */
     cursor: pointer;
     color: #fff;
     font-size: 16px;
     background-color: transparent;
     border-radius: 50%;
     padding: 2px;
     transition: color 0.3s ease;
     }
     
     body.dark-mode .bgc {
     background: #353535;
     color: white;
     }
     
     
     
     .clear-icon:hover {
     color: red; /* Warna saat hover */
     }
      
      /* css */
      
      .bg {
      background: linear-gradient(45deg, #F6F5E6, #F2DFFF, #FEFEFA, #F2DFFF);
      background-size: 100% 400%;
      animation: gradientAnimation 15s ease infinite;
      }
      
      h1 {
      letter-spacing: 0.4px; /* Menambahkan jarak antara huruf */
      }
      
      p {
      letter-spacing: 0.5px; /* Menambahkan jarak antara huruf */
      }
      
      .lazy {
      filter: blur(10px);
      transition: filter 0.3s ease-out;
      }
      .lazy-loaded {
      filter: blur(0);
      }
      
      .lh {
      line-height: 1.6;
      }
      
      .lh-2 {
      line-height: 1.3;
      }
      
      .social {
      text-decoration: none;
      }
      
      .btns {
      background-color: #1F1F22;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 18px;
      letter-spacing: 0.4px;
      }
      
      body.dark-mode .btns {
      background-color: white;
      color: black;
      border: none;
      border-radius: 8px;
      font-size: 18px;
      letter-spacing: 0.4px;
      }
      
      body.dark-mode .btn {
      background-color: white;
      color: black;
      }
      
      .btns:hover {
      background-color: #A02BEA;
      color: white;
      border: none;
      }
      
      .btns:active {
      background-color: #A02BEA;
      color: white;
      border: none;
      }
      
      /* Gaya default untuk border form */
      .form-control {
      border-color: #DADADA;
      transition: border-color 0.3s ease-in-out;
      }
      
      body.dark-mode .form-control {
      border-color: #373736;
      background: transparent;
      color: white;
      transition: border-color 0.3s ease-in-out;
      }
      
      .form-control:valid {
      border-color: #E3E3E3;
      }
      
      .form-control:focus {
      border-color: #A02BEA;
      box-shadow: none;
      }
      
    
      .btn-share {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: black;
      color: white;
      border: none;
      border-radius: 50px;
      padding: 10px 20px;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
      transition: background-color 0.3s ease;
      }
      
      
      .btn-share:hover, .btn-share:active {
      background-color: #A02BEA;
      color: white;
      }
      
      
      .bginput {
      background-color: rgba(255, 255, 255, 0.5);
      
      backdrop-filter: blur(10px); /* Efek blur di belakang elemen */
      -webkit-backdrop-filter: blur(10px); /* Efek blur untuk kompatibilitas WebKit */
      }
      
      
      @keyframes gradientAnimation {
      0% {
      background-position: 0% 0%;
      }
      50% {
      background-position: 100% 100%;
      }
      100% {
      background-position: 0% 0%;
      }
      }
      
      
      .nav-link {
      color: black;
      text-decoration: none;
      transition: color 0.3s ease;
      }
      
      .nav-link:hover {
      color: #5a2d81; /* Color on hover */
      }
      
      .nav-link:active {
      color: #6f42c1; /* Color when clicked */
      }
      
      .gede {
      font-size: 2.8rem;
      overflow: hidden;
      margin-bottom: 1rem;
      }
      .sub {
      font-size: 1.3rem;
      margin-bottom: 2rem;
      }
      
      .card-icon {
      height: 50px;
      width: 50px;
      border: 2px solid #eee;
      border-radius: 300px;
      margin-bottom: 1rem;
      text-align: center;
      }
      
      .card-icon img {
      height: 20px;
      width: 20px;
      margin-top: 13px;
      }
      
      .card-icons {
      height: 70px;
      width: 70px;
      border: 2px solid #eee;
      border-radius: 300px;
      margin-bottom: 1rem;
      text-align: center;
      }
      
      .card-icons img {
      height: 35px;
      width: 35px;
      margin-top: 16px;
      }
      
      p {
      margin: 0;
      }
      
      .btnig {
      display: inline-flex;
      align-items: center;
      font-size: 1rem;
      color: white;
      background-color: black;
      padding: 0.5rem 1rem;
      border-radius: 100px;
      }
      
      .custom-link {
      display: inline-block;
      width: 80%;
      height: 60px;
      background-color: black;
      color: white;
      text-align: center;
      line-height: 60px;
      border-radius: 10px;
      text-decoration: none;
      font-size: 1.1rem;
      transition: background-color 0.3s ease;
      }
      
      .custom-link:hover {
      background-color: #A02BEA;
      color: white;
      }
      
      .custom-link:active {
      background-color: #A02BEA;
      color: white;
      }
      
      .btnig svg {
      width: 24px;
      height: 24px;
      margin-right: 0.5rem;
      }
      
      .mt-100 {
      margin-top: 30px;
      }
      .navbar-logo {
      max-width: 180px;
      }
      
      .footer-logo {
      max-width: 160px;
      margin-bottom: -10px;
      }
      
      .border-pic {
      border: 2px solid #eee;
      padding: 10px;
      }
      
      
      
      
      .shine {
      background: #f6f7f8;
      background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
      background-repeat: no-repeat;
      background-size: 800px 504px; 
      display: inline-block;
      position: relative; 
      
      -webkit-animation-duration: 1s;
      -webkit-animation-fill-mode: forwards; 
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-name: placeholderShimmer;
      -webkit-animation-timing-function: linear;
      }
      
      @-webkit-keyframes placeholderShimmer {
      0% {
      background-position: -468px 0;
      }
      
      100% {
      background-position: 468px 0; 
      }
      }
      
      .photo {
      width: 150px;
      height: 150px;
      border-radius: 300px;
      }
      
      .lines {
      width: 150px;
      height: 20px;
      }
      
      .lines1 {
      width: 100px;
      height: 20px;
      }
      
      .boxs {
      width: 300px;
      height: 300px;
      }
      
      .liness {
      width: 80px;
      height: 2px;
      background-color: #eee;
      display: inline-block;
      position: relative;
      }
      
      .navbar {
      border-bottom: 1px solid #eee; /* Tambahkan border bawah pada navbar */
      }
      
      body.dark-mode .navbar {
      border-bottom: 1px solid #353535; /* Tambahkan border bawah pada navbar */
      }
      
      .border-bottoms {
      border-bottom: 1px solid #eee; /* Tambahkan border bawah pada navbar */
      }
      
      body.dark-mode .border-bottoms {
      border-bottom: 1px solid #353535; /* Tambahkan border bawah pada navbar */
      }
      
      .navbar-toggler {
      border: none;
      box-shadow: none;
      background: none;
      }
      .navbar-toggler:focus {
      outline: none;
      border: none;
      box-shadow: none;
      }
      .navbar-toggler:active {
      outline: none;
      border: none;
      }
      .navbar-toggler-icon {
      display: none;
      }
      .offcanvas-body {
      font-size: 30px;
      padding: 1.5rem 1rem;
      }
      .offcanvas-body a {
      display: block;
      margin-bottom: 1rem;
      text-decoration: none;
      color: #000;
      }
      .offcanvas-body a:hover {
      text-decoration: underline;
      }
      .offcanvas-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #f8f9fa;
      border-top: 1px solid #dee2e;
      text-align: left;
      font-size: 25px;
      }
      .offcanvas-footer .social-icons {
      }
      .offcanvas-footer .social-icons a {
      margin: 0 0.5rem;
      color: #000;
      text-decoration: none;
      }
      .offcanvas-footer .social-icons a:hover {
      color: #007bff;
      }
      @media (min-width: 992px) {
      .offcanvas {
      display: none;
      }
      }