/* =========================
GLOBAL STYLE
========================= */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Arial,sans-serif; line-height:1.6; color:#333; background:#fff; }
h1,h2,h3 { font-weight:bold; }
h2 { margin-bottom:20px; color:#1b3c2e; text-align:center; }
p { margin-bottom:15px; }
ul { list-style:none; padding-left:0; }
.container { width:90%; max-width:1100px; margin:auto; }
html { scroll-behavior:smooth; }

/* =========================
NAVBAR
========================= */
.navbar { background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:1000; }
.nav-content { display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
.logo img { height:40px; }
.menu-toggle { background:none; border:none; font-size:28px; cursor:pointer; display:block; }
.mobile-menu { display:none; flex-direction:column; background:#fff; padding:10px; }
.mobile-menu a { padding:10px; border-bottom:1px solid #eee; color:#333; text-decoration:none; font-weight:bold; }
@media(min-width:768px){
  .mobile-menu { display:flex; flex-direction:row; gap:20px; position:static; border:none; }
  .mobile-menu a { border:none; }
  .menu-toggle { display:none; }
}

/* =========================
HERO
========================= */
.hero { background:linear-gradient(135deg,#ff9800,#4caf50); color:#fff; text-align:center; padding:60px 20px; }
.hero h1 { font-size:28px; margin-bottom:15px; }
.hero .highlight { color:#ffeb3b; }
.hero-logo { display:block; max-width:120px; margin:15px auto; }
.hero p { max-width:600px; margin:15px auto; font-size:16px; color:#fff; }
.hero-buttons { margin-top:15px; }
.btn-primary,.btn-secondary { display:inline-block; padding:12px 20px; border-radius:6px; font-weight:bold; text-decoration:none; margin:5px; }
.btn-primary { background:#ff9800; color:#fff; }
.btn-primary:hover { background:#e68900; }
.btn-secondary { background:#fff; color:#4caf50; border:2px solid #4caf50; }
.btn-secondary:hover { background:#4caf50; color:#fff; }

/* =========================
RUNNING TEXT
========================= */
.running-text { background:#1b3c2e; color:#fff; overflow:hidden; padding:10px 0; }
.text-wrapper { display:inline-block; white-space:nowrap; animation:scroll-left 15s linear infinite; }
@keyframes scroll-left { 0%{transform:translateX(100%);} 100%{transform:translateX(-100%);} }

/* =========================
SECTIONS
========================= */
section { padding:30px 0; }
.text-center { text-align:center; }

/* =========================
DOA AQIQAH
========================= */
.doa { background:#fff; padding:30px 15px; }
.doa h2 { margin-bottom:20px; color:#1b3c2e; }
.doa .arabic { font-size:22px; line-height:1.8; margin-bottom:15px; direction:rtl; }
.doa .italic { font-style:italic; max-width:800px; margin:auto; color:#444; }

/* =========================
PAKET AQIQAH
========================= */
.paket-grid { display:grid; grid-template-columns:1fr; gap:20px; }
.card { border:1px solid #eee; border-radius:8px; padding:20px; background:rgba(46,125,50,0.2); box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.card img { width:100%; border-radius:6px; margin-bottom:15px; }
.card h3 { margin-bottom:10px; text-align:center; }
.card p.price { font-size:20px; font-weight:bold; margin:15px 0; text-align:center; }
.card .btn-primary { display:block; margin:auto; max-width:200px; text-align:center; }
@media (min-width:768px){ .paket-grid{ grid-template-columns:repeat(3,1fr); } }

/* =========================
NASI BOX
========================= */
.nasi-box { background:#fff; padding:40px 20px; border:2px solid #ffcc80; border-radius:12px; }
.nasi-box h2 { color:#2e7d32; margin-bottom:20px; }
.nasi-box .card { background:#fff; border:1px solid #eee; }

/* =========================
SUSU KAMBING
========================= */
.susu { padding:40px 0; }
.susu h2 { font-size:2rem; margin-bottom:20px; color:#2e7d32; }
.susu-box { display:flex; justify-content:center; }
.susu-card { display:flex; flex-direction:column; align-items:center; gap:20px; background:rgba(46,125,50,0.2); padding:30px; border-radius:12px; width:100%; max-width:1000px; }
.susu-img { max-width:250px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
.susu-info { max-width:500px; text-align:left; }
.susu-info h3 { margin-bottom:10px; font-size:1.5rem; color:#333; }
.susu-info .price { font-size:1.2rem; font-weight:bold; color:#e67e22; margin-bottom:10px; }
.susu-info .ketahanan { list-style:none; margin:0 0 20px; padding:0; }
.susu-info .ketahanan li { margin:5px 0; padding-left:1em; position:relative; }
.susu-info .ketahanan li::before { content:"✔"; color:#2e7d32; position:absolute; left:0; }
@media(min-width:769px){ .susu-card{ flex-direction:row; align-items:flex-start; } .susu-info{text-align:left;} }

/* Promo Badge */
.promo-badge {
  display:inline-block;
  background:#ff5722;
  color:#fff;
  font-size:14px;
  padding:4px 10px;
  border-radius:20px;
  margin-left:10px;
  animation:pulse 1.5s infinite;
}
@keyframes pulse {
  0% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.1); opacity:0.8; }
  100% { transform:scale(1); opacity:1; }
}

/* =========================
ABOUT (TENTANG)
========================= */
.about { padding:40px 20px; background:#f5deb3; border:1px solid #eee; border-radius:12px; }
.about h2 { text-align:center; }
.about h3 { text-align:center; margin-bottom:20px; }
.about .alasan { max-width:800px; margin:auto; }
.about .alasan li { margin:10px 0; padding-left:20px; position:relative; text-align:left; }
.about .alasan li::before { content:"✔"; position:absolute; left:0; color:#4caf50; }

/* =========================
HEWAN
========================= */
.hewan { background:#f9f9f9; padding:40px 0; }
.hewan h2 { font-size:2rem; margin-bottom:20px; color:#2e7d32; }
.hewan-box { display:flex; justify-content:center; }
.hewan .card { background:#f5e6d3; border:1px solid #d9c2a4; padding:30px; border-radius:12px; max-width:500px; box-shadow:0 2px 6px rgba(0,0,0,0.08); text-align:center; }
.hewan .card h3 { margin-bottom:15px; font-size:1.4rem; color:#5a3e2b; }

/* =========================
GALLERY
========================= */
.gallery img { width:100%; border-radius:6px; cursor:pointer; }

/* =========================
KONTAK
========================= */
.kontak h2 { margin-bottom:15px; }
.map-container { margin:20px 0; overflow:hidden; border-radius:12px; }
.map-container iframe { width:100%; height:350px; border:none; }
.contact-form { max-width:500px; margin:auto; display:flex; flex-direction:column; gap:10px; }
.contact-form input,.contact-form textarea { width:100%; padding:12px; border-radius:6px; border:1px solid #ccc; }
.contact-form button { width:100%; }

/* =========================
LIGHTBOX
========================= */
.lightbox { display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.9); align-items:center; justify-content:center; flex-direction:column; }
.lightbox img { max-width:90%; max-height:80%; border-radius:6px; }
#lightbox-close { position:absolute; top:20px; right:30px; font-size:40px; color:#fff; cursor:pointer; }
#lightbox-prev,#lightbox-next { position:absolute; top:50%; font-size:40px; color:#fff; cursor:pointer; user-select:none; }
#lightbox-prev { left:20px; }
#lightbox-next { right:20px; }

/* =========================
FOOTER
========================= */
.footer { background:#1b3c2e; color:#fff; text-align:center; padding:20px; }

/* =========================
FLOATING WHATSAPP
========================= */
.wa-btn { position:fixed; bottom:20px; right:20px; z-index:1500; }
.wa-btn img { width:50px; height:50px; }