.elementor-kit-5{--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-5 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 *//* =========================================================
   SPACE PADEL — Custom CSS for Elementor
   Paste ALL of this into:
   Elementor → Site Settings → Custom CSS

   Atau pisahin per section ke each section's Advanced > Custom CSS
   ========================================================= */

/* ---------- GLOBAL ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800;900&family=Orbitron:wght@500;700;800;900&display=swap');

:root {
  --sp-orange-deep: #C14F0D;
  --sp-orange-bright: #F4880E;
  --sp-orange-glow: #ffb35e;
  --sp-white-dim: rgba(255, 255, 255, 0.65);
  --sp-border: rgba(255, 255, 255, 0.08);
}

body {
  font-family: 'Archivo', sans-serif; /* FIX: !important DIHAPUS biar icon FontAwesome nggak keracunan Archivo */
  background: #000 !important;
}

/* Force dark background on page */
.elementor-section { isolation: isolate; }

/* ---------- EYEBROW (small label) ---------- */
.sp-eyebrow .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.5em !important;
  font-weight: 600 !important;
  color: var(--sp-orange-bright) !important;
  text-transform: uppercase !important;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.sp-eyebrow .elementor-heading-title::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--sp-orange-bright);
}

/* ---------- HERO ---------- */
.sp-hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}
.sp-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(244,136,14,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 30%, rgba(193,79,13,0.25) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.sp-hero > * {
  position: relative;
  z-index: 2;
}

/* Hero headline — 3 different treatments per word */
.sp-headline-1 .elementor-heading-title,
.sp-headline-2 .elementor-heading-title,
.sp-headline-3 .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(56px, 8vw, 124px) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.sp-headline-1 .elementor-heading-title { color: #FFFFFF !important; }
.sp-headline-2 .elementor-heading-title {
  background: linear-gradient(95deg, #C14F0D 0%, #F4880E 60%, #ffb35e 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-style: italic !important;
}
.sp-headline-3 .elementor-heading-title {
  color: transparent !important;
  -webkit-text-stroke: 1.5px #FFFFFF;
}

.sp-hero-lead p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--sp-white-dim) !important;
  max-width: 480px;
}

.sp-stat-num .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 56px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: #FFF !important;
  line-height: 1 !important;
}
.sp-stat-label .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--sp-white-dim) !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

/* ---------- BUTTONS ---------- */
.sp-btn-primary .elementor-button {
  background: linear-gradient(95deg, #C14F0D, #F4880E) !important;
  color: #FFFFFF !important;
  padding: 18px 32px !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 40px rgba(193,79,13,0.45) !important;
  transition: all 0.3s ease !important;
}
.sp-btn-primary .elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 50px rgba(193,79,13,0.6) !important;
}

.sp-btn-ghost .elementor-button {
  background: rgba(255,255,255,0.04) !important;
  color: #FFFFFF !important;
  padding: 18px 32px !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease !important;
}
.sp-btn-ghost .elementor-button:hover {
  border-color: var(--sp-orange-bright) !important;
  color: var(--sp-orange-bright) !important;
}

/* ---------- STATEMENT STRIP ---------- */
.sp-statement-quote .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: clamp(22px, 3vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  color: #000 !important;
  max-width: 1200px;
  margin: 0 auto !important;
}
.sp-statement-sub .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.6em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,0.6) !important;
  font-weight: 600 !important;
}

/* ---------- SECTION TITLE (used in Courts/Facilities/Contact) ---------- */
.sp-section-title .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(38px, 5.2vw, 76px) !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  margin: 0 !important;
}
.sp-section-title--accent .elementor-heading-title {
  color: transparent !important;
  -webkit-text-stroke: 1.5px var(--sp-orange-bright);
  font-style: italic !important;
}
.sp-section-sub p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--sp-white-dim) !important;
  max-width: 460px;
}

/* ---------- COURT SPECS ---------- */
.sp-court-image img {
  filter: contrast(1.1) saturate(0.85) brightness(0.85);
  width: 100%;
}
.sp-court-caption .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: #FFF !important;
  margin-top: 16px !important;
  font-weight: 700 !important;
}

