/* =========================================================
       RTP1001 GREEN THEME
       Mengubah semua warna menjadi tema hijau
    ========================================================== */

    :root {
      --RTP1001-navy: #0a1f0a;
      --RTP1001-navy-soft: #0d3b0d;
      --RTP1001-green: #00b83a;
      --RTP1001-green-light: #66e08a;
      --RTP1001-green-dark: #007a26;
      --RTP1001-gold: #4caf50;
      --RTP1001-gold-soft: #81c784;
      --RTP1001-gold-dark: #2e7d32;
      --RTP1001-white: #ffffff;
      --RTP1001-text-soft: #b8d9b8;
      --RTP1001-black: #050d05;
      --RTP1001-panel-width: 300px;
      --RTP1001-radius: 22px;
      --RTP1001-speed: 320ms;

      /* Site theme variables - hijau */
      --site-green-dark: #0d3b0d;
      --site-green: #1b8c2e;
      --site-green-bright: #2eb85a;
      --site-green-soft: #66d98a;

      --site-yellow: #4caf50;
      --site-yellow-light: #81c784;
      --site-yellow-dark: #2e7d32;

      --site-bg: #d4e8d4;
      --site-panel: #e8f5e8;
      --site-card: #ffffff;
      --site-border: #a8c9a8;
      --site-text: #1a3a1a;
      --site-text-soft: #4a7a4a;
    }

    .RTP1001-quick-menu,
    .RTP1001-quick-menu * {
      box-sizing: border-box;
    }

    .RTP1001-quick-menu {
      position: relative;
      z-index: 2147483000;
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    }

    /* Overlay halaman */
    .RTP1001-overlay {
      position: fixed;
      inset: 0;
      z-index: 2147482997;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background: rgba(0, 30, 0, 0.5);
      transition:
        opacity var(--RTP1001-speed) ease,
        visibility var(--RTP1001-speed) ease;
    }

    .RTP1001-quick-menu.is-open .RTP1001-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Tombol vertikal RTP1001 di sisi kiri - TEMA HIJAU */
    .RTP1001-tab {
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 2147482999;

      display: inline-flex;
      width: 52px;
      height: 194px;
      align-items: center;
      justify-content: center;

      padding: 14px 8px;

      border: 2px solid #2e8b57;
      border-left: 0;
      border-radius: 0 16px 16px 0;

      background: #2e7d32;
      color: #ffffff;

      font-family:
        "Segoe UI Black",
        "Arial Black",
        "Trebuchet MS",
        sans-serif;

      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 3px;

      writing-mode: vertical-rl;
      text-orientation: upright;

      text-shadow:
        0 1px 3px rgba(0, 30, 0, 0.72),
        0 0 5px rgba(255, 255, 255, 0.25);

      box-shadow:
        0 0 9px rgba(46, 139, 87, 0.82),
        0 0 20px rgba(27, 140, 46, 0.58),
        5px 8px 16px rgba(0, 30, 0, 0.24);

      cursor: pointer;
      overflow: hidden;

      transform: translateY(-50%);

      transition:
        left var(--RTP1001-speed) cubic-bezier(.2, .75, .2, 1),
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    }

    .RTP1001-tab::before {
      content: "";
      position: absolute;
      inset: 7px 7px 7px 5px;

      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 0 11px 11px 0;

      background: transparent;
      box-shadow: none;

      pointer-events: none;
    }

    .RTP1001-tab::after {
      content: none;
      display: none;
    }

    .RTP1001-tab:hover {
      background: #388e3c;
      border-color: #43a047;

      box-shadow:
        0 0 13px rgba(76, 175, 80, 0.96),
        0 0 28px rgba(27, 140, 46, 0.70),
        6px 9px 19px rgba(0, 30, 0, 0.29);

      transform: translateY(-50%) scale(1.03);
    }

    .RTP1001-tab:active {
      transform: translateY(-50%) scale(0.97);
    }

    .RTP1001-tab:focus-visible {
      outline: 3px solid rgba(102, 224, 138, 0.92);
      outline-offset: 3px;
    }

    .RTP1001-quick-menu.is-open .RTP1001-tab {
      left: calc(14px + var(--RTP1001-panel-width));
    }

    /* Panel popup dari kiri - TEMA HIJAU */
    .RTP1001-panel {
      position: fixed;
      top: 50%;
      left: 14px;
      z-index: 2147482998;

      display: flex;
      width: var(--RTP1001-panel-width);
      max-height: 88vh;
      flex-direction: column;
      overflow: hidden;

      border: 2px solid #4caf50;
      border-radius: var(--RTP1001-radius);

      background:
        linear-gradient(
          180deg,
          #e8f5e8 0%,
          #c8e6c9 100%
        );

      box-shadow:
        0 18px 42px rgba(0, 30, 0, 0.28),
        0 0 0 1px rgba(27, 140, 46, 0.12),
        0 0 18px rgba(76, 175, 80, 0.28);

      color: var(--site-text);

      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-120%, -50%) scale(0.96);
      transform-origin: left center;

      transition:
        transform var(--RTP1001-speed) cubic-bezier(.2, .75, .2, 1),
        opacity 220ms ease,
        visibility var(--RTP1001-speed) ease;
    }

    .RTP1001-quick-menu.is-open .RTP1001-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(0, -50%) scale(1);
    }

    /* Header panel - TEMA HIJAU */
    .RTP1001-panel-header {
      position: relative;
      padding: 22px 20px 17px;
      overflow: hidden;
      border-bottom: 2px solid #4caf50;

      background:
        linear-gradient(
          165deg,
          rgba(255, 255, 255, 0.40) 0%,
          rgba(255, 255, 255, 0.10) 28%,
          transparent 49%
        ),
        radial-gradient(
          circle at 108% 112%,
          rgba(129, 199, 132, 0.96) 0%,
          rgba(76, 175, 80, 0.80) 27%,
          rgba(46, 125, 50, 0.42) 48%,
          transparent 70%
        ),
        radial-gradient(
          circle at 14% -20%,
          rgba(102, 217, 138, 0.78) 0%,
          transparent 45%
        ),
        linear-gradient(
          135deg,
          #0d3b0d 0%,
          #1b6b1b 38%,
          #2e8b57 72%,
          #66d98a 100%
        );

      box-shadow:
        0 5px 15px rgba(0, 30, 0, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    }

    .RTP1001-panel-header::before {
      content: "";
      position: absolute;
      top: -65px;
      right: -35px;
      width: 150px;
      height: 150px;
      border: 1px solid rgba(129, 199, 132, 0.26);
      border-radius: 50%;
      box-shadow:
        0 0 0 16px rgba(255, 255, 255, 0.06),
        0 0 0 34px rgba(76, 175, 80, 0.06);
    }

    .RTP1001-eyebrow {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 7px;
      color: #81c784;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-shadow: 0 1px 3px rgba(0, 30, 0, 0.65);
    }

    .RTP1001-eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4caf50;
      box-shadow: 0 0 9px #4caf50;
      animation: RTP1001-pulse 1.8s ease-in-out infinite;
    }

    .RTP1001-panel-title {
      position: relative;
      z-index: 1;
      margin: 0;
      color: #ffffff;
      font-size: 25px;
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: 0.03em;
      text-shadow:
        0 2px 3px rgba(0, 30, 0, 0.70),
        0 0 8px rgba(255, 255, 255, 0.15);
    }

    .RTP1001-panel-title strong {
      color: #81c784;
      text-shadow:
        0 1px 0 #2e7d32,
        0 0 10px rgba(76, 175, 80, 0.80);
    }

    .RTP1001-panel-subtitle {
      position: relative;
      z-index: 1;
      margin: 7px 0 0;
      color: rgba(255, 255, 255, 0.92);
      font-family: "Roboto", sans-serif;
      font-size: 12px;
      line-height: 1.5;
      text-shadow: 0 1px 3px rgba(0, 30, 0, 0.62);
    }

    /* Daftar menu - TEMA HIJAU */
    .RTP1001-menu-list {
      display: grid;
      gap: 10px;
      padding: 15px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: #2e7d32 transparent;

      background:
        linear-gradient(
          180deg,
          #e8f5e8 0%,
          #c8e6c9 100%
        );
    }

    .RTP1001-menu-list::-webkit-scrollbar {
      width: 5px;
    }

    .RTP1001-menu-list::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: #2e7d32;
    }

    /* Kartu menu - TEMA HIJAU */
    .RTP1001-menu-item {
      position: relative;
      display: flex;
      min-height: 66px;
      align-items: center;
      gap: 12px;
      overflow: hidden;

      padding: 9px;
      border: 1px solid #a8c9a8;
      border-left: 4px solid #1b8c2e;
      border-radius: 15px;

      background:
        linear-gradient(
          135deg,
          #ffffff 0%,
          #f0f7f0 100%
        );

      color: inherit;
      box-shadow:
        0 4px 11px rgba(0, 30, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);

      text-decoration: none;
      transition:
        transform 190ms ease,
        border-color 190ms ease,
        background-color 190ms ease,
        box-shadow 190ms ease;
    }

    .RTP1001-menu-item::after {
      content: "";
      position: absolute;
      top: -30%;
      left: -75%;
      width: 50%;
      height: 160%;
      background:
        linear-gradient(
          90deg,
          transparent,
          rgba(76, 175, 80, 0.24),
          transparent
        );
      transform: rotate(18deg);
      transition: left 420ms ease;
      pointer-events: none;
    }

    .RTP1001-menu-item:hover {
      transform: translateX(5px);
      border-color: #4caf50;
      border-left-color: #4caf50;

      background:
        linear-gradient(
          135deg,
          #ffffff 0%,
          #e8f5e8 62%,
          #d4edda 100%
        );

      box-shadow:
        0 7px 16px rgba(0, 30, 0, 0.18),
        0 0 11px rgba(76, 175, 80, 0.24);
    }

    .RTP1001-menu-item:hover::after {
      left: 130%;
    }

    .RTP1001-menu-icon {
      position: relative;
      z-index: 1;
      display: grid;
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      place-items: center;
      overflow: hidden;

      border: 2px solid #4caf50;
      border-radius: 13px;

      background:
        linear-gradient(
          145deg,
          #ffffff,
          #d4edda
        );

      box-shadow:
        0 3px 8px rgba(0, 30, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .RTP1001-menu-icon img {
      display: block;
      width: 100%;
      height: 100%;
      padding: 4px;
      object-fit: contain;
    }

    .RTP1001-menu-copy {
      position: relative;
      z-index: 1;
      min-width: 0;
      flex: 1;
    }

    .RTP1001-menu-copy h3 {
      margin: 0;
      color: #0d3b0d;
      font-size: 14px;
      font-weight: 850;
      line-height: 1.25;
      text-shadow: none;
    }

    .RTP1001-menu-copy p {
      margin: 4px 0 0;
      color: #4a7a4a;
      font-size: 11px;
      line-height: 1.4;
    }

    .RTP1001-menu-arrow {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      color: #1b8c2e;
      font-size: 19px;
      font-weight: 900;
      transition: transform 180ms ease;
    }

    .RTP1001-menu-item:hover .RTP1001-menu-arrow {
      transform: translateX(3px);
      color: #2e7d32;
    }

    /* Footer panel - TEMA HIJAU */
    .RTP1001-panel-footer {
      padding: 0 15px 16px;
      padding-top: 13px;
      border-top: 1px solid #a8c9a8;
      background: #e8f5e8;
    }

    .RTP1001-close {
      display: inline-flex;
      width: 100%;
      min-height: 43px;
      align-items: center;
      justify-content: center;
      gap: 8px;

      border: 1px solid #388e3c;

      background:
        linear-gradient(
          180deg,
          #66bb6a 0%,
          #43a047 55%,
          #2e7d32 100%
        );

      color: #ffffff;
      box-shadow:
        0 4px 10px rgba(0, 30, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);

      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      transition:
        transform 180ms ease,
        filter 180ms ease,
        box-shadow 180ms ease;
    }

    .RTP1001-close:hover {
      filter: brightness(1.04);

      box-shadow:
        0 5px 13px rgba(0, 30, 0, 0.22),
        0 0 12px rgba(76, 175, 80, 0.48);
    }

    .RTP1001-close:active {
      transform: scale(0.98);
    }

    .RTP1001-close svg {
      width: 16px;
      height: 16px;
    }

    @keyframes RTP1001-pulse {
      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.45;
        transform: scale(0.75);
      }
    }

    /* =========================================================
       RESPONSIVE - Sama seperti asli dengan warna hijau
    ========================================================== */

    @media screen and (max-width: 600px) {
      :root {
        --RTP1001-panel-width: min(280px, calc(100vw - 62px));
        --RTP1001-radius: 18px;
      }

      .RTP1001-panel {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 8px;

        width: var(--RTP1001-panel-width);
        max-height: min(92dvh, 620px);

        border-width: 2px;
        border-radius: var(--RTP1001-radius);

        transform: translate(-120%, -50%) scale(0.96);
        transform-origin: left center;

        border-color: #4caf50;
        background:
          linear-gradient(
            180deg,
            #e8f5e8 0%,
            #c8e6c9 100%
          );
        box-shadow:
          0 16px 36px rgba(0, 30, 0, 0.32),
          0 0 14px rgba(76, 175, 80, 0.27);
      }

      .RTP1001-quick-menu.is-open .RTP1001-panel {
        transform: translate(0, -50%) scale(1);
      }

      .RTP1001-tab {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;

        width: 42px;
        height: 156px;
        min-width: 42px;
        min-height: 156px;

        padding: 10px 6px;

        border: 2px solid #2e8b57;
        border-left: 0;
        border-radius: 0 13px 13px 0;

        background: #2e7d32;
        color: #ffffff;

        font-size: 12px;
        line-height: 1;
        letter-spacing: 2.2px;

        writing-mode: vertical-rl;
        text-orientation: upright;

        transform: translateY(-50%);

        box-shadow:
          0 0 8px rgba(46, 139, 87, 0.80),
          0 0 17px rgba(27, 140, 46, 0.54),
          4px 7px 14px rgba(0, 30, 0, 0.23);
      }

      .RTP1001-tab::before {
        content: "";
        display: block;
        inset: 6px 6px 6px 4px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 0 9px 9px 0;
        background: transparent;
        box-shadow: none;
      }

      .RTP1001-tab::after {
        content: none;
        display: none;
      }

      .RTP1001-tab:hover {
        background: #388e3c;
        border-color: #43a047;
        transform: translateY(-50%) scale(1.02);
      }

      .RTP1001-tab:active {
        transform: translateY(-50%) scale(0.96);
      }

      .RTP1001-quick-menu.is-open .RTP1001-tab {
        top: 50%;
        bottom: auto;
        left: calc(8px + var(--RTP1001-panel-width));

        background: #2e7d32;
        color: #ffffff;

        transform: translateY(-50%);

        box-shadow:
          0 0 11px rgba(46, 139, 87, 0.92),
          0 0 23px rgba(27, 140, 46, 0.64),
          4px 7px 14px rgba(0, 30, 0, 0.25);
      }

      .RTP1001-panel-header {
        padding: 16px 15px 12px;
        border-bottom-color: #4caf50;
        background:
          linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(255, 255, 255, 0.10) 28%,
            transparent 49%
          ),
          radial-gradient(
            circle at 108% 112%,
            rgba(129, 199, 132, 0.96) 0%,
            rgba(76, 175, 80, 0.80) 27%,
            rgba(46, 125, 50, 0.42) 48%,
            transparent 70%
          ),
          radial-gradient(
            circle at 14% -20%,
            rgba(102, 217, 138, 0.78) 0%,
            transparent 45%
          ),
          linear-gradient(
            135deg,
            #0d3b0d 0%,
            #1b6b1b 38%,
            #2e8b57 72%,
            #66d98a 100%
          );
      }

      .RTP1001-eyebrow {
        margin-bottom: 5px;
        font-size: 9px;
      }

      .RTP1001-panel-title {
        font-size: 20px;
      }

      .RTP1001-panel-subtitle {
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.4;
      }

      .RTP1001-menu-list {
        gap: 8px;
        padding: 10px;
        background: #c8e6c9;
      }

      .RTP1001-menu-item {
        min-height: 58px;
        gap: 9px;
        padding: 7px;
        border-radius: 13px;
      }

      .RTP1001-menu-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 11px;
      }

      .RTP1001-menu-copy h3 {
        font-size: 13px;
      }

      .RTP1001-menu-copy p {
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.35;
      }

      .RTP1001-menu-arrow {
        font-size: 17px;
      }

      .RTP1001-panel-footer {
        padding: 10px;
        background: #e8f5e8;
        border-top-color: #a8c9a8;
      }

      .RTP1001-close {
        min-height: 40px;
        font-size: 13px;
        background:
          linear-gradient(
            180deg,
            #66bb6a 0%,
            #43a047 55%,
            #2e7d32 100%
          );
        border-color: #388e3c;
        color: #ffffff;
      }
    }

    /* Penyesuaian tambahan untuk layar sangat kecil */
    @media screen and (max-width: 380px) {
      :root {
        --RTP1001-panel-width: calc(100vw - 56px);
      }

      .RTP1001-tab {
        width: 38px;
        height: 145px;
        min-width: 38px;
        min-height: 145px;
        font-size: 11px;
        letter-spacing: 2px;
      }

      .RTP1001-quick-menu.is-open .RTP1001-tab {
        left: calc(8px + var(--RTP1001-panel-width));
      }

      .RTP1001-panel-title {
        font-size: 18px;
      }

      .RTP1001-menu-copy p {
        font-size: 9.5px;
      }
    }

    /* Layar mobile landscape atau layar pendek */
    @media screen and (max-width: 600px) and (max-height: 520px) {
      .RTP1001-panel {
        max-height: calc(100dvh - 16px);
      }

      .RTP1001-tab {
        height: 136px;
        min-height: 136px;
      }

      .RTP1001-panel-header {
        padding: 12px 14px 10px;
      }

      .RTP1001-menu-list {
        gap: 6px;
        padding: 8px 10px;
      }

      .RTP1001-menu-item {
        min-height: 52px;
      }

      .RTP1001-panel-footer {
        padding: 8px 10px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .RTP1001-tab,
      .RTP1001-panel,
      .RTP1001-overlay,
      .RTP1001-menu-item,
      .RTP1001-close,
      .RTP1001-eyebrow::before {
        animation: none !important;
        transition-duration: 0.01ms !important;
      }
    }