/* Simple, focused styles for homepage */

:root{
  --primary:#2b6cb0;
  --accent:#ed8936;
  --muted:#6b7280;
  --bg:#ffffff;
  --max-width:1100px;
  --gap:16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#111827;
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 16px;
}

/* Hero */
.hero{
  padding:56px 0;
  background:linear-gradient(180deg,#f9fafb 0,#fff 100%);
  text-align:center;
}
.hero h2{
  margin:0 0 8px;
  font-size:clamp(1.5rem,3vw,2rem);
}
.hero-sub{
  margin:0 0 40px;
  color:var(--muted);
  font-weight:600;
}

/* Slider styles */
.swiper {
  width: 100%;
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.swiper-slide {
  text-align: center;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--primary);
  background: rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 20px;
}

.swiper-pagination-bullet {
  background: var(--primary);
}

/* Responsive slider */
@media (max-width: 720px) {
  .swiper {
    height: 400px;
  }
}

/* Footer */
.site-footer{
  border-top:1px solid #e6e9ef;
  padding:12px 0;
  text-align:center;
  color:var(--muted);
  font-size:0.9rem;
}

/* Responsive */
@media (max-width:720px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .brand{margin-left:0} /* center/stack pada mobile */
  .main-nav ul{flex-wrap:wrap}
  .logo{width:56px}
  .hero{padding:40px 0}
}