/* ============================================================
   CV Sinergia Karya Bengawan — Main Stylesheet
   Contains: Tailwind config, typography, layout, components
   ============================================================ */

/* Tailwind config is in a <script> tag in each HTML file */


/* ============================================================
   GLOBAL STYLES
   ============================================================ */

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Body defaults */
body {
  font-family: 'Hanken Grotesk', sans-serif;
  background-color: #fbf9fc;
}


/* ============================================================
   LAYOUT & COMPONENT STYLES
   ============================================================ */

/* Bento Grid (used on beranda & circular) */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Reveal animation (beranda) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Active thumbnail (standard-4-loop) */
.active-thumb {
  border: 2px solid #B38B4D;
}
.active-thumb {
  transition: transform 0.2s ease;
}

/* Perspective & 3D (cross-corner) */
.perspective-lg {
  perspective: 1000px;
}
.preserve-3d {
  transform-style: preserve-3d;
}

/* Glass effect (cross-corner) */
.industrial-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}

/* Active nav link (circular) */
.active-nav-link {
  border-bottom: 2px solid #B38B4D;
  padding-bottom: 4px;
  color: #B38B4D !important;
}

/* Industrial card (circular) */
.industrial-card {
  border: 1px solid #D1D5DB;
  transition: border-color 0.3s ease;
}
.industrial-card:hover {
  border-color: #B38B4D;
}

/* Bento inner (baffle-bag) */
.bento-inner {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-inner:hover {
  border-color: #B38B4D;
}


/* ============================================================
   RESPONSIVE — MOBILE-FRIENDLY OVERRIDES
   ============================================================ */

/* Ensure nav stacks on mobile */
@media (max-width: 768px) {
  header nav.hidden\:md\:flex,
  nav .hidden\:md\:flex {
    display: none;
  }

  /* Product grid: 1 col on mobile */
  .grid-cols-1\:md\:grid-cols-2\:lg\:grid-cols-4 {
    grid-template-columns: 1fr;
  }

  /* Hero text sizing */
  .text-headline-lg {
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: -0.01em !important;
  }

  /* Reduce padding */
  .px-margin-desktop {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Full-width tables on mobile */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Stack footer cols */
  footer .grid {
    grid-template-columns: 1fr !important;
  }

  /* Make stats row 2-col on small screens */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stack contact form */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stack why-choose-us */
  .why-choose-grid {
    grid-template-columns: 1fr !important;
  }

  /* Application grid (3 cols) -> stack */
  .apps-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .apps-grid > div {
    height: 250px;
  }

  /* Related products grid */
  .related-grid {
    grid-template-columns: 1fr !important;
  }

  /* Bento feature grid */
  .feature-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .text-headline-lg {
    font-size: 28px !important;
    line-height: 36px !important;
  }
  .text-headline-md {
    font-size: 20px !important;
    line-height: 28px !important;
  }
}