.elementor-68 .elementor-element.elementor-element-5f339c2{--display:flex;}.elementor-68 .elementor-element.elementor-element-b3a804d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS */<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Pindit Snack</title>

  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, sans-serif;
    }

    body{
      background:#fffaf5;
      color:#333;
      line-height:1.6;
    }

    /* NAVBAR */
    header{
      background:#ff7a00;
      padding:15px 8%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      position:sticky;
      top:0;
      z-index:1000;
      box-shadow:0 2px 10px rgba(0,0,0,0.1);
    }

    .logo{
      font-size:28px;
      font-weight:bold;
      color:white;
    }

    nav ul{
      display:flex;
      list-style:none;
      gap:25px;
    }

    nav ul li a{
      text-decoration:none;
      color:white;
      font-weight:bold;
      transition:0.3s;
    }

    nav ul li a:hover{
      color:#ffe0b2;
    }

    /* HERO */
    .hero{
      min-height:90vh;
      display:flex;
      justify-content:center;
      align-items:center;
      text-align:center;
      padding:40px 8%;
      background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
      url('https://images.unsplash.com/photo-1621939514649-280e2ee25f60?q=80&w=1200') center/cover;
      color:white;
    }

    .hero-content{
      max-width:700px;
      background:rgba(255,255,255,0.1);
      padding:40px;
      border-radius:20px;
      backdrop-filter:blur(5px);
    }

    .hero h1{
      font-size:52px;
      margin-bottom:20px;
    }

    .hero p{
      font-size:18px;
      margin-bottom:30px;
    }

    .btn{
      display:inline-block;
      padding:14px 30px;
      background:#ff7a00;
      color:white;
      text-decoration:none;
      border-radius:10px;
      font-weight:bold;
      transition:0.3s;
    }

    .btn:hover{
      background:#e56d00;
      transform:scale(1.05);
    }

    /* SECTION */
    section{
      padding:80px 8%;
    }

    .section-title{
      text-align:center;
      margin-bottom:50px;
    }

    .section-title h2{
      font-size:38px;
      color:#ff7a00;
      margin-bottom:10px;
    }

    .section-title p{
      color:#666;
    }

    /* CARD */
    .card-container{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:25px;
    }

    .card{
      background:white;
      padding:30px;
      border-radius:18px;
      box-shadow:0 5px 20px rgba(0,0,0,0.08);
      transition:0.3s;
      text-align:center;
    }

    .card:hover{
      transform:translateY(-8px);
    }

    .card h3{
      margin:15px 0;
      color:#ff7a00;
    }

    .card p{
      color:#666;
    }

    .card img{
      width:100%;
      height:200px;
      object-fit:cover;
      border-radius:12px;
    }

    /* CTA */
    .cta{
      background:#ff7a00;
      color:white;
      text-align:center;
      border-radius:20px;
      padding:60px 30px;
    }

    .cta h2{
      font-size:40px;
      margin-bottom:20px;
    }

    .cta p{
      margin-bottom:30px;
      font-size:18px;
    }

    .cta .btn{
      background:white;
      color:#ff7a00;
    }

    .cta .btn:hover{
      background:#fff0df;
    }

    /* FOOTER */
    footer{
      text-align:center;
      padding:25px;
      background:#222;
      color:white;
      margin-top:60px;
    }

    /* RESPONSIVE */
    @media(max-width:768px){
      .hero h1{
        font-size:36px;
      }

      nav ul{
        gap:15px;
      }
    }
  
  </style>
