/* =========================================================
   Wilder Blue Planet — Eco Aurora Theme
   Palette from banner: sky blue, forest green, leaf, gold, earth
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@600;700;800&display=swap");

:root {
  --wbp-sky: #4fc3f7;
  --wbp-sky-deep: #0288d1;
  --wbp-ocean: #01579b;
  --wbp-leaf: #43a047;
  --wbp-forest: #1b5e20;
  --wbp-moss: #66bb6a;
  --wbp-gold: #ffb300;
  --wbp-sunset: #ff6f00;
  --wbp-coral: #e53935;
  --wbp-sand: #efebe9;
  --wbp-earth: #8d6e63;
  --wbp-ink: #061018;
  --wbp-panel: #0a1f2e;
  --wbp-panel-2: #0d2a3d;
  --wbp-glass: rgba(10, 40, 55, 0.72);
  --wbp-text: #e8f6fb;
  --wbp-muted: #9ec4d4;
  --wbp-glow-sky: 0 0 18px rgba(79, 195, 247, 0.55), 0 0 42px rgba(2, 136, 209, 0.35);
  --wbp-glow-leaf: 0 0 18px rgba(67, 160, 71, 0.55), 0 0 40px rgba(27, 94, 32, 0.35);
  --wbp-glow-gold: 0 0 16px rgba(255, 179, 0, 0.5), 0 0 36px rgba(255, 111, 0, 0.28);
  --wbp-grad-aurora: linear-gradient(120deg, #01579b, #0288d1, #43a047, #ffb300, #0288d1, #01579b);
  --wbp-grad-btn: linear-gradient(135deg, #0288d1 0%, #26a69a 45%, #43a047 100%);
  --wbp-grad-btn-alt: linear-gradient(135deg, #ffb300 0%, #ff6f00 45%, #e53935 100%);
  --wbp-radius-pill: 999px;
  --wbp-radius-card: 22px;
  --wbp-font-display: "Syne", "Manrope", sans-serif;
  --wbp-font-body: "Manrope", sans-serif;
}

@keyframes wbpAurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes wbpGlowPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(79, 195, 247, 0.35), 0 0 28px rgba(67, 160, 71, 0.22), inset 0 0 18px rgba(79, 195, 247, 0.08);
  }
  50% {
    box-shadow: 0 0 26px rgba(79, 195, 247, 0.7), 0 0 54px rgba(67, 160, 71, 0.42), inset 0 0 28px rgba(255, 179, 0, 0.1);
  }
}

@keyframes wbpShimmer {
  0% { transform: translateX(-120%) rotate(12deg); }
  100% { transform: translateX(220%) rotate(12deg); }
}

@keyframes wbpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes wbpBorderRun {
  0% { border-color: #4fc3f7; }
  25% { border-color: #43a047; }
  50% { border-color: #ffb300; }
  75% { border-color: #0288d1; }
  100% { border-color: #4fc3f7; }
}

@keyframes wbpTextShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes wbpOrb {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
  33% { transform: translate(18px, -12px) scale(1.08); opacity: 0.8; }
  66% { transform: translate(-14px, 10px) scale(0.95); opacity: 0.65; }
}

/* ========== PAGE SHELL ========== */
html body.color-scheme-light,
body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(79, 195, 247, 0.22), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(67, 160, 71, 0.18), transparent 50%),
    radial-gradient(700px 500px at 50% 100%, rgba(255, 179, 0, 0.1), transparent 55%),
    linear-gradient(180deg, #041018 0%, #0a2130 40%, #071820 100%) !important;
  color: var(--wbp-text) !important;
  font-family: var(--wbp-font-body) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(79, 195, 247, 0.12), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(67, 160, 71, 0.1), transparent 30%);
  animation: wbpOrb 12s ease-in-out infinite;
}

.js-canvas__body,
.canvas__body,
.grid-container,
.content-main,
.page {
  position: relative;
  z-index: 1;
}

/* Header */
.header-mini,
.global-header,
.context-header {
  background: linear-gradient(180deg, rgba(6, 24, 36, 0.95), rgba(8, 36, 52, 0.88)) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(79, 195, 247, 0.25) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 40px rgba(2, 136, 209, 0.12) !important;
}

.global-header__logo,
.header-mini__logo img {
  filter: drop-shadow(0 0 12px rgba(79, 195, 247, 0.45));
  animation: wbpFloat 4.5s ease-in-out infinite;
}

