:root{
  --bg: #f7f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #4f46e5;
  --yellow: #00FFD1;
  --blue: #FFFFFF;
  --radius: 12px;
  --container-width: 1100px;
  --gap: 1.25rem;
  font-size: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

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

.site-header{
  background:#083D62;
  border-bottom:1px solid rgba(15,23,42,0.03);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-title{font-size:1.25rem;margin:0}
.site-title .yellow{
  color:var(--yellow);
  font-weight:700;
}

.site-title .blue{
  color:var(--blue);
  font-weight:700
}

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

.main-nav a{
  margin-left:1rem;
  text-decoration:none;
  color:#fff;
  font-weight:400;
  position: relative; /* Diperlukan untuk posisi pseudo-element */
  padding: 0.25rem 0;
}

/* Garis bawah animasi */
.main-nav a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0); /* Mulai dari lebar 0 */
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--yellow); /* Menggunakan warna kuning yang sudah ada */
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.main-nav a:hover::after {
  transform: scaleX(1); /* Lebar menjadi 100% saat di-hover */
  transform-origin: bottom left;
}

.hero{
  padding:2.5rem 0;
  display:flex;
  align-items:center;
}
.hero .container{display:flex;gap:2rem;align-items:center}
.hero-content{flex:1}
.hero-photo{width:360px;flex-shrink:0}
.hero-photo img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 8px 24px rgba(31,41,55,0.08)}
.lead{margin-top:0.5rem;margin-bottom:1rem;color:var(--muted)}
.cta-row .btn{display:inline-block;margin-right:0.75rem}

.btn{background:var(--accent);color:white;padding:0.6rem 1rem;border-radius:10px;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid rgba(79,70,229,0.12)}

.about{background:transparent;padding-top:1rem;padding-bottom:1rem}

.members .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem;max-width:600px;margin-left:auto;margin-right:auto}
.card{
  background:#F2F3B6;
  padding:0.75rem;
  border-radius:12px;
  text-align:center;
  box-shadow:0 6px 18px rgba(15,23,42,0.04)
}

.card img{
  width:180px;
  height:70%;
  object-fit:cover;
  border-radius:8px;
  object-position:top;
  margin-top: 25px;
}

.card h4{
  margin:0.5rem 0 0.25rem
}

h3.trah , p.trah{
  text-align: center;
}
.member-photo{cursor:pointer}
.small{font-size:0.9rem}
.muted{color:var(--muted)}

.events {
  background: #AAD4FF;
  padding: 1.5rem;
  border-radius: var(--radius);
  text-align: center; /* Pusatkan judul h3 */
  display: flex; /* Aktifkan flexbox */
  flex-direction: column; /* Atur item agar tersusun vertikal */
  justify-content: center; /* Pusatkan item secara vertikal */
}
.events-list{list-style:none;padding:0;margin:0;text-align:left}
.events-list li{background:var(--card);padding:0.8rem;border-radius:10px;margin-bottom:0.5rem;box-shadow:0 4px 12px rgba(15,23,42,0.03)}

.events h3 {
  padding-bottom: 20px;
}

.events-list li{
  padding-top: 15px;
}

span.mute.small {
  color: var(--muted)
}

.contact address{background:var(--card);padding:0.8rem;border-radius:10px}

.footer-kontak {
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
}
.footer-kontak address {
  font-style: normal;
  line-height: 1.6;
}
.footer-kontak a {
  color: var(--yellow);
}

.site-footer{
  margin-top:2rem;
  padding: 1rem 0;
  background:#083D62;
  color: #fff;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.9rem;
  padding: 0 50px;
}
.footer-inner .tagline {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Responsive */
@media (max-width:1000px){
  .hero-photo{width:300px}
}
@media (max-width:760px){
  .header-inner{flex-direction:column;gap:0.5rem;align-items:center}
  .main-nav{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center}
  .main-nav a{margin-left:0}
  .hero{padding:1.25rem 0}
  .hero .container{flex-direction:column}
  .hero-photo{width:100%}
  .members .grid{grid-template-columns:repeat(2,1fr)}
  #acara.container {padding-left: 20px; padding-right: 20px;}  .footer-inner{
    flex-direction:column;
    gap:0.5rem;
    text-align: center;
  }
}
@media (max-width:420px){
  :root{font-size:15px}
  .members .grid{grid-template-columns:1fr}
}

/* Utility */
.text-center{text-align:center}

/* Lightbox */
.lightbox{
  display:flex; /* Tetap flex untuk centering */
  visibility: hidden; /* Sembunyikan secara default */
  opacity: 0; /* Buat transparan */
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.85);
  justify-content:center;
  align-items:center;
  /* Tambahkan transisi */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Style saat lightbox aktif */
.lightbox.show {
  visibility: visible;
  opacity: 1;
}
.lightbox-content{
  max-width:90%;
  max-height:80%;
  border-radius: 8px;
  transform: scale(0.9); /* Sedikit lebih kecil saat tersembunyi */
  transition: transform 0.3s ease-in-out; /* Tambahkan transisi */
}
.lightbox.show .lightbox-content {
  transform: scale(1); /* Kembali ke ukuran normal saat tampil */
}
.lightbox-close{
  position:absolute;
  top:20px;
  right:35px;
  color:#f1f1f1;
  font-size:40px;
  font-weight:bold;
  cursor:pointer;
  line-height:1;
}