/* ============================================
   SUNDALAND RUN - MINIMALIST & CLEAN DESIGN
   ============================================ */

/* ============================================
   COLOR PALETTE - DARK THEME (POSTER INSPIRED)
   ============================================ */
:root {
  /* Dark Background Palette - Poster Inspired */
  --minimal-primary: #2C6E89;           /* Metallic Blue - Main */
  --minimal-accent: #4FA3B0;            /* Rain Blue / Teal - Accent */
  --minimal-primary-dark: #0A3D4E;      /* Deep Teal - Dark variant */
  --minimal-accent-amber: #FFB300;      /* Warm Amber - CTA */
  
  /* Background Colors */
  --minimal-background: #FFFFFF;         /* Pure White - for content sections */
  --minimal-background-dark: #0F1A23;    /* Dark Blue-Black - poster background */
  --minimal-background-light: #F5F7FA;  /* Very light grey - alternative */
  
  /* Text Colors */
  --minimal-text: #FFFFFF;               /* White - for dark background */
  --minimal-text-dark: #1A1A1A;          /* Near Black - for light background */
  --minimal-text-light: #B3C2C7;        /* Cool Silver - secondary text */
  --minimal-text-grey: #6B6B6B;         /* Grey - for light sections */
  
  /* Borders & Shadows */
  --minimal-border: #E0E0E0;            /* Light border */
  --minimal-border-dark: rgba(255, 255, 255, 0.1); /* Dark border */
  --minimal-shadow: rgba(0, 0, 0, 0.05);
  --minimal-shadow-hover: rgba(0, 0, 0, 0.1);
  --minimal-shadow-dark: rgba(0, 0, 0, 0.3);
}

/* ============================================
   TYPOGRAPHY - CLEAN & READABLE
   ============================================ */
/* Headings - Bold but not uppercase, cleaner */
h1, h2, h3, h4, h5, h6,
.heading-section h1,
.heading-section h2,
.heading-section h3,
.heading-section h4,
.heading-section h5,
.heading-section h6 {
  font-family: 'Poppins', 'Work Sans', sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;  /* No uppercase */
  letter-spacing: -0.02em !important;  /* Tighter spacing */
  color: var(--minimal-text) !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
}

.heading-section h2 {
  font-weight: 800 !important;
  font-size: 2.5rem !important;
}

.heading-section .subheading {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  color: var(--minimal-text-light) !important;
  margin-bottom: 0.5rem !important;
}

/* Body Text - Clean & Spacious */
body,
p,
.text-body,
.ftco-section p,
.card p,
section p {
  font-family: 'Poppins', 'Work Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
  color: var(--minimal-text-light) !important;
}

/* ============================================
   BUTTONS - FLAT & SIMPLE
   ============================================ */
/* Primary CTA - Metallic Blue */
.btn-primary-cta,
.cta-ticket-button,
.btn-primary-sundaland {
  background: var(--minimal-primary) !important;  /* Metallic Blue */
  color: var(--minimal-text) !important;
  border: 2px solid var(--minimal-primary) !important;
  border-radius: 4px !important;  /* Sharp corners, minimalist */
  padding: 16px 40px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;  /* No uppercase */
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: none !important;
}

.btn-primary-cta:hover,
.cta-ticket-button:hover,
.btn-primary-sundaland:hover {
  background: var(--minimal-accent) !important;  /* Teal on hover */
  color: var(--minimal-text) !important;
  border-color: var(--minimal-accent) !important;
  transform: none !important;  /* No bounce */
  box-shadow: none !important;
}

