<style>
/* ======== GLOBAL STYLE ======== */
.undangan-section {
font-family: “Segoe UI”, Arial, sans-serif;
text-align: center;
padding: 50px 20px;
background: #fffdf8;
color: #333;
}

/* ======== JUDUL & PROMO ======== */
.undangan-section h1 {
font-size: 2.2em;
font-weight: bold;
margin-bottom: 15px;
color: #957039; /* warna emas elegan */
}
.undangan-section p {
font-size: 1.1em;
color: #444;
max-width: 700px;
margin: 0 auto 20px;
}

/* ======== TERJUAL ======== */
.undangan-terjual {
margin: 25px 0;
font-weight: bold;
font-size: 1.3em;
color: #957039;
background: #f4f1ea;
display: inline-block;
padding: 10px 20px;
border-radius: 8px;
}

/* ======== SLIDER CLIENT ======== */
.client-slider {
overflow: hidden;
margin: 40px auto;
max-width: 900px;
border-top: 2px solid #eee;
border-bottom: 2px solid #eee;
padding: 15px 0;
}
.client-track {
display: flex;
animation: scrollClients 25s linear infinite;
width: max-content;
}
.client-track img {
width: 150px;
height: 100px;
margin: 0 10px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
transition: transform 0.3s ease;
}
.client-track img:hover {
transform: scale(1.05);
}
@keyframes scrollClients {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

/* ======== SLIDER HARGA ======== */
.harga-container {
max-width: 1000px;
margin: 50px auto;
overflow-x: auto;
display: flex;
gap: 20px;
scroll-snap-type: x mandatory;
padding: 10px;
}
.harga-card {
flex: 0 0 300px;
background: #ffffff;
border-radius: 15px;
padding: 25px 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
scroll-snap-align: start;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.harga-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.harga-card h3 {
margin-bottom: 12px;
color: #957039;
font-size: 1.4em;
}
.harga-card p {
font-size: 0.95em;
color: #555;
line-height: 1.6;
}
</style>

<div class=”undangan-section”>
<h1>Undangan Website Pernikahan</h1>
<p>Buat hari spesialmu semakin berkesan dengan undangan digital yang elegan, praktis, dan bisa diakses dari mana saja.</p>

<div class=”undangan-terjual”>
Telah dipercaya oleh lebih dari 5000 pasangan!
</div>

<!– SLIDER CLIENT –>
<div class=”client-slider”>
<div class=”client-track”>
<img src=”https://via.placeholder.com/150×100?text=Client1″ alt=”Client 1″>
<img src=”https://via.placeholder.com/150×100?text=Client2″ alt=”Client 2″>
<img src=”https://via.placeholder.com/150×100?text=Client3″ alt=”Client 3″>
<img src=”https://via.placeholder.com/150×100?text=Client4″ alt=”Client 4″>
<img src=”https://via.placeholder.com/150×100?text=Client5″ alt=”Client 5″>
<img src=”https://via.placeholder.com/150×100?text=Client6″ alt=”Client 6″>
<!– duplikat biar looping halus –>
<img src=”https://via.placeholder.com/150×100?text=Client1″ alt=”Client 1″>
<img src=”https://via.placeholder.com/150×100?text=Client2″ alt=”Client 2″>
<img src=”https://via.placeholder.com/150×100?text=Client3″ alt=”Client 3″>
<img src=”https://via.placeholder.com/150×100?text=Client4″ alt=”Client 4″>
</div>
</div>

<!– SLIDER HARGA –>
<div class=”harga-container”>
<div class=”harga-card”>
<h3>Paket Silver</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae.</p>
</div>
<div class=”harga-card”>
<h3>Paket Gold</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae.</p>
</div>
<div class=”harga-card”>
<h3>Paket Exclusive</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae.</p>
</div>
</div>
</div>