/* GAN89 landing page styles */
:root {
  --gan89-midnight: #050914;
  --gan89-navy: #0a1426;
  --gan89-navy-soft: #111c33;
  --gan89-wine: #2c0610;
  --gan89-burgundy: #650d1d;
  --gan89-burgundy-light: #7d1930;
  --gan89-gold: #d6a84b;
  --gan89-gold-bright: #ffe2a1;
  --gan89-crystal: #b9a7ff;
  --gan89-silver: #d8e4ff;
  --gan89-text: #f7f2ea;
  --gan89-muted: #aebad0;
  --gan89-line: rgba(214, 168, 75, 0.3);
  --gan89-crystal-line: rgba(185, 167, 255, 0.3);
}

html {
  color-scheme: dark;
}

body.device-theme {
  color: var(--gan89-text);
  background-color: var(--gan89-midnight);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(185, 167, 255, 0.11), transparent 28%),
    radial-gradient(circle at 86% 20%, rgba(101, 13, 29, 0.2), transparent 34%),
    linear-gradient(180deg, var(--gan89-midnight), #080d1a 52%, var(--gan89-wine));
}

body.device-theme ::selection {
  color: var(--gan89-midnight);
  background: var(--gan89-gold-bright);
}

body.device-theme a,
body.device-theme .value,
body.device-theme .fa {
  color: var(--gan89-gold);
}

body.device-theme .ml-top-header,
body.device-theme .ml-head-middle,
body.device-theme .ml-head-btm,
body.device-theme #default-menu,
body.device-theme #menu-wrapper {
  color: var(--gan89-text);
  background-color: var(--gan89-midnight);
  border-color: var(--gan89-line);
  box-shadow: 0 1px 0 rgba(214, 168, 75, 0.2), 0 10px 28px rgba(0, 0, 0, 0.2);
}

body.device-theme .ml-top-header a,
body.device-theme .ml-head-middle a,
body.device-theme .ml-head-btm a,
body.device-theme .desktop-menu > li > a,
body.device-theme .header-link-text {
  color: var(--gan89-text);
}

body.device-theme .ml-head-btm a:hover,
body.device-theme .desktop-menu > li:hover > a,
body.device-theme .ml-header-features:hover a,
body.device-theme .header-first-popover:hover .header-link-text {
  color: var(--gan89-gold-bright);
  background-color: rgba(101, 13, 29, 0.72);
}

body.device-theme .popover,
body.device-theme .dropdown-menu,
body.device-theme #search-auto-complete {
  color: var(--gan89-text);
  background: var(--gan89-navy-soft);
  border-color: var(--gan89-line);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4), 0 0 18px rgba(185, 167, 255, 0.08);
}

body.device-theme .form-control,
body.device-theme select,
body.device-theme .bootstrap-select > .dropdown-toggle {
  color: var(--gan89-text);
  background-color: rgba(17, 28, 51, 0.94);
  border-color: var(--gan89-crystal-line);
}

body.device-theme .form-control::placeholder {
  color: var(--gan89-muted);
}

body.device-theme .ml-home-content,
body.device-theme #content,
body.device-theme #content-data,
body.device-theme .ml-product-discriptions {
  color: var(--gan89-text);
  background-color: transparent;
}

body.device-theme .breadcrumb,
body.device-theme .product-title--items-wrap,
body.device-theme .product-price-buy-form-wrapper,
body.device-theme .product-decription-wrapper,
body.device-theme .product-additional-info {
  color: var(--gan89-text);
  background-color: rgba(10, 20, 38, 0.78);
  border-color: var(--gan89-line);
  box-shadow: inset 0 1px 0 rgba(216, 228, 255, 0.05);
}

body.device-theme .product-images-col img,
body.device-theme .recently-viewed-product img {
  border-color: var(--gan89-line);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), 0 0 22px rgba(185, 167, 255, 0.12);
}

body.device-theme .product-title-h1,
body.device-theme .ml-product-discriptions .title,
body.device-theme .home-header h2,
body.device-theme .footer-heading {
  color: var(--gan89-gold-bright);
  border-color: var(--gan89-gold);
  text-shadow: 0 0 14px rgba(214, 168, 75, 0.22);
}

body.device-theme .product-main-price,
body.device-theme .instock-lable,
body.device-theme .product-bundle-badge .right-part,
body.device-theme .product-info-list strong {
  color: var(--gan89-gold-bright);
}

body.device-theme .grey-border,
body.device-theme .product-info-list li,
body.device-theme .warranty-item,
body.device-theme .product-sku-model {
  border-color: var(--gan89-line);
}