/* Secondary Button - Minimal */
.btn-secondary-sundaland,
.btn-outline-sundaland {
  background: transparent !important;
  color: var(--minimal-text) !important;
  border: 2px solid var(--minimal-border) !important;
  border-radius: 4px !important;
  padding: 16px 40px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.btn-secondary-sundaland:hover,
.btn-outline-sundaland:hover {
  background: var(--minimal-text) !important;
  color: var(--minimal-background) !important;
  border-color: var(--minimal-text) !important;
  transform: none !important;
}

/* Secondary button di hero (white border untuk kontras dengan GIF) */
.hero-wrap .btn-secondary-sundaland {
  background: transparent !important;
  color: var(--minimal-background) !important;
  border: 2px solid var(--minimal-background) !important;
}

.hero-wrap .btn-secondary-sundaland:hover {
  background: var(--minimal-background) !important;
  color: var(--minimal-primary) !important;
  border-color: var(--minimal-background) !important;
}

/* ============================================
   TEXTURED BACKGROUND PATTERNS
   ============================================ */
/* Subtle Dot Pattern */
.bg-textured-dots {
  background-color: var(--minimal-background);
  background-image: 
    radial-gradient(circle, var(--minimal-border) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  opacity: 0.5;
}

/* Subtle Grid Pattern */
.bg-textured-grid {
  background-color: var(--minimal-background);
  background-image: 
    linear-gradient(var(--minimal-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--minimal-border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
}

/* Subtle Lines Pattern */
.bg-textured-lines {
  background-color: var(--minimal-background);
  background-image: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 98px,
      var(--minimal-border) 100px,
      var(--minimal-border) 100px
    );
  opacity: 0.2;
}

/* Paper Texture Effect */
.bg-textured-paper {
  background-color: var(--minimal-background);
  background-image: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230A3D4E' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Diagonal Lines Subtle */
.bg-textured-diagonal {
  background-color: var(--minimal-background);
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      var(--minimal-border) 10px,
      var(--minimal-border) 11px
    );
  opacity: 0.15;
}

/* Primary Color Subtle Texture */
.bg-textured-primary {
  background-color: var(--minimal-background);
  background-image: 
    radial-gradient(circle at 2px 2px, rgba(10, 61, 78, 0.08) 1px, transparent 0);
  background-size: 32px 32px;
}

/* ============================================
   HERO SECTION - WITH BG GIF
   ============================================ */
.hero-wrap,
.hero-section {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
  min-height: 80vh !important;
  display: flex !important;
  align-items: center !important;
}

/* Overlay untuk memastikan text readable */
.hero-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 61, 78, 0.4) !important; /* Deep Teal dengan opacity */
  z-index: 1;
  pointer-events: none;
}

.hero-wrap .container {
  position: relative;
  z-index: 2;
}

/* Hero content text colors - white untuk kontras dengan GIF */
.hero-content h1,
.hero-content p,
.hero-content .text-white-sundaland {
  color: var(--minimal-background) !important; /* White text */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Remove texture overlay dari hero jika ada background image */
.hero-wrap[style*="background-image"]::before {
  display: none !important;
}

/* Remove mist overlay */
.hero-wrap .mist-overlay {
  display: none !important;
}

.hero-content {
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.hero-content h1 {
  font-size: 4rem !important;
  font-weight: 800 !important;
  color: var(--minimal-text) !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.1 !important;
}

.hero-content p {
  font-size: 1.25rem !important;
  color: var(--minimal-text-light) !important;
  margin-bottom: 2.5rem !important;
  font-weight: 400 !important;
}

/* Remove typewriter effect - simple fade in */
.typewriter-text {
  border: none !important;
  animation: none !important;
  width: 100% !important;
  display: block !important;
}

/* ============================================
   SECTIONS - DARK THEME BACKGROUND
   ============================================ */
.ftco-section {
  padding: 100px 0 !important;  /* More whitespace */
  position: relative;
}

.ftco-section.bg-white {
  background: var(--minimal-background-dark) !important; /* Dark background */
  color: var(--minimal-text) !important;
}

/* Text colors untuk dark background */
.ftco-section.bg-white h1,
.ftco-section.bg-white h2,
.ftco-section.bg-white h3,
.ftco-section.bg-white h4,
.ftco-section.bg-white h5,
.ftco-section.bg-white h6 {
  color: var(--minimal-text) !important;
}

.ftco-section.bg-white p {
  color: var(--minimal-text-light) !important;
}

/* Background polos tanpa texture */
.ftco-section.bg-white::before {
  display: none !important;
}

.ftco-section.bg-light {
  background: var(--minimal-background-light) !important;  /* Light grey */
  color: var(--minimal-text-dark) !important;
}

/* Text colors untuk light background */
.ftco-section.bg-light h1,
.ftco-section.bg-light h2,
.ftco-section.bg-light h3,
.ftco-section.bg-light h4,
.ftco-section.bg-light h5,
.ftco-section.bg-light h6 {
  color: var(--minimal-text-dark) !important;
}

.ftco-section.bg-light p {
  color: var(--minimal-text-grey) !important;
}

/* Background polos tanpa texture */
.ftco-section.bg-light::before {
  display: none !important;
}

/* Section Selector - Dark Theme Nav */
.section-selector {
  background: var(--minimal-background-dark) !important;  /* Dark background */
  backdrop-filter: none !important;
  box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
  border-bottom: 1px solid var(--minimal-border-dark) !important;
  position: relative;
}

/* Remove nav texture overlay */
.section-selector::before {
  display: none !important;
}

.section-selector .container {
  position: relative;
  z-index: 1;
}

.selector-item {
  color: var(--minimal-text-light) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 16px 24px !important;
  border-radius: 0 !important;
  transition: color 0.2s ease !important;
}

.selector-item:hover {
  color: var(--minimal-text) !important;
  background: transparent !important;
}

.selector-item.active {
  color: var(--minimal-primary) !important;  /* Metallic Blue */
  background: transparent !important;
  border-bottom: 2px solid var(--minimal-primary) !important;
  box-shadow: none !important;
}

.selector-item.active::after {
  display: none !important;
}

/* ============================================
   CARDS - DARK THEME WITH TEXTURED BACKGROUND
   ============================================ */
.card,
.route-card,
.ticket-item-card {
  background: rgba(255, 255, 255, 0.05) !important;  /* Semi-transparent white */
  border: 1px solid var(--minimal-border-dark) !important;
  border-radius: 4px !important;  /* Sharp corners */
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* Text colors untuk cards di dark background */
.bg-white .card,
.bg-white .route-card,
.bg-white .ticket-item-card {
  color: var(--minimal-text) !important;
}

.bg-white .card h1,
.bg-white .card h2,
.bg-white .card h3,
.bg-white .card h4,
.bg-white .card h5,
.bg-white .card h6,
.bg-white .route-card h1,
.bg-white .route-card h2,
.bg-white .route-card h3,
.bg-white .route-card h4 {
  color: var(--minimal-text) !important;
}

.bg-white .card p,
.bg-white .route-card p {
  color: var(--minimal-text-light) !important;
}

/* Add subtle texture to cards */
.card::before,
.route-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(10, 61, 78, 0.03) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

.card > *,
.route-card > * {
  position: relative;
  z-index: 1;
}

.card:hover,
.route-card:hover,
.ticket-item-card:hover {
  transform: translateY(-4px) !important;  /* Subtle lift */
  box-shadow: 0 4px 16px var(--minimal-shadow-hover) !important;
  border-color: var(--minimal-border) !important;
}

/* Benefit Cards - Dark Theme with Texture */
#ticket-box .p-4,
#ticket-box .bg-light {
  background: rgba(255, 255, 255, 0.05) !important;  /* Semi-transparent */
  border: 1px solid var(--minimal-border-dark) !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  color: var(--minimal-text) !important;
}

/* Text colors untuk benefit cards */
#ticket-box .p-4 h1,
#ticket-box .p-4 h2,
#ticket-box .p-4 h3,
#ticket-box .p-4 h4,
#ticket-box .p-4 h5,
#ticket-box .p-4 h6 {
  color: var(--minimal-text) !important;
}

#ticket-box .p-4 p {
  color: var(--minimal-text-light) !important;
}

/* Subtle texture on benefit cards */
#ticket-box .p-4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230A3D4E' fill-opacity='0.02'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h20v-2h2v20h-2v-2H22v20h-2zm0 0v2H0v-2h20zm0 0h2v20H20v-20zM0 20h20v20H0V20zm22 0v20h20V20H22z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

#ticket-box .p-4 > * {
  position: relative;
  z-index: 1;
}