.global-header-menu__link,
.global-header-menu__link-text {
  color: var(--wbp-text) !important;
  font-family: var(--wbp-font-display) !important;
  letter-spacing: 0.04em;
}

.global-header-menu__list-item a:hover .global-header-menu__link-text,
.global-header-menu__link:hover {
  color: var(--wbp-sky) !important;
  text-shadow: 0 0 12px rgba(79, 195, 247, 0.8);
}

.breadcrumbs a,
.js-breadcrumb-category {
  color: var(--wbp-sky) !important;
}

.item-header__title h1,
.t-heading {
  font-family: var(--wbp-font-display) !important;
  background: var(--wbp-grad-aurora);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: wbpAurora 8s linear infinite;
  text-shadow: none !important;
  filter: drop-shadow(0 0 10px rgba(79, 195, 247, 0.25));
}

.item-header__envato-highlighted strong {
  color: var(--wbp-gold) !important;
  text-shadow: 0 0 12px rgba(255, 179, 0, 0.55);
}

/* ========== CTA BUTTONS ========== */
.button-login-daftar {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin: 12px 0 18px !important;
}

.button-login-daftar a,
.login,
.register,
.login-button,
.register-button,
.btn-icon.live-preview,
.btn-icon.screenshots,
.popup-buttons a {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: var(--wbp-radius-pill) !important;
  padding: 16px 18px !important;
  font-family: var(--wbp-font-display) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #fff !important;
  text-align: center !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
  animation: wbpGlowPulse 3.2s ease-in-out infinite !important;
}

.login,
.login-button,
.btn-icon.live-preview,
.popup-buttons a:first-child {
  background: var(--wbp-grad-btn) !important;
  background-size: 180% 180% !important;
  animation: wbpAurora 6s linear infinite, wbpGlowPulse 3.2s ease-in-out infinite !important;
  box-shadow: var(--wbp-glow-sky) !important;
}

.register,
.register-button,
.btn-icon.screenshots,
.popup-buttons a:last-child {
  background: var(--wbp-grad-btn-alt) !important;
  background-size: 180% 180% !important;
  animation: wbpAurora 7s linear infinite, wbpGlowPulse 3.6s ease-in-out infinite !important;
  box-shadow: var(--wbp-glow-gold) !important;
}

.button-login-daftar a::before,
.login::before,
.register::before,
.btn-icon::before,
.popup-buttons a::before {
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  left: -40% !important;
  width: 40% !important;
  height: 180% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) !important;
  transform: translateX(-120%) rotate(18deg) !important;
  animation: wbpShimmer 2.8s linear infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.button-login-daftar a:hover,
.login:hover,
.register:hover,
.btn-icon:hover,
.popup-buttons a:hover {
  transform: translateY(-3px) scale(1.03) !important;
  filter: brightness(1.08) saturate(1.15) !important;
}

.item-preview {
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#0a1f2e, #0a1f2e) padding-box,
    var(--wbp-grad-aurora) border-box !important;
  background-size: auto, 300% 300% !important;
  animation: wbpAurora 10s linear infinite, wbpGlowPulse 4s ease-in-out infinite !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), var(--wbp-glow-sky) !important;
}

.item-preview img {
  border-radius: 22px !important;
  display: block !important;
}

.item-preview__actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 14px !important;
  background: linear-gradient(180deg, transparent, rgba(6, 24, 36, 0.85)) !important;
}

/* ========== LOOK FEED / WINNER BOARD ========== */
.wb-head,
.wb-foot,
#winnerBoard,
.wb-list-wrap {
  font-family: var(--wbp-font-body) !important;
}

.wb-head {
  background: linear-gradient(90deg, #01579b, #1b5e20, #0288d1) !important;
  background-size: 200% 200% !important;
  animation: wbpAurora 7s linear infinite !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
}

.wb-title {
  color: #fff !important;
  font-family: var(--wbp-font-display) !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.35) !important;
}

.wb-foot {
  background: rgba(6, 24, 36, 0.95) !important;
  color: var(--wbp-sky) !important;
  border-top: 1px solid rgba(79, 195, 247, 0.25) !important;
}

.wb-pill {
  background: var(--wbp-grad-btn) !important;
  color: #fff !important;
  border-radius: var(--wbp-radius-pill) !important;
  box-shadow: var(--wbp-glow-leaf) !important;
}

