/* =========================================================
   OLYMPUS88 — Olympus88 Theme
   Hitam / ungu Olympus88 — branding ungu + emas
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Creepster&family=Special+Elite&family=Nunito:wght@600;700;800;900&display=swap");

:root {
  --dn-black: #000000;
  --dn-ink: #0a0a0a;
  --dn-panel: #111111;
  --dn-panel-2: #161616;
  --dn-blood: #5b21b6;
  --dn-blood-hot: #9130fb;
  --dn-blood-deep: #25004a;
  --dn-white: #f0f0f0;
  --dn-mute: #b8b8b8;
  --dn-line: rgba(240, 240, 240, 0.22);
  --dn-glow: rgba(145, 48, 251, 0.35);

  --pk-red-deep: #25004a;
  --pk-red: #5b21b6;
  --pk-red-mid: #6e37ad;
  --pk-red-bright: #9130fb;
  --pk-yellow: #f0f0f0;
  --pk-yellow-hot: #ffffff;
  --pk-yellow-soft: #e0e0e0;
  --pk-yellow-pale: #f5f5f5;
  --pk-black: #000000;
  --pk-ink: #0a0a0a;
  --pk-gray: #161616;
  --pk-band: #111111;
  --pk-white: #f0f0f0;
  --pk-glow: rgba(145, 48, 251, 0.4);

  --fx-red: #5b21b6;
  --fx-text: #f0f0f0;
  --fx-border: rgba(145, 48, 251, 0.55);
  --fx-bg: rgba(0, 0, 0, 0.88);
  --fx-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);

  --purple: #ffde16;
  --accent: #9130fb;
  --white: #f0f0f0;
}

html {
  scroll-behavior: smooth;
}

body.template-product,
body#blossom-shine,
body {
  background-color: #000 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(37, 0, 74, 0.7) 50%,
      rgba(0, 0, 0, 0.88) 100%
    ),
    url("./../../assets/background-live.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-blend-mode: multiply, normal;
  color: var(--dn-white);
  font-family: "Nunito", "Special Elite", system-ui, sans-serif;
}

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(91, 33, 182, 0.25), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.55));
}

/* ========== Tombol Olympus88 ========== */
.n-columns-2 {
  background: #000 !important;
  border: 1px solid var(--dn-blood) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 1px #222, 0 10px 24px rgba(0, 0, 0, 0.6) !important;
  position: relative;
  z-index: 2;
}

.n-columns-2::after {
  display: none !important;
}

.n-columns-2 a,
.menu-3d-btn,
.daftarku-fixed-footer a {
  background: linear-gradient(180deg, #1a1a1a 0%, #000 55%, #120028 100%) !important;
  color: #fff !important;
  border: 1px solid #9130fb !important;
  border-radius: 2px !important;
  box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.n-columns-2 a:hover,
.menu-3d-btn:hover,
.daftarku-fixed-footer a:hover {
  background: linear-gradient(180deg, #5b21b6 0%, #25004a 100%) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 0 18px var(--dn-glow) !important;
  filter: none !important;
}

.menu-3d-wrap {
  background: #000 !important;
  border: 1px solid #5b21b6 !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55) !important;
}

.promo-bg {
  background: linear-gradient(90deg, #000, #120028 50%, #5b21b6) !important;
  border-bottom: 1px solid #9130fb !important;
}

.notification__message p {
  color: #fff !important;
  text-shadow: 0 1px 3px #000;
}

.notification__message p a {
  color: #9130fb !important;
}

.nav-header {
  background: linear-gradient(180deg, #111 0%, #000 60%, #120028 100%) !important;
  border-top: 1px solid #5b21b6 !important;
}

.nav-account-mobile .login-register a {
  color: #fff !important;
}

/* ========== Satukan foto 1 + body foto 2 ========== */
header,
.product-single,
.keunggulan-section,
#product-bottom,
.product-description,
.fx-video-bg,
.product-section,
#shopify-section-Product,
.product-standing-flower {
  background-color: transparent !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(37, 0, 74, 0.65) 50%,
      rgba(0, 0, 0, 0.8) 100%
    ),
    url("./../../assets/background-live.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-blend-mode: multiply, normal;
}

/* Hilangkan strip putih / gap antar section */
.keunggulan-section,
#product-bottom,
.product-description.bg-card,
.fx-article-wrap,
.faq-box,
#OLYMPUS88-reviews,
#server-tech-info,
#OLYMPUS88-trending-tags,
.faq-review-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 1100px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.keunggulan-section {
  padding: 0 20px 10px !important;
  border: none !important;
  overflow: visible !important;
}

.keunggulan-blur-box,
.keunggulan-wrapper {
  background: rgba(0, 0, 0, 0.82) !important;
  border: 1px solid rgba(145, 48, 251, 0.45) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  max-width: 1100px;
}

.keunggulan-blur-box::before {
  display: none !important;
}

/* Frame foto + body jadi satu kartu Olympus88 */
#product-top > .row.bg-card.product-sticky {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(145, 48, 251, 0.45) !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0 !important;
  margin-bottom: 0 !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Sisi hitam di sekitar banner → blur dari banner yang sama */
#product-top > .row.bg-card.product-sticky::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(37, 0, 74, 0.4) 50%, rgba(0, 0, 0, 0.55)),
    url("./../../assets/banner-15.webp") center / cover no-repeat;
  filter: blur(32px) brightness(0.55) saturate(1.15);
  transform: scale(1.12);
  pointer-events: none;
}

#product-top > .row.bg-card.product-sticky > * {
  position: relative;
  z-index: 1;
}

#ProductPhotoImg,
.product-image img.lazyload,
.product-image-static img,
#featured-image-product2 .gallery-mobile img {
  border: 1px solid #5b21b6 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
  border-radius: 2px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  position: relative;
  z-index: 2;
  background: transparent !important;
}

.product-image-static,
#featured-image-product2 .gallery-mobile,
#featured-image-product2 .swiper-slide.img {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  isolation: isolate;
}

/* Blur lembut di sisi/edge kotak gambar */
.product-image-static::before,
#featured-image-product2 .swiper-slide.img::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: 0;
  background: url("./../../assets/banner-15.webp") center / cover no-repeat;
  filter: blur(22px) brightness(0.5);
  transform: scale(1.08);
  pointer-events: none;
}