#ticket-box .p-4:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 16px var(--minimal-shadow-dark) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--minimal-primary) !important;
}

/* ============================================
   ANIMATIONS - MINIMAL & SUBTLE
   ============================================ */
/* Simple fade in - no fancy effects */
@keyframes minimalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-content {
  animation: minimalFadeIn 0.6s ease-out !important;
}

.hero-content h1,
.hero-content p,
.hero-content .d-flex {
  animation: minimalFadeIn 0.6s ease-out !important;
}

/* Remove all other animations */
.mist-overlay,
.route-image::before {
  display: none !important;
}

.route-track-img {
  animation: minimalFadeIn 0.8s ease-out !important;
}

/* ============================================
   TYPOGRAPHY COLORS
   ============================================ */
.text-primary,
.text-primary-sundaland {
  color: var(--minimal-primary) !important;
}

.text-secondary-sundaland {
  color: var(--minimal-text-light) !important;
}

.text-white-sundaland {
  color: var(--minimal-background) !important;
}

.text-dark-sundaland {
  color: var(--minimal-text) !important;
}

/* Heading colors */
.heading-section h2 span,
.heading-section h1 span {
  color: var(--minimal-primary) !important;  /* Metallic Blue */
}

/* Heading colors untuk dark background */
.bg-white .heading-section h2 span,
.bg-white .heading-section h1 span {
  color: var(--minimal-accent) !important;  /* Teal accent */
}

/* Text muted colors - dark theme */
.text-muted {
  color: var(--minimal-text-light) !important;  /* Cool Silver */
}

.bg-light .text-muted {
  color: var(--minimal-text-grey) !important;  /* Grey for light sections */
}

/* Route card text - harus visible di dark background */
.bg-white .route-card p,
.bg-light .route-card p {
  color: var(--minimal-text-light) !important;
}

.bg-light .route-card p {
  color: var(--minimal-text-grey) !important;
}

/* Route card headings */
.bg-white .route-card h4,
.bg-white .route-card h3 {
  color: var(--minimal-text) !important;
}

.bg-light .route-card h4,
.bg-light .route-card h3 {
  color: var(--minimal-text-dark) !important;
}

/* Track section: remove textured box from route cards */
#track .route-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#track .route-card::before {
  display: none !important;
}

/* Tracks section: tighten title spacing */
#track .row.mb-5.pb-3 {
  margin-bottom: 1.5rem !important;
  padding-bottom: 0 !important;
}
#track .heading-section {
  margin-bottom: 1rem !important;
}
#track .heading-section h2 {
  margin-bottom: 0.5rem !important;
}
#track .heading-section p {
  margin-bottom: 0 !important;
}

/* ============================================
   FAQ - COLLAPSIBLE DETAILS
   ============================================ */
#faq .faq-list details {
  border: 1px solid var(--minimal-border-dark) !important;
  border-radius: 6px !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
}

#faq .faq-list details[open] {
  background: rgba(255, 255, 255, 0.06) !important;
}

#faq .faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px !important;
  font-weight: 600;
  color: var(--minimal-text) !important;
  position: relative;
}

#faq .faq-list summary::-webkit-details-marker { display: none; }

#faq .faq-list summary::after {
  content: '\25BC'; /* down chevron */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.2s ease;
  font-size: 0.9rem;
  opacity: 0.8;
}

#faq .faq-list details[open] > summary::after {
  transform: translateY(-50%) rotate(-180deg);
}

#faq .faq-body {
  padding: 0 18px 16px 18px !important;
  color: var(--minimal-text-light) !important;
}

#faq .faq-body ul { margin: 0 0 0 18px !important; }
#faq .faq-body li { margin: 4px 0 !important; }