.sp-spec-card {
  border: 1px solid var(--sp-border) !important;
  padding: 28px 24px !important;
  background: rgba(255,255,255,0.015);
  transition: background 0.3s ease;
  /* height: 100%; <--- HAPUS ATAU COMMENT BARIS INI */ /* For desktop equal height */
}
.sp-spec-card:hover { background: rgba(244,136,14,0.06); }
.sp-spec-card .elementor-icon {
  color: var(--sp-orange-bright) !important;
  font-size: 24px !important;
  margin-bottom: 16px;
}
.sp-spec-card .elementor-icon-box-title {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  color: #FFF !important;
  margin-bottom: 8px !important;
}
.sp-spec-card .elementor-icon-box-description {
  font-size: 13px !important;
  color: var(--sp-white-dim) !important;
  line-height: 1.5 !important;
}
/*tambahan*/
.sp-spec-card h3 small,
.sp-spec-card .elementor-heading-title small {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-left: 6px;
  font-style: normal;
  text-transform: lowercase;
}

/* ---------- FACILITIES ---------- */
.sp-facility-card {
  border: 1px solid var(--sp-border) !important;
  padding: 36px 28px !important;
  background: rgba(0,0,0,0.4);
  transition: background 0.3s ease;
  height: 100%;
  min-height: 240px;
}
.sp-facility-card:hover {
  background: linear-gradient(160deg, rgba(193,79,13,0.18), rgba(0,0,0,0.4));
}
.sp-facility-card .elementor-icon {
  color: var(--sp-orange-bright) !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid var(--sp-orange-bright) !important;
  background: rgba(244,136,14,0.08) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px !important;
  margin-bottom: 18px;
}
.sp-facility-card .elementor-icon-box-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #FFF !important;
  letter-spacing: 0.02em !important;
}
.sp-facility-card .elementor-icon-box-description {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--sp-white-dim) !important;
}

/* Feature block (athlete photo + nongkrong text) */
.sp-feature-image img {
  width: 100%;
  filter: contrast(1.1) saturate(0.9);
}
.sp-feature-text-col {
  background: #000;
  padding: 48px 40px !important;
}
.sp-feature-title .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  color: #FFF !important;
}
.sp-feature-text p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--sp-white-dim) !important;
  max-width: 420px;
}

/* ---------- WHERE TO BOOK ---------- */
.sp-book {
  position: relative;
  overflow: hidden;
}
.sp-book::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(244,136,14,0.25) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.sp-book > .elementor-container { position: relative; z-index: 2; }

.sp-book-image img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  filter: contrast(1.15) saturate(1.05);
}
.sp-book-title-1 .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(38px, 4.8vw, 68px) !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  color: #FFF !important;
  margin: 0 !important;
}
.sp-book-title-2 .elementor-heading-title {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(38px, 4.8vw, 68px) !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  font-style: italic !important;
  background: linear-gradient(95deg, var(--sp-orange-bright), var(--sp-orange-glow));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 !important;
}
.sp-book-partner .elementor-heading-title {
  display: inline-block;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #FFF !important;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--sp-border);
  padding: 12px 18px;
  font-weight: 700 !important;
}
.sp-book-steps .elementor-icon-list-item {
  margin-bottom: 12px !important;
  align-items: flex-start !important;
}
.sp-book-steps .elementor-icon-list-icon {
  background: transparent !important;
  color: var(--sp-orange-bright) !important;
  border: 1px solid var(--sp-orange-bright);
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron' !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.sp-book-steps .elementor-icon-list-text {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ---------- CONTACT ---------- */
.sp-contact-list .elementor-icon-list-item {
  padding: 22px 0 !important;
  border-bottom: 1px solid var(--sp-border) !important;
  transition: padding 0.3s ease;
}
.sp-contact-list .elementor-icon-list-item:hover { padding-left: 12px !important; }
.sp-contact-list .elementor-icon-list-item:first-child {
  border-top: 1px solid var(--sp-border);
}

/* TATA LETAK & WARNA ICON (KODE BERSIH) */
.sp-contact-list .elementor-icon-list-icon {
  color: var(--sp-orange-bright) !important;
  fill: var(--sp-orange-bright) !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 28px !important;
}
.sp-contact-list .elementor-icon-list-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--sp-orange-bright) !important;
}

.sp-contact-list .elementor-icon-list-text {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFF !important;
  letter-spacing: 0.02em !important;
}

.sp-contact-map iframe {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.55) brightness(0.95) contrast(0.92);
  border: 1px solid var(--sp-border);
}

