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

body {
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    background: #050b18;
    color: white;
    overflow-x: hidden;
}


/* BACKGROUND */

.background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    background:
        radial-gradient(circle at top,
        #123b70 0%,
        #071326 45%,
        #020611 100%);
}

.circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
}

.circle-1 {
    width: 250px;
    height: 250px;
    background: #008cff;
    top: -80px;
    left: -80px;
}

.circle-2 {
    width: 300px;
    height: 300px;
    background: #005eff;
    right: -100px;
    top: 35%;
}

.circle-3 {
    width: 200px;
    height: 200px;
    background: #00d9ff;
    bottom: -50px;
    left: 30%;
}


/* CONTAINER */

.container {
    width: 100%;
    max-width: 600px;
    margin: auto;
    padding: 35px 18px;
}


/* PROFILE */

.profile {
    text-align: center;
    margin-bottom: 25px;
}

.profile-wrapper {
    width: 105px;
    height: 105px;
    margin: auto;
    padding: 4px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #00c6ff,
        #0072ff,
        #00e5ff
    );

    box-shadow:
        0 0 25px rgba(0, 174, 255, .5);
}

.profile-img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
    border: 4px solid #071326;
}

.profile h1 {
    margin-top: 15px;
    font-size: 25px;
    letter-spacing: 1px;
}

.subtitle {
    margin-top: 5px;
    color: #9db6d9;
    font-size: 12px;
    letter-spacing: 3px;
}

.online {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 10px;

    padding: 5px 12px;

    border-radius: 30px;

    background: rgba(0, 255, 150, .08);
    border: 1px solid rgba(0, 255, 150, .2);

    color: #52ffae;
    font-size: 12px;
}

.online span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 10px #00ff88;
}


/* WARNING */

.warning-box {
    display: flex;
    gap: 14px;

    padding: 17px;

    margin-bottom: 25px;

    border-radius: 16px;

    background: rgba(255, 170, 0, .08);
    border: 1px solid rgba(255, 174, 0, .3);

    backdrop-filter: blur(15px);
}

.warning-icon {
    min-width: 42px;
    height: 42px;

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

    border-radius: 12px;

    background: rgba(255, 174, 0, .15);

    color: #ffc400;
    font-size: 20px;
}

.warning-text strong {
    color: #ffc400;
    font-size: 13px;
}

.warning-text p {
    margin-top: 7px;
    color: #d6deeb;
    font-size: 11px;
    line-height: 1.7;
}


/* TITLE */

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;

    color: #dceaff;
    font-size: 14px;
    font-weight: bold;
}

.section-title i {
    color: #00aaff;
}


/* PAYMENT CARD */

.payment-card {
    margin-bottom: 15px;

    border-radius: 18px;

    background: rgba(255, 255, 255, .055);

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

    backdrop-filter: blur(18px);

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .25);

    transition: .25s ease;
}

.payment-card:hover {
    transform: translateY(-3px);

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

    box-shadow:
        0 15px 35px rgba(0, 126, 255, .15);
}


/* PAYMENT HEADER */

.payment-header {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 17px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}

.payment-icon {
    width: 45px;
    height: 45px;

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

    border-radius: 13px;

    font-size: 20px;
}

.dana {
    background: rgba(0, 123, 255, .15);
    color: #008cff;
}

.gopay {
    background: rgba(0, 210, 255, .12);
    color: #00d9ff;
}

.ovo {
    background: rgba(130, 80, 255, .15);
    color: #a77cff;
}

.qris {
    background: rgba(0, 255, 170, .12);
    color: #00e6a0;
}

.payment-header h2 {
    font-size: 16px;
}

.payment-header span {
    display: block;
    margin-top: 3px;

    color: #8495ae;
    font-size: 11px;
}


/* PAYMENT INFO */

.payment-info {
    padding: 18px;
}

.number {
    padding: 14px;

    text-align: center;

    border-radius: 12px;

    background: rgba(0,0,0,.2);

    font-size: 21px;
    font-weight: bold;
    letter-spacing: 1px;
}

.payment-info p,
.qris-content p {
    margin-top: 12px;

    text-align: center;

    color: #8fa2bc;

    font-size: 12px;
}

.payment-info p i,
.qris-content p i {
    color: #00aaff;
    margin-right: 4px;
}

.payment-info p b,
.qris-content p b {
    color: white;
}


/* COPY BUTTON */

.copy-btn,
.download-btn {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 13px;

    padding: 13px;

    border: 0;
    border-radius: 11px;

    background: linear-gradient(
        135deg,
        #008cff,
        #0066ff
    );

    color: white;

    font-size: 13px;
    font-weight: bold;

    cursor: pointer;

    text-decoration: none;

    transition: .2s ease;
}

.copy-btn:hover,
.download-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 132, 255, .25);
}

.copy-btn:active,
.download-btn:active {
    transform: scale(.97);
}


/* QRIS */

.qris-content {
    padding: 20px;
    text-align: center;
}

.qris-img {
    display: block;

    width: 100%;
    max-width: 290px;

    margin: auto;

    border-radius: 15px;

    background: white;
    padding: 10px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.35);
}

.download-btn {
    margin-top: 15px;
}


/* FOOTER */

footer {
    text-align: center;
    margin-top: 30px;

    color: #64758e;

    font-size: 11px;
}

.footer-line {
    height: 1px;

    margin-bottom: 15px;

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

footer p {
    color: #9bb0cb;
    margin-bottom: 7px;
}

footer p i {
    color: #00aaff;
    margin-right: 5px;
}


/* TOAST */

.toast {
    position: fixed;

    left: 50%;
    bottom: 25px;

    transform: translate(-50%, 100px);

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 18px;

    border-radius: 12px;

    background: #101c30;

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

    box-shadow:
        0 10px 30px rgba(0,0,0,.4);

    color: white;

    font-size: 13px;

    opacity: 0;

    transition: .3s ease;

    z-index: 100;
}

.toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

.toast i {
    color: #00e68a;
}


/* MOBILE */

@media (max-width: 480px) {

    .container {
        padding: 25px 13px;
    }

    .profile h1 {
        font-size: 22px;
    }

    .warning-box {
        padding: 14px;
    }

    .warning-text p {
        font-size: 10px;
    }

    .number {
        font-size: 18px;
    }

    .qris-img {
        max-width: 250px;
    }
}