.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//*
  =========================================================
  XSPORTAINMENT — STEP 2 OF 2
  Paste ini di: Elementor → Site Settings → Custom CSS
  (Klik ikon hamburger ☰ di editor → Site Settings → Custom CSS)
  =========================================================
*/

/* ── 1. DESIGN TOKENS ─────────────────────────────────── */
:root {
  --bg-0: #06070a;
  --bg-1: #0d0f15;
  --bg-2: #13161e;
  --bg-3: #1a1e29;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);

  --gold: #d8b377;
  --gold-bright: #f1d9a3;
  --gold-deep: #9c7b3d;
  --teal: #34d9c4;
  --teal-deep: #16463f;

  --text-0: #f4f1ea;
  --text-1: #b3aea3;
  --text-2: #716c63;

  --grad-gold: linear-gradient(120deg, #f1d9a3 0%, #d8b377 45%, #9c7b3d 100%);
  --grad-card: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,0) 55%);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
}

/* ── 2. GLOBAL RESET & BASE ──────────────────────────── */
body {
  background-color: var(--bg-0) !important;
  background-image:
    radial-gradient(900px 520px at 14% -8%, rgba(216,179,119,.14), transparent 60%),
    radial-gradient(700px 460px at 100% 0%, rgba(52,217,196,.08), transparent 55%),
    linear-gradient(180deg, #0a0c11 0%, #06070a 55%, #050608 100%) !important;
  color: var(--text-0) !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Elementor page wrapper override */
.elementor-page,
.elementor-section-wrap,
.e-con {
  background: transparent !important;
}

/* ── 3. TYPOGRAPHY ───────────────────────────────────── */
h1, h2, h3, h4,
.elementor-heading-title {
  font-family: 'Unbounded', sans-serif !important;
  color: var(--text-0) !important;
  letter-spacing: -0.01em;
}

p,
.elementor-widget-text-editor p,
.elementor-text-editor p {
  color: var(--text-1);
  font-family: 'Manrope', sans-serif !important;
}

a { color: inherit; text-decoration: none; }

/* ── 4. TICKER BAR ───────────────────────────────────── */
.xsp-ticker {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.xsp-ticker::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--bg-1) 0%, transparent 6%,
    transparent 94%, var(--bg-1) 100%);
  pointer-events: none;
  z-index: 2;
}
.xsp-ticker__track {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  padding: 10px 0;
  font-family: 'Space Mono', monospace !important;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--text-1);
  animation: xsp-scroll 30s linear infinite;
}
.xsp-ticker__track .live  { color: var(--gold); }
.xsp-ticker__track .sep   { color: var(--teal); }
@keyframes xsp-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .xsp-ticker__track { animation: none; }
}

/* ── 5. NAVBAR ───────────────────────────────────────── */
/* Terapkan ke: Elementor Header template */
.xsp-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.xsp-logo {
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 800;
  font-size: 1.18rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text-0);
}
.xsp-logo b {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.xsp-logo small {
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  color: var(--text-2);
  letter-spacing: .14em;
  font-weight: 400;
}

/* Nav background — terapkan ke Elementor Header section */
.elementor-location-header .elementor-section,
.elementor-location-header .e-con {
  background: rgba(7,8,11,.82) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Nav links */
.elementor-nav-menu a,
.elementor-location-header nav a {
  font-family: 'Manrope', sans-serif !important;
  font-size: .92rem !important;
  color: var(--text-1) !important;
  transition: color .2s !important;
}
.elementor-nav-menu a:hover,
.elementor-location-header nav a:hover {
  color: var(--text-0) !important;
}
.elementor-nav-menu .current-menu-item > a {
  color: var(--gold) !important;
}

/* ── 6. BUTTONS ──────────────────────────────────────── */
/* Gold CTA — tambahkan CSS Class "xsp-btn-gold" di widget button */
.xsp-btn-gold,
.xsp-btn-gold .elementor-button {
  background: var(--grad-gold) !important;
  color: #1c1407 !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 13px 26px !important;
  box-shadow: 0 8px 24px -8px rgba(216,179,119,.55) !important;
  transition: transform .25s, box-shadow .25s !important;
}
.xsp-btn-gold:hover .elementor-button,
.xsp-btn-gold .elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px -8px rgba(216,179,119,.7) !important;
}

/* Outline CTA — CSS Class "xsp-btn-outline" */
.xsp-btn-outline,
.xsp-btn-outline .elementor-button {
  background: rgba(255,255,255,.02) !important;
  color: var(--text-0) !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--line-strong) !important;
  padding: 12px 26px !important;
  transition: border-color .2s, color .2s !important;
}
.xsp-btn-outline:hover .elementor-button,
.xsp-btn-outline .elementor-button:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* ── 7. EYEBROW / LABEL ──────────────────────────────── */
/* CSS Class: xsp-eyebrow */
.xsp-eyebrow {
  font-family: 'Space Mono', monospace !important;
  font-size: .72rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .5em !important;
}
.xsp-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  flex-shrink: 0;
}
/* CSS Class: xsp-eyebrow-gold */
.xsp-eyebrow-gold {
  font-family: 'Space Mono', monospace !important;
  font-size: .72rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .5em !important;
}
.xsp-eyebrow-gold::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  flex-shrink: 0;
}