/* End FAQ styles */

/* ============================================
   FOOTER - DARK THEME WITH TEXTURE
   ============================================ */
.ftco-footer,
.ftco-footer.ftco-bg-dark {
  background: var(--minimal-background-dark) !important;  /* Dark background */
  color: var(--minimal-text-light) !important;
  border-top: 1px solid var(--minimal-border-dark) !important;
  padding: 60px 0 !important;
  position: relative;
}

/* Subtle texture on footer */
.ftco-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 2px 2px, rgba(10, 61, 78, 0.03) 1px, transparent 0);
  background-size: 36px 36px;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

.ftco-footer > * {
  position: relative;
  z-index: 1;
}

.ftco-footer a,
.ftco-footer a.text-primary {
  color: var(--minimal-text-light) !important;
  transition: color 0.2s ease !important;
}

.ftco-footer a:hover,
.ftco-footer a.text-primary:hover {
  color: var(--minimal-primary) !important;
}

/* ============================================
   GALLERY & SPONSORS - DARK THEME
   ============================================ */
/* Gallery Section - Dark Theme */
#gallery .gallery-item {
  border-radius: 4px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
  margin-bottom: 1.5rem;
  border: 1px solid var(--minimal-border-dark) !important;
  box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
}

#gallery .gallery-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 16px var(--minimal-shadow-dark) !important;
  border-color: var(--minimal-primary) !important;
}

/* Gallery text colors untuk light background */
.bg-light .text-muted {
  color: var(--minimal-text-grey) !important;
}

/* Sponsor Section - Dark Theme */
#sponsorship .img-fluid {
  transition: all 0.2s ease !important;
  filter: grayscale(100%) brightness(0.8) !important;
  opacity: 0.6 !important;
}

#sponsorship .img-fluid:hover {
  transform: scale(1.05) !important;
  filter: grayscale(0%) brightness(1) !important;
  opacity: 1 !important;
}

/* Supporting Section - Dark Theme */
#supporting .partner-logo {
  transition: all 0.2s ease !important;
}

#supporting .partner-logo:hover {
  transform: scale(1.08) !important;
}

#supporting h2 span {
  color: var(--minimal-accent) !important;  /* Teal accent */
}

/* Supporting logos - adjust visibility */
.bg-white #supporting img {
  filter: brightness(0.9) !important;
}

.bg-white #supporting .partner-logo:hover img {
  filter: brightness(1) !important;
}

/* ============================================
   UTILITY - MINIMALIST
   ============================================ */
/* Remove gradient utilities */
.gradient-sundaland {
  background: var(--minimal-background) !important;
}

/* Clean shadows */
.shadow-sundaland {
  box-shadow: 0 2px 8px var(--minimal-shadow) !important;
}

/* ============================================
   RESPONSIVE - CLEAN
   ============================================ */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem !important;
  }
  
  .hero-content p {
    font-size: 1.1rem !important;
  }
  
  .heading-section h2 {
    font-size: 2rem !important;
  }
  
  .ftco-section {
    padding: 60px 0 !important;
  }
  
  .btn-primary-cta,
  .cta-ticket-button,
  .btn-primary-sundaland {
    padding: 14px 32px !important;
    font-size: 1rem !important;
  }
}

/* ============================================
   OVERRIDE LOADER
   ============================================ */
#ftco-loader .path {
  stroke: var(--minimal-primary) !important;
}

/* ============================================
   REMOVE EXCESSIVE EFFECTS
   ============================================ */
/* Remove all uppercase from headings unless specified */
h1, h2, h3, h4, h5, h6 {
  text-transform: none !important;
}

/* Keep only essential spacing */
* {
  letter-spacing: normal !important;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em !important;
}

/* ============================================
   SUNDALAND RUN - MINIMALIST & CLEAN DESIGN
   ============================================ */

