/* ==========================================================================
   MyRepublic Pekanbaru — gaya tampilan halaman utama
   ==========================================================================
   Berkas ini dulu ditulis langsung di dalam index.html. Dipisahkan supaya:
     - index.html jauh lebih ringan dan mudah dibaca
     - berkas ini bisa disimpan peramban (cache) dan dipakai ulang oleh
       halaman-halaman lain tanpa diunduh berkali-kali

   ISINYA TIDAK DIUBAH SAMA SEKALI dari versi sebelumnya — hanya dipindah.
   Panduan titik pecah (breakpoint) ada di bagian paling atas isi di bawah.
   ========================================================================== */

/* ==================================================================
         PANDUAN TITIK PECAH (breakpoint)
         Saat ini berkas ini memakai 16 titik pecah berbeda: 360, 380, 390,
         400, 620, 640, 760, 767, 768, 900, 960, 992, 1023.98, 1024, 1360,
         1440. Itu sebabnya beberapa kali perbaikan tampilan saling
         bertabrakan — aturan untuk "layar kecil" bisa berarti empat batas
         yang berbeda.

         UNTUK PEKERJAAN BERIKUTNYA, pakai empat titik ini saja:

            (bawaan)          HP tegak           < 641px
            min-width: 641px  HP mendatar/tablet kecil
            min-width: 1024px komputer
            min-width: 1440px layar lebar

         Titik pecah lama sengaja BELUM dihapus, karena mengubahnya sekaligus
         berisiko menggeser tampilan yang sekarang sudah pas. Rapikan
         sedikit-sedikit: setiap kali menyentuh satu bagian, pindahkan
         aturannya ke empat titik di atas, lalu periksa tampilannya.
         ================================================================== */
      /* =========================================
           GLOBAL VARIABLES & RESET
           ========================================= */
      :root {
        --primary: #672e8a;
        --primary-dark: #4d2267;
        --primary-light: #f5f3ff;
        --text-dark: #0f172a;
        --text-muted: #252a34;
        --bg-glass: rgba(255, 255, 255, 0.85);
        --border-glass: rgba(255, 255, 255, 0.4);
        --shadow-premium:
          0 10px 30px -10px rgba(124, 58, 237, 0.08),
          0 1px 3px rgba(0, 0, 0, 0.02);
        --shadow-drawer: -20px 0 50px rgba(15, 23, 42, 0.15);
        --transition-bounce: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-image 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        --transition-smooth: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-image 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-snap: transform 0.15s ease-out, opacity 0.15s ease-out, color 0.15s ease-out, background-color 0.15s ease-out, background-image 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, filter 0.15s ease-out;

        /* Package Catalog (pkcat) tokens */
        --pkcat-accent-main: #511d66;
        --pkcat-accent-light: #7a2b99;
        --pkcat-accent-grad: linear-gradient(135deg, #511d66 0%, #7a2b99 100%);
        --pkcat-accent-shadow: rgba(81, 29, 102, 0.35);
        --pkcat-bg: #faf8fc;
        --pkcat-ink-soft: #4a4060;
        --pkcat-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
        --pkcat-card-bg: #ffffff;
        --pkcat-text-main: #1b1033;
        --pkcat-text-muted: #766d8c;
        --pkcat-border: #ece5f4;
        --pkcat-radius-lg: 24px;
        --pkcat-radius-md: 12px;
        --pkcat-shadow-card: 0 1px 2px rgba(27, 16, 51, 0.04), 0 10px 28px -14px rgba(27, 16, 51, 0.12);
        --pkcat-shadow-hover: 0 15px 40px -5px rgba(81, 29, 102, 0.25);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Inter", sans-serif;
        -webkit-tap-highlight-color: transparent;
      }

      /* Huruf tampilan: Plus Jakarta Sans sudah diunduh sejak awal tapi
         tidak pernah dipakai karena aturan * { font-family: Inter } di atas.
         Aturan elemen di bawah ini mengalahkan aturan *, tanpa mengubahnya. */
      h1, h2, h3, h4, h5, h6 {
        font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
      }

      html {
        overflow-x: hidden;
      }

      body {
        background-color: #f8fafc;
        color: var(--text-dark);
        overflow-x: hidden;
        max-width: 100vw;
      }

      /* =========================================
           HEADER NAVIGATION (DESKTOP)
           ========================================= */
      header {
        position: sticky;
        top: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: clip;
        background: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
        z-index: 1000;
        box-shadow: var(--shadow-premium);
      }

      .header-inner {
        max-width: 1440px;
        margin: 0 auto;
      }

      .top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 4%;
        border-bottom: 1px solid rgba(226, 232, 240, 0.5);
        font-size: 12px;
        color: var(--text-muted);
      }

      .top-bar-left,
      .top-bar-right {
        display: flex;
        align-items: center;
        gap: 24px;
      }

      .top-link {
        display: flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: var(--text-muted);
        transition: color 0.2s ease;
      }
      .top-link:hover {
        color: var(--primary);
      }

      .divider {
        width: 1px;
        height: 14px;
        background-color: #e2e8f0;
      }

      .btn-sales-top {
        display: flex;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--primary);
        color: var(--primary);
        background: transparent;
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-bounce);
      }
      .btn-sales-top:hover {
        background: var(--primary-light);
        transform: scale(1.05);
      }
      .btn-sales-top:active {
        transform: scale(0.95);
      }

      .main-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 4%;
      }

      .logo-container {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 22px;
        font-weight: 700;
        color: var(--text-dark);
        text-decoration: none;
      }

      .logo-img {
        width: auto;
        height: 42px;
        display: block;
        /* Dulu ditulis "transition: 0.3s" tanpa menyebut sifatnya sama
           sekali. Kalau sifatnya tidak disebut, bawaannya "all". */
        transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, background-image 0.3s, border-color 0.3s, box-shadow 0.3s, filter 0.3s;
      }

      .drawer-logo {
        width: auto;
        height: 36px;
        display: block;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .nav-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 18px;
        border-radius: 10px;
        text-decoration: none;
        color: var(--text-dark);
        font-size: 14px;
        font-weight: 500;
        transition: var(--transition-smooth);
      }
      .nav-item:hover,
      .nav-item.active {
        background-color: var(--primary-light);
        color: var(--primary);
        font-weight: 600;
      }

      .nav-item-dropdown {
        position: relative;
        display: inline-block;
      }

      /* Jembatan hover — area transparan antara trigger dan menu
         agar cursor tidak slip saat berpindah ke dropdown */
      .nav-item-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: -12px;
        right: -12px;
        height: 16px;
      }

      .dropdown-menu {
        position: absolute;
        top: calc(100% + 16px);
        left: 50%;
        transform: translateX(-50%) translateY(-10px) scale(0.96);
        transform-origin: top center;
        min-width: 272px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: 18px;
        border: 1px solid rgba(226, 232, 240, 0.9);
        box-shadow:
          0 4px 6px -2px rgba(15, 23, 42, 0.04),
          0 12px 32px -8px rgba(15, 23, 42, 0.14),
          0 0 0 1px rgba(124, 58, 237, 0.04);
        padding: 10px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
          visibility 0s linear 0.22s;
        z-index: 500;
      }

      /* Caret segitiga kecil di atas dropdown */
      .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 50%;
        transform: translateX(-50%);
        width: 13px;
        height: 7px;
        background: rgba(255, 255, 255, 0.96);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        border-top: 1px solid rgba(226, 232, 240, 0.7);
      }

      .nav-item-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0) scale(1);
        transition:
          opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
          visibility 0s linear 0s;
      }
      .nav-item-dropdown:hover > .nav-item {
        color: var(--primary);
        background-color: var(--primary-light);
      }
      .nav-item-dropdown:hover > .nav-item i.fa-chevron-down {
        transform: rotate(180deg);
      }

      .dropdown-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 16px;
        color: var(--text-dark);
        text-decoration: none;
        font-size: 13.5px;
        font-weight: 600;
        border-radius: 12px;
        transition:
          background 0.18s ease,
          color 0.18s ease,
          transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .dropdown-item + .dropdown-item {
        margin-top: 2px;
      }
      .dropdown-item i {
        flex-shrink: 0;
        font-size: 15px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        background: var(--primary-light);
        border-radius: 10px;
        transition:
          background 0.18s ease,
          color 0.18s ease,
          transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
          box-shadow 0.18s ease;
      }
      .dropdown-item:hover {
        background: var(--primary-light);
        color: var(--primary);
        transform: translateX(4px);
      }
      .dropdown-item:hover i {
        background: var(--primary);
        color: #ffffff;
        transform: scale(1.12) rotate(4deg);
        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
      }

      .nav-actions {
        display: flex;
        gap: 12px;
        align-items: center;
      }

      .btn-outline,
      .btn-filled {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 12px;
        transition: var(--transition-bounce);
      }
      .btn-outline {
        padding: 12px 20px;
        border: 1px solid #cbd5e1;
        color: var(--text-dark);
      }
      .btn-outline:hover {
        border-color: var(--primary);
        color: var(--primary);
        background-color: var(--primary-light);
        transform: translateY(-2px);
      }
      .btn-outline:active {
        transform: scale(0.95);
        transition: var(--transition-snap);
      }

      .btn-filled {
        padding: 12px 24px;
        background-color: var(--primary);
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
      }
      .btn-filled:hover {
        background-color: var(--primary-dark);
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
      }
      .btn-filled:active {
        transform: scale(0.95);
        box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3);
        transition: var(--transition-snap);
      }

      .mobile-actions-wrapper {
        display: none;
      }

      /* ==================================================================
           MOBILE NAVBAR - RESPONSIVE (ALL SCREEN SIZES)
           ================================================================== */

      @keyframes pulse-glow {
        0% {
          box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
        }
        70% {
          box-shadow: 0 0 0 10px rgba(124, 58, 237, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
        }
      }

      @media (max-width: 1024px) {
        /* Sembunyikan elemen desktop */
        .top-bar,
        .nav-links,
        .nav-actions {
          display: none;
        }

        header {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 1px 12px rgba(15, 23, 42, 0.08);
          border-bottom: 1px solid rgba(226, 232, 240, 0.6);
          transition:
            background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .main-nav {
          padding: 10px 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          min-width: 0;
        }

        .logo-container {
          flex: 0 0 auto;
          gap: 0;
        }
        .logo-container > span {
          display: none;
        }
        .logo-img {
          height: 26px;
          width: auto;
        }

        .drawer-logo {
          height: 28px;
        }

        .mobile-actions-wrapper {
          display: flex;
          align-items: center;
          gap: 7px;
          flex: 0 0 auto;
        }

        .mobile-icon-btn {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          border: 1px solid rgba(226, 232, 240, 0.9);
          background: rgba(255, 255, 255, 0.95);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: var(--transition-bounce);
          text-decoration: none;
          flex-shrink: 0;
          box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
        }
        .mobile-icon-btn:active {
          transform: scale(0.85);
          background-color: var(--primary-light);
          border-color: rgba(124, 58, 237, 0.4);
          transition: var(--transition-snap);
        }
        .mobile-icon-btn .fa-whatsapp {
          color: #0b7a3d;
          font-size: 18px;
        }
        .mobile-icon-btn .fa-location-dot {
          color: var(--primary);
          font-size: 16px;
        }

        .mobile-btn-text {
          padding: 8px 14px;
          border-radius: 20px;
          background: linear-gradient(135deg, var(--primary), #8b4ead);
          color: white;
          font-size: 12.5px;
          font-weight: 600;
          letter-spacing: -0.1px;
          text-decoration: none;
          white-space: nowrap;
          box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          transition: var(--transition-bounce);
          animation: pulse-glow 2.5s infinite;
        }
        .mobile-btn-text:active {
          transform: scale(0.92);
          box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
          animation: none;
          transition: var(--transition-snap);
        }

        .hamburger-hitbox {
          width: 36px;
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border-radius: 50%;
          flex-shrink: 0;
          background: rgba(15, 23, 42, 0.04);
          border: 1px solid rgba(226, 232, 240, 0.7);
          transition: var(--transition-smooth);
        }
        .hamburger-hitbox:active {
          transform: scale(0.85);
          background: rgba(15, 23, 42, 0.08);
          transition: var(--transition-snap);
        }

        .hamburger-icon {
          position: relative;
          width: 18px;
          height: 13px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .hamburger-icon span {
          display: block;
          height: 2px;
          width: 100%;
          background-color: var(--text-dark);
          border-radius: 2px;
          transition:
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.25s ease;
        }
        .hamburger-hitbox.is-active .hamburger-icon span:nth-child(1) {
          transform: translateY(5.5px) rotate(45deg);
          background-color: var(--primary);
        }
        .hamburger-hitbox.is-active .hamburger-icon span:nth-child(2) {
          opacity: 0;
          transform: translateX(-10px);
        }
        .hamburger-hitbox.is-active .hamburger-icon span:nth-child(3) {
          transform: translateY(-5.5px) rotate(-45deg);
          background-color: var(--primary);
        }
      }

      /* HP kecil: 360–390px */
      @media (max-width: 390px) {
        .main-nav {
          padding: 9px 14px;
          gap: 6px;
        }
        .logo-img {
          height: 24px;
        }
        .mobile-actions-wrapper {
          gap: 5px;
        }
        .mobile-icon-btn {
          width: 34px;
          height: 34px;
        }
        .mobile-icon-btn .fa-whatsapp {
          font-size: 17px;
        }
        .mobile-icon-btn .fa-location-dot {
          font-size: 15px;
        }
        .mobile-btn-text {
          padding: 7px 12px;
          font-size: 12px;
        }
        .hamburger-hitbox {
          width: 34px;
          height: 34px;
        }
      }

      /* HP sangat kecil: ≤ 360px */
      @media (max-width: 360px) {
        .main-nav {
          padding: 8px 12px;
          gap: 4px;
        }
        .logo-img {
          height: 22px;
        }
        .mobile-actions-wrapper {
          gap: 4px;
        }
        .mobile-icon-btn {
          width: 32px;
          height: 32px;
        }
        .mobile-icon-btn .fa-whatsapp {
          font-size: 16px;
        }
        .mobile-icon-btn .fa-location-dot {
          font-size: 14px;
        }
        .mobile-btn-text {
          padding: 7px 10px;
          font-size: 11.5px;
        }
        .hamburger-hitbox {
          width: 32px;
          height: 32px;
        }
        .hamburger-icon {
          width: 16px;
          height: 12px;
        }
      }

      /* =========================================
           MOBILE DRAWER (PANEL MENU)
           ========================================= */
      .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: rgba(15, 23, 42, 0.42);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1050;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;
      }
      .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
      }

      .mobile-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        height: 100dvh;
        /* Latar dibuat putih penuh dan backdrop-filter dibuang.
           Sebelumnya rgba(...,0.985) + blur(14px): hanya 1,6 % latar yang
           menembus, jadi blurnya tidak terlihat sama sekali — tapi memaksa
           peramban mengaburkan ulang seluruh latar setiap kali ada gerakan
           di dalam laci. Itu penyebab dropdown terasa berat. */
        background: #ffffff;
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        z-index: 1100;
        padding: 32px 24px;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-drawer);
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        transform: translateX(100%);
        will-change: transform;
      }
      .mobile-drawer.active {
        transform: translateX(0);
      }

      .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
      }
      .drawer-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-dark);
      }
      .drawer-title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--text-muted);
        margin-bottom: 8px;
        padding-left: 6px;
      }

      .drawer-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .drawer-item {
        padding: 16px 20px;
        font-size: 15px;
        font-weight: 600;
        color: var(--text-dark);
        text-decoration: none;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: var(--transition-bounce);
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(241, 245, 249, 0.9);
        cursor: pointer;
      }
      .drawer-item i.main-icon {
        margin-right: 14px;
        color: var(--text-muted);
        font-size: 18px;
        transition: var(--transition-smooth);
        width: 20px;
        text-align: center;
      }
      .drawer-item .arrow-icon {
        font-size: 12px;
        color: var(--text-muted);
        transition: transform 0.3s ease;
      }

      .drawer-item:active,
      .drawer-item.active-menu {
        background: linear-gradient(
          135deg,
          var(--primary-light),
          rgba(124, 58, 237, 0.04)
        );
        color: var(--primary);
        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.05);
        border-color: rgba(124, 58, 237, 0.2);
        transform: scale(0.98);
        transition: var(--transition-snap);
      }
      .drawer-item:active i.main-icon,
      .drawer-item.active-menu i.main-icon {
        color: var(--primary);
      }

      .drawer-submenu-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        /* TINGGI SENGAJA TIDAK DIANIMASIKAN.
           Menganimasikan tinggi = menghitung ulang tata letak 60x per detik,
           dan hitung-ulang tata letak selalu dikerjakan prosesor utama,
           tidak bisa dibantu kartu grafis. Di Safari (iPhone) biayanya
           lebih besar lagi. Ruangnya sekarang terbuka seketika — satu
           hitungan, satu gambar. Yang beranimasi butir menunya, di bawah. */
        transition: none;
        /* "contain" memberi tahu peramban bahwa perubahan di dalam kotak ini
           tidak mempengaruhi tata letak di luarnya — jadi saat submenu
           membuka, yang dihitung ulang cuma isinya, bukan seluruh laci. */
        contain: layout paint;
      }
      .drawer-submenu-inner {
        overflow: hidden;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 10px;
      }

      .drawer-dropdown.is-open .drawer-submenu-wrapper {
        grid-template-rows: 1fr;
        margin-top: 8px;
        margin-bottom: 8px;
      }
      .drawer-dropdown.is-open .drawer-item {
        background: var(--primary-light);
        color: var(--primary);
        border-color: rgba(124, 58, 237, 0.2);
      }
      .drawer-dropdown.is-open .drawer-item i.main-icon {
        color: var(--primary);
      }
      .drawer-dropdown.is-open .arrow-icon {
        transform: rotate(180deg);
        color: var(--primary);
      }

      .drawer-submenu-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-dark);
        text-decoration: none;
        border-radius: 12px;
        background: rgba(248, 250, 252, 0.8);
        border: 1px solid transparent;
        transition: var(--transition-bounce);
      }
      .drawer-submenu-item i {
        color: var(--primary);
        font-size: 16px;
        width: 22px;
        text-align: center;
        background: white;
        padding: 6px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        transition: var(--transition-bounce);
      }
      .drawer-submenu-item:active {
        transform: scale(0.96);
        background: white;
        border-color: var(--primary);
        color: var(--primary);
        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
        transition: var(--transition-snap);
      }
      .drawer-submenu-item:active i {
        transform: scale(1.1);
        background: var(--primary);
        color: white;
      }

      .drawer-quick-actions {
        margin-top: auto;
        padding-top: 16px;
      }
      .action-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 8px;
      }

      .grid-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px;
        background: white;
        border: 1px solid rgba(226, 232, 240, 0.8);
        border-radius: 14px;
        text-decoration: none;
        color: var(--text-dark);
        font-size: 12px;
        font-weight: 600;
        transition: var(--transition-bounce);
      }
      .grid-btn i {
        font-size: 18px;
      }
      .grid-btn.wa i {
        color: #0b7a3d;
      }
      .grid-btn.loc i {
        color: var(--primary);
      }
      .grid-btn:active {
        transform: scale(0.92);
        border-color: var(--primary);
        background: var(--primary-light);
        transition: var(--transition-snap);
      }

      .drawer-footer-btn {
        grid-column: span 2;
        background: var(--primary);
        color: white !important;
        border: none;
        padding: 14px;
        border-radius: 14px;
        text-align: center;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25);
        /* animation: pulse-glow dibuang — menganimasikan box-shadow berarti
           menggambar ulang bayangan tiap gambar, selamanya. */
        transition: var(--transition-bounce);
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .drawer-footer-btn:active {
        transform: scale(0.95);
        background: var(--primary-dark);
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
        animation: none;
        transition: var(--transition-snap);
      }

      /* =========================================
           HERO CAROUSEL STYLES
           ========================================= */
      .hero-carousel-wrapper {
        width: 100%;
        overflow: hidden;
        padding-top: 16px;
        padding-bottom: 28px;
        position: relative;
        z-index: 13;
      }
      .swiper {
        width: 100%;
        padding-bottom: 10px;
      }

      .swiper-slide {
        width: 82%;
        aspect-ratio: 15 / 5;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        position: relative;
        transition: opacity 600ms ease;
      }
      .swiper-slide:not(.swiper-slide-active) {
        opacity: 0.6;
      }
      .swiper-bullet-hidden {
        display: none !important;
      }
      .swiper-slide-active {
        opacity: 1;
      }
      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .swiper-button-next,
      .swiper-button-prev {
        background-color: #ffffff;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        color: #000000;
        z-index: 20;
        transition: var(--transition-bounce);
      }
      .swiper-button-next:active,
      .swiper-button-prev:active {
        transform: scale(0.85);
        transition: var(--transition-snap);
      }
      .swiper-button-next:after,
      .swiper-button-prev:after {
        font-size: 18px;
        font-weight: bold;
      }
      .swiper-button-prev {
        left: calc(9% - 24px) !important;
      }
      .swiper-button-next {
        right: calc(9% - 24px) !important;
      }

      @media (max-width: 768px) {
        .hero-carousel-wrapper {
          padding-top: 0;
          padding-bottom: 24px;
          overflow: visible;
        }
        .swiper {
          overflow: hidden;
        }
        .swiper-slide {
          width: 100%;
          aspect-ratio: 1 / 1;
          height: auto;
          border-radius: 0;
          box-shadow: none;
          border: none;
        }
        .swiper-button-prev {
          left: 12px !important;
        }
        .swiper-button-next {
          right: 12px !important;
        }
        .swiper-button-next,
        .swiper-button-prev {
          width: 36px;
          height: 36px;
        }
        .swiper-button-next:after,
        .swiper-button-prev:after {
          font-size: 14px;
        }
        .swiper-pagination {
          padding-left: 0 !important;
        }
      }

      /* ==========================================================================
           PREMIUM MODAL COVERAGE ENGINE STYLES
           ========================================================================== */
      .coverage-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        opacity: 0;
        padding: 16px;
      }

      .coverage-modal-overlay.is-open {
        display: flex;
        opacity: 1;
        animation: coverageModalFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      @keyframes coverageModalFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      .coverage-modal-card {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 24px;
        width: 100%;
        max-width: 650px;
        box-shadow:
          0 25px 50px -12px rgba(15, 23, 42, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.6);
        padding: 28px;
        position: relative;
        transform: translateY(30px) scale(0.96);
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        max-height: 92vh;
        overflow-y: auto;
        scrollbar-width: none;
      }
      .coverage-modal-card::-webkit-scrollbar {
        display: none;
      }

      .coverage-modal-overlay.is-open .coverage-modal-card {
        transform: translateY(0) scale(1);
      }

      .modal-close-btn {
        position: absolute;
        top: 22px;
        right: 22px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(15, 23, 42, 0.05);
        border: 1px solid rgba(15, 23, 42, 0.03);
        color: var(--text-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-image 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10;
      }
      .modal-close-btn:hover {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.2);
        transform: rotate(90deg);
      }

      .coverage-modal-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 14px;
        padding-right: 36px;
      }

      .header-icon-wrapper {
        width: 48px;
        height: 48px;
        background: var(--primary-light);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 20px;
        flex-shrink: 0;
        box-shadow: 0 8px 16px -4px rgba(124, 58, 237, 0.15);
      }

      .header-title-wrapper .radar-modal-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0 0 4px 0;
        letter-spacing: -0.3px;
      }
      .header-title-wrapper p {
        font-size: 13px;
        color: var(--text-muted);
        margin: 0;
        line-height: 1.4;
      }

      .map-container-frame {
        width: 100%;
        height: 300px;
        border-radius: 18px;
        overflow: hidden;
        position: relative;
        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        margin-bottom: 14px;
        transform: translateZ(0);
      }

      #coverage-map {
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      .map-loading-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 10;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        opacity: 0;
        color: var(--primary);
        font-weight: 600;
        font-size: 14px;
      }
      .map-loading-overlay.active {
        display: flex;
        opacity: 1;
        animation: mapLoadingFadeIn 0.3s ease forwards;
      }

      @keyframes mapLoadingFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      .spinner-premium {
        width: 32px;
        height: 32px;
        border: 3px solid var(--primary-light);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spinPremium 0.75s linear infinite;
      }
      @keyframes spinPremium {
        to { transform: rotate(360deg); }
      }

      /* ==========================================================
           STATUS CARDS (SUCCESS & FAIL)
           ========================================================== */
      .coverage-status-card {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 24px;
        border-radius: 20px;
        margin-bottom: 16px;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-image 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        animation: slideUpIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.98);
      }
      @keyframes slideUpIn {
        from {
          opacity: 0;
          transform: translateY(15px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .coverage-status-card.hidden {
        display: none;
      }

      .coverage-status-card.success {
        border: 1px solid rgba(124, 58, 237, 0.15);
        box-shadow:
          0 15px 35px -10px rgba(124, 58, 237, 0.12),
          inset 0 0 0 1px #ffffff;
      }
      .coverage-status-card.success::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(to bottom, var(--primary), #a78bfa);
      }
      .success .status-card-body .radar-result-title {
        color: var(--text-dark);
        font-size: 16px;
        margin-bottom: 8px;
      }
      .success .status-card-body p {
        color: var(--text-muted);
      }

      .coverage-status-card.fail {
        border: 1px solid rgba(245, 158, 11, 0.2);
        box-shadow:
          0 15px 35px -10px rgba(15, 23, 42, 0.08),
          inset 0 0 0 1px #ffffff;
      }
      .coverage-status-card.fail::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(to bottom, #f59e0b, #fbbf24);
      }
      .fail .status-card-body .radar-result-title {
        color: var(--text-dark);
        font-size: 16px;
        margin-bottom: 8px;
      }
      .fail .status-card-body p {
        color: var(--text-muted);
      }
      .status-card-body .radar-result-title {
        font-weight: 700;
        letter-spacing: -0.3px;
        /* baris dibagi rata, supaya tidak ada satu kata menggantung sendiri */
        text-wrap: balance;
      }
      .status-card-body p {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.5;
      }

      .coverage-modal-actions {
        display: grid;
        grid-template-columns: 1fr 1.3fr 1.7fr;
        gap: 12px;
      }
      .coverage-modal-actions.two-columns {
        grid-template-columns: 1fr 2fr;
      }
      .coverage-modal-actions.hidden {
        display: none;
      }

      .btn-modal-action {
        height: 52px;
        border-radius: 14px;
        font-size: 14.5px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        border: none;
        text-decoration: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-image 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        white-space: nowrap;
      }

      .btn-back {
        background: #f8fafc;
        color: #64748b;
        border: 1px solid #e2e8f0;
      }
      .btn-back:hover {
        background: #f1f5f9;
        color: var(--text-dark);
        border-color: #cbd5e1;
      }

      .btn-whatsapp {
        background: linear-gradient(135deg, #0b7a3d 0%, #076b33 100%);
        color: white;
        box-shadow:
          0 8px 20px -4px rgba(37, 211, 102, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .btn-whatsapp:hover {
        box-shadow: 0 12px 25px -4px rgba(37, 211, 102, 0.45);
        transform: translateY(-2px);
        filter: brightness(1.05);
      }

      .btn-register {
        background: linear-gradient(
          135deg,
          var(--primary) 0%,
          var(--primary-dark) 100%
        );
        color: white;
        box-shadow:
          0 8px 20px -4px rgba(124, 58, 237, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .btn-register:hover {
        box-shadow: 0 12px 25px -4px rgba(124, 58, 237, 0.5);
        transform: translateY(-2px);
        filter: brightness(1.05);
      }

      .btn-modal-action:active {
        transform: translateY(1px) scale(0.98);
      }

      .custom-premium-marker {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .marker-pin-wrapper {
        position: relative;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .marker-core {
        width: 14px;
        height: 14px;
        background: #7c3aed;
        border: 3px solid #ffffff;
        border-radius: 50%;
        box-shadow:
          0 0 12px rgba(124, 58, 237, 0.8),
          0 4px 10px rgba(15, 23, 42, 0.35);
        z-index: 2;
      }
      .marker-pulse {
        position: absolute;
        width: 34px;
        height: 34px;
        background: rgba(124, 58, 237, 0.12);
        border: 1.5px solid rgba(124, 58, 237, 0.4);
        border-radius: 50%;
        z-index: 1;
        box-shadow: inset 0 0 8px rgba(124, 58, 237, 0.15);
      }

      /* =================================================================
           MOBILE ONLY: FIXED HEADER + GLASSMORPHISM + SCROLL STATES
           ================================================================= */

      .logo-img-white {
        display: none;
        height: auto;
        width: 140px;
        max-height: 34px;
        object-fit: contain;
        object-position: left center;
      }

      /* =================================================================
           MOBILE CTA OPTIMIZATION
           ================================================================= */

      @keyframes cta-shimmer {
        0%   { background-position: 200% center; }
        100% { background-position: -200% center; }
      }
      @keyframes cta-float {
        0%,
        100% {
          transform: translateY(0px);
          box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
        }
        50% {
          transform: translateY(-2px);
          box-shadow: 0 7px 20px rgba(124, 58, 237, 0.48);
        }
      }
      @keyframes cta-breathe {
        0%,
        100% {
          box-shadow:
            0 0 0 0 rgba(124, 58, 237, 0.35),
            0 6px 20px rgba(124, 58, 237, 0.35);
        }
        60% {
          box-shadow:
            0 0 0 8px rgba(124, 58, 237, 0),
            0 8px 28px rgba(124, 58, 237, 0.5);
        }
      }
      @keyframes cta-breathe-wa {
        0%,
        100% {
          box-shadow:
            0 0 0 0 rgba(37, 211, 102, 0.35),
            0 8px 20px rgba(37, 211, 102, 0.35);
        }
        60% {
          box-shadow:
            0 0 0 8px rgba(37, 211, 102, 0),
            0 10px 28px rgba(37, 211, 102, 0.5);
        }
      }

      @media (max-width: 1024px) {
        header {
          position: fixed;
        }

        header::before {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(to bottom, purple 0%, transparent 100%);
          opacity: 1;
          transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          pointer-events: none;
        }
        header.is-scrolled::before {
          opacity: 0;
        }

        header .header-inner {
          position: relative;
          z-index: 1;
        }

        header:not(.is-scrolled) {
          background: transparent;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          box-shadow: none;
          border-bottom: none;
        }

        header:not(.is-scrolled) .logo-img-dark {
          display: none;
        }
        header:not(.is-scrolled) .logo-img-white {
          display: block;
        }

        header:not(.is-scrolled) .hamburger-icon span {
          background-color: rgba(255, 255, 255, 0.95);
        }
        header:not(.is-scrolled) .hamburger-hitbox {
          background: rgba(255, 255, 255, 0.12);
          border-color: rgba(255, 255, 255, 0.25);
        }
        header:not(.is-scrolled)
          .hamburger-hitbox.is-active
          .hamburger-icon
          span:nth-child(1),
        header:not(.is-scrolled)
          .hamburger-hitbox.is-active
          .hamburger-icon
          span:nth-child(3) {
          background-color: rgba(255, 255, 255, 0.95);
        }

        header:not(.is-scrolled) .mobile-icon-btn {
          background: rgba(255, 255, 255, 0.12);
          border-color: rgba(255, 255, 255, 0.28);
          box-shadow: none;
        }
        header:not(.is-scrolled) .mobile-icon-btn .fa-whatsapp,
        header:not(.is-scrolled) .mobile-icon-btn .fa-location-dot {
          color: rgba(255, 255, 255, 0.95);
        }

        header:not(.is-scrolled) .mobile-btn-text {
          background: rgba(255, 255, 255, 0.2) !important;
          background-size: unset !important;
          color: white;
          border: 1px solid rgba(255, 255, 255, 0.45) !important;
          box-shadow:
            0 2px 10px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
          animation: none !important;
        }
        header:not(.is-scrolled) .mobile-btn-text::after {
          display: none;
        }
      

        .mobile-btn-text {
          background: linear-gradient(
            135deg,
            #672e8a 0%,
            #8b4ead 40%,
            #a86ed1 60%,
            #672e8a 100%
          ) !important;
          background-size: 300% 100% !important;
          animation: cta-float 3s ease-in-out infinite !important;
          box-shadow:
            0 4px 14px rgba(124, 58, 237, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
          position: relative;
          overflow: hidden;
        }
        .mobile-btn-text::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(
            105deg,
            transparent 40%,
            rgba(255, 255, 255, 0.28) 50%,
            transparent 60%
          );
          background-size: 200% 100%;
          animation: cta-shimmer 2.6s linear infinite;
          border-radius: inherit;
          pointer-events: none;
        }
        .mobile-btn-text:active {
          transform: scale(0.88) !important;
          box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
          animation: none !important;
          transition:
            transform 0.08s cubic-bezier(0.4, 0, 0.6, 1),
            box-shadow 0.08s ease !important;
        }

        .mobile-icon-btn {
          transition:
            transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
            background 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease !important;
        }
        .mobile-icon-btn:active {
          transform: scale(0.8) !important;
          transition: transform 0.07s cubic-bezier(0.4, 0, 0.6, 1) !important;
        }
        .mobile-icon-btn .fa-whatsapp,
        .mobile-icon-btn .fa-location-dot {
          transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .mobile-icon-btn:active .fa-whatsapp,
        .mobile-icon-btn:active .fa-location-dot {
          transform: scale(0.85);
        }

        .grid-btn {
          transition:
            transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.2s ease,
            background 0.2s ease !important;
          position: relative;
          overflow: hidden;
        }
        .grid-btn:active {
          transform: scale(0.88) !important;
          box-shadow: 0 1px 4px rgba(124, 58, 237, 0.15) !important;
          transition:
            transform 0.07s ease,
            box-shadow 0.07s ease !important;
        }
        .grid-btn i {
          transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .grid-btn:active i {
          transform: scale(0.82);
        }

        .drawer-footer-btn {
          background: linear-gradient(
            135deg,
            #6d28d9 0%,
            #7c3aed 40%,
            #8b5cf6 70%,
            #6d28d9 100%
          ) !important;
          background-size: 300% 100% !important;
          box-shadow:
            0 6px 20px rgba(124, 58, 237, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
          /* animation: cta-breathe dibuang — sama, menganimasikan box-shadow.
             Bayangan tetap ada di atas, hanya tidak lagi berdenyut. */
          position: relative;
          overflow: hidden;
        }
        /* KILAU TOMBOL LACI
           Dulu: background-size 200% + menggeser background-position.
           Menggeser background-position memaksa peramban MENGGAMBAR ULANG
           tombolnya tiap gambar.

           Sekarang: satu pita miring selebar 60 % yang digeser dengan
           transform. Tampilannya sama, tapi transform dikerjakan kartu
           grafis tanpa menggambar ulang apa pun.

           Dan animasinya hanya hidup saat laci TERBUKA — sebelumnya ia
           berputar terus-menerus walaupun lacinya sedang tersembunyi di
           luar layar. */
        .drawer-footer-btn::after {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          left: -60%;
          width: 60%;
          background: linear-gradient(
            105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.22) 50%,
            transparent 100%
          );
          border-radius: inherit;
          pointer-events: none;
        }
        .mobile-drawer.active .drawer-footer-btn::after {
          animation: drawer-cta-sapu 3s linear infinite;
        }
        @keyframes drawer-cta-sapu {
          0%   { transform: translateX(0); }
          100% { transform: translateX(370%); }
        }
        .drawer-footer-btn:active {
          transform: scale(0.94) !important;
          box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3) !important;
          animation: none !important;
          transition: transform 0.07s ease, opacity 0.07s ease, color 0.07s ease, background-color 0.07s ease, background-image 0.07s ease, border-color 0.07s ease, box-shadow 0.07s ease, filter 0.07s ease!important;
        }

        .btn-outline {
          transition:
            transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
            background 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease !important;
        }
        .btn-outline:active {
          transform: scale(0.93) !important;
          transition: transform 0.07s ease !important;
        }

        .btn-filled {
          background: linear-gradient(
            135deg,
            #6d28d9 0%,
            #7c3aed 50%,
            #8b5cf6 100%
          ) !important;
          box-shadow:
            0 6px 18px rgba(124, 58, 237, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
          animation: cta-breathe 2.8s ease-in-out infinite !important;
          transition:
            transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.2s ease !important;
          position: relative;
          overflow: hidden;
        }
        .btn-filled::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(
            105deg,
            transparent 40%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 60%
          );
          background-size: 200% 100%;
          animation: cta-shimmer 3.2s linear infinite;
          border-radius: inherit;
          pointer-events: none;
        }
        .btn-filled:active {
          transform: scale(0.93) !important;
          box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3) !important;
          animation: none !important;
          transition: transform 0.07s ease, opacity 0.07s ease, color 0.07s ease, background-color 0.07s ease, background-image 0.07s ease, border-color 0.07s ease, box-shadow 0.07s ease, filter 0.07s ease!important;
        }

        .btn-whatsapp {
          box-shadow:
            0 8px 20px -4px rgba(37, 211, 102, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
          animation: cta-breathe-wa 2.5s ease-in-out infinite !important;
          transition:
            transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.2s ease !important;
          position: relative;
          overflow: hidden;
        }
        .btn-whatsapp:active {
          transform: scale(0.93) !important;
          box-shadow: 0 2px 10px rgba(37, 211, 102, 0.25) !important;
          animation: none !important;
          transition: transform 0.07s ease, opacity 0.07s ease, color 0.07s ease, background-color 0.07s ease, background-image 0.07s ease, border-color 0.07s ease, box-shadow 0.07s ease, filter 0.07s ease!important;
        }

        .btn-register {
          box-shadow:
            0 8px 20px -4px rgba(124, 58, 237, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
          animation: cta-breathe 2.5s ease-in-out infinite !important;
          transition:
            transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.2s ease !important;
          position: relative;
          overflow: hidden;
        }
        .btn-register::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(
            105deg,
            transparent 40%,
            rgba(255, 255, 255, 0.22) 50%,
            transparent 60%
          );
          background-size: 200% 100%;
          animation: cta-shimmer 2.8s linear infinite;
          border-radius: inherit;
          pointer-events: none;
        }
        .btn-register:active {
          transform: scale(0.93) !important;
          box-shadow: 0 2px 10px rgba(124, 58, 237, 0.25) !important;
          animation: none !important;
          transition: transform 0.07s ease, opacity 0.07s ease, color 0.07s ease, background-color 0.07s ease, background-image 0.07s ease, border-color 0.07s ease, box-shadow 0.07s ease, filter 0.07s ease!important;
        }

        .btn-back {
          transition:
            transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
            background 0.2s ease !important;
        }
        .btn-back:active {
          transform: scale(0.93) !important;
          transition: transform 0.07s ease, opacity 0.07s ease, color 0.07s ease, background-color 0.07s ease, background-image 0.07s ease, border-color 0.07s ease, box-shadow 0.07s ease, filter 0.07s ease!important;
        }
      }

      /* =========================================
           PREMIUM HORIZONTAL SCROLL MENU
           ========================================= */
      .quick-menu-section {
        width: 100%;
        background: #ffffff;
        position: relative;
        z-index: 12;
        padding: 16px 0 24px 0;
        margin-top: -20px;
        border-bottom: 1px solid rgba(139, 92, 246, 0.15);
      }

      .quick-menu-section::after {
        content: "";
        position: absolute;
        bottom: -16px;
        left: 0;
        width: 100%;
        height: 16px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(244, 239, 255, 0.6) 50%, transparent 100%);
        pointer-events: none;
        z-index: 11;
      }

      .quick-menu-track-wrapper {
        position: relative;
        display: flex;
        align-items: stretch;
        max-width: 1440px;
        margin: 0 auto;
      }

      .quick-menu-fade {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 44px;
        display: flex;
        align-items: center;
        z-index: 5;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.22s ease;
      }
      .quick-menu-fade.is-visible {
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
      }
      .quick-menu-fade--left {
        left: 0;
        background: linear-gradient(to right, #f8fafc 40%, transparent);
        padding-left: 4px;
        justify-content: flex-start;
      }
      .quick-menu-fade--right {
        right: 0;
        background: linear-gradient(to left, #f8fafc 40%, transparent);
        padding-right: 4px;
        justify-content: flex-end;
      }
      .quick-menu-fade i {
        font-size: 11px;
        color: var(--text-muted);
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(203, 213, 225, 0.8);
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
        transition: var(--transition-bounce);
        flex-shrink: 0;
      }
      .quick-menu-fade.is-visible:active i {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        transform: scale(0.9);
        transition: var(--transition-snap);
      }

      .quick-menu-track {
        display: flex;
        align-items: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 16px 12px 14px;
        gap: 0;
        width: 100%;
      }
      .quick-menu-track::-webkit-scrollbar {
        display: none;
      }

      .quick-menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 10px 8px 10px;
        min-width: 0;
        flex: 0 0 calc(22.5vw);
        text-decoration: none;
        color: #64748b;
        scroll-snap-align: start;
        position: relative;
        z-index: 1;
        pointer-events: auto;
        border-radius: 14px;
        transition:
          color 0.2s ease,
          background 0.2s ease,
          transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        overflow: hidden;
        user-select: none;
      }

      .quick-menu-item::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 14px;
        background: radial-gradient(circle at 50% 60%, rgba(103, 46, 138, 0.14) 0%, transparent 68%);
        opacity: 0;
        transform: scale(0.5);
        transition:
          opacity 0.4s ease,
          transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
      }
      .quick-menu-item:active {
        transform: scale(0.93);
        transition:
          transform 0.1s ease,
          background 0.1s ease;
      }
      .quick-menu-item--tapped::after {
        opacity: 1;
        transform: scale(1);
      }
      .quick-menu-item--tapped {
        background: rgba(103, 46, 138, 0.06);
      }

      .quick-menu-item--active {
        color: var(--primary);
      }
      .quick-menu-item--active .quick-menu-label {
        font-weight: 700;
        color: var(--primary);
      }

      .quick-menu-icon {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
      }
      .quick-menu-icon img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        display: block;
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .quick-menu-item--active::before {
        content: '';
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--primary);
        opacity: 0.85;
      }

      .quick-menu-label {
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.35;
        text-align: center;
        color: #475569;
        transition: color 0.2s ease, font-weight 0.2s ease;
        max-width: 78px;
        word-break: keep-all;
        white-space: normal;
      }

      @media (min-width: 768px) {
        .quick-menu-section {
          padding: 4px 0 0;
        }
        .quick-menu-track {
          overflow-x: visible;
          flex-wrap: nowrap;
          justify-content: space-evenly;
          padding: 20px 32px 18px;
          scroll-snap-type: none;
        }
        .quick-menu-item {
          flex: 1 1 0;
          min-width: 0;
          max-width: 140px;
          padding: 12px 10px 12px;
          gap: 10px;
          border-radius: 16px;
        }
        .quick-menu-icon {
          width: 60px;
          height: 60px;
        }
        .quick-menu-icon img {
          width: 60px;
          height: 60px;
        }
        .quick-menu-label {
          font-size: 13px;
        }
        .quick-menu-fade {
          display: none !important;
          pointer-events: none;
        }
      }

      @media (min-width: 1024px) {
        .quick-menu-icon {
          width: 68px;
          height: 68px;
        }
        .quick-menu-icon img {
          width: 68px;
          height: 68px;
        }
        .quick-menu-label {
          font-size: 13.5px;
        }
      }

      @media (max-width: 400px) {
        .quick-menu-item {
          gap: 6px;
          padding: 9px 4px 9px;
        }
        .quick-menu-icon {
          width: 44px;
          height: 44px;
        }
        .quick-menu-icon img {
          width: 44px;
          height: 44px;
        }
        .quick-menu-label {
          font-size: 11.5px;
          max-width: 100%;
        }
      }

      @media (max-width: 767px) {
        .hero-carousel-wrapper {
          padding-bottom: 1px;
        }
        .quick-menu-section {
          padding-top: 0;
          padding-bottom: 4px;
        }
        .quick-menu-track {
          padding-top: 8px;
          padding-bottom: 8px;
        }
      }

      /* ==========================================================
           PROMO SECTION STYLES
           ========================================================== */
      #promo-neon-section {
        --promo-radius-lg: 22px;
        --promo-radius-md: 14px;
        --promo-shadow-sm: 0 6px 18px -8px rgba(103, 46, 138, 0.18);
        --promo-shadow-lg: 0 20px 45px -18px rgba(103, 46, 138, 0.28);
        display: block;
        width: 100%;
        font-family: "Inter", sans-serif;
        color: var(--text-dark);
        background: #ffffff;
        overflow: clip;
        -webkit-font-smoothing: antialiased;
      }

      #promo-neon-section *,
      #promo-neon-section *::before,
      #promo-neon-section *::after {
        box-sizing: border-box;
      }

      #promo-neon-section .promo-container {
        width: 100%;
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
        position: relative;
      }

      #promo-neon-section .promo-body {
        position: relative;
        z-index: 10;
        overflow: visible;
        padding: 20px 0 40px;
        background:
          radial-gradient(circle at 50% -30%,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.55) 18%,
            rgba(196, 181, 253, 0.20) 38%,
            rgba(255, 255, 255, 0) 65%),
          radial-gradient(circle at 50% 0%,
            rgba(168, 85, 247, 0.14) 0%,
            rgba(168, 85, 247, 0.08) 30%,
            rgba(255, 255, 255, 0) 70%),
          linear-gradient(
            180deg,
            #f4efff 0%,
            #fcfbff 18%,
            #ffffff 65%,
            #ffffff 100%
          );
        box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.95);
      }

      #promo-neon-section .promo-body::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -22px;
        transform: translateX(-50%);
        width: 75%;
        height: 45px;
        background: radial-gradient(
          ellipse,
          rgba(168, 85, 247, 0.30) 0%,
          rgba(168, 85, 247, 0.12) 45%,
          transparent 80%
        );
        filter: blur(22px);
        pointer-events: none;
        z-index: -1;
      }

      #promo-neon-section .promo-body::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -22px;
        transform: translateX(-50%);
        width: 75%;
        height: 45px;
        background: radial-gradient(
          ellipse,
          rgba(124, 58, 237, 0.28) 0%,
          rgba(124, 58, 237, 0.10) 45%,
          transparent 80%
        );
        filter: blur(22px);
        pointer-events: none;
        z-index: -1;
      }

      #promo-neon-section .promo-eyebrow {
        display: block;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--primary);
        text-align: center;
        margin-bottom: 6px;
      }

      #promo-neon-section .promo-h1-main {
        font-size: clamp(30px, 5vw, 48px);
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        color: var(--text-dark);
        margin: 0 0 10px;
        max-width: 720px;
        letter-spacing: -0.03em;
      }

      #promo-neon-section .promo-h1-main strong {
        color: var(--primary);
      }

      #promo-neon-section .promo-heading {
        font-size: clamp(18px, 2vw, 25px);
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        color: var(--primary-light);
        margin: 0 0 14px;
        max-width: 700px;
        letter-spacing: 0.02em;
      }

      #promo-neon-section .promo-heading strong {
        color: var(--primary);
      }

      #promo-neon-section .promo-desc {
        font-size: 14px;
        line-height: 1.7;
        color: var(--text-muted);
        text-align: center;
        max-width: 560px;
        margin: 0 auto 20px;
      }

      #promo-neon-section .promo-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: center;
      }

      #promo-neon-section .promo-info-col {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #promo-neon-section .promo-badges {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        max-width: 440px;
        margin: 0 auto 24px;
      }

      #promo-neon-section .promo-price-badge {
        padding: 18px 22px;
        border-radius: var(--promo-radius-md);
        background: #ffffff;
        border: 1px solid rgba(103, 46, 138, 0.15);
        box-shadow: var(--promo-shadow-sm);
        text-align: center;
      }

      #promo-neon-section .promo-badge-label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 4px;
      }

      #promo-neon-section .promo-badge-main-price {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 4px;
      }

      #promo-neon-section .promo-badge-currency {
        font-size: 16px;
        font-weight: 700;
        color: var(--primary);
      }

      #promo-neon-section .promo-badge-number {
        font-size: 34px;
        font-weight: 800;
        line-height: 1;
        color: var(--text-dark);
      }

      #promo-neon-section .promo-badge-unit {
        font-size: 15px;
        font-weight: 700;
        color: var(--primary-dark);
        text-transform: uppercase;
      }

      #promo-neon-section .promo-badge-period {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: var(--text-muted);
      }

