* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
}
.logo{
    color: rgb(0, 0, 0); 
    display:flex ;
    justify-content: center;  /* horizontal */
    align-items: center;      /* vertikal */
     padding-top: 10px;
}

nav .icon {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    font-size: 25px;
   padding-top: 13px;
   padding-right: 20px;
   
}

/* header {
    background-image: url(img/hero.jpg);
     background-size: cover; 
    width: 100%;
    height: 100vh; } */

.dropdown-icon {
    padding-top: 13px;
    padding-left: 20px;
}
/* .gambar2{
    grid-column: span 3 / span 3;
    grid-row: span 4 / span 4;
    grid-column-start: 3;
} */
     .category-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 40px;
      padding: 50px;
    }

    .category-list h2 {
      font-size: 2rem;
      font-weight: 800;
      margin-bottom: 20px;
      line-height: 1.6;
    }

    .category-img img {
      width: 100%;
      border-radius: 12px;
      display: block;
    }

    /* Responsif untuk HP */
    @media(max-width: 768px) {
      .category-section {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 30px;
      }
      .category-list h2 {
        font-size: 1.5rem;
      }
    }
    /* card product */
 /* .product-section {
      padding: 40px;
    } */
/* bagian card product */
    .product-section h2 {
      font-size: 2rem;
      font-weight: 800;
      margin-bottom: 30px;
      padding: 20px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
    }

    .product-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
    }

    .product-card img {
      width: 100%;
      height: auto;
      display: block;
    }

    .product-info {
      padding: 10px;
    }

    .product-info h3 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 5px;
    }

    .product-info p {
      font-size: 0.8rem;
      color: #000000;
    }

    /* tombol plus agar bisa dimasukkan keranjanng/cart shopping */
    .product-card::after {
      content: "+";
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 20px;
      font-weight: bold;
      color: #000;
    }
    .promo-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 10px;
    }

    .promo-card {
      position: relative;
      overflow: hidden;
    }

    .promo-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .promo-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
      color: #fff;
    }

    .promo-overlay h3 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .promo-overlay a {
      font-size: 0.9rem;
      text-decoration: none;
      color: #fff;
      border-bottom: 1px solid #fff;
      padding-bottom: 2px;
    }
    
    footer{
      background: #272424;
      color: #fff;
      padding: 40px 20px;
    }
    .footer-isi{
      max-width: 600px;
      /* background-color: aqua; */
    }
    details {
      border-bottom: 1px solid #ffffff;
      padding: 15px 0;
    }

    summary {
      list-style: none;
      cursor: pointer;
      font-weight: bold;
      font-size: 1.1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "▾";
      font-size: 0.9rem;
    }

    details[open] summary::after {
      content: "▴";
    }
    .footer-mediasosial {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      font-size: 0.9rem;
    }

    .akun-sosialmedia {
      display: flex;
      gap: 15px;
    }

    .social-icons a {
      color: #fff;
      font-size: 1.2rem;
      text-decoration: none;
    }