/* PENGATURAN DESKTOP DAN MOBILE */
/* Garis pembatas kuning */
.section-divider {
  width: 80%; /* panjang garis */
  height: 6px; /* tebal garis */
  background-color: #f9d71c; /* kuning cerah */
  margin: 10px auto; /* tengah horizontal */
  border-radius: 10px; /* ujung garis sedikit bulat */
}

/* --- Desktop styling aman untuk > 768px --- */
@media (min-width: 769px) {
  .konsep {
    /*  */
    background: linear-gradient(
      180deg,
      rgba(15, 81, 50, 0.06),
      rgba(255, 255, 255, 1)
    );
    border-radius: 40px 40px 0 0;
    margin-top: -60px; /* masuk ke header dengan halus */
  }

  .konsep-container {
    max-width: 1200px;
    margin: auto;
    padding-bottom: 100px;
    padding-top: 100px;
    /* padding: 40px 20px; */
    text-align: center;
    /*  */
    .konsep-container {
      max-width: 1200px;
      margin: auto;
      padding: 100px 20px;

      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(6px);
      border-radius: 32px;

      box-shadow: 0 20px 40px rgba(15, 81, 50, 0.08),
        0 6px 12px rgba(15, 81, 50, 0.05);

      text-align: center;
    }
  }

  /* Judul h2 tetap terlihat */
  .konsep-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #0f5132; /* hijau wibawa */
  }

  /* Wrapper desktop: 3 card sejajar, tidak menimpa mobile slider */
  .konsep-wrapper {
    display: flex; /* flex row desktop */
    flex-wrap: nowrap; /* satu baris */
    gap: 20px; /* jarak antar card */
    justify-content: center;
    overflow: visible; /* biarkan mobile overflow tetap bekerja */
  }

  .konsep-card {
    flex: 0 0 300px; /* lebar card desktop */
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f9f9f9;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    text-align: center;
    /* Jangan ubah width/flex/height yang dipakai slider mobile */
  }

  .konsep-card img {
    width: 100%;
    height: 200px; /* biarkan mobile height tetap */
    object-fit: cover;
    border-radius: 15px 15px 0px 40px; /* rounding desktop */
    margin-bottom: 15px;
  }

  .konsep-card h3 {
    font-size: 1.5rem;
    margin: 10px 0;
    color: #000;
    margin-top: -10px;
  }

  .konsep-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin-top: -10px;
  }
}