<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youth GKPB MDC — Jombang</title>

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

<style>
:root{
  --cyan:#00f5ff;
  --violet:#a855f7;
  --bg:#05070f;
  --card:rgba(255,255,255,.07);
  --text:#fff;
}

body.light{
  --bg:#eef4ff;
  --card:rgba(255,255,255,.85);
  --text:#111;
}

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

body{
  font-family:Poppins,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* ================= LOADER ================= */
#loader{
  position:fixed;
  inset:0;
  background:#02030a;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.loader-text{
  font-family:Orbitron;
  font-size:1.2rem;
  letter-spacing:3px;
  animation:glitch 1.2s infinite;
}

.bar{
  margin-top:22px;
  width:220px;
  height:4px;
  background:rgba(255,255,255,.15);
  overflow:hidden;
}

.bar span{
  display:block;
  height:100%;
  width:40%;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  animation:load 1.6s infinite;
}

@keyframes load{
  from{transform:translateX(-100%);}
  to{transform:translateX(260%);}
}

/* ================= BACKGROUND ================= */
.grid{
  position:fixed;
  inset:0;
  background:
    linear-gradient(transparent 94%,rgba(0,245,255,.35) 100%),
    linear-gradient(90deg,transparent 94%,rgba(168,85,247,.35) 100%);
  background-size:70px 70px;
  opacity:.45;
  z-index:-2;

  transform:perspective(900px) rotateX(60deg);
  transform-origin:top;

  animation:gridMove 18s linear infinite,
           gridWave 6s ease-in-out infinite alternate;
}

@keyframes gridMove{
  from{background-position:0 0,0 0;}
  to{background-position:0 700px,700px 0;}
}

@keyframes gridWave{
  from{filter:blur(0);}
  to{filter:blur(1.3px);}
}

.scanline{
  pointer-events:none;
  position:fixed;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 1px,
    transparent 3px
  );
  background-size:100% 6px;
  opacity:.22;
  z-index:10;
}

#particles{
  position:fixed;
  inset:0;
  z-index:-3;
}

/* ================= CONTROLS ================= */
.controls{
  position:fixed;
  top:18px;
  right:18px;
  display:flex;
  gap:10px;
  z-index:50;
}

.ctrl-btn{
  padding:9px 14px;
  font-size:.75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
}

/* ================= LAYOUT ================= */
.container{
  max-width:1100px;
  margin:auto;
  padding:90px 20px;
}

/* ================= HERO ================= */
.hero{
  background:linear-gradient(135deg,
    rgba(0,245,255,.12),
    rgba(168,85,247,.12));
  border-radius:26px;
  padding:46px;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(18px);
  animation:flicker 6s infinite;
}

@keyframes flicker{
  0%,100%{opacity:1}
  97%{opacity:.85}
  98%{opacity:.55}
  99%{opacity:1}
}

.tag{
  font-size:.7rem;
  letter-spacing:2px;
  display:inline-block;
  padding:7px 15px;
  border-radius:999px;
  border:1px solid var(--cyan);
  margin-bottom:12px;
}

/* ===== GLITCH ===== */
.glitch{
  position:relative;
  font-family:Orbitron;
  font-size:2rem;
}

.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;
  color:transparent;
  opacity:.7;
}

.glitch::before{
  transform:translate(2px,-1px);
  animation:glitch1 2s infinite;
}

.glitch::after{
  transform:translate(-2px,1px);
  animation:glitch2 1.6s infinite;
}

@keyframes glitch1{
  0%,100%{clip-path:inset(0 0 75% 0);}
  50%{clip-path:inset(40% 0 20% 0);}
}

@keyframes glitch2{
  0%,100%{clip-path:inset(60% 0 0 0);}
  50%{clip-path:inset(10% 0 50% 0);}
}

/* ================= BUTTON ================= */
.join-btn{
  display:inline-block;
  margin-top:26px;
  padding:14px 30px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  color:black;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 0 25px var(--cyan);
}

/* ================= INFO ================= */
.info{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
}

.box{
  background:var(--card);
  padding:16px;
  border-radius:14px;
}

/* ================= GALLERY ================= */
.section{margin-top:90px;}

.section h2{
  text-align:center;
  font-family:Orbitron;
  font-size:1.7rem;
  margin-bottom:38px;
}

.slider{
  display:flex;
  gap:22px;
  overflow-x:auto;
}

.card{
  position:relative;
  min-width:250px;
  height:180px;
  border-radius:16px;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:.15s;
  box-shadow:0 0 22px rgba(0,245,255,.4);
}

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

.card-btn{
  position:absolute;
  bottom:12px;
  right:12px;
  padding:7px 14px;
  border-radius:999px;
  font-size:.7rem;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  color:black;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 0 18px var(--cyan);
}

/* ================= FOOTER ================= */
footer{
  text-align:center;
  margin-top:110px;
  font-size:.75rem;
  opacity:.7;
}

