/* 
========================================================
Designed & Developed by: pangestu.project
Contact: pangestu.project007@gmail.com
Phone: +62895395766888
========================================================
*/


/* ========== FLOATING CTA ANIMATIONS ========== */
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.animate-wiggle {
  animation: wiggle 0.3s ease-in-out infinite;
}

@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-bounce {
  animation: bounce-gentle 2s infinite;
}

@keyframes pulse-gentle {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
}

.animate-pulse {
  animation: pulse-gentle 2s infinite;
}

/* Global Form Focus Styles */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: #54c3eb !important; /* brand color */
  box-shadow: 0 0 0 3px rgba(84, 195, 235, 0.2) !important;
}

/* Fix for product tabs text color on hover when active */
.product-tab.bg-brand:hover {
  color: white !important;
}

/* ========== PAGE TRANSITIONS ========== */
html {
  background-color: #034d91; /* Rich Dark Blue - Prevents white flash */
}

body {
  transition: opacity 0.3s ease-in-out;
}

body.page-exit {
  opacity: 0 !important;
  pointer-events: none;
}



/* ========== WELCOME SCREEN (PRELOADER) ========== */
#welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #034d91; /* Rich Dark Blue */
  display: flex;
  flex-direction: column; /* Back to Vertical */
  align-items: center;
  justify-content: center;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), visibility 1s;
  padding: 2rem;
}

#welcome-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

#welcome-screen.fade-out .welcome-logo-container,
#welcome-screen.fade-out .welcome-brand-text {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.5s ease-in;
}

.welcome-logo-container {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 2rem; /* Space below logo */
  transition: all 0.5s ease;
}

/* Removed welcome-logo-glow and welcome-pulse */

.welcome-logo-inner {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 10;
}

.welcome-brand-text {
  animation: welcome-fade-up 1s ease-out forwards;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  text-align: center;
  transition: all 0.5s ease;
  background: linear-gradient(
    to right, 
    #ffffff 20%, 
    #54c3eb 40%, 
    #54c3eb 60%, 
    #ffffff 80%
  );
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: welcome-fade-up 1s ease-out forwards, shimmer 3s linear infinite;
}

.welcome-brand-name-1 {
  font-weight: 800;
  font-size: 2.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.welcome-brand-name-2 {
  font-weight: 800;
  font-size: 2.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

@keyframes shimmer {
  to {
    background-position: 200% center;
  }
}

@keyframes welcome-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile Precision Adjustments */
@media (max-width: 640px) {
  .welcome-logo-container {
    width: 100px;
    height: 100px;
    margin-bottom: 1.5rem;
  }
  
  .welcome-brand-name-1,
  .welcome-brand-name-2 {
    font-size: 1.25rem;
    letter-spacing: 0.05em;
  }

  .welcome-brand-text {
    gap: 0.35rem;
  }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Custom scrollbar indicator for Filter Bar on Mobile */
@media (max-width: 768px) {
  #filterBar::-webkit-scrollbar {
    display: block;
    height: 3px;
  }
  #filterBar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.05);
    border-radius: 10px;
  }
  #filterBar::-webkit-scrollbar-thumb {
    background: #54c3eb;
    border-radius: 10px;
  }
  
  /* Remove scrollbar-hide only for filterBar on mobile to show indicator */
  #filterBar.scrollbar-hide {
    -ms-overflow-style: auto;
    scrollbar-width: thin;
    scrollbar-color: #54c3eb rgba(15, 23, 42, 0.05);
  }
}

/* Fix for Video Aspect Ratio on Mobile Fullscreen */
.aspect-video {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  position: relative !important;
}

iframe, video {
  max-width: 100% !important;
  object-fit: cover !important;
}

#hero-media-container iframe {
  max-width: none !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100vw !important;
  height: 56.25vw !important; /* 16:9 ratio (9/16 = 0.5625) */
  min-height: 100vh !important;
  min-width: 177.78vh !important; /* 16:9 ratio (16/9 = 1.7778) */
}

#hero-media-container video {
  max-width: none !important;
}

/* Ensure iframe inside aspect-video fills perfectly */
.aspect-video iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Manual override for Blue Line Accent on Cards */
.border-brand-accent {
  border: 2px solid rgba(84, 195, 235, 0.2) !important;
  transition: all 0.5s ease-in-out !important;
}

.border-brand-accent:hover {
  border-color: rgba(84, 195, 235, 0.6) !important;
  box-shadow: 0 20px 40px -15px rgba(84, 195, 235, 0.2) !important;
}

/* ========== MODAL SIZING ========== */

/* Modal show/hide via JS - uses opacity-based system from Tailwind */
#caseStudyModal.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Inner modal content box: always constrained */
#caseStudyModal > div.relative {
  max-height: 90vh;
}