/* ── 8. HERO ─────────────────────────────────────────── */
/* CSS Class: xsp-hero — terapkan ke Section/Container hero */
.xsp-hero {
  padding-block: 96px 80px !important;
  position: relative;
  overflow: hidden;
}
.xsp-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 90px);
  mask-image: linear-gradient(180deg, black, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, black, transparent 85%);
  pointer-events: none;
}

/* Hero heading gold highlight — CSS Class: xsp-hero-title-gold */
.xsp-hero-title-gold,
.xsp-hero-title-gold .elementor-heading-title {
  background: var(--grad-gold) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-style: normal !important;
}

/* ── 9. STATS BAR ────────────────────────────────────── */
/* CSS Class: xsp-stats — terapkan ke container stats */
.xsp-stats {
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  padding-block: 22px !important;
}
.xsp-stat-number,
.xsp-stat-number .elementor-heading-title {
  font-family: 'Space Mono', monospace !important;
  font-size: 1.7rem !important;
  color: var(--gold) !important;
}
.xsp-stat-label {
  font-size: .78rem !important;
  color: var(--text-2) !important;
  letter-spacing: .03em !important;
}

/* ── 10. SERVICE / CONTENT CARDS ─────────────────────── */
/* CSS Class: xsp-card — terapkan ke tiap inner-section atau widget */
.xsp-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-m) !important;
  padding: 28px !important;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s !important;
}
.xsp-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-card);
  pointer-events: none;
}
.xsp-card:hover {
  border-color: var(--line-strong) !important;
  transform: translateY(-4px) !important;
}
.xsp-card h3,
.xsp-card .elementor-heading-title {
  font-size: 1.05rem !important;
  margin-bottom: 10px !important;
}
.xsp-card p {
  color: var(--text-1) !important;
  font-size: .92rem !important;
}

/* Card icon box — CSS Class: xsp-card-icon */
.xsp-card-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(216,179,119,.12) !important;
  color: var(--gold) !important;
  margin-bottom: 20px !important;
  font-size: 1.2rem;
}

/* Card tag/caption — CSS Class: xsp-card-tag */
.xsp-card-tag {
  font-family: 'Space Mono', monospace !important;
  font-size: .7rem !important;
  color: var(--text-2) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin-top: 18px !important;
  display: block;
}

/* ── 11. FEATURE LIST ────────────────────────────────── */
/* CSS Class: xsp-feature-icon */
.xsp-feature-icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(52,217,196,.12) !important;
  color: var(--teal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700;
}

/* ── 12. PRICING CARDS ───────────────────────────────── */
/* CSS Class: xsp-price-card */
.xsp-price-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-l) !important;
  padding: 34px 28px !important;
}

/* CSS Class: xsp-price-card-featured */
.xsp-price-card-featured {
  background: linear-gradient(165deg,
    rgba(216,179,119,.1), var(--bg-2) 60%) !important;
  border: 1px solid var(--gold-deep) !important;
  border-radius: var(--radius-l) !important;
  padding: 34px 28px !important;
  position: relative;
}
.xsp-price-card-featured::before {
  content: 'PALING DIMINATI';
  position: absolute; top: -13px; right: 28px;
  background: var(--grad-gold);
  color: #1c1407;
  font-family: 'Space Mono', monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 14px;
  border-radius: 999px;
}