body.device-theme .btn-danger,
body.device-theme .btn-info,
body.device-theme .product-add-to-cart,
body.device-theme .cart-submit {
  color: var(--gan89-gold-bright);
  background: linear-gradient(180deg, var(--gan89-burgundy-light), var(--gan89-wine));
  border-color: var(--gan89-gold);
  box-shadow: 0 7px 18px rgba(44, 6, 16, 0.48), inset 0 1px 0 rgba(255, 226, 161, 0.2);
}

body.device-theme .btn-danger:hover,
body.device-theme .btn-info:hover,
body.device-theme .product-add-to-cart:hover,
body.device-theme .cart-submit:hover {
  color: #fff7dc;
  background: linear-gradient(180deg, #8a2038, #3b0815);
  border-color: var(--gan89-gold-bright);
  box-shadow: 0 9px 24px rgba(44, 6, 16, 0.54), 0 0 18px rgba(185, 167, 255, 0.2);
}

body.device-theme #footer,
body.device-theme .footer-recently-viewed-products,
body.device-theme .footer-contacts-container,
body.device-theme .f-top,
body.device-theme #copyright {
  color: var(--gan89-muted);
  background-color: var(--gan89-midnight);
  border-color: var(--gan89-line);
}

body.device-theme .footer-contact,
body.device-theme .footer-contact a,
body.device-theme #footer a {
  color: var(--gan89-silver);
  border-color: var(--gan89-line);
}

body.device-theme #footer a:hover {
  color: var(--gan89-gold-bright);
}

.gan89-arcade-rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
      }

      /* Item hujan */
      .gan89-arcade-item {
        position: absolute;
        top: -60px;
        font-size: 28px;
        animation-name: gan89ArcadeFall;
        color: var(--gan89-spark-color, var(--gan89-crystal));
        animation-timing-function: linear;
        opacity: 0.78;
        filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px rgba(214, 168, 75, 0.24));
        will-change: transform, opacity;
      }

      @keyframes gan89ArcadeFall {
        0% {
          transform: translate3d(0, -60px, 0) rotate(0deg) scale(0.72);
          opacity: 0;
        }

        12% {
          opacity: 0.86;
        }

        82% {
          opacity: 0.64;
        }

        100% {
          transform: translate3d(var(--gan89-drift, 32px), 110vh, 0) rotate(var(--gan89-spin, 300deg)) scale(1);
          opacity: 0;
        }
      }

      /* Optional: efek glow background */
      .gan89-arcade-glow {
        position: fixed;
        inset: 0;
        background:
          radial-gradient(circle at 50% 28%, rgba(185, 167, 255, 0.13), transparent 36%),
          radial-gradient(circle at 50% 75%, rgba(101, 13, 29, 0.12), transparent 55%);
        pointer-events: none;
        z-index: 1;
      }

      .gan89-action-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        font-weight: 700;
        gap: 15px;
        padding: 10px;
      }

      .gan89-action-grid a {
        text-align: center;
        margin: 3px;
        text-decoration: none;
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        outline: 3px solid transparent;
        outline-offset: 4px;
        transition: all 0.3s ease;
      }

      /* Tombol burgundy dengan detail antique-gold dan crystal glow */
      .gan89-login,
      .gan89-register {
        color: var(--gan89-gold-bright);
        padding: 14px 15px;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
      }

      /* Tombol LOGIN - Orange Gradient */
      .gan89-login,
      .gan89-login-button {
        text-shadow: 0 0 8px rgba(255, 226, 161, 0.48);
        border-radius: 12px;
        border: 3px solid var(--gan89-gold);
        background: linear-gradient(180deg, var(--gan89-burgundy-light) 0%, var(--gan89-wine) 100%);
        color: var(--gan89-gold-bright);
        outline: 3px solid rgba(185, 167, 255, 0.46);
        box-shadow: 0 6px 15px rgba(44, 6, 16, 0.5),
          inset 0 0 10px rgba(214, 168, 75, 0.2);
      }

      .gan89-login:hover {
        background: linear-gradient(180deg, #8a2038 0%, #3b0815 100%);
        color: #fff7dc;
        box-shadow: 0 0 20px rgba(185, 167, 255, 0.42),
          inset 0 0 15px rgba(214, 168, 75, 0.28);
        transform: translateY(-4px) scale(1.05);
        outline: 4px solid rgba(185, 167, 255, 0.62);
        outline-offset: 6px;
        border-color: var(--gan89-gold-bright);
      }

      /* Tombol DAFTAR - Orange Gradient Terbalik */
      .gan89-register,
      .gan89-register-button {
        text-shadow: 0 0 8px rgba(255, 226, 161, 0.48);
        border-radius: 12px;
        border: 3px solid var(--gan89-gold);
        background: linear-gradient(180deg, var(--gan89-burgundy-light) 0%, var(--gan89-wine) 100%);
        color: var(--gan89-gold-bright);
        outline: 3px solid rgba(185, 167, 255, 0.46);
        box-shadow: 0 6px 15px rgba(44, 6, 16, 0.5),
          inset 0 0 10px rgba(214, 168, 75, 0.2);
      }

      .gan89-register:hover {
        background: linear-gradient(180deg, #8a2038 0%, #3b0815 100%);
        color: #fff7dc;
        box-shadow: 0 0 20px rgba(185, 167, 255, 0.42),
          inset 0 0 15px rgba(214, 168, 75, 0.28);
        transform: translateY(-4px) scale(1.05);
        outline: 4px solid rgba(185, 167, 255, 0.62);
        outline-offset: 6px;
        border-color: var(--gan89-gold-bright);
      }

      /* === Efek kilap untuk tombol === */
      .gan89-login::before,
      .gan89-register::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 226, 161, 0.62) 50%,
            rgba(255, 255, 255, 0) 100%);
        transform: skewX(-25deg);
        transition: left 0.8s ease;
        pointer-events: none;
      }

      .gan89-login:hover::before,
      .gan89-register:hover::before {
        left: 150%;
      }

      /* Active state */
      .gan89-login:active,
      .gan89-register:active {
        transform: translateY(1px) scale(0.98);
        box-shadow: 0 3px 10px rgba(44, 6, 16, 0.6),
          inset 0 0 8px rgba(214, 168, 75, 0.32);
        outline-offset: 3px;
      }

      /* Glow ring animation */
      .gan89-login::after,
      .gan89-register::after {
        content: "";
        position: absolute;
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-radius: 16px;
        border: 2px solid transparent;
        opacity: 0;
        transition: all 0.4s ease;
        pointer-events: none;
      }

      .gan89-login::after {
        border-color: var(--gan89-crystal);
      }

      .gan89-register::after {
        border-color: var(--gan89-gold);
      }

      .gan89-login:hover::after,
      .gan89-register:hover::after {
        opacity: 0.7;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .gan89-action-grid {
          gap: 10px;
          padding: 8px;
        }

        .gan89-login,
        .gan89-register {
          padding: 12px 10px;
          font-size: 14px;
          outline-width: 2px;
          outline-offset: 3px;
        }

        .gan89-login:hover,
        .gan89-register:hover {
          outline-offset: 4px;
          transform: translateY(-2px) scale(1.03);
        }
      }

