/* ==========================================================================
   RESPONSIVE MASTER — PT. GONDOLA FIRDAUS PRATAMA JAYA
   All-device optimization with premium mobile experience
   ========================================================================== */

/* ─── Fluid Typography Scale ─── */
:root {
  --fluid-h1: clamp(2.2rem, 5.5vw, 5.5rem);
  --fluid-h2: clamp(1.8rem, 3.8vw, 3.6rem);
  --fluid-h3: clamp(1.5rem, 2.5vw, 2.4rem);
  --fluid-body: clamp(1.4rem, 1.6vw, 1.6rem);
  --fluid-small: clamp(1.2rem, 1.3vw, 1.4rem);
}

/* ═══════════════════════════════════════════════════════════════
   1400px — Large Desktop
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
  .container { max-width: 1140px; }
}

/* ═══════════════════════════════════════════════════════════════
   1200px — Desktop / Tablet Landscape
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .container { max-width: 960px; }

  /* Layout grids */
  .about .row { gap: 40px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); margin-top: 30px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .box-container { grid-template-columns: repeat(2, 1fr); }
  .footer-content { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   1024px — Small Desktop / Tablet
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .about-content-col {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin: -60px auto 0;
    padding: 24px 26px;
    border-radius: 16px;
  }
  .about-content-col .about-heading { font-size: 1.5rem; }
  .about-content-col .about-desc { font-size: 1.2rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   992px — Tablet Landscape
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .container { max-width: 720px; }
  .section { padding: 70px 0; }

  /* About */
  .about .row { grid-template-columns: 1fr; gap: 40px; }
  .about-media { max-width: 600px; margin: 0 auto; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }

  /* Services */
  .services-grid { gap: 20px; }

  /* Projects */
  .project-filters { gap: 8px; }
  .filter-btn { padding: 8px 16px; font-size: 1.2rem; }

  /* Testimonials */
  .testimonial-item { padding: 28px 24px; }
  .testimonials-slider { padding: 20px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   900px — Tablet / Medium
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .section { padding: 60px 0; }
  .services-grid { gap: 16px; }
  .testimonial-item { padding: 24px 20px; }
  .blog-card .blog-content { padding: 18px 16px; }

  /* Nav link active */
  #gondolafirdaus-header .nav-link.active {
    background: linear-gradient(135deg, rgba(255,125,0,0.08) 0%, rgba(255,125,0,0.02) 100%);
    border-left: 3px solid var(--accent);
    padding-left: 12px;
    border-bottom: 1px solid #f1f3f4;
  }
}

/* ═══════════════════════════════════════════════════════════════
   768px — Tablet Portrait
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .container { max-width: 100%; padding: 0 20px; }
  .section { padding: 50px 0; }

  /* ─── About ─── */
  .about { padding: 50px 0 60px; }
  .about-video-wrapper { border-radius: 16px; }
  .about-content-col {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    margin-top: -50px;
    padding: 22px 20px;
    border-radius: 14px;
  }
  .about-content-col .about-heading { font-size: 1.4rem; }
  .about-content-col .about-desc { font-size: 1.1rem; }
  .about-features { grid-template-columns: 1fr; gap: 16px; }

  /* ─── Stats ─── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; }
  .stat-card { padding: 24px 16px 22px; }
  .stat-number-wrap h3 { font-size: 2.2rem; }
  .plus-sign { font-size: 1.4rem; }
  .stat-label { font-size: 0.95rem; }

  /* ─── Services ─── */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .service-card { padding: 24px 18px; }
  .service-card .service-card-inner h3 { font-size: 1.5rem; }
  .service-card .service-card-inner p { font-size: 1.2rem; }

  /* ─── Projects ─── */
  .box-container { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .box-container .box .content { padding: 14px 12px 16px; }
  .box-container .box > .category-badge {
    top: 10px; left: 10px;
    font-size: 0.9rem;
    padding: 4px 12px;
  }
  .box-container .box .info h3 { font-size: 1.4rem; }
  .box-container .box .info p { font-size: 1.2rem; }
  .project-filters { overflow-x: auto; flex-wrap: nowrap; gap: 6px; padding-bottom: 4px; }
  .project-filters::-webkit-scrollbar { height: 2px; }
  .filter-btn { flex-shrink: 0; }

  /* ─── Testimonials ─── */
  .testimonials { padding: 50px 0; }
  .testimonial-item { padding: 24px 20px; }
  .testimonial-content p { font-size: 1.3rem; }
  .author-info h4 { font-size: 1.5rem; }
  .author-info span { font-size: 1.2rem; }
  .testimonial-author img { width: 48px; height: 48px; }
  .testimonials-slider { padding: 15px 0; }

  /* ─── Blog ─── */
  .blog-card .blog-content { padding: 18px 16px; }
  .blog-card .blog-content .blog-title { font-size: 1.5rem; }
  .blog-card .blog-content .blog-desc { font-size: 1.2rem; }

  /* ─── Logo Clients ─── */

  /* ─── Contact ─── */
  .contact { padding: 50px 0; }
  .contact-form { padding: 24px 20px; }

  /* ─── Footer ─── */
  .footer-content { grid-template-columns: 1fr 1fr; gap: 24px; }
  #gondolafirdaus-footer .footer-bottom { padding: 20px 0; }
  #gondolafirdaus-footer .footer-bottom-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* ─── Modal ─── */
  .about-modal-container { padding: 28px 24px; width: 95%; }
  .modal-grid-two { grid-template-columns: 1fr; gap: 24px; }
  .modal-logo-title span { font-size: 1.5rem; }
  .about-modal-tabs { overflow-x: auto; }
  .modal-tab-btn { font-size: 1.2rem; padding: 8px 12px; white-space: nowrap; }
  .values-grid { grid-template-columns: 1fr; }

  /* ─── Section Titles ─── */
  .section-title { font-size: 2.2rem; }
  .section-subtitle { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Medium Devices Range: 481px — 768px
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .box-container { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   600px — Main Mobile Breakpoint (paling banyak digunakan)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .section { padding: 45px 0; }

  /* ─── About ─── */
  .about { padding: 45px 0 55px; }
  .about-content-col {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin-top: -40px;
    padding: 18px 16px;
    border-radius: 13px;
  }
  .about-content-col .about-heading { font-size: 1.3rem; }
  .about-content-col .about-desc { font-size: 1.08rem; }

  /* ─── Stats ─── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 20px 12px 18px; }
  .stat-number-wrap h3 { font-size: 2rem; }
  .plus-sign { font-size: 1.3rem; }
  .stat-label { font-size: 0.9rem; }

  /* ─── Services ─── */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .service-card { padding: 18px 12px; }
  .service-card .service-card-inner h3 { font-size: 1.4rem; }
  .service-card .service-card-inner p { font-size: 1.15rem; }

  /* ─── Projects ─── */
  .box-container { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .box-container .box .content { padding: 12px 10px; }
  .box-container .box .info h3 { font-size: 1.3rem; }
  .box-container .box .info p { font-size: 1.1rem; }

  /* ─── Testimonials ─── */
  .testimonial-item { padding: 22px 18px; }
  .testimonial-content p { font-size: 1.25rem; }

  /* ─── Blog ─── */
  .blog-card .blog-content { padding: 16px 14px; }
  .blog-card .blog-content .blog-title { font-size: 1.4rem; }
  .blog-card .blog-content .blog-desc { font-size: 1.15rem; }

  /* ─── Contact ─── */
  .contact-form { padding: 22px 18px; }

  /* ─── Footer ─── */
  .footer-content { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* ─── Section Titles ─── */
  .section-title { font-size: 2rem; }
  .section-subtitle { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   576px — Mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  
  /* ─── About ─── */
  .about { padding: 40px 0 50px; }
  .about-content-col {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin-top: -35px;
    padding: 16px 14px;
    border-radius: 12px;
  }
  .about-content-col .about-heading { font-size: 1.25rem; }
  .about-content-col .about-desc { font-size: 1.05rem; }

  /* ─── Stats ─── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 18px 10px; }
  .stat-number-wrap h3 { font-size: 2.2rem; }

  /* ─── Services ─── */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .service-card { padding: 16px 10px; }

  /* ─── Projects ─── */
  .box-container { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .box-container .box .content { padding: 12px 10px; }
  .box-container .box .info h3 { font-size: 1.3rem; }
  .box-container .box .info p { font-size: 1.1rem; }

  /* ─── Testimonials ─── */
  .testimonial-item { padding: 20px 16px; }
  .testimonial-author img { width: 44px; height: 44px; }
  .testimonial-content p { font-size: 1.25rem; }
  .testimonials .swiper-button-next,
  .testimonials .swiper-button-prev {
    width: 36px;
    height: 36px;
  }

  /* ─── Blog ─── */
  .blog-card .blog-content { padding: 14px 14px; }
  .blog-card .blog-content .blog-title { font-size: 1.4rem; }

  /* ─── Contact ─── */
  .contact-form { padding: 20px 16px; }
  .contact-form input,
  .contact-form textarea { font-size: 1.4rem; }

  /* ─── Footer ─── */
  .footer-content { grid-template-columns: 1fr; gap: 30px; }
  #gondolafirdaus-footer .footer-bottom { padding: 16px 0; }
  #gondolafirdaus-footer .footer-links {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  /* ─── Modal ─── */
  .about-modal-container { padding: 20px 16px; }
  .modal-logo-title img { width: 28px; }
  .modal-logo-title span { font-size: 1.3rem; }

  /* ─── Section Titles ─── */
  .section-title { font-size: 2rem; }
  .section-subtitle { font-size: 1.2rem; }

  /* ─── Header ─── */
  #gondolafirdaus-header .anti-text { display: none; }

  /* ─── General ─── */
  .btn { padding: 12px 24px; font-size: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════════
   480px — Small Mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .stat-number-wrap h3 { font-size: 2.4rem; }
  .stat-label { font-size: 0.95rem; }
  .service-card .service-card-inner h3 { font-size: 1.5rem; }
  .section-title { font-size: 1.9rem; }
  .btn { padding: 13px 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   400px — Extra Small Mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .stat-number-wrap h3 { font-size: 2.2rem; }
  .stat-label { font-size: 1rem; }
  .service-card .service-card-inner h3 { font-size: 1.4rem; }
  .section-title { font-size: 1.8rem; }
  .btn { padding: 14px 20px; width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   360px — Very Small Phone
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .logo-item { width: 90px; height: 54px; }
  .logo-item img { max-width: 80px; max-height: 34px; }
  .logo-slider .swiper-slide:active .logo-item { transform: scale(1) !important; }
  .logo-slider .swiper-slide:active .logo-item img { transform: scale(1) !important; }
  #gondolafirdaus-header .navbar { width: 260px; }
  #gondolafirdaus-header .nav-link { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   WOW FACTOR — Premium Micro-interactions & Mobile Enhancements
   ═══════════════════════════════════════════════════════════════ */

/* ─── Smooth Tap Feedback ─── */
.btn:active,
.service-card:active,
.filter-btn:active,
.nav-link:active,
.box-container .box:active,
.blog-card:active,
.testimonial-item:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* ─── Touch Ripple Effect ─── */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }

/* ─── Staggered Card Entrance Delays ─── */
.service-card:nth-child(1) { transition-delay: 0.05s; }
.service-card:nth-child(2) { transition-delay: 0.1s; }
.service-card:nth-child(3) { transition-delay: 0.15s; }
.service-card:nth-child(4) { transition-delay: 0.2s; }
.service-card:nth-child(5) { transition-delay: 0.25s; }
.service-card:nth-child(6) { transition-delay: 0.3s; }
.box-container .box:nth-child(1) { transition-delay: 0.05s; }
.box-container .box:nth-child(2) { transition-delay: 0.1s; }
.box-container .box:nth-child(3) { transition-delay: 0.15s; }
.box-container .box:nth-child(4) { transition-delay: 0.2s; }
.box-container .box:nth-child(5) { transition-delay: 0.25s; }
.box-container .box:nth-child(6) { transition-delay: 0.3s; }

/* ─── Mobile Menu Backdrop with Blur ─── */
body.menu-open::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 998;
  animation: menuBackdropFade 0.3s ease;
}

@keyframes menuBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Touch Scroll Smoothness ─── */
.about-modal-container { -webkit-overflow-scrolling: touch; }

/* ─── Disable Hover Effects on Touch Devices ─── */
@media (hover: none) {
  .service-card:hover,
  .box-container .box:hover,
  .blog-card:hover,

  .testimonial-item:hover { transform: none !important; }

  .service-card:active,
  .box-container .box:active,
  .blog-card:active,
  .testimonial-item:active { transform: scale(0.97) !important; }

  .logo-slider .swiper-slide:active .logo-item { transform: scale(1) !important; }
  .logo-slider .swiper-slide:active .logo-item img { transform: scale(1) !important; }
}

/* ─── Reduce Motion Preference ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Minimum Touch Targets (44px) ─── */
.nav-link, .btn, .filter-btn, .custom-nav, .hamburger-btn, .download-btn {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Mobile-Friendly Swiper Pagination ─── */
@media (max-width: 768px) {
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 8px; }
  .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 4px !important; }
}

/* ─── Smooth Section Spacing Transition ─── */
.section { transition: padding 0.3s ease; }

/* ─── Responsive Images ─── */
img { max-width: 100%; height: auto; }

/* ─── Prevent Horizontal Scroll ─── */
body, html { overflow-x: hidden; width: 100%; }

/* ─── Enhanced Active State for Mobile Nav Links ─── */
@media (max-width: 992px) {
  #gondolafirdaus-header .nav-link.active {
    background: linear-gradient(135deg, rgba(255,125,0,0.08) 0%, rgba(255,125,0,0.02) 100%);
    border-left: 3px solid var(--accent);
    padding-left: 12px;
    border-bottom: 1px solid #f1f3f4;
  }
}