/* ===========================================
   SV388SV PREMIUM CSS
   PART 1
=========================================== */

:root{
--bg:#020b15;
--bg2:#071a2b;
--cyan:#00e5ff;
--blue:#0099ff;
--white:#ffffff;
--text:#ecfaff;
}

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

html,body{
width:100%;
height:100%;
}

body{

font-family:Arial,Helvetica,sans-serif;

color:var(--text);

background:

radial-gradient(circle at top,#00d9ff25 0%,transparent 30%),

radial-gradient(circle at bottom,#0066ff20 0%,transparent 35%),

linear-gradient(180deg,#020b15,#04192a,#01060d);

overflow-x:hidden;

}

/* GRID */

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background-image:

linear-gradient(rgba(0,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(0,255,255,.03) 1px,transparent 1px);

background-size:40px 40px;

}

/* FLOAT PARTICLE */

body::after{

content:"";

position:fixed;

left:-50%;

top:-50%;

width:200%;

height:200%;

pointer-events:none;

background:

radial-gradient(circle,#00ffff22 0%,transparent 10%),

radial-gradient(circle,#008cff18 0%,transparent 8%);

background-size:220px 220px;

animation:bgRotate 35s linear infinite;

}

/* PAGE */

.page{

position:relative;

width:min(100%,650px);

margin:auto;

min-height:100vh;

padding:20px;

overflow:hidden;

background:

linear-gradient(

180deg,

rgba(3,15,27,.96),

rgba(2,9,18,.98)

);

border-left:2px solid #00bfff;

border-right:2px solid #00bfff;

box-shadow:

0 0 30px rgba(0,213,255,.18),

inset 0 0 20px rgba(0,213,255,.08);

}

/* LED */

.page::before{

content:"";

position:absolute;

left:-2px;

top:-180px;

width:6px;

height:180px;

border-radius:30px;

background:

linear-gradient(

to bottom,

transparent,

#00ffff,

white,

#00aaff,

transparent

);

box-shadow:

0 0 15px #00ffff,

0 0 40px #00ffff,

0 0 70px #00ffff;

animation:leftLed 2.8s linear infinite;

}

.page::after{

content:"";

position:absolute;

right:-2px;

bottom:-180px;

width:6px;

height:180px;

border-radius:30px;

background:

linear-gradient(

to top,

transparent,

#00ffff,

white,

#00aaff,

transparent

);

box-shadow:

0 0 15px #00ffff,

0 0 40px #00ffff,

0 0 70px #00ffff;

animation:rightLed 2.8s linear infinite;

}

/* HEADER */

.top{

display:flex;

justify-content:center;

align-items:center;

gap:16px;

flex-wrap:wrap;

margin-bottom:18px;

}

/* LOGO */

.logo{

position:relative;

overflow:hidden;

padding:20px 60px;

font-size:48px;

font-weight:900;

letter-spacing:3px;

border-radius:18px;

border:1px solid rgba(0,255,255,.45);

background:

linear-gradient(

135deg,

#07385c,

#081524

);

color:white;

text-shadow:

0 0 10px white,

0 0 20px #00ffff,

0 0 40px #00ffff,

0 0 80px #00ffff;

box-shadow:

0 0 20px rgba(0,255,255,.25),

inset 0 0 20px rgba(0,255,255,.15);

animation:

logoBlink 1.6s infinite alternate,

floatLogo 4s ease-in-out infinite;

}

.logo::before{

content:"";

position:absolute;

top:-40%;

left:-170%;

width:70%;

height:220%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.9),

transparent

);

transform:rotate(25deg);

animation:shine 4s linear infinite;

}

.logo::after{

content:"";

position:absolute;

inset:0;

border-radius:18px;

box-shadow:

0 0 20px #00ffff inset;

animation:borderBlink .5s infinite alternate;

pointer-events:none;

}

.badge{

padding:10px 18px;

border-radius:999px;

border:1px solid rgba(0,255,255,.4);

background:rgba(0,255,255,.08);

font-size:13px;

font-weight:bold;

box-shadow:

0 0 12px rgba(0,255,255,.18);

}

/* ===========================================
   BUTTON
=========================================== */

.buttons{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

margin:20px 0;

}

.btn{

display:flex;

justify-content:center;

align-items:center;

height:52px;

border-radius:999px;

text-decoration:none;

font-weight:900;

position:relative;

overflow:hidden;

transition:.35s;

cursor:pointer;

}

.btn::before{

content:"";

position:absolute;

left:-150%;

top:0;

width:60%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.7),
transparent);

transform:skewX(-25deg);

transition:.6s;

}

.btn:hover::before{

left:180%;

}

.btn:hover{

transform:translateY(-4px) scale(1.03);

box-shadow:

0 0 20px #00ffff,

0 0 50px rgba(0,255,255,.4);

}

.primary{

background:linear-gradient(135deg,#00bfff,#00ffff);

color:#00131c;

}

.outline{

background:#041827;

color:white;

border:1px solid #00cfff;

}

.white{

grid-column:1/3;

background:white;

color:black;

}

/* ===========================================
   TICKER
=========================================== */

.ticker{

margin:12px 0;

height:30px;

padding:0 10px;

display:flex;

align-items:center;

overflow:hidden;

border-radius:8px;

border:1px solid rgba(0,255,255,.35);

background:#04131d;

box-shadow:
0 0 10px rgba(0,255,255,.15);

}

.ticker span{

white-space:nowrap;

padding-left:100%;

font-size:14px;   /* Ukuran tulisan */
font-weight:600;  /* Ketebalan */
animation:marquee 14s linear infinite;

}

/* ===========================================
   BANNER
=========================================== */

.banner-wrap{

text-align:center;

margin:18px 0;

}

.banner-img{

width:100%;

max-width:460px;

border-radius:14px;

border:1px solid #00bfff;

transition:.4s;

box-shadow:

0 0 20px rgba(0,255,255,.25);

}

.banner-img:hover{

transform:scale(1.02);

box-shadow:

0 0 20px #00ffff,

0 0 50px rgba(0,255,255,.45);

}

/* ===========================================
   CARD
=========================================== */

.card{

margin:18px 0;

padding:22px;

border-radius:18px;

background:

linear-gradient(

180deg,

rgba(9,40,65,.9),

rgba(3,13,22,.96)

);

border:1px solid rgba(0,255,255,.25);

transition:.35s;

box-shadow:

0 0 18px rgba(0,255,255,.08);

}

.card:hover{

transform:translateY(-6px);

box-shadow:

0 0 25px rgba(0,255,255,.3),

0 0 60px rgba(0,255,255,.12);

}

.card h2{

text-align:center;

color:#00ffff;

margin-bottom:12px;

font-size:28px;

text-shadow:

0 0 10px #00ffff;

}

.card p{

line-height:1.8;

text-align:center;

color:#d8faff;

}

/* ===========================================
   LINK
=========================================== */

.row{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:15px;

padding-top:15px;

border-top:1px solid rgba(0,255,255,.18);

}

.row a{

padding:10px 18px;

border-radius:999px;

background:#00d9ff;

color:#00121c;

text-decoration:none;

font-weight:bold;

transition:.35s;

}

.row a:hover{

transform:scale(1.08);

box-shadow:

0 0 20px #00ffff;

}

/* ===========================================
   INFO
=========================================== */

.info-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}

.mini{

text-align:center;

}

.mini b{

display:block;

margin-bottom:10px;

font-size:18px;

}

.mini p{

line-height:1.6;

color:#dffcff;

}

/* ===========================================
   FOOTER
=========================================== */

footer{

padding:30px 0;

text-align:center;

color:#9fdfff;

font-size:13px;

}
/* ===========================================
   ANIMATIONS
=========================================== */

@keyframes marquee{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-200%);
}

}

