@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --bg1:#000000;
  --bg2:#8b0000;
  --text:#ffffff;
  --muted:#d6d6d6;
  --accent:#FF0000;
  --accent-2:#e91e63;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:14px;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  background: linear-gradient(to bottom, #000000, #8b0000);
  background-attachment: fixed;   /* gradient ikut viewport, tak bergerak */
  color: #ffffff;
  min-height: 100vh;
}


/* Navbar */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:transparent;
  padding:12px 20px;
  position:sticky;top:0;
  z-index:100;
  backdrop-filter:saturate(140%) blur(6px);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.brand-text{font-weight:700;letter-spacing:.5px}
.navbar a{color:var(--text);text-decoration:none;transition:.25s}
.navbar a:hover{color:var(--accent);text-decoration:underline}
.logo-text{font-weight:700}
.menu-icon{
  display:none;font-size:22px;cursor:pointer;color:var(--text);
  background:transparent;border:0;
}
.nav-right{display:flex;gap:16px}
.nav-right.active{display:flex}

/* Intro */
.intro{padding:32px 20px 12px;text-align:center}
.logo-box{display:inline-block;background:transparent;padding:16px;}
.logo-box img{display:block;width:240px;max-width:60vw;height:auto}
.intro-text{max-width:900px;margin:16px auto 0;font-size:1.05rem}

/* Gallery grid */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 kolum tetap */
    gap: 20px;
    padding: 20px;
    max-width: 1200px;      /* supaya tak meluas sangat */
    margin: 0 auto;         /* centerkan */
}

@media (max-width: 992px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr); /* tablet: 2 kolum */
}
}
@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr; /* phone: 1 kolum */
}
}

.gallery-item{
  display:block;text-decoration:none;color:inherit;text-align:center;transition:.25s;
}
.image-box {
  background: #000;       /* warna latar belakang */
  width: 100%;
  aspect-ratio: 4/3;      /* semua box ratio sama */
  border-radius: 8px;
  overflow: hidden;       /* pastikan gambar tak boleh keluar */
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit:cover;   /* muat ikut saiz box, tak stretch */
  object-position: center;
  background:white;      /* ruang kosong jadi hitam (boleh tukar transparent/merah) */
  display: block;
}


.gallery-item:hover .image-box img{transform:scale(1.05)}
.gallery-item p{
  margin-top:12px;font-size:1rem;color:#ffffff;transition:.25s;font-weight:600;
}
.gallery-item:hover p{color:var(--accent);transform:translateY(-3px)}

/* Footer */
.container{max-width:1170px;margin:0 auto;padding:0 15px}
.row{display:flex;flex-wrap:wrap;justify-content:space-between}
.footer{background:#24262b;padding:70px 0;margin-top:30px}
.footer-col{width:25%;padding:0 15px;margin-bottom:30px;text-align:left}
.footer-col h4{
  font-size:18px;color:#fff;text-transform:capitalize;margin-bottom:35px;font-weight:500;position:relative
}
.footer-col h4::before{content:'';position:absolute;left:0;bottom:-10px;background-color:var(--accent-2);height:2px;width:50px}
.footer-col ul{list-style:none}
.footer-col ul li:not(:last-child){margin-bottom:10px}
.footer-col ul li a{
  font-size:16px;color:#bbbbbb;text-decoration:none;font-weight:300;display:block;transition:.3s
}
.footer-col ul li a:hover{color:#fff;padding-left:8px}
.footer-col .social-links a{
  display:inline-block;height:40px;width:40px;background-color:rgba(255,255,255,0.2);
  margin:0 10px 10px 0;text-align:center;line-height:40px;border-radius:50%;color:#fff;transition:.5s
}
.footer-col .social-links a:hover{color:#24262b;background-color:#fff}

/* Responsive */
@media (max-width: 992px){ .footer-col{width:50%} }
@media (max-width: 768px){
  .menu-icon{display:block}
  .nav-right{
    display:none;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:#000;padding:20px;text-align:center
}
.nav-right a{margin:10px 0}
.logo-box img{width:200px}
}
@media (max-width: 574px){
  .footer-col{width:100%}
  .logo-box img{width:170px}
}