/* styles.css - lightweight */
:root{
  --bg-url: url('assets/16.jpg');
  --overlay-color: rgba(255,255,255,0.9);
  --dot-color: rgba(255,255,255,0.85);
  --line-color: rgba(255,255,255,0.65);
  --cursor-radius: 250;
  --max-particles: 120;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-image: linear-gradient(180deg, rgba(28,178,232,0.85), rgba(241,140,17,0.75)), var(--bg-url);
  background-size: cover;
  background-position: center;
  color:#fff;
  overflow:hidden;
}

/* Canvas covers viewport, sits above background but under content */
#particle-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1; /* above background */
  pointer-events:none; /* allow clicks through */
  display:block;
}

/* Content sits above canvas */
#content{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:48px 20px;
  /* backdrop-filter: blur(4px) saturate(120%); /* blur */
  /* backdrop-filter: blur(10px) saturate(120%); /* blur lebih kuat */
  backdrop-filter: saturate(100%) brightness(1.2) contrast(1.1); /* tambah efek lain */
  /* backdrop-filter: none; /* hilangkan blur */
}

.hero h1{
  font-size:clamp(28px,6vw,44px);
  letter-spacing:0.02em;
  margin-bottom:8px;
}

.hero p{opacity:0.95}

.info{
  margin-top:24px;
  max-width:820px;
  background:rgba(255,255,255,0.02);
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 6px 30px rgba(2,8,20,0.6);
}


    .countdown{
      display:flex;
      gap:12px;
      margin-top:6px;
      flex-wrap:wrap;
    }
    .countdown .item{
      min-width:72px;
      background:rgba(43,111,179,0.06);
      border-radius:12px;
      padding:10px 12px;
      text-align:center;
      box-shadow: inset 0 -2px 0 rgba(11,35,64,0.02);
    }
    .countdown .num{
      font-size:18px;
      font-weight:700;
      color:var(--accent);
    }
    .countdown .label{ font-size:12px; color:var(--muted); margin-top:4px; }
	
/* small screens */
@media (max-width:600px){
  :root{--max-particles:64;--cursor-radius:180}
  .info{padding:12px}
  .countdown .item{ min-width:64px; padding:8px 10px; }
}