body { font-family: Arial, sans-serif; margin:0; background:#fffbea; }
img { max-width:100%; height:auto; }
.logo { max-width:150px; margin-top:10px; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
header { background: linear-gradient(135deg, #ffcc00, #ff9900); text-align:center; padding:20px 0; color:white; }
h1 { margin:10px 0 0; font-size:2em; }

/* Slideshow */
.slideshow-container { position:relative; max-width:900px; margin:20px auto; overflow:hidden; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.2); }
.mySlides { display:none; animation: fade 1.5s; position: relative; }
.mySlides img { display:block; width:100%; height:auto; border-radius:10px; }
@keyframes fade { from {opacity:.3} to {opacity:1} }
.prev, .next { cursor:pointer; position:absolute; top:50%; transform:translateY(-50%); padding:16px; color:white; font-weight:bold; font-size:18px; border-radius:50%; user-select:none; background:rgba(0,0,0,0.5); }
.next { right:10px; }
.prev { left:10px; }
.prev:hover, .next:hover { background:rgba(0,0,0,0.8); }
.dot-container { text-align:center; padding:10px 0; }
.dot { cursor:pointer; height:12px; width:12px; margin:0 4px; background-color:#bbb; border-radius:50%; display:inline-block; transition: background-color 0.6s ease; }
.active, .dot:hover { background-color:#717171; }

/* Tombol */
.btn { display:inline-block; background:linear-gradient(45deg, gold, #e6b800); color:black; padding:12px 20px; text-decoration:none; border-radius:8px; font-weight:bold; text-align:center; transition:all 0.3s ease; box-shadow:0 3px 5px rgba(0,0,0,0.2); max-width:250px; margin:8px auto; }
.btn:hover { background:linear-gradient(45deg, #ffd700, #ffcc00); transform:scale(1.05); }

/* Menu grid */
.menu-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:800px; margin:auto; }

/* Map */
.map-section { margin:20px auto; padding:20px; text-align:center; border-radius:10px; max-width:900px; }
.map-section img { border-radius:10px; box-shadow:0 2px 5px rgba(0,0,0,0.2); max-width:100%; }
.map-section .alamat { margin:10px 0; font-size:14px; }

/* Bedakan lokasi */
.map-section.sukajadi { background:#fff7e6; }
.map-section.ciherang { background:#e6f7ff; }

/* Sosial */
.social-icons img { width:40px; height:40px; margin:5px; transition:transform 0.2s; }
.social-icons img:hover { transform:scale(1.1); }
footer { text-align:center; padding:10px; background:#fff3cd; margin-top:20px; }

/* Responsive */
@media(max-width:768px){ .slideshow-container { max-width:100%; } .menu-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .menu-grid { grid-template-columns:1fr; } }


/* --- Perbaikan Tombol & Layout --- */
.btn {
  display: inline-block;
  background: linear-gradient(45deg, gold, #e6b800);
  color: black;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  max-width: 200px;   /* batas biar tidak kepanjangan */
  width: 100%;        /* isi kolom grid */
}

.slideshow-container {
  max-width: 900px;   /* supaya di desktop tidak melebar penuh */
  margin: 20px auto;
  border-radius: 10px;
  overflow: hidden;
}

.map-section img {
  max-width: 600px;   /* peta tidak terlalu besar di PC */
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}