.wb-item {
  background: linear-gradient(135deg, rgba(13, 42, 61, 0.95), rgba(8, 32, 48, 0.9)) !important;
  border: 1px solid rgba(79, 195, 247, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

.wb-item.is-new {
  border-color: var(--wbp-gold) !important;
  box-shadow: var(--wbp-glow-gold) !important;
}

.wb-amount {
  color: var(--wbp-moss) !important;
  text-shadow: 0 0 10px rgba(102, 187, 106, 0.45) !important;
}

.wb-game {
  color: var(--wbp-sky) !important;
}

/* ========== ARTICLE / CONTENT ========== */
.product-title-style,
.product__title,
.situs-toto-section,
section {
  background: linear-gradient(160deg, rgba(10, 31, 46, 0.94), rgba(8, 40, 36, 0.9)) !important;
  color: var(--wbp-text) !important;
  border: 2px solid transparent !important;
  border-radius: var(--wbp-radius-card) !important;
  background-image:
    linear-gradient(160deg, rgba(10, 31, 46, 0.94), rgba(8, 40, 36, 0.9)),
    var(--wbp-grad-aurora) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: auto, 280% 280% !important;
  animation: wbpAurora 12s linear infinite !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4), var(--wbp-glow-sky) !important;
  padding: 28px 24px !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.product__title p,
.product-title-style p,
.situs-toto-section p,
section p {
  color: var(--wbp-muted) !important;
  line-height: 1.8 !important;
  font-size: 1.02rem !important;
}

.product__title a,
.product-title-style a,
.situs-toto-section a {
  color: var(--wbp-sky) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(79, 195, 247, 0.5);
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.35);
}

.cok-faq-title,
.cok-faq-title2,
.cok-faq-title3 {
  font-family: var(--wbp-font-display) !important;
  background: var(--wbp-grad-aurora) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  animation: wbpAurora 7s linear infinite !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 12px rgba(79, 195, 247, 0.35)) !important;
  letter-spacing: 0.04em !important;
}

.cok-faq-title2[style],
h1.cok-faq-title2 {
  color: transparent !important;
}

.product__title p span,
.product__title p span strong a {
  color: var(--wbp-moss) !important;
}

/* ========== FAQ ========== */
.cok-faq {
  max-width: 1200px !important;
  margin: 10px auto 40px !important;
  padding: 22px !important;
  background:
    linear-gradient(145deg, rgba(8, 28, 42, 0.96), rgba(10, 40, 34, 0.92)) !important;
  border-radius: 28px !important;
  border: 2px solid #4fc3f7 !important;
  animation: wbpBorderRun 7s linear infinite, wbpGlowPulse 3.5s ease-in-out infinite !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

.cok-faq-q {
  width: 100% !important;
  padding: 18px 52px 18px 22px !important;
  background: linear-gradient(135deg, #01579b 0%, #0288d1 40%, #2e7d32 100%) !important;
  background-size: 180% 180% !important;
  animation: wbpAurora 8s linear infinite !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-family: var(--wbp-font-display) !important;
  border: 1px solid rgba(79, 195, 247, 0.45) !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  text-align: left !important;
  margin-bottom: 12px !important;
  font-size: 17px !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 8px 24px rgba(2, 136, 209, 0.28) !important;
}

.cok-faq-q:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: var(--wbp-glow-sky), var(--wbp-glow-leaf) !important;
  border-color: var(--wbp-gold) !important;
  filter: brightness(1.08);
}

.cok-faq-q::after {
  content: "\25BC" !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  color: var(--wbp-gold) !important;
  text-shadow: 0 0 10px rgba(255, 179, 0, 0.8) !important;
}

.cok-faq-a {
  background: linear-gradient(180deg, rgba(6, 24, 36, 0.95), rgba(8, 36, 48, 0.9)) !important;
  color: var(--wbp-text) !important;
  border-left: 2px solid var(--wbp-leaf) !important;
  border-right: 2px solid var(--wbp-sky) !important;
  border-bottom: 2px solid var(--wbp-gold) !important;
  box-shadow: inset 0 0 24px rgba(79, 195, 247, 0.08) !important;
}

.cok-faq-a.open {
  box-shadow: inset 0 0 28px rgba(67, 160, 71, 0.18), 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}

/* ========== TESTIMONIALS ========== */
.testimonials,
.testi-grid {
  background: transparent !important;
}

.testi-card {
  background: linear-gradient(155deg, rgba(10, 31, 46, 0.95), rgba(12, 48, 40, 0.9)) !important;
  border: 1px solid rgba(79, 195, 247, 0.28) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 24px rgba(67, 160, 71, 0.12) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.testi-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--wbp-glow-sky), 0 18px 40px rgba(0, 0, 0, 0.4) !important;
  border-color: var(--wbp-gold) !important;
}

