:root {
  --green: #2e7d32;
  --yellow: #fdd835;
  --dark: #0f172a;
  --gray: #444;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--green);
  color: white;
}

/* CONTAINER */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* NAV */
header {
  background: var(--green);
  position: sticky;
  top:0;
  z-index:999;
}

.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
}

nav {
  display:flex;
}

nav a {
  margin-left:20px;
  font-size:14px;
  font-weight:600;
  color: white;
  text-decoration: none;
  }

  nav a:hover {
  color: #fdd835;
}

.menu-toggle {
  display:none;
  font-size:24px;
  cursor:pointer;
}

/* HERO */
.hero {
  height: 70vh;
  background:url('assets/img/appc-asia-image1.jpg') center/cover;
  position:relative;
}

.overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,100,0,0.7);
}

.hero-content {
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

.hero h1 {
  font-size:42px;
  font-weight:800;
}

.btn {
  margin-top:20px;
  padding:12px 20px;
  background: var(--yellow);
  border:none;
  font-weight:700;
  color: black;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  background: #ffeb3b;
}

.btn a {
  color: inherit;
  text-decoration: none;
}

/* PARTNERS */
.partners {
  background: var(--yellow);
  text-align:center;
  padding:30px;
  color:black;
}

.logos {
  display:flex;
  justify-content:center;
  align-items: center;       /* sejajar tengah vertikal */
  gap: 50px;                 /* jarak antar logo */
  flex-wrap: wrap;           /* biar turun ke bawah di mobile */
  margin-top:10px;
}

.logos img {
  max-height: 50px;          /* tinggi konsisten */
  width: auto;
  object-fit: contain;
}

/* STATS */
.stats {
  background: var(--gray);
  padding:40px 0;
}

.stats-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:20px;
  align-items:center;
}

/* GALLERY */
.gallery-strip {
  display:flex;
}

.gallery-strip img {
  width:33.33%;
}

/* UPCOMING */
.upcoming {
  background: var(--green);
  text-align:center;
  padding:60px 20px;
}

.event-card {
  margin:30px auto;
  width:60%;
  height:200px;
  background:url('assets/img/event-card.jpg') center/cover;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* RANKING */
.ranking {
  display:grid;
  grid-template-columns:1fr 1fr;
}

.ranking-left {
  background:url('assets/img/appc-footer2.jpg') center/cover;
  padding:80px 30px;
}

.ranking-right {
  background:#444;
  padding:60px;
}


/* poster */
.poster {
  display:grid;
  grid-template-columns:1fr 1fr;
}

.poster-left {
  background:url('assets/img/poster.jpg') center/cover;
  padding:80px 30px;
}
.poster-right {
  background:#444;
  padding:60px;
}
/* CONTACT */
.contact {
  display:grid;
  grid-template-columns:1fr 1fr;
}

.contact-left {
  background: var(--yellow);
  color:black;
  padding:40px;
}

.contact-right img {
  width:100%;
  height: 100%;
}

/* FOOTER */
footer {
  text-align:center;
  padding:20px;
  background:#222;
}

/* ================= MOBILE ================= */
@media(max-width:768px){

  .menu-toggle {
    display:block;
  }

  nav {
    position:absolute;
    top:100px;
    right:0;
    background:var(--green);
    width:100%;
    flex-direction:column;
    display:none;
    text-align:center;
  }

  nav.active {
    display:flex;
  }

  nav a {
    margin:15px 0;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
  }

  nav a:hover {
  color: #fdd835;
}

  .hero h1 {
    font-size:26px;
  }

  .stats-grid {
    grid-template-columns:1fr;
    text-align:center;
  }

  .gallery-strip {
    flex-direction:column;
  }

  .gallery-strip img {
    width:100%;
  }

  .event-card {
    width:100%;
  }

  .ranking {
    grid-template-columns:1fr;
  }

  .contact {
    grid-template-columns:1fr;
  }
}