/* ===== FOOTER COPYRIGHT ===== */
.cyber-footer{
  position:fixed;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  font-size:.7rem;
  letter-spacing:1px;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(0,245,255,.15);
  border:1px solid rgba(0,245,255,.45);
  backdrop-filter:blur(12px);
  box-shadow:0 0 20px rgba(0,245,255,.45);
  z-index:200;
}

.cyber-footer a{
  color:#00f5ff;
  text-decoration:none;
  font-weight:600;
}

.cyber-footer a:hover{
  text-shadow:0 0 12px #00f5ff;
}
</style>
</head>

<body>

<div id="loader">
  <div class="loader-text">INITIALIZING YOUTH SYSTEM</div>
  <div class="bar"><span></span></div>
</div>

<canvas id="particles"></canvas>
<div class="grid"></div>
<div class="scanline"></div>

<div class="controls">
  <button class="ctrl-btn" id="themeBtn">🌙 / ☀️</button>
</div>

<div class="container">

<section class="hero">
  <div class="tag">⚡ GKPB MDC • YOUTH</div>

  <h1 class="glitch" data-text="Ibadah Youth GKPB MDC JOMBANG">
    Ibadah Youth GKPB MDC JOMBANG
  </h1>

  <p style="margin-top:12px;font-size:.9rem;opacity:.85">
    Ruang generasi muda bertumbuh dalam iman, karakter, dan komunitas.
  </p>

  <div class="info">
    <div class="box">Setiap Sabtu • 17.00 WIB</div>
    <div class="box">GKPB MDC Jombang</div>
    <div class="box">13–25 Tahun</div>
    <div class="box">Casual & Sopan</div>
  </div>

  <a href="https://instagram.com/mdc_youth.jombang?igsh=Z29rMDQ3ZGd2Y3Js" target="_blank" class="join-btn">
    🚀 JOIN YOUTH MDC
  </a>
</section>

<section class="section">
<h2>🔥 Kegiatan Youth MDC</h2>
<div class="slider" id="gallery"></div>
</section>

<footer class="cyber-footer">
  © 2026 
  <a href="https://mdcjombang.id/youth/ppt" target="_blank">
    Youth GKPB MDC
</div>

<script>
/* ===== THEME ===== */
document.getElementById("themeBtn")
  .onclick=()=>document.body.classList.toggle("light");

/* ===== LOADER ===== */
setTimeout(()=>{
  document.getElementById("loader").style.display="none";
},2500);

/* ===== PARTICLES ===== */
const c=document.getElementById("particles");
const ctx=c.getContext("2d");

function resize(){
  c.width=innerWidth;
  c.height=innerHeight;
}
resize();
addEventListener("resize",resize);

let dots=[];
for(let i=0;i<90;i++){
  dots.push({
    x:Math.random()*innerWidth,
    y:Math.random()*innerHeight,
    vx:(Math.random()-.5)*.6,
    vy:(Math.random()-.5)*.6
  });
}

(function animate(){
  ctx.clearRect(0,0,c.width,c.height);
  dots.forEach(d=>{
    d.x+=d.vx;
    d.y+=d.vy;

    if(d.x<0||d.x>innerWidth) d.vx*=-1;
    if(d.y<0||d.y>innerHeight) d.vy*=-1;

    ctx.fillStyle="rgba(0,245,255,.6)";
    ctx.beginPath();
    ctx.arc(d.x,d.y,2,0,Math.PI*2);
    ctx.fill();
  });
  requestAnimationFrame(animate);
})();

/* ===== LOAD DATABASE.JSON ===== */
fetch("https://mdcjombang.id/siap/youth/id/database.json")
  .then(res=>res.json())
  .then(data=>{
    const gallery=document.getElementById("gallery");

    if(!data.length){
      gallery.innerHTML="<p>Belum ada foto kegiatan.</p>";
      return;
    }

    data.forEach(item=>{
      const a=document.createElement("a");
      a.href=item.link;
      a.target="_blank";
      a.className="card";

      a.innerHTML=`
        <img src="https://mdcjombang.id/siap/youth/id/${item.image}">
        <span class="card-btn">OPEN</span>
      `;

      gallery.appendChild(a);
    });

    /* ===== APPLY 3D TILT ===== */
    document.querySelectorAll(".card").forEach(card=>{
      card.addEventListener("mousemove",e=>{
        const r=card.getBoundingClientRect();
        const x=e.clientX-r.left;
        const y=e.clientY-r.top;
        const rx=(y/r.height-.5)*-16;
        const ry=(x/r.width-.5)*16;
        card.style.transform=`rotateX(${rx}deg) rotateY(${ry}deg)`;
      });

      card.addEventListener("mouseleave",()=>{
        card.style.transform="rotateX(0) rotateY(0)";
      });
    });

  })
  .catch(err=>{
    console.error("Gagal load database.json",err);
  });
</script>

</body>
</html>