/* ---------- STICKY CTA ---------- */
.sp-sticky-wrap {
  position: fixed !important;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: auto !important;
  background: transparent !important;
  padding: 0 !important;
  pointer-events: none;
}
.sp-sticky-wrap .elementor-container { width: auto !important; max-width: none !important; pointer-events: auto; }
.sp-sticky-cta .elementor-button {
  background: linear-gradient(95deg, #C14F0D, #F4880E) !important;
  color: #FFF !important;
  padding: 18px 26px !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 16px 48px rgba(193,79,13,0.55) !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.sp-sticky-cta .elementor-button:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 22px 60px rgba(193,79,13,0.7) !important;
}

/* ---------- spScrollPulse ---------- */
.sp-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.sp-scroll-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.sp-scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #F4880E;
  animation: spScrollPulse 2s ease-in-out infinite;
}

@keyframes spScrollPulse {
  0%, 100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
}
/* --------- sp-sticky-cta ---------- */
#sp-sticky-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  background: linear-gradient(95deg, #C14F0D, #F4880E);
  color: #FFFFFF;
  padding: 18px 26px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 48px rgba(193, 79, 13, 0.55);
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
  transition: all 0.4s ease;
}

#sp-sticky-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* --------- teks putih italic---------- */
.sp-accent {
  color: #FFFFFF;
  font-style: italic;
}

/*maps bergerak*/
.sp-map-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.sp-pin-marker {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #C14F0D, #F4880E);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(193, 79, 13, 0.6);
  position: relative;
}

.sp-pin-marker::after {
  content: '';
  position: absolute;
  inset: 8px;
  background: #FFFFFF;
  border-radius: 50%;
}

.sp-pin-marker svg {
  position: relative;
  z-index: 2;
  transform: rotate(45deg);
  color: #000000;
}

.sp-pin-pulse {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 2px solid #F4880E;
  border-radius: 50%;
  animation: spPinPulse 2.5s ease-out infinite;
}

.sp-pin-pulse--delayed {
  animation-delay: 1.25s;
}

@keyframes spPinPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.sp-pin-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #F4880E;
  padding: 8px 14px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

/* cara booking */
.sp-book-steps {
  counter-reset: sp-step;
}

.sp-book-steps .elementor-icon-list-item {
  counter-increment: sp-step;
  position: relative;
  padding-left: 48px !important;
  margin-bottom: 14px !important;
  align-items: flex-start !important;
}

.sp-book-steps .elementor-icon-list-item::before {
  content: counter(sp-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border: 1px solid #F4880E;
  color: #F4880E;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-book-steps .elementor-icon-list-icon {
  display: none !important;
}

/* ---------- RESPONSIVE (PENTING BUAT FIX MOBILE) ---------- */
@media (max-width: 1024px) {
  .sp-hero { padding: 100px 32px 80px !important; }
  .sp-hero .elementor-section { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 767px) {
  .sp-headline-1 .elementor-heading-title,
  .sp-headline-2 .elementor-heading-title,
  .sp-headline-3 .elementor-heading-title {
    font-size: 56px !important;
  }
  .sp-section-title .elementor-heading-title {
    font-size: 38px !important;
  }
  .sp-sticky-wrap { bottom: 14px; right: 14px; }
  .sp-sticky-cta .elementor-button { padding: 14px 18px !important; font-size: 10px !important; }
  
  /* FIX: Reset spesifik untuk Card di Mobile supaya kontennya bisa nafas */
  .sp-spec-card {
    height: auto !important; 
    min-height: min-content !important;
    display: block !important;
  }
}

/* HORIZONTAL SCROLL MOBILE UNTUK CARD SPEC */
@media (max-width: 767px) {
  .sp-mobile-carousel {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px; /* Kasih ruang bernapas di bawah */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Biar smooth di iOS */
  }
  
  /* Sembunyiin scrollbar biar rapi kayak carousel native */
  .sp-mobile-carousel::-webkit-scrollbar {
    display: none;
  }
  .sp-mobile-carousel {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Target child container (card lu) di dalam parent */
  .sp-mobile-carousel > .e-con,
  .sp-mobile-carousel > .e-container,
  .sp-mobile-carousel > div {
    flex: 0 0 85% !important; /* Lebar card 85% layar biar ngintip card sebelahnya */
    min-width: 85% !important;
    scroll-snap-align: center; /* Tiap geser, card otomatis ke tengah */
  }
}/* End custom CSS */