/* 08-banner-shine.css */
.hero-img{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    border:3px solid #ffd700;
    box-shadow:
        0 0 25px rgba(255,215,0,.45),
        0 0 60px rgba(255,0,0,.2);
}

/* cahaya menyapu */

.shine{
    position:absolute;
    top:-60%;
    left:-80%;
    width:40%;
    height:220%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );
    transform:rotate(25deg);
    animation:shineMove 5s linear infinite;
    z-index:3;
}

@keyframes shineMove{

0%{
left:-80%;
}

100%{
left:180%;
}

}

/* sparkle */

.spark{

position:absolute;
width:10px;
height:10px;
background:#fff;
border-radius:50%;
box-shadow:
0 0 12px #fff,
0 0 25px gold,
0 0 40px gold;

animation:spark 2s infinite ease-in-out;
z-index:5;

}

html{
  min-height:100%;
}

body{
  min-height:100%;
  background:
    radial-gradient(circle at top left,
      rgba(255,215,0,.10),
      transparent 32%
    ),
    radial-gradient(circle at top right,
      rgba(255,0,90,.12),
      transparent 36%
    ),
    radial-gradient(circle at bottom center,
      rgba(170,0,255,.12),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #120013 0%,
      #1b001f 25%,
      #110011 50%,
      #250011 75%,
      #070008 100%
    );
  background-attachment:fixed;
  color:#fff;
  overflow-x:hidden;
  position:relative;
}

/* titik kilau halus */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle,
      rgba(255,215,0,.08) 1.5px,
      transparent 3px
    );
  background-size:180px 180px;
  opacity:.35;
  animation:bgSparkMove 45s linear infinite;
  z-index:-1;
}

/* glow tengah */
body::after{
  content:"";
  position:fixed;
  width:760px;
  height:760px;
  left:50%;
  top:38%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,
      rgba(255,0,0,.10),
      rgba(255,215,0,.05),
      transparent 70%
    );
  filter:blur(80px);
  pointer-events:none;
  z-index:-2;
}

@keyframes bgSparkMove{
  0%{
    transform:translate(0,0);
  }
  100%{
    transform:translate(-180px,-180px);
  }
}