/* Desktop: exact 650px */
@media (min-width: 768px) {
  #caseStudyModal > div.relative {
    height: 650px !important;
    min-height: 650px !important;
    max-height: 650px !important;
  }
}

/* Mobile: cap at 90vh and lock media panel */
@media (max-width: 767px) {
  #caseStudyModal > div.relative {
    height: 90vh !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    border-radius: 1.5rem !important;
  }
  #caseStudyModal > div.relative > div.bg-slate-950 {
    height: 38vh !important;
    min-height: 38vh !important;
    max-height: 38vh !important;
    flex-shrink: 0 !important;
  }
  #caseStudyModal > div.relative > div.overflow-y-auto {
    height: 52vh !important;
    min-height: 52vh !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
  }
}



/* Missing Tailwind Classes */
.aspect-video {
  aspect-ratio: 16 / 9 !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Force Square Aspect Ratio for Product Cards */
.product-card-img-container {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.product-card-img-container img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ========== HERO DYNAMIC STYLING ========== */
#hero {
  --hero-title-size-d: 60px;
  --hero-title-size-m: 32px;
  --hero-badge-size-d: 12px;
  --hero-badge-size-m: 10px;
  --hero-sub-size-d: 18px;
  --hero-sub-size-m: 14px;
  --hero-badge-tracking: 0.3em;
  --hero-grad-1: #ffffff;
  --hero-grad-2: #54c3eb;
  --hero-grad-angle: 90deg;
  --hero-color: #ffffff;
  --hero-overlay-opacity: 0.6;
  --hero-overlay-blur: 2px;
}

#hero-title {
  font-size: var(--hero-title-size-m) !important;
  line-height: 1.3 !important;
  padding-bottom: 0.1em !important;
  transition: font-size 0.3s ease;
}

@media (min-width: 768px) {
  #hero-title {
    font-size: var(--hero-title-size-d) !important;
  }
}

#hero.hero-gradient-text #hero-title {
  background-image: linear-gradient(var(--hero-grad-angle), var(--hero-grad-1), var(--hero-grad-2)) !important;
  background-color: var(--hero-grad-1) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
}

#hero.hero-solid-text #hero-title {
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--hero-color) !important;
  color: var(--hero-color) !important;
  display: block !important;
}

#hero-badge {
  font-size: var(--hero-badge-size-m) !important;
  letter-spacing: var(--hero-badge-tracking) !important;
  transition: font-size 0.3s ease;
}

@media (min-width: 768px) {
  #hero-badge {
    font-size: var(--hero-badge-size-d) !important;
  }
}

#hero-subtitle {
  font-size: var(--hero-sub-size-m) !important;
  transition: font-size 0.3s ease;
}

@media (min-width: 768px) {
  #hero-subtitle {
    font-size: var(--hero-sub-size-d) !important;
  }
}

.hero-overlay {
  position: absolute !important;
  top: -20px !important;
  bottom: -20px !important;
  left: -20px !important;
  right: -20px !important;
  background-image: none !important;
  background-color: rgba(15, 23, 42, var(--hero-overlay-opacity)) !important;
  backdrop-filter: blur(var(--hero-overlay-blur)) !important;
  -webkit-backdrop-filter: blur(var(--hero-overlay-blur)) !important;
  transition: all 0.3s ease;
}

