/* seo tarn  */


/* Cookie consent display */
.cookieconsent-optin,
.cookieconsent-optin-preferences,
.cookieconsent-optin-statistics,
.cookieconsent-optin-marketing {
  display: block;
  display: initial;
}

.cookieconsent-optout-preferences,
.cookieconsent-optout-statistics,
.cookieconsent-optout-marketing,
.cookieconsent-optout {
  display: none;
}

/* Root color & theme variable */
:root {
  /* Old money palette */
  --red-900: #2a0608;     /* almost-black burgundy */
  --red-800: #3b0a0e;     /* deep burgundy */
  --red-700: #5a0f14;     /* royal wine */
  --gold-500: #d4af37;    /* classic gold */
  --gold-400: #f2d27a;    /* soft highlight gold */
  --gold-600: #b8860b;    /* antique gold */
  --cream-100: #f7f1df;   /* warm cream text */
  --white: #ffffff;

  /* If you have existing tokens, map them here */
  --color-green-500: var(--gold-500);
  --color-white: var(--white);

  /* Optional: map “brand / interactive” tokens (only if they exist in your system) */
  --color-interactive-primary: var(--gold-500);
  --color-interactive-primary-hover: var(--gold-600);
  --color-content-brand: var(--red-900);
}

/* Tombol brand */
.brand-neue-button {
  gap: var(--spacing-2x);
  border-radius: var(--roundness-subtle);

  background: linear-gradient(135deg, var(--gold-400), var(--gold-500), var(--gold-600));
  color: var(--red-900);

  font-family: PolySans-Median;
  font-size: var(--font-size-2x);
  letter-spacing: .02em;
  text-align: center;
  padding: 0 20px;

  border: 1px solid rgba(212,175,55,.55);
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
}

.brand-neue-button:hover,
.brand-neue-button:active,
.brand-neue-button:focus {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  filter: saturate(1.05) contrast(1.05);
}

.brand-neue-button__open-in-new::after {
  font-size: 0;
  margin-left: 5px;
  vertical-align: sub;
  content: url(data:image/svg+xml,<svg width="14" height="14" ...>); /* keep inline */
}

/* Fancybox margin */
.fancybox-margin {
  margin-right: 15px;
}

/* Background utama (red + gold mood) */
body {
  background-color: var(--red-900);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(212,175,55,.18) 0%, rgba(212,175,55,0) 45%),
    radial-gradient(circle at 80% 90%, rgba(212,175,55,.12) 0%, rgba(212,175,55,0) 55%),
    url(https://methodistbinjai.com/img/958.webp);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--cream-100);
}

/* Header gradien (burgundy -> gold accent) */
.site-header,
.global-header,
.context-header,
.site-header__sites,
.site-header__categories {
  background-color: var(--red-800) !important;
  background-image: linear-gradient(315deg, var(--red-700) 0%, var(--red-900) 74%) !important;

  border-bottom: 2px solid rgba(212,175,55,.65);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Box blur transparan (warm glass) */
.item-preview,
.purchase-panel,
.box--no-padding {
  background: rgba(42, 6, 8, .45) !important; /* burgundy glass */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  border-radius: 16px !important;
  border: 1px solid rgba(212,175,55,.25) !important;

  box-shadow: 0 8px 30px rgba(0,0,0,.28);
  position: relative;
  overflow: hidden;
  color: var(--cream-100);
}

/* Efek kilau (gold shine) */
.item-preview::before,
.purchase-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(212,175,55,0) 0%,
    rgba(242,210,122,0.42) 45%,
    rgba(212,175,55,0) 100%
  );
  transform: skewX(-20deg);
  animation: shine 3s infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes shine {
  0%   { left: -150%; }
  60%  { left: 150%; }
  100% { left: 150%; }
}