/* css/why.css */

.why-section {
   padding: 90px 4%;
   background-color: #f7f7f9;
   width: 100%;
   overflow-x: hidden;
}

.why-container {
   max-width: 1450px;
   margin: 0 auto;
}

.why-header {
   text-align: center;
   font-size: 3.5rem;
   font-weight: 900;
   color: var(--color-meteorite);
   margin-bottom: 60px;
   text-transform: uppercase;
}

/* --- TATA LETAK HONEYCOMB (5 KOLOM ZIG-ZAG) --- */
.honeycomb-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
}

.honeycomb-col {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

/* Kolom genap (2 & 4) turun ke tengah untuk efek sarang lebah */
.honeycomb-col.col-offset {
   justify-content: center;
}

/* Bentuk Segi Enam (Hexagon) */
.hex-card {
   width: 260px;
   min-height: 290px;
   background-color: var(--color-white);
   /* Memotong sudut menjadi segi enam vertikal */
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 40px 24px;
   box-sizing: border-box;
   filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.06));
   transition:
      transform 0.3s ease,
      filter 0.3s ease;
}

.hex-card:hover {
   transform: translateY(-5px) scale(1.02);
   filter: drop-shadow(0 10px 20px rgba(156, 0, 4, 0.15));
}

/* Lingkaran Ikon Bulat Maroon */
.hex-badge {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background-color: var(--color-maroon);
   color: var(--color-white);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   margin-bottom: 12px;
   box-shadow: 0 4px 10px rgba(156, 0, 4, 0.3);
}

.hex-card h4 {
   font-size: 14px;
   font-weight: 800;
   color: var(--color-maroon);
   margin-bottom: 8px;
   line-height: 1.3;
}

.hex-card p {
   font-size: 11px;
   line-height: 1.45;
   color: #666;
   margin: 0;
   max-width: 210px;
}

/* =========================================
   RESPONSIVE UNTUK TABLET & HP
   ========================================= */
@media (max-width: 1280px) {
   .honeycomb-wrapper {
      flex-wrap: wrap;
      gap: 25px;
   }

   .hex-card {
      width: 240px;
      min-height: 275px;
   }
}

@media (max-width: 768px) {
   .why-header {
      font-size: 2.4rem;
      margin-bottom: 40px;
   }

   .honeycomb-wrapper {
      flex-direction: column;
      gap: 20px;
   }

   .honeycomb-col {
      width: 100%;
      align-items: center;
   }

   .hex-card {
      width: 290px;
      min-height: 310px;
   }
}