.xsp-price-label {
  font-family: 'Space Mono', monospace !important;
  font-size: .78rem !important;
  color: var(--text-2) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.xsp-price-number,
.xsp-price-number .elementor-heading-title {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 2rem !important;
  color: var(--text-0) !important;
  margin-top: 10px !important;
}
.xsp-price-period {
  font-family: 'Manrope', sans-serif !important;
  font-size: .82rem !important;
  color: var(--text-2) !important;
}

/* Checklist item — CSS Class: xsp-check-item */
.xsp-check-item {
  font-size: .88rem !important;
  color: var(--text-1) !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start;
}
.xsp-check-item::before {
  content: '✓';
  color: var(--teal);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── 13. GALLERY GRID ITEMS ──────────────────────────── */
/* CSS Class: xsp-gal-item — terapkan ke tiap image container */
.xsp-gal-item {
  border-radius: var(--radius-m) !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  transition: border-color .25s, transform .25s !important;
}
.xsp-gal-item:hover {
  border-color: var(--line-strong) !important;
  transform: translateY(-4px) !important;
}

/* ── 14. SECTION BACKGROUNDS ─────────────────────────── */
/* CSS Class: xsp-section-dark — terapkan ke tiap Section */
.xsp-section-dark {
  background: transparent !important;
}

/* Visual/mockup placeholder box — CSS Class: xsp-visual-box */
.xsp-visual-box {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l) !important;
  background: linear-gradient(150deg, #1a1e29, #0c0e13) !important;
  border: 1px solid var(--line) !important;
  position: relative;
  overflow: hidden;
}
.xsp-visual-box::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px);
}

/* ── 15. CTA BANNER ──────────────────────────────────── */
/* CSS Class: xsp-cta-banner */
.xsp-cta-banner {
  border-radius: var(--radius-l) !important;
  background: linear-gradient(120deg,
    rgba(21,19,16,.85), var(--bg-2)) !important;
  border: 1px solid var(--line-strong) !important;
  padding: 56px 48px !important;
  position: relative;
  overflow: hidden;
}

/* ── 16. FORM FIELDS ─────────────────────────────────── */
/* CSS Class: xsp-form-field */
.xsp-form-field input,
.xsp-form-field textarea,
.xsp-form-field select,
.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-s) !important;
  color: var(--text-0) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: .92rem !important;
  padding: 13px 16px !important;
}
.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus {
  border-color: var(--teal) !important;
  outline: none !important;
}
.elementor-form .elementor-field-label {
  color: var(--text-1) !important;
  font-size: .8rem !important;
  font-family: 'Manrope', sans-serif !important;
}

/* ── 17. BREADCRUMBS ─────────────────────────────────── */
/* CSS Class: xsp-crumbs */
.xsp-crumbs {
  font-family: 'Space Mono', monospace !important;
  font-size: .72rem !important;
  color: var(--text-2) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.xsp-crumbs span,
.xsp-crumbs .current {
  color: var(--gold) !important;
}

/* ── 18. FOOTER ──────────────────────────────────────── */
.elementor-location-footer .elementor-section,
.elementor-location-footer .e-con {
  background: transparent !important;
  border-top: 1px solid var(--line) !important;
}
.elementor-location-footer p,
.elementor-location-footer span,
.elementor-location-footer li {
  color: var(--text-1) !important;
  font-size: .9rem !important;
}
.elementor-location-footer a:hover {
  color: var(--gold) !important;
}

/* Footer column headers — CSS Class: xsp-foot-head */
.xsp-foot-head {
  font-family: 'Space Mono', monospace !important;
  font-size: .75rem !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
  margin-bottom: 18px !important;
  font-weight: 400 !important;
}

/* Social icon buttons — CSS Class: xsp-social-btn */
.xsp-social-btn {
  width: 36px; height: 36px;
  border-radius: 50% !important;
  border: 1px solid var(--line) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-1) !important;
  font-size: .85rem !important;
  transition: border-color .2s, color .2s !important;
}
.xsp-social-btn:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* ── 19. RESPONSIVE ──────────────────────────────────── */
@media (max-width: 767px) {
  .xsp-hero   { padding-block: 56px 48px !important; }
  .xsp-cta-banner { padding: 36px 24px !important; }
  .xsp-price-card,
  .xsp-price-card-featured { margin-bottom: 16px; }
}/* End custom CSS */