@keyframes bgRotate{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

@keyframes leftLed{

0%{
top:-180px;
opacity:.3;
}

15%{
opacity:1;
}

100%{
top:110%;
opacity:.3;
}

}

@keyframes rightLed{

0%{
bottom:-180px;
opacity:.3;
}

15%{
opacity:1;
}

100%{
bottom:110%;
opacity:.3;
}

}

@keyframes logoBlink{

0%{

filter:brightness(.8);

text-shadow:
0 0 8px #fff,
0 0 18px #00d9ff,
0 0 35px #00d9ff;

}

20%{

filter:brightness(1.4);

text-shadow:
0 0 12px #fff,
0 0 25px #00ffff,
0 0 55px #00ffff,
0 0 90px #00ffff;

}

40%{

filter:brightness(.9);

}

60%{

filter:brightness(1.5);

}

80%{

filter:brightness(.9);

}

100%{

filter:brightness(1.3);

text-shadow:
0 0 15px #fff,
0 0 35px #00ffff,
0 0 70px #00ffff,
0 0 120px #00ffff;

}

}

@keyframes shine{

0%{
left:-170%;
}

100%{
left:170%;
}

}

@keyframes borderBlink{

0%{

opacity:.4;

box-shadow:
0 0 10px #00ffff inset;

}

100%{

opacity:1;

box-shadow:
0 0 25px #00ffff inset,
0 0 15px #00ffff;

}

}

@keyframes floatLogo{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-6px);
}

100%{
transform:translateY(0);
}

}

/* ===========================================
   EXTRA EFFECT
=========================================== */

.badge{

animation:badgePulse 2s infinite;

}

@keyframes badgePulse{

0%{
transform:scale(1);
}

50%{

transform:scale(1.05);

box-shadow:
0 0 18px #00ffff;

}

100%{
transform:scale(1);
}

}

.banner-img{

animation:bannerGlow 3s ease-in-out infinite;

}

@keyframes bannerGlow{

0%{

box-shadow:
0 0 15px rgba(0,255,255,.2);

}

50%{

box-shadow:
0 0 35px rgba(0,255,255,.7);

}

100%{

box-shadow:
0 0 15px rgba(0,255,255,.2);

}

}

.card{

animation:cardGlow 4s infinite alternate;

}

@keyframes cardGlow{

0%{

border-color:rgba(0,255,255,.2);

}

100%{

border-color:#00ffff;

}

}

/* ===========================================
   MOBILE
=========================================== */

@media(max-width:600px){

.page{

padding:14px;

}

.logo{

font-size:34px;

padding:15px 28px;

}

.badge{

font-size:11px;

}

.buttons{

grid-template-columns:1fr;

}

.white{

grid-column:auto;

}

.info-grid{

grid-template-columns:1fr;

}

.row{

flex-direction:column;

gap:12px;

}

.card h2{

font-size:22px;

}

}