@keyframes gan89ContentFadeIn {
                    from {
                      opacity: 0;
                      transform: translateY(20px);
                    }

                    to {
                      opacity: 1;
                      transform: translateY(0);
                    }
                  }

                  .gan89-faq-item {
                    border-bottom: 1px solid var(--gan89-line);
                  }

                  .gan89-faq-question {
                    width: 100%;
                    background: rgba(17, 28, 51, 0.78);
                    padding: 16px;
                    font-size: 18px;
                    color: var(--gan89-text);
                    cursor: pointer;
                    border: none;
                    text-align: left;
                    outline: none;
                    transition: 0.3s;
                  }

                  .gan89-faq-question:hover {
                    background: rgba(101, 13, 29, 0.72);
                    color: var(--gan89-gold-bright);
                  }

                  .gan89-faq-answer {
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.4s ease, padding 0.3s ease;
                    padding: 0 18px;
                    color: var(--gan89-muted);
                  }

                  .gan89-active+.gan89-faq-answer {
                    max-height: 200px;
                    padding: 14px 18px;
                  }

                  .gan89-gradient-text {
                    background: linear-gradient(90deg, var(--gan89-gold-bright), var(--gan89-crystal), var(--gan89-gold));
                    -webkit-background-clip: text;
                    color: transparent;
                    font-weight: bold;
                  }