#promo-neon-section .promo-urgency{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    padding:16px 20px;
    margin-top:10px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(248,242,255,.98)
        );

    border:1px solid rgba(103,46,138,.18);

    box-shadow:
        0 10px 28px rgba(103,46,138,.08),
        0 3px 10px rgba(103,46,138,.05);

    overflow:hidden;
    transition: transform .35s ease, opacity .35s ease, color .35s ease, background-color .35s ease, background-image .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* Garis aksen premium */
#promo-neon-section .promo-urgency::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        #9d4edd,
        #d18cff
    );
}

/* Glow lembut */
#promo-neon-section .promo-urgency::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-60px;
    top:-80px;

    background:radial-gradient(
        rgba(122,43,182,.12),
        transparent 70%
    );

    pointer-events:none;
}

#promo-neon-section .promo-urgency:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 40px rgba(103,46,138,.12),
        0 6px 16px rgba(103,46,138,.08);
}

/* ========================= */

#promo-neon-section .promo-urgency-info{
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:left;
    position:relative;
    z-index:2;
}

#promo-neon-section .promo-urgency-date{
    display:inline-flex;
    align-items:center;
    gap:6px;

    font-size:11.5px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;

    color:var(--primary);
}

/* ========================= */

#promo-neon-section .promo-urgency-deadline{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    gap:4px;

    padding-left:18px;

    border-left:1px solid rgba(103,46,138,.18);

    text-align:right;
    white-space:nowrap;
}

      #promo-neon-section .promo-deadline-label {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.8px;
      }

      #promo-neon-section .promo-deadline-date {
        font-size: 13.5px;
        font-weight: 800;
        color: var(--primary-dark);
      }

      #promo-neon-section .promo-cta-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
      }

