/* ===========================
   MJPTOP88 Landing Page
=========================== */

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

/* ===========================
   PREMIUM BACKGROUND
=========================== */

body{
    margin:0;
    padding:0;

    font-family:'Poppins',sans-serif;
    color:#fff;

    background:
        linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.65)),
        url("background.webp") center center / cover no-repeat fixed;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow-x:hidden;

    position:relative;
}

body::before{
    content:"";
    position:fixed;
    width:900px;
    height:900px;

    background:
    radial-gradient(circle,
    rgba(255,215,0,.25),
    transparent 70%);

    top:-350px;
    left:50%;

    transform:translateX(-50%);
    filter:blur(80px);

    z-index:-2;

    animation:glow 6s ease-in-out infinite;
}

@keyframes glow{

0%{
opacity:.3;
}

50%{
opacity:.8;
}

100%{
opacity:.3;
}

}

.hero{
    width:100%;
    display:flex;
    justify-content:center;
}

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

.hero{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.card{
    width:100%;
    max-width:520px;

    background:rgba(15,15,15,.88);

    backdrop-filter:blur(12px);

    border:2px solid #ffd700;

    border-radius:28px;

    padding:40px;

    text-align:center;

    box-shadow:
    0 0 20px rgba(255,215,0,.45),
    0 0 70px rgba(255,215,0,.18);

    position:relative;

    overflow:hidden;
}

.card::before{

content:"";

position:absolute;

top:-120px;
left:50%;

transform:translateX(-50%);

width:260px;
height:260px;

background:radial-gradient(circle,
rgba(255,215,0,.35),
transparent 70%);

filter:blur(30px);

z-index:0;

}

.card>*{

position:relative;

z-index:2;

}

/* ===========================
LOGO
=========================== */

.logo{

width:170px;

display:block;

margin:0 auto 20px;

filter:drop-shadow(0 0 20px gold);

}

/* ===========================
BADGE
=========================== */

.badge{

display:inline-block;

padding:8px 20px;

border:1px solid gold;

border-radius:50px;

font-size:12px;

font-weight:700;

color:#ffd700;

margin-bottom:25px;

}

/* ===========================
TITLE
=========================== */

h1{

font-size:46px;

font-weight:800;

line-height:1.15;

margin-bottom:18px;

}

p{

font-size:17px;

line-height:1.8;

color:#d7d7d7;

margin-bottom:35px;

}

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

.buttons{

display:flex;

flex-direction:column;

gap:18px;

}

.btn{

display:flex;

justify-content:center;

align-items:center;

height:64px;

border-radius:60px;

font-size:20px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

/* Daftar */

.btn-primary{

background:linear-gradient(90deg,#ffd54d,#ffc400);

color:#111;

box-shadow:0 0 25px rgba(255,215,0,.45);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 10px 35px rgba(255,215,0,.55);

}

/* Login */

.btn-secondary{

background:#111;

border:2px solid gold;

color:#ffd700;

}

.btn-secondary:hover{

background:#1b1b1b;

}

/* RTP */

.btn-blue{

background:linear-gradient(90deg,#0b74ff,#2db7ff);

color:#fff;

}

.btn-blue:hover{

transform:translateY(-4px);

}

/* Chat */

.btn-green{

background:linear-gradient(90deg,#08a44d,#1fcf6b);

color:#fff;

}

.btn-green:hover{

transform:translateY(-4px);

}

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

footer{

margin-top:35px;

font-size:13px;

color:#bdbdbd;

}
/* ===========================
   LOGO
=========================== */

.logo{
    display:block;
    width:170px !important;
    max-width:170px !important;
    height:auto !important;
    margin:0 auto 20px;
    filter:drop-shadow(0 0 15px rgba(255,215,0,.5));
}

/* Badge */

.badge{
    display:inline-block;
    padding:8px 18px;
    border:1px solid gold;
    border-radius:30px;
    font-size:11px;
    color:#ffd700;
    margin-bottom:18px;
}

/* Judul */

.title{
    font-size:34px;
    font-weight:bold;
    margin-bottom:15px;
    line-height:1.3;
}

.desc{
    color:#ccc;
    line-height:1.8;
    font-size:15px;
    margin-bottom:30px;
}

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

.button{
    display:block;
    text-decoration:none;
    padding:16px;
    border-radius:50px;
    margin-bottom:15px;
    font-weight:bold;
    transition:.3s;
}

.daftar{
    background:#ffd700;
    color:#000;
}

.daftar:hover{
    transform:translateY(-3px);
    box-shadow:0 0 18px gold;
}

.login{
    border:2px solid gold;
    color:#ffd700;
}

.login:hover{
    background:#ffd700;
    color:#000;
}

.rtp{
    background:#00a2ff;
    color:#fff;
}

.rtp:hover{
    background:#007fe6;
}

.chat{
    background:#19c85d;
    color:#fff;
}

.chat:hover{
    background:#0ca64a;
}

/* Footer */

.footer{
    margin-top:30px;
    color:#888;
    font-size:12px;
    line-height:1.8;
}

/* ===========================
   Mobile
=========================== */

@media(max-width:600px){

.card{
    padding:25px;
}

.logo{
    width:140px !important;
    max-width:140px !important;
}

.title{
    font-size:28px;
}

.desc{
    font-size:14px;
}

.button{
    padding:14px;
}

}