/* ============================================
   COLOR PALETTE - DARK THEME (POSTER INSPIRED)
   ============================================ */
   :root {
    /* Dark Background Palette - Poster Inspired */
    --minimal-primary: #2C6E89;           /* Metallic Blue - Main */
    --minimal-accent: #4FA3B0;            /* Rain Blue / Teal - Accent */
    --minimal-primary-dark: #0A3D4E;      /* Deep Teal - Dark variant */
    --minimal-accent-amber: #FFB300;      /* Warm Amber - CTA */
    
    /* Background Colors */
    --minimal-background: #FFFFFF;         /* Pure White - for content sections */
    --minimal-background-dark: #0F1A23;    /* Dark Blue-Black - poster background */
    --minimal-background-light: #F5F7FA;  /* Very light grey - alternative */
    
    /* Text Colors */
    --minimal-text: #FFFFFF;               /* White - for dark background */
    --minimal-text-dark: #1A1A1A;          /* Near Black - for light background */
    --minimal-text-light: #B3C2C7;        /* Cool Silver - secondary text */
    --minimal-text-grey: #6B6B6B;         /* Grey - for light sections */
    
    /* Borders & Shadows */
    --minimal-border: #E0E0E0;            /* Light border */
    --minimal-border-dark: rgba(255, 255, 255, 0.1); /* Dark border */
    --minimal-shadow: rgba(0, 0, 0, 0.05);
    --minimal-shadow-hover: rgba(0, 0, 0, 0.1);
    --minimal-shadow-dark: rgba(0, 0, 0, 0.3);
  }
  
  /* ============================================
     TYPOGRAPHY - CLEAN & READABLE
     ============================================ */
  /* Headings - Bold but not uppercase, cleaner */
  h1, h2, h3, h4, h5, h6,
  .heading-section h1,
  .heading-section h2,
  .heading-section h3,
  .heading-section h4,
  .heading-section h5,
  .heading-section h6 {
    font-family: 'Poppins', 'Work Sans', sans-serif !important;
    font-weight: 700 !important;
    text-transform: none !important;  /* No uppercase */
    letter-spacing: -0.02em !important;  /* Tighter spacing */
    color: var(--minimal-text) !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .heading-section h2 {
    font-weight: 800 !important;
    font-size: 2.5rem !important;
  }
  
  .heading-section .subheading {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    color: var(--minimal-text-light) !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Body Text - Clean & Spacious */
  body,
  p,
  .text-body,
  .ftco-section p,
  .card p,
  section p {
    font-family: 'Poppins', 'Work Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: var(--minimal-text-light) !important;
  }
  
  /* ============================================
     BUTTONS - FLAT & SIMPLE
     ============================================ */
  /* Primary CTA - Metallic Blue */
  .btn-primary-cta,
  .cta-ticket-button,
  .btn-primary-sundaland {
    background: var(--minimal-primary) !important;  /* Metallic Blue */
    color: var(--minimal-text) !important;
    border: 2px solid var(--minimal-primary) !important;
    border-radius: 4px !important;  /* Sharp corners, minimalist */
    padding: 16px 40px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;  /* No uppercase */
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: none !important;
  }
  
  .btn-primary-cta:hover,
  .cta-ticket-button:hover,
  .btn-primary-sundaland:hover {
    background: var(--minimal-accent) !important;  /* Teal on hover */
    color: var(--minimal-text) !important;
    border-color: var(--minimal-accent) !important;
    transform: none !important;  /* No bounce */
    box-shadow: none !important;
  }
  
  /* Secondary Button - Minimal */
  .btn-secondary-sundaland,
  .btn-outline-sundaland {
    background: transparent !important;
    color: var(--minimal-text) !important;
    border: 2px solid var(--minimal-border) !important;
    border-radius: 4px !important;
    padding: 16px 40px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
  }
  
  .btn-secondary-sundaland:hover,
  .btn-outline-sundaland:hover {
    background: var(--minimal-text) !important;
    color: var(--minimal-background) !important;
    border-color: var(--minimal-text) !important;
    transform: none !important;
  }
  
  /* Secondary button di hero (white border untuk kontras dengan GIF) */
  .hero-wrap .btn-secondary-sundaland {
    background: transparent !important;
    color: var(--minimal-background) !important;
    border: 2px solid var(--minimal-background) !important;
  }
  
  .hero-wrap .btn-secondary-sundaland:hover {
    background: var(--minimal-background) !important;
    color: var(--minimal-primary) !important;
    border-color: var(--minimal-background) !important;
  }
  
  /* ============================================
     TEXTURED BACKGROUND PATTERNS
     ============================================ */
  /* Subtle Dot Pattern */
  .bg-textured-dots {
    background-color: var(--minimal-background);
    background-image: 
      radial-gradient(circle, var(--minimal-border) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    opacity: 0.5;
  }
  
  /* Subtle Grid Pattern */
  .bg-textured-grid {
    background-color: var(--minimal-background);
    background-image: 
      linear-gradient(var(--minimal-border) 1px, transparent 1px),
      linear-gradient(90deg, var(--minimal-border) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
  }
  
  /* Subtle Lines Pattern */
  .bg-textured-lines {
    background-color: var(--minimal-background);
    background-image: 
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 98px,
        var(--minimal-border) 100px,
        var(--minimal-border) 100px
      );
    opacity: 0.2;
  }
  
  /* Paper Texture Effect */
  .bg-textured-paper {
    background-color: var(--minimal-background);
    background-image: 
      url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230A3D4E' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  
  /* Diagonal Lines Subtle */
  .bg-textured-diagonal {
    background-color: var(--minimal-background);
    background-image: 
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        var(--minimal-border) 10px,
        var(--minimal-border) 11px
      );
    opacity: 0.15;
  }
  
  /* Primary Color Subtle Texture */
  .bg-textured-primary {
    background-color: var(--minimal-background);
    background-image: 
      radial-gradient(circle at 2px 2px, rgba(10, 61, 78, 0.08) 1px, transparent 0);
    background-size: 32px 32px;
  }
  
  /* ============================================
     HERO SECTION - WITH BG GIF
     ============================================ */
  .hero-wrap,
  .hero-section {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
    min-height: 80vh !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Overlay untuk memastikan text readable */
  .hero-wrap .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 61, 78, 0.4) !important; /* Deep Teal dengan opacity */
    z-index: 1;
    pointer-events: none;
  }
  
  .hero-wrap .container {
    position: relative;
    z-index: 2;
  }
  
  /* Hero content text colors - white untuk kontras dengan GIF */
  .hero-content h1,
  .hero-content p,
  .hero-content .text-white-sundaland {
    color: var(--minimal-background) !important; /* White text */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Remove texture overlay dari hero jika ada background image */
  .hero-wrap[style*="background-image"]::before {
    display: none !important;
  }
  
  /* Remove mist overlay */
  .hero-wrap .mist-overlay {
    display: none !important;
  }
  
  .hero-content {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
  }
  
  .hero-content h1 {
    font-size: 4rem !important;
    font-weight: 800 !important;
    color: var(--minimal-text) !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.1 !important;
  }
  
  .hero-content p {
    font-size: 1.25rem !important;
    color: var(--minimal-text-light) !important;
    margin-bottom: 2.5rem !important;
    font-weight: 400 !important;
  }
  
  /* Remove typewriter effect - simple fade in */
  .typewriter-text {
    border: none !important;
    animation: none !important;
    width: 100% !important;
    display: block !important;
  }
  
  /* ============================================
     SECTIONS - DARK THEME BACKGROUND
     ============================================ */
  .ftco-section {
    padding: 100px 0 !important;  /* More whitespace */
    position: relative;
  }
  
  .ftco-section.bg-white {
    background: var(--minimal-background-dark) !important; /* Dark background */
    color: var(--minimal-text) !important;
  }
  
  /* Text colors untuk dark background */
  .ftco-section.bg-white h1,
  .ftco-section.bg-white h2,
  .ftco-section.bg-white h3,
  .ftco-section.bg-white h4,
  .ftco-section.bg-white h5,
  .ftco-section.bg-white h6 {
    color: var(--minimal-text) !important;
  }
  
  .ftco-section.bg-white p {
    color: var(--minimal-text-light) !important;
  }
  
  /* Background polos tanpa texture */
  .ftco-section.bg-white::before {
    display: none !important;
  }
  
  .ftco-section.bg-light {
    background: var(--minimal-background-light) !important;  /* Light grey */
    color: var(--minimal-text-dark) !important;
  }
  
  /* Text colors untuk light background */
  .ftco-section.bg-light h1,
  .ftco-section.bg-light h2,
  .ftco-section.bg-light h3,
  .ftco-section.bg-light h4,
  .ftco-section.bg-light h5,
  .ftco-section.bg-light h6 {
    color: var(--minimal-text-dark) !important;
  }
  
  .ftco-section.bg-light p {
    color: var(--minimal-text-grey) !important;
  }
  
  /* Background polos tanpa texture */
  .ftco-section.bg-light::before {
    display: none !important;
  }
  
  /* Section Selector - Dark Theme Nav */
  .section-selector {
    background: var(--minimal-background-dark) !important;  /* Dark background */
    backdrop-filter: none !important;
    box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
    border-bottom: 1px solid var(--minimal-border-dark) !important;
    position: relative;
  }
  
  /* Remove nav texture overlay */
  .section-selector::before {
    display: none !important;
  }
  
  .section-selector .container {
    position: relative;
    z-index: 1;
  }
  
  .selector-item {
    color: var(--minimal-text-light) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 16px 24px !important;
    border-radius: 0 !important;
    transition: color 0.2s ease !important;
  }
  
  .selector-item:hover {
    color: var(--minimal-text) !important;
    background: transparent !important;
  }
  
  .selector-item.active {
    color: var(--minimal-primary) !important;  /* Metallic Blue */
    background: transparent !important;
    border-bottom: 2px solid var(--minimal-primary) !important;
    box-shadow: none !important;
  }
  
  .selector-item.active::after {
    display: none !important;
  }
  
  /* ============================================
     CARDS - DARK THEME WITH TEXTURED BACKGROUND
     ============================================ */
  .card,
  .route-card,
  .ticket-item-card {
    background: rgba(255, 255, 255, 0.05) !important;  /* Semi-transparent white */
    border: 1px solid var(--minimal-border-dark) !important;
    border-radius: 4px !important;  /* Sharp corners */
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
  }
  
  /* Text colors untuk cards di dark background */
  .bg-white .card,
  .bg-white .route-card,
  .bg-white .ticket-item-card {
    color: var(--minimal-text) !important;
  }
  
  .bg-white .card h1,
  .bg-white .card h2,
  .bg-white .card h3,
  .bg-white .card h4,
  .bg-white .card h5,
  .bg-white .card h6,
  .bg-white .route-card h1,
  .bg-white .route-card h2,
  .bg-white .route-card h3,
  .bg-white .route-card h4 {
    color: var(--minimal-text) !important;
  }
  
  .bg-white .card p,
  .bg-white .route-card p {
    color: var(--minimal-text-light) !important;
  }
  
  /* Add subtle texture to cards */
  .card::before,
  .route-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 1px 1px, rgba(10, 61, 78, 0.03) 1px, transparent 0);
    background-size: 24px 24px;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
  }
  
  .card > *,
  .route-card > * {
    position: relative;
    z-index: 1;
  }
  
  .card:hover,
  .route-card:hover,
  .ticket-item-card:hover {
    transform: translateY(-4px) !important;  /* Subtle lift */
    box-shadow: 0 4px 16px var(--minimal-shadow-hover) !important;
    border-color: var(--minimal-border) !important;
  }
  
  /* Ticket Period Cards */
  .ticket-period-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--minimal-border-dark) !important;
    border-radius: 4px !important;
    padding: 24px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    height: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .ticket-period-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 4px 16px var(--minimal-shadow-dark) !important;
    border-color: var(--minimal-primary) !important;
  }
  
  .ticket-period-card.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: rgba(255, 255, 255, 0.02) !important;
  }
  
  .period-end-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }
  
  .period-content {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  
  .period-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--minimal-text) !important;
    margin-bottom: 12px !important;
  }
  
  .period-date {
    font-size: 1rem !important;
    color: var(--minimal-text-light) !important;
    margin-bottom: 16px !important;
  }
  
  .period-status {
    margin-top: auto;
  }
  
  .status-badge {
    display: inline-block;
    padding: 6px 16px !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }
  
  .status-badge.ended {
    background: rgba(107, 114, 128, 0.3) !important; /* Grey */
    color: var(--minimal-text-light) !important;
    border: 1px solid rgba(107, 114, 128, 0.5) !important;
  }
  
  .status-badge.active {
    background: rgba(79, 163, 176, 0.3) !important; /* Teal */
    color: var(--minimal-accent) !important;
    border: 1px solid var(--minimal-accent) !important;
  }
  
  .status-badge.upcoming {
    background: rgba(44, 110, 137, 0.3) !important; /* Metallic Blue */
    color: var(--minimal-primary) !important;
    border: 1px solid var(--minimal-primary) !important;
  }
  
  /* Benefit Cards - Dark Theme with Texture */
  #ticket-box .p-4,
  #ticket-box .bg-light {
    background: rgba(255, 255, 255, 0.05) !important;  /* Semi-transparent */
    border: 1px solid var(--minimal-border-dark) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    color: var(--minimal-text) !important;
  }
  
  /* Text colors untuk benefit cards */
  #ticket-box .p-4 h1,
  #ticket-box .p-4 h2,
  #ticket-box .p-4 h3,
  #ticket-box .p-4 h4,
  #ticket-box .p-4 h5,
  #ticket-box .p-4 h6 {
    color: var(--minimal-text) !important;
  }
  
  #ticket-box .p-4 p {
    color: var(--minimal-text-light) !important;
  }
  
  /* Subtle texture on benefit cards */
  #ticket-box .p-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230A3D4E' fill-opacity='0.02'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h20v-2h2v20h-2v-2H22v20h-2zm0 0v2H0v-2h20zm0 0h2v20H20v-20zM0 20h20v20H0V20zm22 0v20h20V20H22z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
    z-index: 0;
    pointer-events: none;
  }
  
  #ticket-box .p-4 > * {
    position: relative;
    z-index: 1;
  }
  
  #ticket-box .p-4:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 4px 16px var(--minimal-shadow-dark) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--minimal-primary) !important;
  }
  
  /* ============================================
     ANIMATIONS - MINIMAL & SUBTLE
     ============================================ */
  /* Simple fade in - no fancy effects */
  @keyframes minimalFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .hero-content {
    animation: minimalFadeIn 0.6s ease-out !important;
  }
  
  .hero-content h1,
  .hero-content p,
  .hero-content .d-flex {
    animation: minimalFadeIn 0.6s ease-out !important;
  }
  
  /* Remove all other animations */
  .mist-overlay,
  .route-image::before {
    display: none !important;
  }
  
  .route-track-img {
    animation: minimalFadeIn 0.8s ease-out !important;
  }
  
  /* ============================================
     TYPOGRAPHY COLORS
     ============================================ */
  .text-primary,
  .text-primary-sundaland {
    color: var(--minimal-primary) !important;
  }
  
  .text-secondary-sundaland {
    color: var(--minimal-text-light) !important;
  }
  
  .text-white-sundaland {
    color: var(--minimal-background) !important;
  }
  
  .text-dark-sundaland {
    color: var(--minimal-text) !important;
  }
  
  /* Heading colors */
  .heading-section h2 span,
  .heading-section h1 span {
    color: var(--minimal-primary) !important;  /* Metallic Blue */
  }
  
  /* Heading colors untuk dark background */
  .bg-white .heading-section h2 span,
  .bg-white .heading-section h1 span {
    color: var(--minimal-accent) !important;  /* Teal accent */
  }
  
  /* Text muted colors - dark theme */
  .text-muted {
    color: var(--minimal-text-light) !important;  /* Cool Silver */
  }
  
  .bg-light .text-muted {
    color: var(--minimal-text-grey) !important;  /* Grey for light sections */
  }
  
  /* Route card text - harus visible di dark background */
  .bg-white .route-card p,
  .bg-light .route-card p {
    color: var(--minimal-text-light) !important;
  }
  
  .bg-light .route-card p {
    color: var(--minimal-text-grey) !important;
  }
  
  /* Route card headings */
  .bg-white .route-card h4,
  .bg-white .route-card h3 {
    color: var(--minimal-text) !important;
  }
  
  .bg-light .route-card h4,
  .bg-light .route-card h3 {
    color: var(--minimal-text-dark) !important;
  }
  
  /* Track section: remove textured box from route cards */
  #track .route-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  #track .route-card::before {
    display: none !important;
  }
  
  /* Tracks section: tighten title spacing */
  #track .row.mb-5.pb-3 {
    margin-bottom: 1.5rem !important;
    padding-bottom: 0 !important;
  }
  #track .heading-section {
    margin-bottom: 1rem !important;
  }
  #track .heading-section h2 {
    margin-bottom: 0.5rem !important;
  }
  #track .heading-section p {
    margin-bottom: 0 !important;
  }
  
  /* ============================================
     FAQ - COLLAPSIBLE DETAILS
     ============================================ */
  #faq .faq-list details {
    border: 1px solid var(--minimal-border-dark) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
  }
  
  #faq .faq-list details[open] {
    background: rgba(255, 255, 255, 0.06) !important;
  }
  
  #faq .faq-list summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px !important;
    font-weight: 600;
    color: var(--minimal-text) !important;
    position: relative;
  }
  
  #faq .faq-list summary::-webkit-details-marker { display: none; }
  
  #faq .faq-list summary::after {
    content: '\25BC'; /* down chevron */
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
    font-size: 0.9rem;
    opacity: 0.8;
  }
  
  #faq .faq-list details[open] > summary::after {
    transform: translateY(-50%) rotate(-180deg);
  }
  
  #faq .faq-body {
    padding: 0 18px 16px 18px !important;
    color: var(--minimal-text-light) !important;
  }
  
  #faq .faq-body ul { margin: 0 0 0 18px !important; }
  #faq .faq-body li { margin: 4px 0 !important; }
  
  /* End FAQ styles */
  
  /* ============================================
     FOOTER - DARK THEME WITH TEXTURE
     ============================================ */
  .ftco-footer,
  .ftco-footer.ftco-bg-dark {
    background: var(--minimal-background-dark) !important;  /* Dark background */
    color: var(--minimal-text-light) !important;
    border-top: 1px solid var(--minimal-border-dark) !important;
    padding: 60px 0 !important;
    position: relative;
  }
  
  /* Subtle texture on footer */
  .ftco-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 2px 2px, rgba(10, 61, 78, 0.03) 1px, transparent 0);
    background-size: 36px 36px;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
  }
  
  .ftco-footer > * {
    position: relative;
    z-index: 1;
  }
  
  .ftco-footer a,
  .ftco-footer a.text-primary {
    color: var(--minimal-text-light) !important;
    transition: color 0.2s ease !important;
  }
  
  .ftco-footer a:hover,
  .ftco-footer a.text-primary:hover {
    color: var(--minimal-primary) !important;
  }
  
  /* ============================================
     GALLERY & SPONSORS - DARK THEME
     ============================================ */
  /* Gallery Section - Dark Theme */
  #gallery .gallery-item {
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    margin-bottom: 1.5rem;
    border: 1px solid var(--minimal-border-dark) !important;
    box-shadow: 0 2px 8px var(--minimal-shadow-dark) !important;
  }
  
  #gallery .gallery-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 4px 16px var(--minimal-shadow-dark) !important;
    border-color: var(--minimal-primary) !important;
  }
  
  /* Gallery text colors untuk light background */
  .bg-light .text-muted {
    color: var(--minimal-text-grey) !important;
  }
  
  /* Sponsor Section - Dark Theme */
  #sponsorship .img-fluid {
    transition: all 0.2s ease !important;
    filter: grayscale(100%) brightness(0.8) !important;
    opacity: 0.6 !important;
  }
  
  #sponsorship .img-fluid:hover {
    transform: scale(1.05) !important;
    filter: grayscale(0%) brightness(1) !important;
    opacity: 1 !important;
  }
  
  /* Supporting Section - Dark Theme */
  #supporting .partner-logo {
    transition: all 0.2s ease !important;
  }
  
  #supporting .partner-logo:hover {
    transform: scale(1.08) !important;
  }
  
  #supporting h2 span {
    color: var(--minimal-accent) !important;  /* Teal accent */
  }
  
  /* Supporting logos - adjust visibility */
  .bg-white #supporting img {
    filter: brightness(0.9) !important;
  }
  
  .bg-white #supporting .partner-logo:hover img {
    filter: brightness(1) !important;
  }
  
  /* ============================================
     UTILITY - MINIMALIST
     ============================================ */
  /* Remove gradient utilities */
  .gradient-sundaland {
    background: var(--minimal-background) !important;
  }
  
  /* Clean shadows */
  .shadow-sundaland {
    box-shadow: 0 2px 8px var(--minimal-shadow) !important;
  }
  
  /* ============================================
     RESPONSIVE - CLEAN
     ============================================ */
  @media (max-width: 768px) {
    .hero-content h1 {
      font-size: 2.5rem !important;
    }
    
    .hero-content p {
      font-size: 1.1rem !important;
    }
    
    .heading-section h2 {
      font-size: 2rem !important;
    }
    
    .ftco-section {
      padding: 60px 0 !important;
    }
    
    .btn-primary-cta,
    .cta-ticket-button,
    .btn-primary-sundaland {
      padding: 14px 32px !important;
      font-size: 1rem !important;
    }
  }
  
  /* ============================================
     OVERRIDE LOADER
     ============================================ */
  #ftco-loader .path {
    stroke: var(--minimal-primary) !important;
  }
  
  /* ============================================
     REMOVE EXCESSIVE EFFECTS
     ============================================ */
  /* Remove all uppercase from headings unless specified */
  h1, h2, h3, h4, h5, h6 {
    text-transform: none !important;
  }
  
  /* Keep only essential spacing */
  * {
    letter-spacing: normal !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em !important;
  }