/* 1. Modifikasi Base Button */
#promo-neon-section .promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  font-family: inherit;
  transition: transform 0.25s ease, opacity 0.25s ease, color 0.25s ease, background-color 0.25s ease, background-image 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  /* Tambahan Wajib untuk Efek Kilau */
  position: relative; 
  overflow: hidden; 
}

/* 2. Update Button Primary dengan Efek Denyut (Pulse) */
#promo-neon-section .promo-btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
  /* Animasi denyut neon gold/purple berjalan terus-menerus */
  animation: neonPulse 2.5s infinite; 
}

#promo-neon-section .promo-btn-primary:hover {
  transform: translateY(-2px);
  /* Saat di-hover, efek denyut berhenti dan shadow membesar */
  animation: none; 
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5), 0 0 15px var(--primary);
}

/* 3. Membuat Elemen Cahaya Kilau (Shine) */
#promo-neon-section .promo-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  /* Gradien putih transparan untuk efek cahaya */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  /* Animasi kilau berjalan 4 detik sekali */
  animation: shineSweep 2s infinite; 
}

/* 4. Keyframes untuk Animasi */

/* Efek Kilau Lewat */
@keyframes shineSweep {
  0% { left: -100%; }
  15% { left: 200%; } /* Bergerak cepat ke kanan */
  100% { left: 200%; } /* Jeda diam sebelum mengulang */
}

/* Efek Denyut Psikologis */
@keyframes neonPulse {
  0% { 
    box-shadow: 0 0 5px var(--primary-dark), 0 0 0px rgba(255, 215, 0, 0); 
    transform: scale(1); 
  }
  50% { 
    /* Menggunakan sentuhan warna gold (#FFD700) yang membaur dengan neon */
    box-shadow: 0 0 15px var(--primary), 0 0 10px rgba(255, 215, 0, 0.4); 
    transform: scale(1.02); /* Membesar sedikit seolah bernapas */
  }
  100% { 
    box-shadow: 0 0 5px var(--primary-dark), 0 0 0px rgba(255, 215, 0, 0); 
    transform: scale(1); 
  }
}

/* (Sisa CSS kamu biarkan sama) */
#promo-neon-section .promo-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
  gap: 10px;
}

#promo-neon-section .promo-btn-outline {
  border: 1.5px solid rgba(103, 46, 138, 0.3);
  background: #ffffff;
  color: var(--primary-dark);
}

#promo-neon-section .promo-btn-outline:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

      #promo-neon-section .promo-visual-col {
        display: none;
      }

      #promo-neon-section .promo-visual-img {
        display: block;
        width: 100%;
        max-width: 340px;
        height: auto;
        margin: 0 auto;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
      }

      /* ── Fitur 3 Kolom ── */
      #promo-neon-section .promo-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 800px;
        margin: 30px auto 40px;
      }

      #promo-neon-section .promo-feature-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding: 10px 15px;
        transition: transform 0.3s ease;
      }

      #promo-neon-section .promo-feature-card:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 15%;
        right: -15px;
        width: 1px;
        height: 70%;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(103, 46, 138, 0.2),
          transparent
        );
      }

      #promo-neon-section .promo-feature-card:hover {
        transform: translateY(-4px);
      }

      #promo-neon-section .promo-feature-badge {
        display: block;
        margin-bottom: 12px;
        color: var(--primary);
        font-size: 2.6rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -1px;
        font-variant-numeric: tabular-nums;
      }

      #promo-neon-section .promo-feature-title {
        color: var(--text-dark);
        font-size: 16px;
        font-weight: 800;
        margin: 0 0 6px 0;
      }

      #promo-neon-section .promo-feature-desc {
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 500;
        margin: 0;
        line-height: 1.4;
      }

      @media (max-width: 640px) {
        #promo-neon-section .promo-features {
          grid-template-columns: repeat(3, 1fr);
          gap: 6px;
          margin-top: 6px;
          margin-bottom: 20px;
          padding: 0 4px;
          max-width: 100%;
        }

        #promo-neon-section .promo-feature-card {
          padding: 8px 2px;
        }

        #promo-neon-section .promo-feature-card:not(:last-child)::after {
          display: block;
          right: -4px;
          top: 15%;
          height: 70%;
          opacity: 0.7;
        }

        #promo-neon-section .promo-feature-badge {
          font-size: 1.5rem;
          margin-bottom: 6px;
          letter-spacing: -0.5px;
        }

        #promo-neon-section .promo-feature-title {
          font-size: 12.5px;
          font-weight: 800;
          margin-bottom: 4px;
          line-height: 1.25;
        }

        #promo-neon-section .promo-feature-desc {
          font-size: 11.5px;
          line-height: 1.3;
          max-width: 100%;
        }
      }

/* ==========================================================================
   PROMO NEON SECTION - DEEP ROYAL VIOLET THEME & DESKTOP GRID
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MAIN CONTAINER (Ungu Gelap Elegan + Ambient Neon Glow)
   -------------------------------------------------------------------------- */
#promo-neon-section .promo-pkg-wrapper {
  position: relative;
  padding: 28px 20px 26px;
  /* Gradient Ungu Gelap Mewah */
  background: radial-gradient(circle at 50% -20%, #3b1568 0%, #1b0a33 55%, #100520 100%);
  /* Panel ini SELALU selebar layar penuh (diukur: tepi kiri 0 di semua ukuran).
     Sudut membulat pada elemen yang menyentuh tepi layar selalu terlihat
     janggal karena lengkungnya tidak punya latar untuk bersandar. Karena itu
     dibuat petak, dan garis tepi kiri-kanan dibuang karena berada tepat di
     tepi layar. Yang tersisa: garis tipis atas-bawah sebagai pembatas band. */
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  /* Bayangan hitam diperkuat di ATAS dan BAWAH — hanya dua sisi itu yang
     terlihat pada panel selebar layar. */
  box-shadow:
    0 -14px 30px -14px rgba(8, 2, 18, 0.6),
    0 26px 52px -12px rgba(8, 2, 18, 0.92),
    0 0 40px rgba(124, 58, 237, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

/* Background Ambient Glow di Bagian Atas Container */
#promo-neon-section .promo-pkg-wrapper::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.35) 0%, transparent 70%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. SCROLLING GRID (Mobile Scroll & Desktop Full Horizontal Layout)
   -------------------------------------------------------------------------- */
/* Mobile First: Horizontal Scroll */
#promo-neon-section .promo-pricing-grid {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
  padding: 12px 4px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Pengaturan yang sama persis dengan katalog di bawah, supaya rasanya sama:
     gulir diserahkan penuh ke peramban (ada momentum), berhenti rapi di tiap
     kartu, dan tidak menarik halaman ikut bergeser. */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#promo-neon-section .promo-pricing-grid::-webkit-scrollbar {
  display: none;
}

/* Ukuran Item di Mobile
   min-width:0 WAJIB. Tanpa itu kartu tidak boleh menyusut di bawah lebar
   isinya, sehingga kartu yang punya baris "100 Mbps -> 200 Mbps" melar
   sendiri dan lebarnya jadi berbeda-beda antar-kartu. */
#promo-neon-section .promo-pricing-grid > * {
  flex: 0 0 auto;
  width: 74%;
  max-width: 280px;
  min-width: 0;
  scroll-snap-align: start;
}

/* DESKTOP: tujuh paket dalam SATU baris.
   Baru diaktifkan mulai 1360px, karena di bawah itu 7 kolom akan membuat
   tiap kartu terlalu sempit untuk memuat harga. Di bawah 1360px kartunya
   tetap digeser ke samping seperti di HP. */
@media (min-width: 1360px) {
  #promo-neon-section .promo-pricing-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    overflow-x: visible;
    padding: 12px 0 16px;
    max-width: 1560px;
    margin-inline: auto;
  }

  #promo-neon-section .promo-pricing-grid > * {
    flex: initial;
    width: 100%;
    max-width: none;
  }

  /* Ukuran huruf ikut lebar layar supaya harga tetap muat satu baris
     dari 1360px sampai layar sangat lebar. */
  #promo-neon-section .promo-pricing-grid .promo-pricing-card { padding: 20px 13px 16px; }
  #promo-neon-section .promo-pricing-grid .promo-pricing-card h3 { font-size: 13px; letter-spacing: 0.6px; }
  #promo-neon-section .promo-pricing-grid .promo-pricing-price { font-size: clamp(20px, 1.45vw, 26px); }
  #promo-neon-section .promo-pricing-grid .promo-pricing-price span { font-size: 12px; }
  #promo-neon-section .promo-pricing-grid .promo-speed-new { font-size: clamp(16px, 1.15vw, 19px); }
  #promo-neon-section .promo-pricing-grid .promo-speed-old,
  #promo-neon-section .promo-pricing-grid .promo-speed-arrow { font-size: 11.5px; }
  #promo-neon-section .promo-pricing-grid .promo-pricing-note { font-size: 11.5px; min-height: 46px; }
  #promo-neon-section .promo-pricing-grid .promo-pricing-card .promo-btn { font-size: 13px; padding: 11px 6px; }
}

