* {
  -webkit-tap-highlight-color: transparent;
}
    :root {
      --primary-color: #ff6600; 
      --primary-hover: #e65c00;
    }
    .btn-primary {
      background-color: var(--primary-color) !important;
      border-color: var(--primary-color) !important;
    }
    .btn-primary:hover {
      background-color: var(--primary-hover) !important;
      border-color: var(--primary-hover) !important;
    }
    .text-primary {
      color: var(--primary-color) !important;
    }
    .bg-soft-primary {
      background-color: rgba(255,102,0,0.1) !important;
    }
    .navbar-light .nav-link.active {
      color: var(--primary-color) !important;
      font-weight: 600;
    }
    .card .more {
      color: var(--primary-color);
    }
    .accordion-item button {
      color: var(--primary-color);
      font-weight: bold;
    }
    footer .widget-title {
      color: var(--primary-color);
    }
    .section-title {
      font-size: 2.5rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 2rem;
      color: var(--primary-color);
    }
    .feature-card {
      text-align: center;
      padding: 2rem;
      border: 1px solid #e9ecef;
      border-radius: 0.5rem;
      margin-bottom: 1rem;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .feature-card.animated {
      opacity: 1;
      transform: translateY(0);
    }
    .benefit-list {
      list-style-type: none;
      padding-left: 0;
    }
    .benefit-list li {
      padding: 0.5rem 0;
      position: relative;
      padding-left: 1.5rem;
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }
    .benefit-list li.animated {
      opacity: 1;
      transform: translateX(0);
    }
    .benefit-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--primary-color);
      font-weight: bold;
    }
    .payment-section {
      margin-bottom: 3rem;
    }
    .payment-category {
      background: #f8f9fa;
      padding: 1.5rem;
      border-radius: 0.5rem;
      margin-bottom: 1rem;
    }
    .category-title {
      font-size: 1.5rem;
      color: var(--primary-color);
      margin-bottom: 1rem;
      text-align: center;
    }
    .payment-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
    }
    .payment-item {
      background: white;
      border: 1px solid #dee2e6;
      border-radius: 0.5rem;
      padding: 1rem;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }
    .payment-item.animated {
      opacity: 1;
      transform: translateY(0);
    }
    .payment-logo {
      width: 80px;
      height: 50px;
      margin-bottom: 0.5rem;
      object-fit: contain;
    }
    .payment-name {
      font-weight: bold;
      margin-bottom: 0.25rem;
    }
    .payment-fee {
      color: var(--primary-color);
      font-weight: bold;
      font-size: 0.9rem;
    }
    .settlement {
      font-size: 0.8rem;
      color: #6c757d;
    }
    .pricing-section {
      background: #f8f9fa;
      padding: 3rem 0;
    }
    .cta-final {
      background: var(--bg-soft-primary);
      padding: 3rem 0;
      text-align: center;
    }
    /* Typewriter Animation Styles */
    .typewriter-container {
      display: inline-block;
      position: relative;
    }
    .typewriter-text {
      border-right: 3px solid var(--primary-color);
      white-space: nowrap;
      overflow: hidden;
      animation: blink-caret 1s infinite;
    }
    .typewriter-text.typing {
      animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
    }
    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }
    @keyframes blink-caret {
      from, to { border-color: transparent; }
      50% { border-color: var(--primary-color); }
    }
    /* Hamburger Menu Animation - Fixed dengan !important untuk 3 Garis Jelas */
    .hamburger {
      background: none !important;
      border: none !important;
      cursor: pointer;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-around !important;
      width: 25px !important;
      height: 20px !important; /* Adjust height pas untuk 3 garis + margin kecil */
      padding: 0 !important;
      box-sizing: border-box !important;
      position: relative !important;
    }
    .hamburger span {
      display: block !important;
      width: 100% !important;
      height: 3px !important;
      background: #333 !important;
      margin: 1px 0 !important; /* Kompak banget, !important biar gak overlap */
      transition: 0.3s !important;
      border-radius: 2px !important;
      border: none !important; /* Clear border extra */
      box-sizing: border-box !important;
      position: relative !important;
      box-shadow: none !important; /* Clear shadow jika ada */
    }
    .hamburger::before, .hamburger::after { content: none !important; } /* Clear pseudo-elements jika ada */
    .hamburger span::before, .hamburger span::after { content: none !important; }
    .hamburger.offcanvas-nav-btn[aria-expanded="true"] span:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 6px) !important;
    }
    .hamburger.offcanvas-nav-btn[aria-expanded="true"] span:nth-child(2) {
      opacity: 0 !important;
    }
    .hamburger.offcanvas-nav-btn[aria-expanded="true"] span:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -6px) !important;
    }
    /* Scroll Animation Styles */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .animate-on-scroll.animated {
      opacity: 1;
      transform: translateY(0);
    }

    /* Tambahan untuk Responsif Hamburger di Mobile */
    @media (max-width: 991.98px) {
      .navbar .navbar-other {
        margin-left: auto;
      }
      .hamburger {
        width: 30px !important; /* Sedikit lebih besar di mobile untuk touch-friendly */
        height: 24px !important; /* Pas dengan 3 garis tebal + margin */
        display: flex !important; /* Pastikan selalu tampil di mobile */
        z-index: 1055 !important; /* Pastikan di atas elemen lain */
      }
      .hamburger span {
        width: 100% !important;
        height: 4px !important; /* Garis lebih tebal untuk visibility */
        background: var(--primary-color) !important; /* Ubah warna ke primary untuk match theme */
        margin: 0.5px 0 !important; /* Lebih kompak lagi */
        transition: all 0.3s ease-in-out !important; /* Smooth transition */
      }
      /* Modifikasi untuk Logo ke Kiri di Mobile */
      .navbar-brand {
        width: auto !important; /* Gak full width lagi */
        flex-grow: 0 !important; /* Biar gak stretch */
        text-align: left !important; /* Align ke kiri */
        margin-right: auto !important; /* Push ke kiri */
        order: 1 !important; /* Pastikan logo di urutan pertama */
      }
      .navbar-other {
        order: 3 !important; /* Hamburger di urutan ketiga */
        margin-left: 0 !important;
      }
      .navbar .container {
        justify-content: space-between !important; /* Logo kiri, hamburger kanan */
        align-items: center;
        flex-wrap: nowrap !important; /* Hindari wrap untuk mobile */
        display: flex !important;
        width: 100% !important;
      }
      .navbar-collapse {
        display: none !important; /* Pastikan default tersembunyi di mobile */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1045 !important;
      }
      .navbar-collapse.show {
        display: block !important; /* Tampilkan saat .show ditambahkan oleh Bootstrap */
      }
      .hamburger.offcanvas-nav-btn:focus {
        outline: none !important; /* Hilangkan garis kotak focus */
        box-shadow: none !important; /* Hilangkan shadow/box extra jika ada */
      }
      /* Pastikan offcanvas overlay dan backdrop bekerja di mobile */
      .offcanvas {
        z-index: 1045 !important;
      }
      .offcanvas-backdrop {
        z-index: 1040 !important;
      }
      /* Sembunyikan tombol desktop di mobile */
      .navbar-nav.flex-row {
        display: none !important;
      }
    }

    @media (min-width: 992px) {
      .hamburger {
        display: none !important;
      }
      .navbar-collapse {
        display: flex !important;
      }
    }

    @media (max-width: 575.98px) {
      .hamburger {
        width: 28px !important;
        height: 22px !important;
      }
      .hamburger span {
        width: 100% !important;
        height: 3px !important;
        margin: 0.5px 0 !important;
      }
      .navbar-brand img {
        height: 50px; /* Adjust ukuran logo di small mobile biar gak kegedean */
      }
      .navbar .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }
    }