/* ========== SUBTLE TECH GRIDS ========== */
.tech-grid-dark {
  background-image: 
    linear-gradient(to right, rgba(84, 195, 235, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(84, 195, 235, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

.tech-grid-light {
  background-image: 
    linear-gradient(to right, rgba(84, 195, 235, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(84, 195, 235, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Star rating micro-animation */
.rating-star-glow {
  filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.25));
  transition: transform 0.2s ease;
}
.rating-star-glow:hover {
  transform: scale(1.15);
}

/* ========== DEEP ROYAL BLUE THEME OVERRIDES (WEBSITE ONLY) ========== */
/* Override dark background utility to deep royal blue */
.bg-slate-900 {
  background-color: #034d91 !important;
}

/* Override text-slate-900 to use deep royal blue for headings on light sections */
.text-slate-900 {
  color: #034d91 !important;
}

/* Maintain soft opacity classes for bg-slate-900 variants */
.bg-slate-900\/50 {
  background-color: rgba(3, 77, 145, 0.5) !important;
}
.bg-slate-900\/80 {
  background-color: rgba(3, 77, 145, 0.8) !important;
}
.bg-slate-900\/90 {
  background-color: rgba(3, 77, 145, 0.9) !important;
}
.bg-slate-900\/95 {
  background-color: rgba(3, 77, 145, 0.95) !important;
}
.bg-slate-900\/98 {
  background-color: rgba(3, 77, 145, 0.98) !important;
}

/* Override navigation bar background to transparent deep royal blue */
#navbar {
  background-color: rgba(3, 77, 145, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Increase contrast of marketplace description text on dark blue background */
#market-desc {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Improve visibility of grey texts on the deep royal blue background */
.bg-slate-900 .text-slate-400,
.bg-slate-900\/50 .text-slate-400,
.bg-slate-900\/80 .text-slate-400,
.bg-slate-900\/90 .text-slate-400,
.bg-slate-900\/95 .text-slate-400,
.bg-slate-900\/98 .text-slate-400,
#footer-marketplaces .text-slate-400,
#navbar .text-slate-400,
#mobile-menu .text-slate-400,
.bg-slate-900 .text-gray-400,
.bg-slate-900\/50 .text-gray-400,
.bg-slate-900\/80 .text-gray-400,
.bg-slate-900\/90 .text-gray-400,
.bg-slate-900\/95 .text-gray-400,
.bg-slate-900\/98 .text-gray-400,
#footer-marketplaces .text-gray-400,
#navbar .text-gray-400,
#mobile-menu .text-gray-400 {
  color: rgba(255, 255, 255, 0.75) !important;
}

.bg-slate-900 .text-slate-500,
.bg-slate-900\/50 .text-slate-500,
.bg-slate-900\/80 .text-slate-500,
.bg-slate-900\/90 .text-slate-500,
.bg-slate-900\/95 .text-slate-500,
.bg-slate-900\/98 .text-slate-500,
#footer-marketplaces .text-slate-500,
#navbar .text-slate-500,
#mobile-menu .text-slate-500,
.bg-slate-900 .text-gray-500,
.bg-slate-900\/50 .text-gray-500,
.bg-slate-900\/80 .text-gray-500,
.bg-slate-900\/90 .text-gray-500,
.bg-slate-900\/95 .text-gray-500,
.bg-slate-900\/98 .text-gray-500,
#footer-marketplaces .text-gray-500,
#navbar .text-gray-500,
#mobile-menu .text-gray-500 {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Ensure hover state still turns to brand color if defined */
.bg-slate-900 .text-slate-400:hover,
.bg-slate-900 .text-gray-400:hover,
.bg-slate-900\/50 .text-slate-400:hover,
.bg-slate-900\/50 .text-gray-400:hover,
.bg-slate-900\/80 .text-slate-400:hover,
.bg-slate-900\/80 .text-gray-400:hover,
.bg-slate-900\/90 .text-slate-400:hover,
.bg-slate-900\/90 .text-gray-400:hover,
.bg-slate-900\/95 .text-slate-400:hover,
.bg-slate-900\/95 .text-gray-400:hover,
.bg-slate-900\/98 .text-slate-400:hover,
.bg-slate-900\/98 .text-gray-400:hover {
  color: #54c3eb !important;
}

/* Footer specific overrides */
footer.bg-slate-900,
footer.bg-slate-900 p,
footer.bg-slate-900 li,
footer.bg-slate-900 a {
  color: rgba(255, 255, 255, 0.7) !important;
}

footer.bg-slate-900 a:hover {
  color: #54c3eb !important;
}

footer.bg-slate-900 #footer-quote {
  color: #54c3eb !important;
}

/* ========== FAQ ACCORDION STYLING ========== */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.faq-item.active .faq-icon svg {
  transform: rotate(180deg) !important;
}

/* ========== CERTIFICATE LIGHTBOX MODAL ========== */
#certificateModal {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#certificateModal.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#certificateModal.show > div.relative {
  transform: scale(1) !important;
}

/* Restoring contrast and readability for elements inside white cards/form on the Kontak section */
#kontak .bg-white .text-slate-400 {
  color: #94a3b8 !important; /* slate-400 */
}

#kontak .bg-white .text-slate-500 {
  color: #64748b !important; /* slate-500 */
}

#kontak .bg-white .text-slate-600 {
  color: #475569 !important; /* slate-600 */
}

#kontak .bg-white .text-slate-900 {
  color: #0f172a !important; /* slate-900 */
}

#kontak .bg-white input,
#kontak .bg-white textarea,
#kontak .bg-white select {
  color: #1e293b !important; /* slate-800 */
}

#kontak .bg-white input::placeholder,
#kontak .bg-white textarea::placeholder {
  color: #94a3b8 !important; /* slate-400 */
}

#kontak .bg-white select option {
  color: #1e293b !important;
  background-color: #ffffff !important;
}

/* Staggered Mobile Menu Fade In Animation */
@keyframes fadeInUpMobileMenu {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu-item-animate {
  opacity: 0;
  animation: fadeInUpMobileMenu 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth Height & Opacity Transition for Mobile Menu Container */
#mobileMenu {
  display: block !important; /* Keep display block to enable transition properties */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease-out, padding 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease-out;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-color: transparent !important;
}

#mobileMenu.show {
  max-height: 550px; /* Safe limit for menu height */
  opacity: 1;
  padding-top: 1rem !important; /* pt-4 */
  padding-bottom: 2rem !important; /* pb-8 */
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}