/* --------------------------------------------------------------------------
   3. GLASSMORPHISM CARDS (Kartu Ungu Transparan)
   -------------------------------------------------------------------------- */
#promo-neon-section .promo-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* height:100% membuat tinggi mengikuti isi sendiri (persen dari wadah
     ber-tinggi auto = auto). align-self:stretch yang menyamakan tingginya. */
  height: auto;
  align-self: stretch;
  padding: 24px 18px 18px;
  background: rgba(35, 16, 62, 0.45); /* Ungu transparan */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(192, 132, 252, 0.18);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-image 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover State - Kartu Mengambang & Glowing */
#promo-neon-section .promo-pricing-card:hover {
  transform: translateY(-8px);
  background: rgba(53, 24, 94, 0.65);
  border-color: rgba(216, 180, 254, 0.5);
  box-shadow: 
    0 16px 32px rgba(15, 4, 32, 0.6),
    0 0 25px rgba(168, 85, 247, 0.25);
  z-index: 2;
}

/* Neon Top Border Accent per Variasi Card */
#promo-neon-section .promo-pricing-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  border-radius: 0 0 8px 8px;
  opacity: 0.8;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, background-image 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

#promo-neon-section .promo-pricing-card:hover::before {
  left: 10%;
  right: 10%;
  opacity: 1;
  box-shadow: 0 2px 12px currentColor;
}

/* Color Accent Variants */
#promo-neon-section .promo-card--bootser::before { background: #60a5fa; color: #60a5fa; }
#promo-neon-section .promo-card--velo::before    { background: #2dd4bf; color: #2dd4bf; }
#promo-neon-section .promo-card--nexus::before   { background: #fbbf24; color: #fbbf24; }
#promo-neon-section .promo-card--prime::before   { background: #c084fc; color: #c084fc; }
#promo-neon-section .promo-card--wonder::before  { background: #fb7185; color: #fb7185; }
#promo-neon-section .promo-card--ultra::before   { background: #f472b6; color: #f472b6; }

/* Content Top Alignment */
#promo-neon-section .promo-card-top {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY & ELEMENTS
   -------------------------------------------------------------------------- */
#promo-neon-section .promo-pricing-card h3 {
  color: #f3e8ff; /* Soft lavender */
  font-size: 14px;
  font-weight: 800;
  /* text-transform: uppercase DIBUANG — ASM minta huruf depan saja yang kapital.
     Tanpa ini, teks "Sahabat" di kode tetap tampil "SAHABAT" di layar. */
  letter-spacing: 0.4px;
  margin: 0 0 12px;
}

#promo-neon-section .promo-pricing-speed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 5px;
  margin: 0 0 10px;
  min-height: 48px;
}

#promo-neon-section .promo-speed-old {
  color: #a9b4c4;
  font-size: 12.5px;
  text-decoration: line-through;
}

#promo-neon-section .promo-speed-arrow {
  color: #c084fc;
  font-size: 13px;
}

#promo-neon-section .promo-speed-new {
  color: #38bdf8; /* Cyan terang untuk highlight kecepatan */
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

#promo-neon-section .promo-pricing-price {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 6px;
}

#promo-neon-section .promo-pricing-price span {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

#promo-neon-section .promo-pricing-note {
  color: #b9a4fb; /* Light purple text */
  font-size: 12px;
  line-height: 1.45;
  min-height: 36px;
  margin: 0 0 16px;
}

/* --------------------------------------------------------------------------
   5. BUTTONS & TERMS LIST
   -------------------------------------------------------------------------- */
#promo-neon-section .promo-btn-block {
  width: 100%;
  margin-top: auto;
}

#promo-neon-section .promo-pricing-card .promo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 10px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(124, 58, 237, 0.4));
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid rgba(192, 132, 252, 0.4);
  border-radius: 10px;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, background-image 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

/* Button Hover State */
#promo-neon-section .promo-pricing-card:hover .promo-btn {
  background: linear-gradient(135deg, #9333ea, #c084fc);
  border-color: #e9d5ff;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

/* Terms & Conditions List */
#promo-neon-section .promo-terms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed rgba(192, 132, 252, 0.2);
  list-style: none;
}

#promo-neon-section .promo-terms-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #e2e8f0;
  font-size: 12.5px;
  line-height: 1.4;
}

#promo-neon-section .promo-terms-item svg {
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin-top: 1px;
  fill: #a855f7; /* Ungu terang untuk ikon check */
  filter: drop-shadow(0 0 3px rgba(168, 85, 247, 0.6));
}