.product-image-static img,
#featured-image-product2 .swiper-slide.img img {
  position: relative;
  z-index: 1;
}

.bg-card,
.product-description.bg-card,
#product-bottom,
#product-bottom .container {
  background: transparent !important;
  background-color: transparent !important;
}

#product-bottom {
  padding: 0 20px 24px !important;
}

#product-bottom .product-description {
  background: rgba(0, 0, 0, 0.82) !important;
  border: 1px solid rgba(145, 48, 251, 0.35) !important;
  border-top: none !important;
  margin: 0 auto !important;
  max-width: 1100px;
  padding: 20px !important;
}

/* Artikel / FAQ / review — satu aliran gelap */
.fx-video-bg > video {
  display: none !important;
}

.fx-article,
.faq-box,
#OLYMPUS88-reviews .review-section,
#server-tech-info,
.faq-review-section {
  background: rgba(0, 0, 0, 0.88) !important;
  border: 1px solid rgba(145, 48, 251, 0.4) !important;
  border-radius: 4px !important;
  color: #f0f0f0 !important;
  box-shadow: none !important;
}

.fx-article h1,
.fx-article h2,
.fx-article strong,
.fx-article a,
.section-title,
.faq-box .neo-title,
.neo-head,
#OLYMPUS88-reviews .section-title,
#OLYMPUS88-reviews .user-name,
#OLYMPUS88-trending-tags h3,
.content-box h3,
.animated-title {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(145, 48, 251, 0.35), 0 2px 0 #000 !important;
  border-color: #5b21b6 !important;
}

.fx-article p,
.content-box p,
.fx-article .clean-article p {
  color: #cfcfcf !important;
}

.keunggulan-row,
.neo-item,
#OLYMPUS88-trending-tags .tag,
#server-tech-info .param-card {
  background: linear-gradient(90deg, #111, #0a0a0a) !important;
  border: 1px solid rgba(145, 48, 251, 0.4) !important;
  color: #f0f0f0 !important;
}

.keunggulan-row:hover,
#OLYMPUS88-trending-tags .tag:hover {
  background: linear-gradient(90deg, #120028, #5b21b6) !important;
  border-color: #fff !important;
}

.number-badge {
  background: #5b21b6 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

#OLYMPUS88-reviews .rating-side {
  background: linear-gradient(135deg, #1a1a1a, #5b21b6) !important;
  border: 1px solid #9130fb !important;
  color: #fff !important;
}

#OLYMPUS88-reviews .review-card {
  background: #0a0a0a !important;
  border: 1px solid rgba(145, 48, 251, 0.35) !important;
}

#breadcrumbProduct ul {
  background: #000 !important;
  border: 1px solid #5b21b6 !important;
}

#breadcrumbProduct ul li:not(:first-child)::before,
#breadcrumbProduct ul li svg {
  color: #9130fb !important;
}

.daftarku-fixed-footer {
  background: rgba(0, 0, 0, 0.92) !important;
  border: 1px solid #5b21b6 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 20px rgba(91, 33, 182, 0.35) !important;
  z-index: 10000 !important;
}

.daftarku-fixed-footer::before {
  background: linear-gradient(120deg, #000, #5b21b6, #9130fb, #5b21b6, #000) !important;
}

header::after {
  background: linear-gradient(90deg, #000 0 40%, #5b21b6 40% 70%, #fff 70% 100%) !important;
  height: 3px !important;
}

/* Newsletter / section terang → gelap */
#shopify-section-newsletter,
.section-newsletter,
div#div-gpt-ad-billboard-placeholder,
div#div-gpt-ad-lb-placeholder {
  background: #000 !important;
  color: #f0f0f0 !important;
}

.blood-rain-layer {
  z-index: 4 !important;
}

.logo img,
h1.logo img {
  filter: drop-shadow(0 0 8px rgba(145, 48, 251, 0.45));
}

.header-wrapper,
main,
#MainContent,
.fx-video-bg,
.fx-article-wrap,
.n-columns-2 {
  position: relative;
  z-index: 1;
}