.testi-card .name,
.testi-card h3 {
  color: var(--wbp-sky) !important;
  font-family: var(--wbp-font-display) !important;
}

.testi-card .quote {
  color: var(--wbp-muted) !important;
}

.testi-card .avatar {
  background: var(--wbp-grad-btn) !important;
  box-shadow: var(--wbp-glow-leaf) !important;
  color: #fff !important;
}

.quote::before {
  color: rgba(79, 195, 247, 0.18) !important;
}

/* ========== FIXED FOOTER ========== */
.rmn68-fixed-footer,
.AGT88-fixed-footer {
  background: linear-gradient(180deg, rgba(6, 30, 42, 0.96), rgba(4, 20, 30, 0.98)) !important;
  border-style: solid !important;
  border: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #0288d1, #43a047, #ffb300, #0288d1) 1 !important;
  border-radius: 28px 28px 0 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(79, 195, 247, 0.2) !important;
  backdrop-filter: blur(16px) !important;
  padding: 10px 0 12px !important;
}

.rmn68-fixed-footer a,
.AGT88-fixed-footer a {
  color: var(--wbp-sky) !important;
  font-family: var(--wbp-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.35) !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.rmn68-fixed-footer a:hover,
.AGT88-fixed-footer a:hover {
  color: var(--wbp-gold) !important;
  transform: translateY(-3px) !important;
}

.rmn68-fixed-footer img,
.AGT88-fixed-footer img,
.agRAMEN68-fixed-footer img {
  filter: drop-shadow(0 0 8px rgba(67, 160, 71, 0.65));
  border-radius: 50%;
}

/* ========== POPUP ========== */
.popup-overlay {
  background: rgba(2, 12, 20, 0.72) !important;
  backdrop-filter: blur(8px) !important;
}

.popup-container {
  background: linear-gradient(155deg, rgba(8, 32, 48, 0.96), rgba(10, 48, 40, 0.92)) !important;
  border: 2px solid transparent !important;
  border-radius: 28px !important;
  background-image:
    linear-gradient(155deg, rgba(8, 32, 48, 0.96), rgba(10, 48, 40, 0.92)),
    var(--wbp-grad-aurora) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: auto, 250% 250% !important;
  animation: wbpAurora 8s linear infinite, wbpGlowPulse 3s ease-in-out infinite !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), var(--wbp-glow-sky) !important;
}

.popup-image {
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(79, 195, 247, 0.25) !important;
}

.popup-footer {
  color: var(--wbp-text) !important;
  font-family: var(--wbp-font-display) !important;
}

.popup-footer span {
  color: var(--wbp-moss) !important;
  text-shadow: 0 0 10px rgba(67, 160, 71, 0.55) !important;
}

.popup-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 8px 16px 4px !important;
}

.close-btn {
  background: var(--wbp-grad-btn-alt) !important;
  box-shadow: var(--wbp-glow-gold) !important;
}

/* ========== PURCHASE / SIDE PANEL ========== */
.purchase-form,
.box--sidebar,
.sidebar-summary {
  background: linear-gradient(160deg, rgba(10, 31, 46, 0.95), rgba(8, 36, 48, 0.9)) !important;
  border: 1px solid rgba(79, 195, 247, 0.25) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
  color: var(--wbp-text) !important;
}

.purchase-form__license-type,
.t-body,
.t-icon-list__item {
  color: var(--wbp-muted) !important;
}

/* ========== BANNER ========== */
.banner {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: var(--wbp-glow-sky), 0 18px 40px rgba(0, 0, 0, 0.4) !important;
  border: 2px solid rgba(79, 195, 247, 0.35) !important;
}

.banner img {
  animation: wbpFloat 6s ease-in-out infinite;
}

/* ========== MISC RED → THEME OVERRIDES ========== */
[style*="color: #ff0000"],
[style*="color:#ff0000"] {
  color: #66bb6a !important;
}

/* Keep layout readable on light Envato remnants */
.box--no-padding,
.content-s {
  background: transparent !important;
}

@media (max-width: 768px) {
  .button-login-daftar {
    gap: 10px !important;
  }
  .item-preview__actions {
    grid-template-columns: 1fr !important;
  }
  .cok-faq-q {
    font-size: 15px !important;
    padding-right: 44px !important;
  }
  .popup-buttons {
    grid-template-columns: 1fr !important;
  }
}