/* Prevent Selection while Dragging/Swiping */
#promo-neon-section .promo-pricing-card,
#promo-neon-section .promo-pricing-card * {
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
}

      /* ── Scroll progress indicator ── */
      #promo-neon-section .promo-scroll-progress {
        display: flex;
        justify-content: center;
        margin-top: 6px;
        padding-bottom: 2px;
      }

      #promo-neon-section .promo-scroll-track {
        width: 100%;
        max-width: 240px;
        height: 6px;
        background: rgba(103, 46, 138, 0.14);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
      }

      #promo-neon-section .promo-scroll-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 30%;
        background: linear-gradient(90deg, #a855f7, var(--primary), var(--primary-dark));
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(124, 58, 237, 0.55);
        transition: left 0.08s linear, width 0.25s ease;
        will-change: left, width;
      }


      /* ── Desktop overrides for promo section ── */
      @media (min-width: 1024px) {
        #promo-neon-section .promo-body {
          padding-top: 36px;
          padding-bottom: 40px;
        }

        #promo-neon-section .promo-hero-grid {
          grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
          gap: 64px;
        }

        #promo-neon-section .promo-h1-main,
        #promo-neon-section .promo-eyebrow,
        #promo-neon-section .promo-heading,
        #promo-neon-section .promo-desc {
          text-align: left;
          margin-left: 0;
          margin-right: 0;
        }

        #promo-neon-section .promo-desc {
          max-width: 480px;
        }

        #promo-neon-section .promo-info-col {
          align-items: flex-start;
        }

        #promo-neon-section .promo-badges {
          grid-template-columns: 1fr 1fr;
          max-width: 100%;
          align-items: stretch;
        }

        #promo-neon-section .promo-urgency {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }

        #promo-neon-section .promo-urgency-deadline {
          text-align: left;
          border-left: none;
          padding-left: 0;
          border-top: 1px solid rgba(103, 46, 138, 0.2);
          padding-top: 8px;
          width: 100%;
        }

        #promo-neon-section .promo-cta-group {
          max-width: 100%;
        }

        #promo-neon-section .promo-visual-col {
          display: flex;
          justify-content: flex-end;
          align-items: flex-start;
          position: relative;
          transform: translate(30px, -100px);
        }

        #promo-neon-section .promo-visual-img,
        #promo-neon-section .promo-visual-col img {
          display: block;
          width: 100%;
          max-width: 480px;
          height: auto;
          max-height: 480px;
          object-fit: contain;
          object-position: top right;
        }

        #promo-neon-section .promo-features {
          margin-top: 36px;
        }

        #promo-neon-section .promo-pricing-inner {
          padding-top: 20px;
        }

        #promo-neon-section .promo-heading-center {
          text-align: center !important;
          margin-left: auto !important;
          margin-right: auto !important;
        }

        #promo-neon-section .promo-pricing-grid {
          gap: 14px;
          overflow-x: auto;
          cursor: default;
          align-items: stretch;
        }
        #promo-neon-section .promo-pricing-grid > * {
          max-width: none;
        }
        #promo-neon-section .promo-pkg-wrapper {
          padding: 28px 20px 22px;
        }
      }

      /* 1024-1359px saja: kartu masih digeser ke samping, lebarnya dipatok
         supaya seragam. Di atas 1359px yang berlaku adalah kisi 7 kolom. */
      @media (min-width: 1024px) and (max-width: 1359.98px) {
        #promo-neon-section .promo-pricing-grid > * {
          flex: 0 0 212px;
          width: 212px;
        }
      }

      /* =========================================
           NB NEW SECTIONS
           ========================================= */
      #nb-new-sections * {
        box-sizing: border-box;
      }
      #nb-new-sections {
        --nb-primary: var(--primary, #672e8a);
        --nb-primary-dark: var(--primary-dark, #4d2267);
        --nb-primary-light: var(--primary-light, #f5f3ff);
        --nb-text-dark: var(--text-dark, #0f172a);
        --nb-text-muted: var(--text-muted, #252a34);
        --nb-gold: #caa63d;
        --nb-gold-light: #f4e9c9;
        font-family: "Inter", sans-serif;
        color: var(--nb-text-dark);
      }
      #nb-new-sections .nb-container {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px;
      }
      #nb-new-sections .nb-eyebrow {
        display: inline-block;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--nb-primary);
        background: var(--nb-primary-light);
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 14px;
      }
      #nb-new-sections h2.nb-title {
        font-size: clamp(24px, 4vw, 36px);
        font-weight: 700;
        line-height: 1.25;
        margin: 0 0 12px;
        color: var(--nb-text-dark);
      }
      #nb-new-sections h2.nb-title .nb-accent {
        color: var(--nb-primary);
      }
      #nb-new-sections p.nb-subtitle {
        font-size: 15.5px;
        color: var(--nb-text-muted);
        line-height: 1.7;
        max-width: 780px;
        margin: 0 0 32px;
      }


      /* =================================================================
           KENAPA PILIH MYREP — Timeline Showcase
           Semua selector di-scope di bawah #myrep-why-section.
           Zero conflict: variabel CSS di-override hanya di dalam section ini.
           ================================================================= */
      /* ─── Scoped CSS Variables (overrides global :root inside section) ─── */
      #myrep-why-section {
        --primary: #4A0665;
        --primary-hover: #37044c;
        --primary-glow: rgba(74, 6, 101, 0.25);
        --primary-soft: rgba(74, 6, 101, 0.05);
        --primary-border: rgba(74, 6, 101, 0.15);
        --bg-pure-white: #ffffff;
        --text-heading: #13011a;
        --text-body: #473a4d;
        --badge-green: #10b981;
        --shadow-card: 0 12px 30px -8px rgba(74,6,101,0.08), 0 4px 10px -4px rgba(0,0,0,0.03);
        --shadow-card-hover: 0 22px 45px -10px rgba(74,6,101,0.18), 0 8px 20px -6px rgba(0,0,0,0.04);
        --shadow-node: 0 0 0 6px rgba(74,6,101,0.12), 0 8px 20px rgba(74,6,101,0.35);
        --shadow-node-hover: 0 0 0 8px rgba(74,6,101,0.2), 0 12px 25px rgba(74,6,101,0.5);
        --node-size: 46px;
        --timeline-width: 3px;
      }

      /* =========================================================
         1. CORE VARIABLES & STRICT BRAND PALETTE
         ========================================================= */

      /* Reset & Base */

      /* =========================================================
         2. SECTION HEADER (FUTURISTIC & CLEAN)
         ========================================================= */
      #myrep-why-section {
          padding: 64px 6%;
          max-width: 1280px;
          margin: 0 auto;
          position: relative;
          background: var(--bg-pure-white);
      }


      #myrep-why-section .section-header {
          text-align: center;
          margin-bottom: 56px;
          position: relative;
      }


      #myrep-why-section .section-header h2 {
          font-size: 40px;
          font-weight: 800;
          color: var(--text-heading);
          letter-spacing: -1px;
          display: inline-block;
          position: relative;
          padding-bottom: 16px;
      }


      #myrep-why-section .section-header h2 span {
          color: var(--primary);
      }


      /* Glowing Futuristic Underline */
      #myrep-why-section .section-header h2::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 4px;
          background: var(--primary);
          border-radius: 2px;
          box-shadow: 0 2px 12px var(--primary-glow);
      }


      /* =========================================================
         3. TIMELINE STRUCTURE & GLOWING LINE
         ========================================================= */
      #myrep-why-section .timeline-container {
          position: relative;
          width: 100%;
      }


      /* Central Glowing Timeline Line */
      #myrep-why-section .timeline-container::before {
          content: '';
          position: absolute;
          top: 20px;
          bottom: 20px;
          left: 50%;
          width: var(--timeline-width);
          background: linear-gradient(180deg, 
              rgba(74, 6, 101, 0) 0%, 
              var(--primary) 15%, 
              var(--primary) 85%, 
              rgba(74, 6, 101, 0) 100%);
          transform: translateX(-50%);
          box-shadow: 0 0 15px var(--primary-glow);
          z-index: 1;
      }


      #myrep-why-section .timeline-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-bottom: 56px;
          position: relative;
          z-index: 2;
      }


      #myrep-why-section .timeline-row:last-child {
          margin-bottom: 0;
      }


      /* =========================================================
         4. PREMIUM NODES WITH MICRO-ANIMATIONS
         ========================================================= */
      #myrep-why-section .timeline-node {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: 3;
          display: flex;
          align-items: center;
          justify-content: center;
      }


      /* Node Badge (#02, #03, #04) */
      #myrep-why-section .node-badge {
          background: var(--primary);
          color: #ffffff;
          padding: 8px 18px;
          border-radius: 30px;
          font-weight: 700;
          font-size: 14px;
          letter-spacing: 0.5px;
          border: 3px solid var(--bg-pure-white);
          box-shadow: var(--shadow-node);
          transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-image 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
          position: relative;
      }


      #myrep-why-section .node-badge::after {
          content: '\f00c';
          font-family: 'Font Awesome 6 Free';
          font-weight: 900;
          position: absolute;
          top: -6px;
          right: -6px;
          width: 20px;
          height: 20px;
          background: var(--badge-green);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
          color: white;
          border: 2px solid var(--bg-pure-white);
          box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      }


      #myrep-why-section .timeline-row:hover .node-badge {
          transform: scale(1.1);
          background: var(--primary-hover);
          box-shadow: var(--shadow-node-hover);
      }


      /* =========================================================
         5. CONTENT & FUTURISTIC VISUAL CARDS
         ========================================================= */
      #myrep-why-section .timeline-content, #myrep-why-section .timeline-visual {
          width: 44%;
          position: relative;
      }


      /* Row Alternation */
      #myrep-why-section .timeline-row:nth-child(even) .timeline-content {
          order: 2;
          text-align: left;
      }

      #myrep-why-section .timeline-row:nth-child(even) .timeline-visual {
          order: 1;
      }

      #myrep-why-section .timeline-row:nth-child(odd) .timeline-content {
          text-align: right;
      }


      /* Typography Inside Box */
      #myrep-why-section .content-box {
          padding: 10px 20px;
      }


      #myrep-why-section .content-box h3 {
          font-size: 24px;
          font-weight: 700;
          color: var(--primary);
          margin: 0 0 12px 0;
          letter-spacing: -0.5px;
          line-height: 1.3;
      }


      #myrep-why-section .content-box p {
          font-size: 15.5px;
          color: var(--text-body);
          margin: 0;
      }


      #myrep-why-section .content-box p strong {
          color: var(--text-heading);
          font-weight: 700;
      }


      /* Image / UI Placeholder Container */
      #myrep-why-section .image-wrapper {
          background: var(--bg-pure-white);
          border-radius: 20px;
          overflow: hidden;
          box-shadow: var(--shadow-card);
          border: 1px solid var(--primary-border);
          transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), color 0.5s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.5s cubic-bezier(0.23, 1, 0.32, 1), background-image 0.5s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
          position: relative;
      }


      #myrep-why-section .image-wrapper:hover {
          transform: translateY(-6px);
          box-shadow: var(--shadow-card-hover);
          border-color: var(--primary);
      }

      /* Perbandingan 3:2 — sama dengan gambar buatan ASM (1536 x 1024),
         jadi tidak ada bagian gambar yang terpotong. */
      #myrep-why-section .img-foto {
          aspect-ratio: 3 / 2;
          background: radial-gradient(circle at center, var(--primary-soft) 0%, var(--bg-pure-white) 100%);
      }

      #myrep-why-section .foto-alasan {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          z-index: 1;
      }

      /* Tampil hanya bila berkas gambarnya belum ada. */
      #myrep-why-section .foto-cadangan {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px;
          text-align: center;
          font-size: 13px;
          font-weight: 600;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          color: var(--primary);
          opacity: 0.55;
      }


      /* =========================================================
         6. MICRO-ANIMATIONS (@KEYFRAMES)
         ========================================================= */
      @keyframes myrep-pulse-glow {
          0% { box-shadow: 0 0 0 0 rgba(74, 6, 101, 0.4), var(--shadow-node); }
          70% { box-shadow: 0 0 0 12px rgba(74, 6, 101, 0), var(--shadow-node); }
          100% { box-shadow: 0 0 0 0 rgba(74, 6, 101, 0), var(--shadow-node); }
      }

      /* =========================================================
         7. ULTRA-RESPONSIVE MOBILE ENGINE (90% USER PRIORITY)
         ========================================================= */
      
      /* TABLET (< 992px) */
      @media (max-width: 992px) {

          #myrep-why-section { padding: 52px 4%; }

          #myrep-why-section .section-header h2 { font-size: 32px; }

          #myrep-why-section .content-box h3 { font-size: 20px; }

          #myrep-why-section .content-box p { font-size: 14.5px; }

      
}

      /* MOBILE (< 768px) - PERFECT VERTICAL FLOW */
      @media (max-width: 768px) {

          #myrep-why-section {
              padding: 40px 20px;
          }

          
          #myrep-why-section .section-header {
              margin-bottom: 40px;
          }


          #myrep-why-section .section-header h2 {
              font-size: 28px;
          }


          /* Shift Timeline Line to Left */
          #myrep-why-section .timeline-container::before {
              left: 20px;
              top: 10px;
              bottom: 10px;
          }


          /* Stack Row Elements Vertically */
          #myrep-why-section .timeline-row {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              padding-left: 52px; /* Precision space for node + margin */
              margin-bottom: 40px;
          }


          /* Anchor Node Exactly to the Left Line */
          #myrep-why-section .timeline-node {
              left: 20px;
              top: 24px; /* Perfectly aligned with the top of the image card */
              transform: translate(-50%, 0);
          }


          /* Force Consistent Reading Flow: Visual Top, Text Bottom */
          #myrep-why-section .timeline-row .timeline-visual, #myrep-why-section .timeline-row:nth-child(even) .timeline-visual {
              order: 1 !important;
              width: 100%;
              margin-bottom: 12px;
          }


          #myrep-why-section .timeline-row .timeline-content, #myrep-why-section .timeline-row:nth-child(even) .timeline-content {
              order: 2 !important;
              width: 100%;
              text-align: left !important;
          }


          #myrep-why-section .content-box {
              padding: 0; /* Remove horizontal padding on mobile for full width */
          }


          #myrep-why-section .content-box h3 {
              font-size: 20px;
              margin-bottom: 8px;
          }


          #myrep-why-section .content-box p {
              font-size: 14px;
              line-height: 1.6;
          }


          #myrep-why-section .node-badge {
              padding: 6px 12px;
              font-size: 12px;
          }


          #myrep-why-section .node-badge::after {
              width: 16px;
              height: 16px;
              font-size: 8px;
              top: -4px;
              right: -4px;
          }


          #myrep-why-section .image-wrapper {
              border-radius: 16px;
          }

      
}

      /* SMALL MOBILE (< 360px) - ULTRA COMPACT */
      @media (max-width: 360px) {

          #myrep-why-section { padding: 32px 14px; }

          #myrep-why-section .timeline-row { padding-left: 44px; margin-bottom: 32px; }

          #myrep-why-section .timeline-container::before { left: 16px; }

          #myrep-why-section .timeline-node { left: 16px; }

          #myrep-why-section .section-header h2 { font-size: 24px; }

          #myrep-why-section .content-box h3 { font-size: 18px; }

          #myrep-why-section .content-box p { font-size: 13.5px; }

      
}
  

      /* ── Seksi 2: Area Jangkauan Pemasangan ── */
      #nb-coverage-area {
        padding: 48px 0;
        background: #fafafa;
      }
      #nb-coverage-area .nb-district-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
      }
      @media (min-width: 640px) {
        #nb-coverage-area .nb-district-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      #nb-coverage-area .nb-district-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #ffffff;
        border: 1px solid rgba(103, 46, 138, 0.14);
        border-radius: 999px;
        padding: 12px 16px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--nb-text-dark);
        box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.15);
      }
      #nb-coverage-area .nb-district-pill i {
        color: #16a34a;
        font-size: 14px;
        flex: none;
      }
      #nb-coverage-area .nb-closing-text {
        font-size: 14.5px;
        line-height: 1.8;
        color: var(--nb-text-muted);
        max-width: 820px;
        margin: 0 0 32px;
      }
      #nb-coverage-area .nb-cta-check {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        background: var(--nb-primary);
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        border: none;
        border-radius: 999px;
        padding: 14px 28px;
        cursor: pointer;
        transition: var(--transition-bounce, all 0.4s ease);
        box-shadow: 0 14px 30px -10px rgba(103, 46, 138, 0.55);
        animation: nb-pulse-cta 2.6s ease-in-out infinite;
      }
      #nb-coverage-area .nb-cta-check:hover {
        transform: scale(1.05);
      }
      #nb-coverage-area .nb-cta-check:focus-visible {
        outline: 3px solid var(--nb-primary-dark);
        outline-offset: 3px;
      }
      @keyframes nb-pulse-cta {
        0%,
        100% {
          box-shadow: 0 14px 30px -10px rgba(103, 46, 138, 0.55);
        }
        50% {
          box-shadow: 0 14px 34px -6px rgba(103, 46, 138, 0.85);
        }
      }

      /* ── Seksi 3: Cara Berlangganan ── */
      #nb-subscribe-steps {
        position: relative;
        padding: 56px 0;
        overflow: hidden;
        background: linear-gradient(180deg, #faf8fd 0%, #f3eefa 100%);
      }
      #nb-subscribe-steps::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -100px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--nb-primary-light) 0%, transparent 70%);
        pointer-events: none;
      }
      #nb-subscribe-steps::after {
        content: "";
        position: absolute;
        bottom: -140px;
        left: -110px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--nb-primary-light) 0%, transparent 70%);
        opacity: 0.7;
        pointer-events: none;
      }
      #nb-subscribe-steps .nb-glass-panel {
        position: relative;
        background: transparent;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        padding: 0;
      }
      #nb-subscribe-steps .nb-eyebrow {
        background: var(--nb-primary-light);
        color: var(--nb-primary-dark);
        display: table;
        margin-left: auto;
        margin-right: auto;
      }
      #nb-subscribe-steps h2.nb-title,
      #nb-subscribe-steps p.nb-subtitle {
        color: var(--nb-text-dark);
        text-align: center;
      }
      #nb-subscribe-steps h2.nb-title {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
      }
      #nb-subscribe-steps h2.nb-title .nb-accent {
        color: var(--nb-primary);
      }
      #nb-subscribe-steps p.nb-subtitle {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        color: var(--nb-text-muted);
        opacity: 1;
      }
      #nb-subscribe-steps ol.nb-steps-track {
        list-style: none;
        margin: 28px 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px;
        overflow: visible;
      }
      @media (min-width: 900px) {
        #nb-subscribe-steps ol.nb-steps-track {
          grid-template-columns: repeat(3, 1fr);
          align-items: stretch;
        }
      }
      #nb-subscribe-steps ol.nb-steps-track > li {
        position: relative;
        flex: none;
        background: #ffffff;
        border-radius: 24px;
        padding: 36px 30px 30px;
        box-shadow: 0 16px 40px -20px rgba(45, 18, 74, 0.25);
        border: 1px solid rgba(103, 46, 138, 0.08);
        display: flex;
        flex-direction: column;
        transition: var(--transition-smooth, all 0.3s ease);
      }
      #nb-subscribe-steps ol.nb-steps-track > li:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 48px -20px rgba(45, 18, 74, 0.32);
      }
      #nb-subscribe-steps .nb-step-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;
        background: linear-gradient(135deg, var(--nb-primary), var(--nb-primary-dark));
        box-shadow: 0 10px 22px -8px rgba(103, 46, 138, 0.55);
        margin-bottom: 14px;
      }
      #nb-subscribe-steps .nb-step-number {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--nb-primary);
        background: var(--nb-primary-light);
        display: inline-block;
        padding: 4px 12px;
        border-radius: 999px;
        margin-bottom: 10px;
      }
      #nb-subscribe-steps .nb-step-title {
        font-size: 19px;
        font-weight: 700;
        margin: 0 0 12px;
        color: var(--nb-text-dark);
      }
      #nb-subscribe-steps .nb-step-desc {
        font-size: 14.5px;
        line-height: 1.75;
        color: var(--nb-text-muted);
        margin: 0 0 24px;
        flex: 1;
      }
      #nb-subscribe-steps .nb-step-cta {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        background: var(--nb-primary-light);
        color: var(--nb-primary-dark);
        font-weight: 600;
        font-size: 14px;
        border: none;
        border-radius: 14px;
        padding: 12px 18px;
        text-decoration: none;
        transition: var(--transition-smooth, all 0.3s ease);
      }
      #nb-subscribe-steps .nb-step-cta:hover {
        background: var(--nb-primary);
        color: #fff;
      }

      /* ── Seksi 4: Syarat & Cara Pasang Internet ── */
      #nb-install-terms {
        padding: 48px 0;
        background: #ffffff;
      }
      #nb-install-terms .nb-terms-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
      }
      @media (min-width: 960px) {
        #nb-install-terms .nb-terms-grid {
          grid-template-columns: 1.3fr 1fr;
          gap: 48px;
        }
      }
      #nb-install-terms .nb-terms-list {
        list-style: none;
        margin: 0 0 22px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      #nb-install-terms .nb-terms-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 14.5px;
        line-height: 1.7;
        color: var(--nb-text-muted);
      }
      #nb-install-terms .nb-terms-list i {
        flex: none;
        margin-top: 3px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #dcfce7;
        color: #16a34a;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #nb-install-terms .nb-closing-text {
        font-size: 14.5px;
        line-height: 1.8;
        color: var(--nb-text-muted);
        margin: 0;
      }
      #nb-install-terms .nb-cta-panel {
        display: flex;
        flex-direction: column;
        gap: 14px;
        background: var(--nb-primary-light);
        border-radius: 24px;
        padding: 32px 26px;
      }
      #nb-install-terms .nb-cta-solid,
      #nb-install-terms .nb-cta-outline {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 48px;
        border-radius: 14px;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        transition: var(--transition-smooth, all 0.3s ease);
      }
      #nb-install-terms .nb-cta-solid {
        background: var(--nb-primary);
        color: #fff;
        border: 2px solid var(--nb-primary);
      }
      #nb-install-terms .nb-cta-solid:hover {
        background: var(--nb-primary-dark);
        border-color: var(--nb-primary-dark);
      }
      #nb-install-terms .nb-cta-outline {
        background: transparent;
        color: #16a34a;
        border: 2px solid #16a34a;
      }
      #nb-install-terms .nb-cta-outline:hover {
        background: #16a34a;
        color: #fff;
      }

      #nb-new-sections *:focus-visible {
        outline: 3px solid var(--nb-primary);
        outline-offset: 2px;
      }


      /* =========================================
           TAMBAHAN ELEMEN — PAKET KATALOG & PEMBAYARAN
           (CSS di-scope dengan prefix pkcat- agar tidak bentrok)
           ========================================= */

      /* --- GAYA ELEMEN UMUM --- */
      .pkcat-wrapper {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: var(--pkcat-bg);
        padding: 44px 16px 48px;
        display: flex;
        justify-content: center;
        color: var(--pkcat-text-main);
        box-sizing: border-box;
        overflow: hidden;
      }
    
      .pkcat-wrapper * {
        box-sizing: border-box;
      }

      .pkcat-container {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
      }

      /* --- HEADER --- */
      .pkcat-header {
        text-align: center;
        margin-bottom: 32px;
        animation: pkcat-fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      .pkcat-header h2 {
        font-family: var(--pkcat-font-display);
        font-size: clamp(1.65rem, 5.2vw, 2.6rem);
        font-weight: 800;
        line-height: 1.18;
        margin: 0 0 14px;
        color: var(--pkcat-text-main);
        letter-spacing: -0.03em;
      }
      .pkcat-header p {
        font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
        color: var(--pkcat-ink-soft);
        max-width: 620px;
        margin: 0 auto;
        line-height: 1.65;
      }

        /* --- TAB: satu baris yang bisa digeser, bukan menumpuk 3 baris --- */

      /* Keempat tab harus terlihat sekaligus — tidak ada yang tersembunyi
         di balik geseran. Di layar sempit disusun 2x2; mulai 760px cukup
         satu baris. Yang boleh digeser hanya kartunya. */
      .pkcat-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 24px;
        padding: 0;
        overflow: visible;
      }

      .pkcat-tab {
        flex: 0 0 auto;
        min-height: 46px;
        padding: 11px 12px;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid var(--pkcat-border);
        color: var(--pkcat-ink-soft);
        font-family: inherit;
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 1.25;
        white-space: normal;
        cursor: pointer;
        transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
      }

      .pkcat-tab:hover:not(.active) {
        color: var(--pkcat-accent-main);
        border-color: rgba(122, 43, 153, 0.35);
      }

      .pkcat-tab.active {
        color: #ffffff;
        background: var(--pkcat-accent-grad);
        border-color: transparent;
        box-shadow: 0 8px 20px -10px var(--pkcat-accent-shadow);
      }

      @media (min-width: 760px) {
        .pkcat-tabs {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 10px;
          margin: 0 0 30px;
        }
      

        .pkcat-tab {
          padding: 11px 22px;
          border-radius: 999px;
          font-size: 0.9375rem;
          white-space: nowrap;
        }
      }

      .pkcat-tab:focus-visible {
        outline: 3px solid rgba(122, 43, 153, .45);
        outline-offset: 2px;
      }

          /* --- PANEL --- */
          .pkcat-panel {
        display: none;
          }
          .pkcat-panel.active {
        display: block;
        animation: pkcat-fadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
          }

          /* --- JALUR GESER SAMPING ---
             Memakai scroll-snap bawaan peramban: tidak ada transform,
             tidak ada tinggi yang dipatok, tidak perlu JavaScript untuk
             menggesernya. Kartu berhenti rapi di tiap batas. */
          .pkcat-carousel-wrapper {
        position: relative;
        height: auto;
        display: block;
        perspective: none;
        overflow: visible;
        margin-bottom: 0;
          }
          .pkcat-carousel {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        align-items: stretch;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        transform: none !important;
        transform-style: flat;
        padding: 6px 0 16px;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
          }
          .pkcat-carousel::-webkit-scrollbar {
        display: none;
          }

          /* --- INDIKATOR GESER --- */
          .pkcat-scroll-progress {
        display: flex;
        justify-content: center;
        margin-top: 2px;
          }
          .pkcat-scroll-track {
        position: relative;
        width: 100%;
        max-width: 220px;
        height: 5px;
        border-radius: 10px;
        background: rgba(81, 29, 102, 0.12);
        overflow: hidden;
          }
          .pkcat-scroll-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 30%;
        border-radius: 10px;
        background: var(--pkcat-accent-grad);
        transition: left .08s linear, width .25s ease;
        will-change: left, width;
          }
          .pkcat-tanpa-geser .pkcat-scroll-progress,
          .pkcat-tanpa-geser .pkcat-scroll-hint {
        display: none;
          }
          .pkcat-scroll-hint {
        display: block;
        margin-top: 10px;
        text-align: center;
        font-size: 0.75rem;
        color: var(--pkcat-text-muted);
          }

          /* --- KARTU --- */
          .pkcat-card {
        position: relative;
        flex: 0 0 84%;
        max-width: 330px;
        height: auto;
        scroll-snap-align: start;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto;
        cursor: default;
        display: flex;
        flex-direction: column;
        background: var(--pkcat-card-bg);
        border: 1px solid var(--pkcat-border);
        border-radius: 18px;
        box-shadow: var(--pkcat-shadow-card);
        overflow: hidden;
        transition: box-shadow .26s ease, border-color .26s ease;
          }
          @media (min-width: 620px) {
        .pkcat-carousel { gap: 20px; }
          

        .pkcat-card { flex: 0 0 46%; max-width: 360px; }
          }
          @media (min-width: 1024px) {
        .pkcat-card { flex: 0 0 31.2%; max-width: none; }
          }
          @media (min-width: 1440px) {
        .pkcat-scroll-hint { display: none; }
          

        .pkcat-card { flex: 0 0 23.2%; }
          }
          .pkcat-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        z-index: 2;
        background: var(--pkcat-accent-grad);
          }
          @media (hover: hover) {
        .quick-menu-item:hover {
          color: var(--primary);
          background: rgba(103, 46, 138, 0.05);
          transform: translateY(-2px);
        }
        .quick-menu-item:active {
          transform: scale(0.95) translateY(0);
        }
      

        .pkcat-card:hover {
          border-color: rgba(122, 43, 153, 0.30);
          box-shadow: 0 2px 4px rgba(27,16,51,.05), 0 18px 36px -18px rgba(81,29,102,.30);
        }
          }

          /* --- GAMBAR KARTU ---
             Kalau berkas gambarnya belum ada, yang tampil adalah lapisan
             gradasi di belakangnya. Begitu berkasnya dimasukkan ke folder
             assets/images/paket/, gambarnya langsung muncul tanpa mengubah
             kode sama sekali. */
          .pkcat-figure {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        flex-shrink: 0;
        background: linear-gradient(135deg, #3B0A52 0%, #6D28D9 55%, #A855F7 100%);
          }
          .pkcat-figure-fallback {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 12px;
        text-align: center;
        color: #ffffff;
          }
          .pkcat-ph-nama {
        font-family: var(--pkcat-font-display);
        font-size: 1.0625rem;
        font-weight: 800;
        letter-spacing: 0.3px;
        line-height: 1.2;
          }
          .pkcat-ph-speed {
        font-size: 0.8125rem;
        font-weight: 600;
        opacity: 0.88;
          }
          .pkcat-banner {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
          }

          /* Kartu tanpa gambar (Add On): beri ruang atas sedikit lebih lega
             supaya garis aksen di puncak kartu tidak menempel ke judul. */
          .pkcat-card > .pkcat-card-body:first-child {
        padding-top: 28px;
          }

          /* --- ISI KARTU --- */
          .pkcat-card-body {
        padding: 24px 20px 20px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
          }

          .pkcat-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
          }

          .pkcat-pkg-name {
        font-family: var(--pkcat-font-display);
        font-size: 1.3125rem;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -0.02em;
        text-align: left;
        margin: 0;
        color: var(--pkcat-text-main);
          }

          .pkcat-chip {
        flex-shrink: 0;
        margin-top: 2px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(122, 43, 153, 0.08);
        color: var(--pkcat-accent-light);
        font-size: 0.71875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
          }

          .pkcat-speed-box {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 0;
        text-align: left;
          }
          .pkcat-speed {
        font-family: var(--pkcat-font-display);
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--pkcat-accent-main);
          }
          .pkcat-speed-old {
        text-decoration: line-through;
        color: var(--pkcat-text-muted);
        font-size: 0.9375rem;
        font-weight: 500;
          }

          .pkcat-price-box {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px dashed var(--pkcat-border);
        text-align: left;
        margin-bottom: 0;
          }
          .pkcat-price {
        font-family: var(--pkcat-font-display);
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.025em;
        color: var(--pkcat-text-main);
        display: block;
        line-height: 1.05;
          }
          .pkcat-tax-note {
        font-size: 0.8125rem;
        line-height: 1.5;
        color: var(--pkcat-text-muted);
        display: block;
        margin-top: 7px;
          }

         /* --- TOMBOL --- */
          .pkcat-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
          }
          /* daftar fitur memanjang mengisi sisa ruang supaya tinggi kartu
             sama rata dan tombol tidak melompat-lompat antar-kartu */
          .pkcat-card-body > .pkcat-features {
        flex-grow: 1;
          }
          .pkcat-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
        border-radius: 12px;
        font-family: inherit;
        font-weight: 700;
        font-size: 0.9375rem;
        letter-spacing: 0.005em;
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
        outline: none;
        border: 1px solid transparent;
        text-decoration: none;
        box-sizing: border-box;
          }
          .pkcat-btn:focus-visible {
        outline: 3px solid rgba(122, 43, 153, .45);
        outline-offset: 2px;
          }
          .pkcat-btn-primary {
        background: var(--pkcat-accent-grad);
        color: #ffffff;
        margin-bottom: 0;
        box-shadow: 0 8px 18px -8px var(--pkcat-accent-shadow);
          }
          .pkcat-btn-primary:hover, .pkcat-btn-primary:focus {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -10px var(--pkcat-accent-shadow);
          }
          .pkcat-btn-secondary {
        background: #ffffff;
        color: var(--pkcat-accent-main);
        border-color: var(--pkcat-border);
          }
          .pkcat-btn-secondary:hover, .pkcat-btn-secondary:focus {
        border-color: var(--pkcat-accent-light);
        background: #fdfaff;
          }

          /* --- FITUR (selalu terlihat) --- */
          .pkcat-features {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--pkcat-border);
          }
          .pkcat-features-title {
        margin: 0 0 12px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: var(--pkcat-text-muted);
          }
          .pkcat-features-content {
        max-height: none;
        overflow: visible;
          }
          .pkcat-benefit-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 9px;
          }
          .pkcat-benefit-item {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 0.875rem;
        color: var(--pkcat-ink-soft);
        line-height: 1.5;
          }

          /* --- IKON CENTANG DAFTAR FITUR --- */
          .pkcat-tick {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(122, 43, 153, 0.10);
        color: var(--pkcat-accent-light);
          }
          .pkcat-tick svg {
        width: 11px;
        height: 11px;
          }

          /* --- PROMO TEXT & PREMIUM GLASS CTA --- */
          .pkcat-promo-info-section {
        text-align: center;
        margin: 48px auto 26px auto;
        padding: 0;
        max-width: 780px;
        animation: pkcat-fadeUp 0.8s ease forwards;
          }
          .pkcat-promo-info-section h3 {
        font-size: clamp(1.6rem, 4.5vw, 2.35rem);
        font-weight: 800;
        color: var(--pkcat-accent-main);
        margin: 0 0 16px 0;
        letter-spacing: -0.02em;
        line-height: 1.3;
          }
          .pkcat-promo-info-section p {
        font-size: clamp(0.95rem, 2.2vw, 1.0625rem);
        color: var(--pkcat-ink-soft);
        line-height: 1.62;
        font-weight: 500;
        margin: 0;
        text-wrap: pretty;
          }
          .pkcat-cta-premium-section {
        background: linear-gradient(135deg, #1d072a 0%, #3a124d 50%, #511d66 100%);
        padding: 48px 24px;
        border-radius: var(--pkcat-radius-lg);
        margin: 0 auto 50px auto;
        max-width: 950px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 20px 45px rgba(81, 29, 102, 0.25);
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(122, 43, 153, 0.3);
        animation: pkcat-fadeUp 1s ease forwards;
          }
          .pkcat-cta-premium-section::before {
        content: '';
        position: absolute; top: -50%; left: -20%; width: 300px; height: 300px;
        background: rgba(122, 43, 153, 0.35); filter: blur(70px); border-radius: 50%; pointer-events: none;
          }
          .pkcat-cta-premium-section::after {
        content: '';
        position: absolute; bottom: -50%; right: -20%; width: 300px; height: 300px;
        background: rgba(81, 29, 102, 0.4); filter: blur(70px); border-radius: 50%; pointer-events: none;
          }
          .pkcat-glass-btn-center {
        display: inline-flex; align-items: center; justify-content: center; text-align: center;
        padding: 20px 42px; font-size: clamp(0.95rem, 2.5vw, 1.25rem); font-weight: 800; color: #ffffff;
        background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 99px; cursor: pointer; text-decoration: none;
        letter-spacing: 0.01em; line-height: 1.4; max-width: 100%; width: auto; position: relative; overflow: hidden;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.2);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-image 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1); animation: pkcat-btn-pulse 2.5s infinite ease-in-out;
          }
          .pkcat-glass-btn-center::before {
        content: ''; position: absolute; top: 0; left: -150%; width: 60%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
        transform: skewX(-25deg); animation: pkcat-glass-reflected-shimmer 3.5s infinite linear;
          }
          @keyframes pkcat-glass-reflected-shimmer {
        0% { left: -150%; } 100% { left: 150%; }
          }
          @keyframes pkcat-btn-pulse {
        0% { box-shadow: 0 8px 32px 0 rgba(122, 43, 153, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.2); transform: scale(1); }
        50% { box-shadow: 0 12px 40px 6px rgba(122, 43, 153, 0.55), inset 0 2px 6px rgba(255, 255, 255, 0.35); transform: scale(1.02); }
        100% { box-shadow: 0 8px 32px 0 rgba(122, 43, 153, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.2); transform: scale(1); }
          }
          .pkcat-glass-btn-center:hover {
        background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 15px 45px 0 rgba(122, 43, 153, 0.65), inset 0 2px 8px rgba(255, 255, 255, 0.45);
        animation-play-state: paused; transform: translateY(-4px) scale(1.04); color: #fff;
          }
          .pkcat-glass-btn-center:active {
        transform: translateY(-1px) scale(0.98); background: rgba(255, 255, 255, 0.15);
          }

          /* --- ANIMATIONS --- */
          @keyframes pkcat-fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
          @keyframes pkcat-fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

      /* =========================================
           CARA PEMBAYARAN (pay-)
           Dulu berupa satu gambar PNG 1.407 KB berukuran 1417x736. Di HP
           gambar itu mengecil jadi 26,5% sehingga seluruh tulisannya tidak
           terbaca, dan isinya tidak bisa dibaca Google sama sekali.
           Sekarang disusun ulang sebagai teks + CSS: 0 KB gambar, terbaca
           di layar sekecil apa pun, dan terbaca mesin pencari.
           ========================================= */
      .pay-section {
        width: 100vw;
        position: relative;
        left: 50%;
        margin-left: -50vw;
        padding: 44px 0 40px;
        background:
          radial-gradient(120% 90% at 12% 0%, #ffffff 0%, rgba(255,255,255,0) 55%),
          radial-gradient(120% 90% at 88% 100%, #ffffff 0%, rgba(255,255,255,0) 55%),
          linear-gradient(135deg, #f6f0fa 0%, #efe6f5 45%, #f7f2fb 100%);
        border-top: 1px solid rgba(201, 162, 39, 0.28);
        border-bottom: 1px solid rgba(201, 162, 39, 0.28);
        overflow: hidden;
      }

      .pay-container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 18px;
      }

      .pay-head { text-align: center; margin-bottom: 26px; }

      .pay-eyebrow {
        display: block;
        font-family: var(--pkcat-font-display);
        font-style: italic;
        font-weight: 700;
        font-size: 15px;
        color: #4e1f63;
        margin-bottom: 8px;
        letter-spacing: 0.2px;
      }

      .pay-section h2 {
        font-family: var(--pkcat-font-display);
        font-size: clamp(21px, 3.6vw, 34px);
        line-height: 1.22;
        font-weight: 800;
        color: #6b2d80;
        margin: 0 auto 10px;
        max-width: 20ch;
      }

      .pay-sub {
        max-width: 62ch;
        margin: 0 auto;
        font-size: 14px;
        line-height: 1.65;
        color: #4a4060;
      }

      .pay-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
        align-items: start;
      }

      .pay-card {
        background: #ffffff;
        border: 1px solid rgba(201, 162, 39, 0.45);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(27, 16, 51, 0.05), 0 10px 26px -18px rgba(78, 31, 99, 0.45);
      }

      .pay-card-head {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
        padding: 11px 10px;
        background: linear-gradient(135deg, #7a3391 0%, #4e1f63 100%);
        color: #ffffff;
        font-family: var(--pkcat-font-display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }

      .pay-card-head svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .pay-list { list-style: none; margin: 0; padding: 4px 10px 10px; }

      .pay-list li {
        padding: 11px 4px;
        border-bottom: 1px solid #eee6f2;
        font-size: 14px;
        font-weight: 700;
        color: #2f2440;
        text-align: center;
        line-height: 1.3;
      }
      .pay-list li:last-child { border-bottom: 0; }

      .pay-list li span {
        display: block;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.3px;
        color: #8a80a0;
        text-transform: uppercase;
        margin-top: 2px;
      }

      .pay-note {
        margin: 24px auto 0;
        max-width: 70ch;
        text-align: center;
        font-size: 12.5px;
        font-style: italic;
        color: #6b6280;
        padding-top: 16px;
        border-top: 1px solid rgba(201, 162, 39, 0.35);
      }

      @media (max-width: 1023.98px) {
        .pay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      }
  
        /* ================================================================
           §9. FOOTER — Design Tokens & Component Styles
               Scoped to #ft-wrapper; all selectors use ft- prefix to
               prevent conflicts with the site-wide styles above.
        ================================================================ */
        /* ----------------------------------------------------------------
         DESIGN TOKENS — scoped ke #ft-wrapper, tidak bocor ke global
         ---------------------------------------------------------------- */
        #ft-wrapper {
        --ft-bg-dark:        #0a0314;
        --ft-bg-main:        #140626;
        --ft-bg-surface:     #1f0b38;

        --ft-purple-accent:  #7c3aed;
        --ft-purple-light:   #a78bfa;
        --ft-purple-glow:    rgba(124, 58, 237, 0.25);

        --ft-white-pure:     #ffffff;
        --ft-white-badge:    rgba(255, 255, 255, 0.96);

        --ft-text-heading:   #ffffff;
        --ft-text-body:      rgba(255, 255, 255, 0.82);
        --ft-text-muted:     rgba(255, 255, 255, 0.58);

        --ft-border-subtle:    rgba(255, 255, 255, 0.08);
        --ft-border-highlight: rgba(255, 255, 255, 0.16);

        --ft-font-heading: 'Plus Jakarta Sans', sans-serif;
        --ft-font-body:    'Inter', sans-serif;

        --ft-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
        /* Ditulis panjang. Penulisan "all" memaksa peramban membandingkan
     SELURUH sifat CSS setiap kali ada satu yang berubah. Variabel ini
     terlewat waktu pembersihan pertama karena awalannya --ft-, bukan
     --transition-. Ia dipakai kartu penghargaan, lencana ISO, dan tombol
     sosial di footer — ada di sepuluh halaman. */
  --ft-transition-fast:  transform 0.2s var(--ft-ease-out), opacity 0.2s var(--ft-ease-out), color 0.2s var(--ft-ease-out), background-color 0.2s var(--ft-ease-out), background-image 0.2s var(--ft-ease-out), border-color 0.2s var(--ft-ease-out), box-shadow 0.2s var(--ft-ease-out), filter 0.2s var(--ft-ease-out);
        --ft-transition-normal: transform 0.3s var(--ft-ease-out), opacity 0.3s var(--ft-ease-out), color 0.3s var(--ft-ease-out), background-color 0.3s var(--ft-ease-out), background-image 0.3s var(--ft-ease-out), border-color 0.3s var(--ft-ease-out), box-shadow 0.3s var(--ft-ease-out), filter 0.3s var(--ft-ease-out);
        }

        /* ----------------------------------------------------------------
         SCOPED RESETS (hanya dalam footer wrapper)
         ---------------------------------------------------------------- */
        #ft-wrapper *,
        #ft-wrapper *::before,
        #ft-wrapper *::after {
        box-sizing: border-box;
        }

        #ft-wrapper a {
        color: inherit;
        text-decoration: none;
        }

        #ft-wrapper ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }

        #ft-wrapper img,
        #ft-wrapper svg {
        display: block;
        max-width: 100%;
        }

        /* ----------------------------------------------------------------
         UTILITY
         ---------------------------------------------------------------- */
        .ft-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
        }

        .ft-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        }

        /* ----------------------------------------------------------------
         PRE-FOOTER CTA BAR
         ---------------------------------------------------------------- */
        .ft-cta-bar {
        width: 100%;
        padding: 50px 0;
        margin-top: 0;
        margin-bottom: 0;
        background: linear-gradient(
          180deg,
          #ffffff 0%,
          #21093b 20%,
          #130424 50%,
          #21093b 80%,
          #ffffff 100%
        );
        position: relative;
        z-index: 10;
        overflow: hidden;
        box-shadow:
          0 -15px 30px rgba(0, 0, 0, 0.08),
          0 15px 30px rgba(0, 0, 0, 0.08),
          inset 0 0 40px rgba(124, 58, 237, 0.10);
        }

        .ft-cta-bar::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 85%;
        height: 140%;
        background: radial-gradient(
          ellipse at center,
          rgba(168, 85, 247, 0.32) 0%,
          rgba(124, 58, 237, 0.12) 45%,
          transparent 75%
        );
        pointer-events: none;
        filter: blur(15px);
        }

        .ft-cta-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        position: relative;
        z-index: 2;
        }

        /* ---- CTA Buttons ---- */
        .ft-cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 13px 28px;
        border-radius: 50px;
        font-family: var(--ft-font-heading);
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition:
          transform 0.35s cubic-bezier(.16,1,.3,1),
          box-shadow 0.35s ease,
          background 0.35s ease,
          border-color 0.35s ease;
        animation: ftCtaPulse 2.5s infinite ease-in-out;
        box-shadow:
          0 8px 25px rgba(124,58,237,.35),
          inset 0 1px 0 rgba(255,255,255,.25);
        }

        .ft-cta-btn svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        }

        .ft-cta-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -120%;
        width: 70%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
        transform: skewX(-25deg);
        animation: ftCtaShine 4s infinite;
        }

        .ft-cta-btn:hover {
        transform: translateY(-4px) scale(1.03);
        box-shadow:
          0 15px 35px rgba(124,58,237,.55),
          0 0 25px rgba(168,85,247,.45),
          inset 0 1px 0 rgba(255,255,255,.4);
        }

        .ft-cta-btn:active {
        transform: scale(.96);
        }

        /* PRIMARY — gradient cerah fuchsia→violet agar kontras maksimal di bg gelap */
        .ft-cta-primary {
        /* Dulu magenta terang dengan cahaya 75% — di luar palet merek dan
           menusuk mata. Sekarang memakai ungu MyRepublic. */
        background: linear-gradient(135deg, #8b3fb8 0%, #6d28a8 55%, #4d2267 100%);
        color: #ffffff;
        border: 1px solid rgba(255,255,255,.30);
        box-shadow:
          0 6px 20px rgba(77, 34, 103, .55),
          inset 0 1px 0 rgba(255,255,255,.22);
        text-shadow: none;
        }

        .ft-cta-primary:hover {
        background: linear-gradient(135deg, #fde7ff 0%, #e879f9 35%, #9333ea 100%);
        }

        /* SECONDARY — glass semi-opaque dengan aura ungu agar tidak tenggelam */
        .ft-cta-secondary {
        background: rgba(255, 255, 255, .10);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #ffffff;
        border: 1px solid rgba(255,255,255,.32);
        box-shadow:
          0 4px 14px rgba(0, 0, 0, .30),
          inset 0 1px 0 rgba(255,255,255,.25);
        text-shadow: 0 1px 4px rgba(0,0,0,.4);
        }

        .ft-cta-secondary:hover {
        background: rgba(192, 132, 252, .35);
        border-color: rgba(255,255,255,.75);
        box-shadow:
          0 0 28px rgba(168, 85, 247, .7),
          0 15px 35px rgba(0,0,0,.35),
          inset 0 1px 0 rgba(255,255,255,.3);
        }

        @keyframes ftCtaPulse {
        0%, 100% {
          box-shadow:
            0 0 18px rgba(192, 38, 211, .55),
            0 8px 25px rgba(124,58,237,.5),
            inset 0 1px 0 rgba(255,255,255,.3);
        }
        50% {
          box-shadow:
            0 0 32px rgba(232, 121, 249, .8),
            0 12px 38px rgba(124,58,237,.75),
            0 0 50px rgba(168,85,247,.35),
            inset 0 1px 0 rgba(255,255,255,.45);
        }
        }

        @keyframes ftCtaShine {
        0% { left: -120%; }
        20%, 100% { left: 130%; }
        }

        /* ----------------------------------------------------------------
         MAIN FOOTER
         ---------------------------------------------------------------- */
        .ft-site-footer {
        background: linear-gradient(180deg, var(--ft-bg-dark) 0%, var(--ft-bg-main) 50%, #0c0418 100%);
        color: var(--ft-text-muted);
        padding-top: 36px;
        padding-bottom: 16px;
        position: relative;
        overflow: hidden;
        font-family: var(--ft-font-body);
        -webkit-font-smoothing: antialiased;
        line-height: 1.5;
        }

        .ft-site-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        height: 220px;
        background: radial-gradient(ellipse at top, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
        pointer-events: none;
        }

        /* ---- Footer Grid ---- */
        .ft-footer-grid {
        display: grid;
        grid-template-columns: 2.2fr 1fr 1fr 1fr;
        gap: 36px;
        padding-bottom: 24px;
        position: relative;
        z-index: 1;
        }

        .ft-footer-brand .ft-logo {
        margin-bottom: 14px;
        }

        .ft-footer-brand .ft-logo img {
        height: 38px;
        width: auto;
        object-fit: contain;
        }

        .ft-footer-brand .ft-brand-desc {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--ft-text-muted);
        margin-bottom: 10px;
        max-width: 360px;
        font-weight: 400;
        }

        .ft-footer-contact {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 13px;
        }

        .ft-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: var(--ft-text-body);
        }

        .ft-contact-item svg {
        width: 16px;
        height: 16px;
        color: var(--ft-purple-light);
        flex-shrink: 0;
        margin-top: 2px;
        }

        .ft-contact-item a {
        color: var(--ft-text-heading);
        font-weight: 500;
        transition: var(--ft-transition-fast);
        }

        .ft-contact-item a:hover {
        color: var(--ft-purple-light);
        text-decoration: underline;
        }

        /* ---- Social Buttons ---- */
        .ft-footer-social {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        }

        .ft-social-btn {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--ft-border-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ft-text-body);
        transition: var(--ft-transition-normal);
        }

        .ft-social-btn svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
        }

        .ft-social-btn:hover {
        background: var(--ft-purple-accent);
        border-color: var(--ft-purple-accent);
        color: var(--ft-white-pure);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--ft-purple-glow);
        }

        /* ---- Footer Nav Columns ---- */
        .ft-footer-col-title {
        font-family: var(--ft-font-heading);
        font-weight: 700;
        color: var(--ft-text-heading);
        margin-bottom: 10px;
        margin-top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
        font-size: 12.5px;
        letter-spacing: 0.06em;
        }

        .ft-footer-col-title .ft-accordion-icon {
        display: none;
        width: 16px;
        height: 16px;
        transition: transform 0.3s var(--ft-ease-out);
        color: var(--ft-text-muted);
        }

        .ft-footer-nav-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
        margin: 0;
        }

        .ft-footer-nav-list a {
        font-size: 13.5px;
        color: var(--ft-text-muted);
        transition: var(--ft-transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        }

        .ft-footer-nav-list a::before {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--ft-purple-light);
        opacity: 0;
        transform: scale(0);
        transition: var(--ft-transition-fast);
        flex-shrink: 0;
        }

        .ft-footer-nav-list a:hover {
        color: var(--ft-white-pure);
        transform: translateX(3px);
        }

        .ft-footer-nav-list a:hover::before {
        opacity: 1;
        transform: scale(1);
        }

        /* ---- Awards & Certifications ---- */
        .ft-footer-awards {
        border-top: 1px solid var(--ft-border-subtle);
        padding: 28px 0;
        position: relative;
        z-index: 1;
        }

        .ft-awards-group {
        margin-bottom: 12px;
        }

        .ft-awards-group:last-child {
        margin-bottom: 0;
        }

        .ft-awards-header {
        font-family: var(--ft-font-heading);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ft-purple-light);
        margin-bottom: 12px;
        margin-top: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        }

        .ft-awards-header::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--ft-border-subtle);
        }

        .ft-awards-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        }

        .ft-award-card {
        background-color: var(--ft-white-badge);
        height: 39px;
        padding: 4px 10px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: var(--ft-transition-fast);
        border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .ft-award-card img {
        max-height: 28px;
        width: auto;
        object-fit: contain;
        filter: contrast(1.02);
        }

        .ft-award-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.2);
        }

        .ft-iso-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        }

        .ft-iso-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--ft-white-badge);
        padding: 4px 12px 4px 6px;
        border-radius: 20px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: var(--ft-transition-fast);
        border: 1px solid rgba(255, 255, 255, 0.4);
        }

        .ft-iso-pill img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        border-radius: 50%;
        }

        .ft-iso-pill span {
        font-family: var(--ft-font-heading);
        font-size: 11.5px;
        font-weight: 700;
        color: #120324;
        letter-spacing: 0.01em;
        }

        .ft-iso-pill:hover {
        transform: translateY(-2px);
        background: #ffffff;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25);
        }

        /* ---- Footer Bottom Bar ---- */
        .ft-footer-bottom {
        border-top: 1px solid var(--ft-border-subtle);
        padding-top: 14px;
        font-size: 12.5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        color: var(--ft-text-muted);
        }

        .ft-fb-partner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1px;
        }

        .ft-fb-partner-label {
        font-size: 12px;
        font-weight: 500;
        color: var(--ft-text-muted);
        white-space: nowrap;
        }

        .ft-fb-partner img {
        display: block;
        height: 60px;
        width: auto;
        transition: var(--ft-transition-fast);
        }

        .ft-fb-partner img:hover {
        transform: scale(1.05);
        }

        .ft-fb-credit span {
        font-family: var(--ft-font-heading);
        font-weight: 600;
        color: var(--ft-white-pure);
        }

        .ft-fb-identitas {
        font-size: 12px;
        line-height: 1.65;
        max-width: 760px;
        margin: 0 auto 10px;
        text-align: center;
        color: rgba(255, 255, 255, 0.72);
        }

        .ft-fb-identitas a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
        }

        .ft-fb-copyright {
        font-size: 12px;
        }

        /* ----------------------------------------------------------------
         RESPONSIVE
         ---------------------------------------------------------------- */
        @media (max-width: 992px) {
        .ft-footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 32px;
          padding-bottom: 20px;
        }
        .ft-footer-brand {
          grid-column: span 2;
        }
        }

        @media (max-width: 640px) {
        .ft-cta-bar {
          padding: 36px 0;
        }

        .ft-cta-container {
          flex-direction: row;
          flex-wrap: nowrap;
          gap: 8px;
          padding: 0 12px;
          justify-content: space-between;
        }

        .ft-cta-btn {
          flex: 1 1 0;
          min-width: 0;
          min-height: 46px;
          padding: 12px 6px;
          font-size: 12.5px;
          letter-spacing: 0.01em;
          border-radius: 30px;
          gap: 5px;
          box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
        }

        .ft-cta-btn svg {
          width: 15px;
          height: 15px;
        }

        .ft-site-footer {
          padding-top: 28px;
        }

        .ft-footer-grid {
          grid-template-columns: 1fr;
          gap: 0;
          padding-bottom: 14px;
        }

        .ft-footer-brand {
          grid-column: span 1;
          padding-bottom: 14px;
          border-bottom: 1px solid var(--ft-border-subtle);
          margin-bottom: 12px;
        }

        .ft-footer-col {
          border-bottom: 1px solid var(--ft-border-subtle);
        }

        .ft-footer-col-title {
          cursor: pointer;
          padding: 14px 0;
          margin-bottom: 0;
          user-select: none;
        }

        .ft-footer-col-title .ft-accordion-icon {
          display: block;
        }

        .ft-footer-nav-list {
          max-height: 0;
          overflow: hidden;
          opacity: 0;
          transition: transform 0.35s var(--ft-ease-out), opacity 0.35s var(--ft-ease-out), color 0.35s var(--ft-ease-out), background-color 0.35s var(--ft-ease-out), background-image 0.35s var(--ft-ease-out), border-color 0.35s var(--ft-ease-out), box-shadow 0.35s var(--ft-ease-out), filter 0.35s var(--ft-ease-out);
          gap: 8px;
          padding-bottom: 0;
        }

        .ft-footer-col.ft-is-open .ft-footer-col-title .ft-accordion-icon {
          transform: rotate(180deg);
          color: var(--ft-purple-light);
        }

        .ft-footer-col.ft-is-open .ft-footer-nav-list {
          max-height: 260px;
          opacity: 1;
          padding-bottom: 12px;
        }

        .ft-awards-grid .ft-award-card {
          height: 36px;
          padding: 4px 9px;
        }

        .ft-awards-grid .ft-award-card img {
          max-height: 30px;
        }

        .ft-iso-pill {
          padding: 3px 10px 3px 5px;
        }

        .ft-iso-pill img {
          width: 20px;
          height: 20px;
        }

        .ft-iso-pill span {
          font-size: 11px;
        }

        .ft-footer-bottom {
          flex-direction: column;
          text-align: center;
          gap: 12px;
        }
        }

        @media (max-width: 380px) {
        .ft-cta-container {
          gap: 5px;
          padding: 0 8px;
        }

        .ft-cta-btn {
          min-height: 46px;
          padding: 10px 4px;
          font-size: 11.5px;
          gap: 4px;
        }

        .ft-cta-btn svg {
          width: 13px;
          height: 13px;
        }
        }

        /* =========================================
           ACCESSIBILITY ENHANCEMENTS
           Button resets + touch targets + keyboard-focus dropdown
           ========================================= */

      /* Reset button style for nav dropdown trigger to look like nav-item */
      button.nav-dropdown-toggle {
        background: none;
        border: none;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        cursor: pointer;
        width: auto;
        padding: 0;
      }

      /* Reset button style for drawer-item button */
      button.drawer-item {
        width: 100%;
        text-align: left;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        cursor: pointer;
      }

      /* Show desktop nav dropdown when keyboard-expanded via aria-expanded */
      .nav-item-dropdown:has(.nav-dropdown-toggle[aria-expanded="true"]) .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0) scale(1);
        transition:
          opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
          visibility 0s linear 0s;
      }
      .nav-item-dropdown:has(.nav-dropdown-toggle[aria-expanded="true"]) .nav-dropdown-toggle {
        color: var(--primary);
        background-color: var(--primary-light);
      }
      .nav-item-dropdown:has(.nav-dropdown-toggle[aria-expanded="true"]) .nav-dropdown-toggle i.fa-chevron-down {
        transform: rotate(180deg);
      }

      /* Touch target expansion for mobile icon buttons (invisible hit area) */
      .mobile-actions-wrapper .mobile-icon-btn {
        position: relative;
      }
      .mobile-actions-wrapper .mobile-icon-btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 48px;
        min-height: 48px;
        width: calc(100% + 12px);
        height: calc(100% + 12px);
      }

      /* Focus-visible ring for keyboard navigation */
      .nav-dropdown-toggle:focus-visible,
      button.drawer-item:focus-visible,
      .ft-footer-col-title:focus-visible,
      .mobile-icon-btn:focus-visible,
      .mobile-btn-text:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        border-radius: 4px;
      }

        /* =========================================
           GLOBAL — PREFERS-REDUCED-MOTION
           Menghormati preferensi aksesibilitas OS pengguna.
           ========================================= */
      @media (prefers-reduced-motion: reduce) {
        #nb-new-sections *,
        #nb-new-sections *::before,
        #nb-new-sections *::after {
          animation-duration: 0.001ms !important;
          transition-duration: 0.001ms !important;
        }
      

        *,
        *::before,
        *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
          scroll-behavior: auto !important;
        }
      }


      /* ==================================================================
         PERBAIKAN 13 Sep 2026 — dipasang di ujung berkas dengan sengaja,
         supaya menang urutan terhadap aturan lama yang kekuatannya sama.
         ================================================================== */

      /* --- 1. Teks tiga tombol di atas footer ---
         Aturan "#ft-wrapper a { color: inherit }" punya kekuatan lebih tinggi
         daripada ".ft-cta-primary { color: #fff }", jadi warna putihnya TIDAK
         PERNAH berlaku — tombolnya selalu mewarisi warna gelap dari induknya.
         Dulu tidak terlalu kelihatan karena latar tombolnya magenta terang;
         begitu latarnya diubah jadi ungu tua, teksnya jadi tidak terbaca.
         Diperbaiki dengan selector yang kekuatannya di atas aturan itu. */
      #ft-wrapper .ft-cta-btn,
      #ft-wrapper .ft-cta-btn svg {
        color: #ffffff;
      }

      /* --- 2. Jarak antar-bagian di layar kecil dirapatkan ---
         Sebelumnya jarak kosong antara dua bagian bisa mencapai 104px
         (mis. 48px bawah + 56px atas) — lebih dari 12% tinggi layar HP.
         Semua dirapatkan, tetapi tetap cukup untuk memisahkan bagian. */

      /* --- 3. Pita terang di bawah halaman ---
         Diuji dengan mewarnai sementara: pita itu ternyata latar elemen
         <html> (kanvas peramban), BUKAN bagian dari halaman. Footer sendiri
         sudah menyentuh dasar halaman tepat (selisih 0px). Kanvas terlihat
         di dua keadaan: di panel pratinjau yang jendelanya lebih tinggi
         daripada layar yang ditiru, dan di HP asli ketika digulir melewati
         ujung (efek pantul). Karena latar <body> berwarna nyaris putih
         (#f8fafc), yang muncul jadi pita terang.
         Diperbaiki dengan memberi <html> warna segelap footer. */
      /* <picture> dibuat "tembus pandang" bagi tata letak, supaya <img> di
         dalamnya tetap menjadi anak langsung dari kolom flex — persis seperti
         sebelum dibungkus. Tanpa ini, lebar kolom bisa bergeser. */
      .promo-visual-pic {
        display: contents;
      }

      /* --- Judul tidak lagi tertutup header saat melompat ---
         Header situs ini melayang (position: fixed) setinggi 56px di HP dan
         124px di komputer. Tanpa aturan ini, setiap lompatan ke suatu bagian
         membuat judulnya tersembunyi di balik header.
         Diberikan ke semua elemen ber-id supaya berlaku juga untuk lompatan
         yang dijalankan lewat JavaScript. */
      :root { --tinggi-header: 68px; }
      @media (min-width: 1024px) {
        #promo-neon-section .promo-scroll-track {
          max-width: 300px;
          height: 5px;
        }
      

        #nb-coverage-area .nb-district-grid {
          grid-template-columns: repeat(5, 1fr);
        }
      
 :root { --tinggi-header: 136px; } }
      [id] { scroll-margin-top: var(--tinggi-header); }

      /* --- Huruf dikembalikan setelah <h3>/<h4> diubah jadi <p> ---
         Aturan h1..h6 di atas memberi huruf Plus Jakarta Sans. Begitu tiga
         tulisan ini menjadi <p>, hurufnya jatuh ke Inter -> TAMPILAN BERUBAH.
         Diukur dan ketahuan, lalu dikembalikan persis seperti semula. */
      /* =========================================
           BAGIAN ISI TAMBAHAN (info-)
           Menjawab dua hal yang paling sering dicari orang menurut
           Search Console, tapi selama ini tidak ada jawabannya di halaman:
           soal HARGA/BIAYA, dan soal BANTUAN/PENGADUAN.
           ========================================= */
      .info-section {
        padding: 44px 18px 42px;
        background: #ffffff;
      }
      .info-section--abu { background: var(--pkcat-bg); }

      .info-container { max-width: 1120px; margin: 0 auto; }

      .info-eyebrow {
        display: block;
        text-align: center;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--pkcat-accent-light);
        margin-bottom: 10px;
      }

      .info-section h2 {
        text-align: center;
        font-family: var(--pkcat-font-display);
        font-size: clamp(21px, 3.4vw, 31px);
        line-height: 1.25;
        font-weight: 800;
        color: var(--pkcat-text-main);
        margin: 0 auto 12px;
        max-width: 24ch;
      }

      .info-lead {
        max-width: 68ch;
        margin: 0 auto 28px;
        text-align: center;
        font-size: 14.5px;
        line-height: 1.75;
        color: var(--pkcat-ink-soft);
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 14px;
      }

      .info-kartu {
        background: #ffffff;
        border: 1px solid var(--pkcat-border);
        border-radius: 16px;
        padding: 20px 18px;
        box-shadow: var(--pkcat-shadow-card);
      }
      .info-section--abu .info-kartu { background: #ffffff; }

      .info-kartu h3 {
        font-family: var(--pkcat-font-display);
        font-size: 16px;
        font-weight: 800;
        color: var(--pkcat-text-main);
        margin: 0 0 10px;
        display: flex;
        align-items: center;
        gap: 9px;
      }

      .info-kartu h3 .info-ikon {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border-radius: 9px;
        background: var(--pkcat-accent-grad);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }

      .info-nilai {
        display: block;
        font-family: var(--pkcat-font-display);
        font-size: 22px;
        font-weight: 800;
        color: var(--pkcat-accent-light);
        line-height: 1.2;
        margin-bottom: 4px;
      }
      .info-nilai small {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--pkcat-text-muted);
        letter-spacing: 0.2px;
        margin-top: 2px;
      }

      .info-kartu p {
        font-size: 13.5px;
        line-height: 1.7;
        color: var(--pkcat-ink-soft);
        margin: 0;
      }

      .info-kartu p + p { margin-top: 8px; }

      .info-daftar { list-style: none; margin: 0; padding: 0; }
      .info-daftar li {
        display: flex;
        gap: 9px;
        align-items: flex-start;
        font-size: 13.5px;
        line-height: 1.65;
        color: var(--pkcat-ink-soft);
        padding: 7px 0;
        border-bottom: 1px dashed var(--pkcat-border);
      }
      .info-daftar li:last-child { border-bottom: 0; }
      .info-daftar li strong { color: var(--pkcat-text-main); }
      .info-daftar li svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        margin-top: 3px;
        fill: none;
        stroke: var(--pkcat-accent-light);
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .info-catatan {
        margin: 22px auto 0;
        max-width: 74ch;
        text-align: center;
        font-size: 12.5px;
        line-height: 1.7;
        color: var(--pkcat-text-muted);
      }

      .info-aksi {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-top: 24px;
      }
      .info-aksi a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 22px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      .info-aksi a:active { transform: scale(0.97); }
      .info-aksi .info-btn-utama {
        background: var(--pkcat-accent-grad);
        color: #ffffff;
        box-shadow: 0 8px 22px -10px var(--pkcat-accent-shadow);
      }
      .info-aksi .info-btn-kedua {
        background: #ffffff;
        color: var(--pkcat-accent-main);
        border: 1.5px solid var(--pkcat-border);
      }

      /* --- Penanda paket terlaris --- */
      /* --- Ikon di dalam <i> ---
         Ditulis meniru cara Font Awesome sendiri menggambar ikon dalam
         bentuk SVG (tinggi 1em, lebar mengikuti bentuk, turun 0.125em dari
         garis dasar), supaya letak dan ukurannya sama persis seperti dulu. */
      i[class*="fa-"] {
        display: inline-block;
        font-style: normal;
        line-height: 1;
      }
      i[class*="fa-"] > svg {
        display: inline-block;
        height: 1em;
        width: auto;
        overflow: visible;
        vertical-align: -0.125em;
        fill: currentColor;
        box-sizing: content-box;
      }

      /* --- Tulisan tombol yang panjang ---
         Tombolnya inline-flex, jadi teksnya dibungkus <span> supaya aturan
         pemecah baris di bawah ini benar-benar berlaku.
         text-wrap: balance membuat peramban membagi kata jadi baris yang
         panjangnya seimbang, bukan menyisakan satu kata menggantung
         sendirian di baris terakhir. */
      .tombol-teks {
        display: block;
        line-height: 1.3;
        text-align: center;
        text-wrap: balance;
        text-wrap-style: balance;   /* nama baru untuk sifat yang sama */
      }

      @media (max-width: 640px) {
        /* Dua tombol bersebelahan tidak dibagi rata lagi:
           "Chat Sales" pendek, "Cek Jaringan di Lokasi Kamu" panjang. */
        #promo-neon-section .promo-cta-row {
          grid-template-columns: 0.82fr 1.18fr;
          gap: 8px;
        }
        /* ruang kiri-kanan dikurangi supaya tulisannya dapat tempat lebih */
        #promo-neon-section .promo-cta-row .promo-btn {
          padding-left: 10px;
          padding-right: 10px;
        }
        #promo-neon-section .promo-btn-primary {
          padding-top: 13px;
          padding-bottom: 13px;
        }
      }

      .pkg-terlaris {
        font-style: normal;
        line-height: 1;
      }

      .radar-modal-title,
      .radar-result-title,
      .pkcat-features-title {
        font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
      }

      html {
        background-color: #0b0418;
      }

      /* --- 4. Bagian paling bawah footer --- */
      .ft-fb-partner img {
        /* dulu 60px — diminta ASM sedikit lebih besar */
        height: 76px;
      }

      .ft-footer-bottom {
        /* jarak antar-baris dirapatkan: Part of -> Web Master -> keterangan
           identitas -> hak cipta. Dulu 16px, terasa berjauhan di HP. */
        gap: 10px;
        padding-top: 12px;
      }

      .ft-fb-identitas {
        margin-bottom: 4px;
      }

      @media (max-width: 640px) {
        /* Menempel di tepi bawah layar, bukan melayang di tengah. */
        .coverage-modal-overlay {
          align-items: flex-end;
          padding: 0;
        }
        .coverage-modal-card {
          /* Satu-satunya wadah gulir. JANGAN dibuat bersarang: saat kartu
             hasil dijadikan wadah gulir tersendiri, posisinya terseret
             naik-turun sendiri oleh animasi bayangan tombol (sudah diuji,
             0 -> 116px -> 0 berulang). Baris tombol dipertahankan selalu
             terlihat dengan position: sticky di bawah, bukan dengan
             memecah gulir. */
          width: 100%;
          max-width: none;
          /* bawah 0: jarak bawahnya diurus baris tombol yang menempel */
          padding: 18px 16px 0;
          border-radius: 22px 22px 0 0;
          overflow-x: hidden;
          max-height: 92vh;
          max-height: 92svh; /* svh: tidak melompat saat bilah alamat muncul */
        }
        .modal-close-btn {
          top: 14px;
          right: 14px;
          width: 34px;
          height: 34px;
        }
        .coverage-modal-header {
          gap: 12px;
          margin-bottom: 10px;
          /* 14px jarak tepi + 34px tombol + 4px sela = 52px */
          padding-right: 52px;
        }
        .header-icon-wrapper {
          width: 40px;
          height: 40px;
          font-size: 16px;
          border-radius: 10px;
        }
        .header-title-wrapper .radar-modal-title {
          font-size: 16px;
        }
        .header-title-wrapper p {
          font-size: 12px;
        }
        .map-container-frame {
          /* HP pendek (mis. 640px) dapat 166px, HP tinggi dapat 240px.
             Dulu dipatok 250px, membuat HP pendek jadi sesak. */
          height: 200px;
          height: clamp(160px, 26svh, 240px);
          margin-bottom: 10px;
        }
        .coverage-status-card {
          padding: 14px 16px;
          gap: 12px;
          margin-bottom: 14px;
        }
        .coverage-status-card [style*="display: grid"] {
          grid-template-columns: 1fr !important;
          gap: 6px !important;
        }
        .coverage-modal-actions {
          display: flex;
          flex-direction: column;
          gap: 10px;
          /* MENEMPEL di tepi bawah jendela: tombol Chat Sales / Langganan
             selalu terlihat, berapa pun panjang isi hasilnya. Dulu baris ini
             berada di luar layar (saya ukur: mulai di 790px pada layar
             812px) sehingga tidak pernah dilihat pengunjung HP. */
          position: sticky;
          bottom: 0;
          z-index: 6;
          /* ditarik melebar sampai tepi, lalu dikembalikan lewat padding,
             supaya isi yang lewat di belakangnya tertutup rapi */
          margin: 0 -16px;
          padding: 12px 16px 16px;
          background: rgba(255, 255, 255, 0.97);
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
          border-top: 1px solid rgba(15, 23, 42, 0.08);
        }
        /* bayangan lembut di atas baris tombol = tanda isinya masih bisa
           digulir; hilang sendiri kalau isinya memang sudah habis */
        .coverage-modal-actions::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 100%;
          height: 18px;
          pointer-events: none;
          background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0)
          );
        }
        .coverage-modal-actions.two-columns {
          display: flex;
          flex-direction: column;
        }
        .btn-modal-action {
          height: 44px;
          font-size: 13px;
          width: 100%;
        }
        .coverage-modal-actions .btn-back {
          order: 3;
        }
        .coverage-modal-actions .btn-whatsapp {
          order: 2;
        }
        .coverage-modal-actions .btn-register {
          order: 1;
        }
      

        .pkcat-cta-premium-section {
          padding: 12px 12px;
          margin-bottom: 16px;
          border-radius: 16px;
        }
        .pkcat-glass-btn-center {
          width: 100%;
          padding: 11px 14px;
          font-size: 0.9375rem;
          line-height: 1.28;
          border-radius: 999px;
          letter-spacing: 0;
          animation: none;
        }
        .pkcat-promo-info-section { margin-top: 30px; }
          

        .pay-section { padding: 34px 0 32px; }
        .pay-container { padding: 0 14px; }
        .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
        .pay-head { margin-bottom: 22px; }
        .pay-list li { font-size: 13px; padding: 10px 2px; }
        .pay-card-head { font-size: 12px; padding: 10px 8px; }
      

        #nb-subscribe-steps { padding-top: 34px; padding-bottom: 34px; }
        #nb-coverage-area   { padding-top: 34px; padding-bottom: 34px; }
        #nb-install-terms   { padding-top: 34px; padding-bottom: 34px; }

        section.pkcat-wrapper { padding-top: 34px; padding-bottom: 36px; }

        #myrep-why-section.myrep-section { padding-top: 32px; padding-bottom: 32px; }
        #myrep-why-section .section-header { margin-bottom: 26px; }
        #myrep-why-section .timeline-row { margin-bottom: 28px; }

        #promo-neon-section .promo-body { padding-bottom: 28px; }

        section.ft-cta-bar { padding-top: 24px; padding-bottom: 24px; }

        #nb-new-sections .nb-subtitle { margin-bottom: 22px; }
        #nb-new-sections .nb-closing-text { margin-bottom: 22px; }
        #nb-new-sections .nb-cta-panel { padding-top: 24px; padding-bottom: 24px; }

        .pkcat-header { margin-bottom: 24px; }
      

        .info-section { padding: 34px 14px 34px; }
        .info-lead { margin-bottom: 22px; }
        .info-grid { gap: 12px; }
        .info-kartu { padding: 17px 15px; }
        .info-aksi a { flex: 1 1 100%; }
      

        .ft-footer-bottom { gap: 8px; }
        .ft-site-footer { padding-bottom: 20px; }
      }


      /* ══════════ HORMATI SETELAN "KURANGI GERAK" ══════════
         Sebagian orang menyalakan "Reduce Motion" di setelan HP karena
         gerakan membuat mereka pusing atau mual. Untuk mereka, lacinya
         langsung muncul tanpa bergeser. */
      @media (prefers-reduced-motion: reduce) {
        .mobile-drawer,
        .mobile-overlay,
        .drawer-submenu-wrapper {
          transition-duration: 0.01ms !important;
        }
      }


      /* ═══════════════════════════════════════════════════════════════════
         BATAS SIFAT TRANSISI DI DALAM LACI
         ═══════════════════════════════════════════════════════════════════
         Diukur 18 Sep 2026: 57 dari 65 elemen di dalam laci memakai
         "transition: all" (warisan dari --transition-bounce / -smooth /
         -snap yang ketiganya diawali "all").

         "all" memaksa peramban membandingkan SELURUH sifat CSS yang bisa
         dianimasikan — ratusan — setiap kali ada satu saja yang berubah.
         Saat dropdown membuka, semua tombol di bawahnya bergeser, jadi 57
         elemen diperiksa ulang seluruh sifatnya, 60 kali per detik. Itulah
         sebab dropdown terasa berat padahal menggeser lacinya sudah halus.

         Di bawah ini daftarnya dipersempit ke enam sifat yang memang
         benar-benar berubah di dalam laci. Lama dan gaya geraknya tidak
         diubah, jadi tampilannya sama persis.

         .drawer-submenu-wrapper DIKECUALIKAN — dialah yang menganimasikan
         grid-template-rows. Kalau ikut dipersempit, dropdown akan membuka
         mendadak tanpa animasi.
         ═══════════════════════════════════════════════════════════════════ */
      .mobile-drawer,
      .mobile-drawer *:not(.drawer-submenu-wrapper),
      .mobile-drawer *::before,
      .mobile-drawer *::after {
        transition-property: transform, opacity, background-color, border-color, color, box-shadow !important;
      }


      /* ═══════════════════════════════════════════════════════════════════
         BUTIR DROPDOWN MELUNCUR MASUK
         ═══════════════════════════════════════════════════════════════════
         Pengganti animasi tinggi. Hanya "transform" dan "opacity" yang
         digerakkan — dua-duanya dikerjakan kartu grafis, tanpa menghitung
         ulang tata letak sama sekali. Jumlah yang digerakkan cuma tiga
         elemen kecil, bukan seluruh isi laci.

         Digilir 45 milidetik supaya terbaca sebagai gerakan mengalir, bukan
         tiga benda yang muncul berbarengan. */
      .drawer-submenu-item {
        opacity: 0;
        transform: translateY(-6px);
      }
      .drawer-dropdown.is-open .drawer-submenu-item {
        animation: drawer-sub-masuk 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
      }
      .drawer-dropdown.is-open .drawer-submenu-item:nth-child(2) { animation-delay: 45ms; }
      .drawer-dropdown.is-open .drawer-submenu-item:nth-child(3) { animation-delay: 90ms; }
      .drawer-dropdown.is-open .drawer-submenu-item:nth-child(4) { animation-delay: 135ms; }

      @keyframes drawer-sub-masuk {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* Yang mematikan gerakan di setelan HP-nya langsung melihat butirnya,
         tanpa meluncur. */
      @media (prefers-reduced-motion: reduce) {
        .drawer-submenu-item { opacity: 1; transform: none; }
        .drawer-dropdown.is-open .drawer-submenu-item { animation: none; }
      }


      /* ═══════════════════════════════════════════════════════════════════
         ANIMASI GULIR
         ═══════════════════════════════════════════════════════════════════
         Yang digerakkan HANYA transform dan opacity — keduanya dikerjakan
         kartu grafis tanpa menghitung ulang tata letak. Ini aturan A19,
         hasil pelajaran mahal dari menu laci.

         TIDAK memakai "will-change". Di sini ada 91 section; memberi
         will-change pada 91 elemen berarti meminta peramban menyiapkan 91
         lapisan terpisah di memori — itu justru membunuh HP kelas bawah.
         Peramban sudah pandai menangani transform dan opacity tanpa
         diberi tahu.

         Semua aturan di bawah diawali ".js-animasi", penanda yang HANYA
         dipasang JavaScript. Kalau JavaScript gagal dimuat, tidak ada satu
         pun yang tersembunyi.
         ═══════════════════════════════════════════════════════════════════ */

      /* keadaan awal: tersembunyi sedikit di bawah */
      .js-animasi [data-gulir] {
        opacity: 0;
        transform: translateY(26px);
      }

      /* PENGECUALIAN 1 — membesar halus. Untuk kelompok kartu harga:
         kartunya terasa "maju" ke arah pembaca, bukan sekadar naik. */
      .js-animasi [data-gulir="besar"] {
        transform: scale(0.965);
      }

      /* PENGECUALIAN 2 — masuk dari samping. Untuk bagian yang isinya
         didominasi satu gambar besar. */
      .js-animasi [data-gulir="kanan"] { transform: translateX(-30px); }
      .js-animasi [data-gulir="kiri"]  { transform: translateX(30px); }

      /* keadaan akhir — satu-satunya yang beranimasi */
      .js-animasi [data-gulir].tampil {
        opacity: 1;
        transform: none;
        transition:
          opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      /* Bagian yang sudah terlihat saat halaman dibuka tidak dianimasikan
         sama sekali — supaya isi paling atas muncul seketika. */
      .js-animasi [data-gulir="tidak"] {
        opacity: 1;
        transform: none;
      }

      /* HORMATI SETELAN "KURANGI GERAK".
         Sebagian orang menyalakannya karena gerakan membuat pusing atau
         mual. Untuk mereka seluruh isi tampil apa adanya. */
      @media (prefers-reduced-motion: reduce) {
        .js-animasi [data-gulir],
        .js-animasi [data-gulir].tampil {
          opacity: 1 !important;
          transform: none !important;
          transition: none !important;
        }
      }


      /* ═══════════════════════════════════════════════════════════════════
         TOMBOL KEMBALI KE ATAS
         ═══════════════════════════════════════════════════════════════════
         40 x 40 px — cukup besar untuk ditekan jempol (batas nyaman 40 px),
         cukup kecil untuk tidak menutupi isi.

         TANPA backdrop-filter. Di menu laci sudah terbukti bahwa mengaburkan
         latar memaksa peramban menggambar ulang setiap gerakan. Tombol ini
         mengambang di atas halaman yang sedang digulir — tempat paling buruk
         untuk memasang efek kabur.

         Yang beranimasi hanya transform dan opacity (aturan A19).
         z-index 900: di atas isi halaman, tapi di bawah menu laci (1100)
         dan tirainya (1050) supaya tidak menembus saat menu dibuka.
         ═══════════════════════════════════════════════════════════════════ */
      .kembali-atas {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 900;

        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        padding: 0;

        display: grid;
        place-items: center;
        cursor: pointer;

        background: rgba(103, 46, 138, 0.82);
        color: #ffffff;
        box-shadow: 0 6px 18px -6px rgba(27, 16, 51, 0.5);

        /* keadaan tersembunyi */
        opacity: 0;
        transform: translateY(10px);
        visibility: hidden;
        pointer-events: none;

        transition:
          opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
          background-color 200ms ease,
          visibility 0s linear 260ms;
      }

      .kembali-atas.tampil {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
      }

      .kembali-atas:hover,
      .kembali-atas:focus-visible {
        background: rgba(77, 31, 105, 0.96);
      }
      .kembali-atas:active { transform: translateY(0) scale(0.92); }
      .kembali-atas:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
      }

      .kembali-atas svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      @media (min-width: 768px) {
        .kembali-atas { right: 24px; bottom: 24px; width: 44px; height: 44px; }
        .kembali-atas svg { width: 18px; height: 18px; }
      }

      @media (prefers-reduced-motion: reduce) {
        .kembali-atas { transition: opacity 120ms linear, visibility 0s linear 120ms; transform: none; }
        .kembali-atas.tampil { transform: none; }
      }


      /* ═══════════════════════════════════════════════════════════════════
         GERBANG NOMOR WHATSAPP (halaman /cek-area/)
         ═══════════════════════════════════════════════════════════════════
         Muncul sebelum pop-up cek lokasi. Semua gerakan hanya transform dan
         opacity (aturan A19), tanpa backdrop-filter.
         ═══════════════════════════════════════════════════════════════════ */
      .gw-tirai {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(15, 10, 28, 0.62);
        opacity: 0;
        visibility: hidden;
        transition: opacity 220ms ease, visibility 0s linear 220ms;
      }
      .gw-tirai.tampil { opacity: 1; visibility: visible; transition-delay: 0s; }

      .gw-kotak {
        width: min(360px, 100%);
        background: #ffffff;
        border-radius: 20px;
        padding: 22px 20px 20px;
        box-shadow: 0 24px 60px -24px rgba(15, 10, 28, 0.6);
        transform: translateY(14px) scale(0.97);
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
      }
      .gw-tirai.tampil .gw-kotak { transform: translateY(0) scale(1); }

      .gw-ikon {
        width: 44px; height: 44px;
        border-radius: 14px;
        display: grid; place-items: center;
        background: var(--primary-light, #f5f3ff);
        color: var(--primary, #672e8a);
        margin-bottom: 12px;
      }
      .gw-ikon svg { width: 22px; height: 22px; fill: currentColor; }

      .gw-kotak h3 {
        font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
        font-size: 18px; font-weight: 800;
        color: var(--pkcat-text-main, #1b1033);
        margin: 0 0 6px;
      }
      .gw-kotak > p {
        font-size: 14px; line-height: 1.65;
        color: var(--pkcat-ink-soft, #4a4060);
        margin: 0 0 16px;
      }

      .gw-kolom { position: relative; margin-bottom: 8px; }
      .gw-kolom input {
        width: 100%;
        box-sizing: border-box;
        border: 1.5px solid var(--pkcat-border, #ece5f4);
        border-radius: 13px;
        padding: 13px 15px;
        font-size: 16px;   /* 16px: di bawah itu iPhone ikut memperbesar layar */
        font-family: inherit;
        color: var(--pkcat-text-main, #1b1033);
        background: #ffffff;
        transition: border-color 180ms ease, box-shadow 180ms ease;
      }
      .gw-kolom input:focus {
        outline: none;
        border-color: var(--primary, #672e8a);
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
      }
      .gw-kolom input::placeholder { color: #9b93ab; }

      .gw-galat {
        font-size: 13px;
        line-height: 1.5;
        color: #b91c1c;
        min-height: 18px;
        margin: 0 0 10px;
      }

      .gw-lanjut {
        width: 100%;
        border: none;
        border-radius: 13px;
        padding: 14px;
        font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
        font-size: 15px; font-weight: 700;
        color: #ffffff;
        background: linear-gradient(135deg, #7c3aed 0%, #672e8a 100%);
        cursor: pointer;
        transition: transform 160ms ease, opacity 160ms ease;
      }
      .gw-lanjut:active { transform: scale(0.98); }
      /* Dimatikan sampai nomornya benar. Tetap terbaca (bukan abu-abu pucat)
         supaya jelas ini tombol, bukan hiasan. */
      .gw-lanjut[disabled] { opacity: 0.45; cursor: not-allowed; }

      .gw-batal {
        display: block;
        width: 100%;
        margin-top: 10px;
        border: none;
        background: none;
        padding: 8px;
        font-size: 13.5px;
        font-family: inherit;
        color: var(--pkcat-ink-soft, #4a4060);
        text-decoration: underline;
        cursor: pointer;
      }

      .gw-catatan {
        font-size: 12.5px;
        line-height: 1.6;
        color: var(--pkcat-ink-soft, #4a4060);
        margin: 12px 0 0;
      }
      .gw-catatan a { color: var(--primary, #672e8a); font-weight: 600; }

      /* kolom jebakan robot — tidak pernah dilihat manusia */
      .gw-jebakan {
        position: absolute;
        left: -9999px;
        width: 1px; height: 1px;
        opacity: 0;
      }

      @media (prefers-reduced-motion: reduce) {
        .gw-tirai, .gw-kotak { transition-duration: 0.01ms !important; }
      }


      /* ═══════════════════════════════════════════════════════════════════
         WIDGET BANTUAN MENGAMBANG (kiri bawah)
         ═══════════════════════════════════════════════════════════════════
         Empat gambar sales ditumpuk di titik yang sama lalu dipudar
         bergantian. Keempatnya sejajar sempurna, jadi yang terlihat adalah
         tulisannya yang muncul dan pose yang berganti — bukan gambar yang
         melompat.

         HANYA opacity yang digerakkan. Tidak ada lebar, tinggi, atau posisi
         (aturan A19, pelajaran dari menu laci). Peramban memudarkan opacity
         di kartu grafis, mengikuti kecepatan layar — jadi lebih mulus
         daripada berkas animasi yang terkunci 20 gambar per detik.

         Kanan bawah dipakai tombol kembali-ke-atas, jadi keduanya tidak
         pernah bertabrakan.
         ═══════════════════════════════════════════════════════════════════ */
      .wb-akar {
        position: fixed;
        left: 10px;
        bottom: 10px;
        z-index: 940;
      }

      .wb-tombol {
        position: relative;
        display: block;
        width: 100px;
        aspect-ratio: 400 / 336;
        border: none;
        padding: 0;
        background: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
      }
      .wb-tombol:active { transform: scale(0.95); }
      .wb-tombol:focus-visible { outline: 2px solid var(--primary, #672e8a); outline-offset: 4px; border-radius: 14px; }

      .wb-tombol img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        pointer-events: none;
      }

      /* satu putaran 5,5 detik; tiap gambar punya jadwal munculnya sendiri */
      /* Ditulis panjang, BUKAN ringkas.
         Percobaan pertama memakai "animation: 5500ms ease-in-out infinite"
         tanpa nama. Penulisan ringkas itu diam-diam mengatur
         animation-name menjadi "none", dan karena kekhususannya lebih
         tinggi daripada aturan per-gambar di bawahnya, SELURUH animasi
         mati. Akibatnya keempat gambar tetap opacity 0 — widget-nya tidak
         terlihat sama sekali, tanpa pesan galat apa pun. */
      .wb-akar:not(.diam) .wb-tombol img {
        animation-duration: 5500ms;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
      }
      .wb-akar:not(.diam) .wb-g1 { animation-name: wb-g1; }
      .wb-akar:not(.diam) .wb-g2 { animation-name: wb-g2; }
      .wb-akar:not(.diam) .wb-g3 { animation-name: wb-g3; }
      .wb-akar:not(.diam) .wb-g4 { animation-name: wb-g4; }

      @keyframes wb-g1 {
        0%, 15.5% { opacity: 1; }
        22.7%     { opacity: 0; }
        93.6%     { opacity: 0; }
        100%      { opacity: 1; }
      }
      @keyframes wb-g2 {
        0%, 15.5% { opacity: 0; }
        22.7%, 47.3% { opacity: 1; }
        54.5%, 100%  { opacity: 0; }
      }
      @keyframes wb-g3 {
        0%, 47.3% { opacity: 0; }
        54.5%, 64.5% { opacity: 1; }
        71.8%, 100%  { opacity: 0; }
      }
      @keyframes wb-g4 {
        0%, 64.5% { opacity: 0; }
        71.8%, 93.6% { opacity: 1; }
        100%      { opacity: 0; }
      }

      /* ── TULISAN "Halo!" DI GAMBAR PERTAMA ──
         Gambar pertama gelembungnya kosong. Tulisannya ditambahkan lewat
         kode, BUKAN digambar ulang oleh AI, karena tiga alasan:
           - tajam di ukuran layar apa pun, tidak ikut buram saat dikecilkan
           - ejaannya pasti benar, tidak bisa salah ketik
           - mau diganti kalimatnya? satu baris, tanpa membuat ulang gambar

         Posisinya dipatok dengan persen, bukan piksel, supaya tetap pas
         waktu widget-nya dibesarkan atau dikecilkan.

         Memakai animasi yang SAMA PERSIS dengan gambar pertama (wb-g1),
         jadi ia muncul dan hilang bersamaan dengan gelembungnya. */
      .wb-halo {
        position: absolute;
        /* Titik ini BUKAN kira-kira. Diukur dengan membandingkan gambar 1
           dan gambar 2: piksel yang putih terang di gambar 2 tapi gelap di
           gambar 1 adalah tulisannya. Kotaknya 154x93 px pada kanvas
           400x336, titik tengahnya kiri 31,8% atas 42,1%. Jadi "Halo!"
           mendarat persis di tempat "Yuk, Langganan Sekarang!" berada. */
        left: 31.8%;
        top: 42.1%;
        transform: translate(-50%, -50%);
        font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.2px;
        color: #ffffff;
        text-shadow: 0 2px 7px rgba(40, 8, 66, 0.6);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
      }
      .wb-akar:not(.diam) .wb-halo {
        animation-name: wb-g1;
        animation-duration: 5500ms;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
      }
      @media (min-width: 768px) {
        .wb-halo { font-size: 17px; }
      }

      /* kalau gerakan dimatikan di setelan HP: tampilkan satu gambar saja,
         yang paling jelas mengajak menekan */
      .wb-akar.diam .wb-g4 { opacity: 1; }

      @media (min-width: 768px) {
        .wb-akar { left: 18px; bottom: 18px; }
        .wb-tombol { width: 116px; }
      }

      /* ── panel yang terbuka saat ditekan ── */
      .wb-panel {
        position: absolute;
        left: 0;
        bottom: calc(100% + 10px);
        width: min(244px, calc(100vw - 24px));
        background: #ffffff;
        border: 1px solid var(--pkcat-border, #ece5f4);
        border-radius: 20px;
        padding: 0 14px 14px;
        box-shadow: 0 20px 48px -20px rgba(27, 16, 51, 0.5);
        text-align: center;

        opacity: 0;
        transform: translateY(10px) scale(0.97);
        transform-origin: left bottom;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
                    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0s linear 240ms;
      }
      .wb-akar.terbuka .wb-panel {
        opacity: 1;
        transform: translateY(0) scale(1);
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
      }

      .wb-panel-sales {
        display: block;
        width: 94px;
        height: auto;
        margin: -10px auto 5px;
      }
      .wb-panel h3 {
        font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
        font-size: 15px;
        font-weight: 800;
        color: var(--pkcat-text-main, #1b1033);
        margin: 0 0 4px;
      }
      .wb-panel p {
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--pkcat-ink-soft, #4a4060);
        margin: 0 0 13px;
      }
      .wb-aksi { display: grid; gap: 8px; }
      .wb-aksi a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 12px;
        padding: 11px 13px;
        font-family: var(--pkcat-font-display, "Plus Jakarta Sans", sans-serif);
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
        transition: transform 180ms ease, background-color 180ms ease;
      }
      .wb-aksi a:active { transform: scale(0.97); }
      /* aturan A15: tulisan tidak boleh sewarna latarnya */
      .wb-wa   { background: #0b7a3d; color: #ffffff; }
      .wb-wa:hover { background: #076b33; }
      .wb-area { background: var(--primary-light, #f5f3ff); color: var(--primary, #672e8a); }
      .wb-area:hover { background: #ebe5fb; }

      .wb-tutup {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 26px;
        height: 26px;
        border: none;
        border-radius: 50%;
        background: rgba(27, 16, 51, 0.06);
        color: var(--pkcat-ink-soft, #4a4060);
        display: grid;
        place-items: center;
        cursor: pointer;
        font-size: 15px;
        line-height: 1;
      }
      .wb-tutup:hover { background: rgba(27, 16, 51, 0.12); }