</head>
<body>

  <!-- HEADER -->
  <header>
    <div class="logo">Pindit Snack</div>

    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#tentang">Tentang</a></li>
        <li><a href="#keunggulan">Keunggulan</a></li>
        <li><a href="#produk">Produk</a></li>
      </ul>
    </nav>
  </header>

  <!-- HERO -->
  <section class="hero" id="home">
    <div class="hero-content">
      <h1>Camilan Gurih Favorit Keluarga</h1>
      <p>
        Nikmati berbagai pilihan snack lezat seperti keripik usus,
        makaroni pedas, dan basreng renyah dengan rasa premium
        yang bikin ketagihan.
      </p>

      <a href="#produk" class="btn">Lihat Produk</a>
    </div>
  </section>

  <!-- TENTANG -->
  <section id="tentang">
    <div class="section-title">
      <h2>Tentang Pindit Snack</h2>
      <p>Camilan berkualitas dengan rasa yang selalu bikin nagih.</p>
    </div>

    <div class="card-container">
      <div class="card">
        <h3>Kualitas Premium</h3>
        <p>
          Kami menggunakan bahan pilihan berkualitas tinggi
          agar menghasilkan snack yang gurih, renyah, dan aman dikonsumsi.
        </p>
      </div>

      <div class="card">
        <h3>Rasa Variatif</h3>
        <p>
          Tersedia berbagai level rasa mulai dari original,
          pedas, balado, hingga daun jeruk yang cocok untuk semua kalangan.
        </p>
      </div>

      <div class="card">
        <h3>Cocok Untuk Semua</h3>
        <p>
          Cocok dijadikan teman santai, cemilan keluarga,
          hingga ide hampers dan oleh-oleh.
        </p>
      </div>
    </div>
  </section>

  <!-- KEUNGGULAN -->
  <section id="keunggulan">
    <div class="section-title">
      <h2>Keunggulan Kami</h2>
      <p>Kenapa pelanggan memilih Pindit Snack?</p>
    </div>

    <div class="card-container">
      <div class="card">
        <h3>Fresh Setiap Hari</h3>
        <p>
          Produk dibuat fresh setiap hari sehingga rasa dan kerenyahannya tetap terjaga.
        </p>
      </div>

      <div class="card">
        <h3>Harga Terjangkau</h3>
        <p>
          Dengan kualitas premium, kami tetap memberikan harga yang ramah di kantong.
        </p>
      </div>

      <div class="card">
        <h3>Kemasan Modern</h3>
        <p>
          Kemasan menarik dan higienis membuat produk cocok untuk dijual kembali.
        </p>
      </div>

      <div class="card">
        <h3>Pengiriman Cepat</h3>
        <p>
          Pesanan diproses dengan cepat agar snack sampai dalam kondisi terbaik.
        </p>
      </div>
    </div>
  </section>

  <!-- PRODUK -->
  <section id="produk">
    <div class="section-title">
      <h2>Produk Unggulan</h2>
      <p>Snack favorit pelanggan paling laris.</p>
    </div>

    <div class="card-container">

      <div class="card">
        <img src="https://images.unsplash.com/photo-1585238342024-78d387f4a707?q=80&w=1000" alt="">
        <h3>Keripik Usus</h3>
        <p>
          Gurih dan renyah dengan bumbu khas yang bikin ketagihan.
        </p>
      </div>

      <div class="card">
        <img src="https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?q=80&w=1000" alt="">
        <h3>Makaroni Pedas</h3>
        <p>
          Sensasi pedas dan kriuk yang cocok untuk pecinta snack pedas.
        </p>
      </div>

      <div class="card">
        <img src="https://images.unsplash.com/photo-1604908176997-431f73f01b89?q=80&w=1000" alt="">
        <h3>Basreng</h3>
        <p>
          Basreng renyah dengan bumbu pedas gurih yang menggoda selera.
        </p>
      </div>

    </div>
  </section>

  <!-- CTA -->
  <section>
    <div class="cta">
      <h2>Yuk Cobain Pindit Snack!</h2>
      <p>
        Rasakan gurih dan renyahnya snack favorit yang cocok
        untuk menemani setiap momen santaimu.
      </p>

      <a href="#" class="btn" id="orderBtn">Pesan Sekarang</a>
    </div>
  </section>

  <!-- FOOTER -->
  <footer>
    <p>© 2026 Pindit Snack | Semua Hak Dilindungi</p>
  </footer>

  <!-- JAVASCRIPT -->
  <script>
    // Smooth Scroll
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });

    // Tombol Pesan
    document.getElementById("orderBtn").addEventListener("click", function(){
      alert("Terima kasih telah memilih Pindit Snack!");
    });
  </script>

</body>
</html>/* End custom CSS */