.gan89-content-update-wrapper {
              margin-top: 25px;
            }

            .gan89-content-update-card {
              background: linear-gradient(145deg, rgba(10, 20, 38, 0.96), rgba(44, 6, 16, 0.96));
              border: 2px solid var(--gan89-gold);
              border-radius: 18px;
              padding: 22px;
              box-shadow: 0 0 20px rgba(185, 167, 255, 0.16), inset 0 0 24px rgba(214, 168, 75, 0.05);
            }

            .gan89-content-update-header {
              display: flex;
              align-items: center;
              gap: 12px;
              margin-bottom: 12px;
            }

            .gan89-content-update-icon {
              font-size: 20px;
            }

            .gan89-content-update-title {
              font-size: 16px;
              font-weight: 700;
              color: var(--gan89-gold-bright);
            }

            .gan89-content-update-content {
              font-size: 14px;
              line-height: 1.8;
              color: var(--gan89-text);
              margin-bottom: 18px;
            }

            .gan89-content-update-meta {
              display: flex;
              flex-wrap: wrap;
              gap: 15px;
              border-top: 1px solid var(--gan89-line);
              padding-top: 15px;
            }

            .gan89-content-update-item {
              background: rgba(17, 28, 51, 0.82);
              border: 1px solid var(--gan89-crystal-line);
              border-radius: 12px;
              padding: 8px 14px;
              display: flex;
              flex-direction: column;
              min-width: 150px;
            }

            .gan89-content-update-label {
              font-size: 11px;
              color: var(--gan89-gold);
              font-weight: 600;
              margin-bottom: 3px;
            }

            .gan89-content-update-date {
              font-size: 13px;
              color: var(--gan89-silver);
              font-weight: 600;
            }

.gan89-reviews-section {
      max-width: 900px;
      margin: 40px auto;
      padding: 20px;
      background: linear-gradient(145deg, rgba(10, 20, 38, 0.96), rgba(44, 6, 16, 0.92));
      border-radius: 12px;
      color: var(--gan89-text);
      border: 1px solid var(--gan89-line);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), 0 0 22px rgba(185, 167, 255, 0.08);
      font-family: Arial, sans-serif;
    }

    .gan89-reviews-section h2 {
      margin-bottom: 20px;
      font-size: 24px;
      border-left: 4px solid var(--gan89-gold);
      padding-left: 10px;
    }

    .gan89-reviews-summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--gan89-line);
      padding-bottom: 20px;
      margin-bottom: 20px;
    }

    .gan89-rating-box {
      text-align: center;
    }

    .gan89-rating-number {
      font-size: 48px;
      font-weight: bold;
      color: var(--gan89-gold-bright);
    }

    .gan89-rating-text {
      font-size: 18px;
      margin-top: -5px;
    }

    .gan89-rating-stars {
      font-size: 22px;
      color: var(--gan89-gold);
      text-shadow: 0 0 9px rgba(214, 168, 75, 0.32);
      margin: 5px 0;
    }

    .gan89-no-reviews {
      font-size: 14px;
      opacity: 0.8;
    }

    .gan89-review-action {
      text-align: right;
    }

    .gan89-review-action p {
      margin-bottom: 10px;
      font-size: 14px;
      opacity: 0.8;
    }

    .gan89-review-btn {
      padding: 10px 18px;
      background: linear-gradient(135deg, var(--gan89-burgundy-light), var(--gan89-wine));
      border: 1px solid var(--gan89-gold);
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
      color: var(--gan89-gold-bright);
      transition: 0.3s;
    }

    .gan89-review-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.44), 0 0 12px rgba(185, 167, 255, 0.18);
    }

    .gan89-reviews-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .gan89-review-item {
      background: rgba(17, 28, 51, 0.8);
      padding: 16px;
      border-radius: 10px;
      border: 1px solid var(--gan89-crystal-line);
    }

    .gan89-review-stars {
      color: var(--gan89-gold);
      font-size: 18px;
      margin-bottom: 6px;
    }

    .gan89-review-item h4 {
      margin: 0 0 6px;
      font-size: 16px;
    }

    .gan89-review-item p {
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
      opacity: 0.9;
    }

.gan89-update-table {
                  border-collapse: collapse;
                  border-radius: 8px;
                  overflow: hidden;
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38), 0 0 14px rgba(185, 167, 255, 0.18);
                }

                .gan89-update-table th {
                  background-color: var(--gan89-wine);
                  color: var(--gan89-gold-bright);
                  padding: 12px 24px;
                  font-size: 13px;
                  font-weight: 600;
                  letter-spacing: 0.05em;
                  text-transform: uppercase;
                }

                .gan89-update-table td {
                  background-color: var(--gan89-navy-soft);
                  color: var(--gan89-silver);
                  padding: 14px 24px;
                  font-size: 14px;
                  text-align: center;
                }

                .gan89-update-table time {
                  font-weight: 600;
                  font-size: 15px;
                }

                .gan89-update-table tr:hover td {
                  background-color: #37101d;
                }

@media (prefers-reduced-motion: reduce) {
  .gan89-arcade-rain {
    display: none;
  }

  .gan89-login,
  .gan89-register,
  .gan89-faq-question,
  .gan89-faq-answer {
    animation: none;
    transition: none;
  }
}