/* RESET & GLOBAL */
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Inter",sans-serif;
}

body {
    background: radial-gradient(circle at top, #001322, #000815 55%);
    min-height:100vh;
    color:white;
}

#qrimg {
    width: 300px;
    height: 300px;

    border-radius: 20px;
    padding: 8px;

    background:white;

    box-shadow: 0 0 20px rgba(0,200,255,.35);
}

/* HEADER */
h1 {
    text-align:center;
    padding-top:40px;
    font-size:40px;
    font-weight:900;

    background:linear-gradient(90deg,#00c8ff,#00c8ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    letter-spacing:1px;
}

/* CARD PREMIUM */
.card {
    width:92%;
    max-width:460px;
    margin:40px auto;

    padding:30px;
    border-radius:22px;

    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 0 40px rgba(0,150,255,.18);

    transition: .3s ease;
}

.card:hover {
    transform: scale(1.01);
}


.grid-ram {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.ram {
    background: #0c1c2b;
    border: 1px solid #00baff;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
}

.ram.active {
    background: #00baff;
    color: black;
}

/* hanya label harga */
label[for="harga"],
#harga {
    display: block;
    text-align: center; 
    margin-left: auto;
    margin-right: auto;
}


/* kolom harga */
#harga {
    width: 150px; 
    padding: 6px;

    border-radius: 8px;
    border: 1px solid #00baff;

    background: #001a26;
    color: white;

    font-weight: bold;
}

/* FORM LABEL */
label {
    display:block;
    font-size:14px;
    margin-top:14px;
    opacity:.85;
}

/* INPUT & SELECT */
input, select {
    width:100%;
    padding:14px;
    margin-top:8px;

    border-radius:14px;
    border:none;

    background:rgba(255,255,255,.08);
    color:white;

    outline:none;

    transition:.2s;
}

input:focus, select:focus {
    background:rgba(255,255,255,.14);
}

/* BUTTON */
button {
    width:100%;
    margin-top:30px;

    padding:16px;
    border-radius:16px;

    border:none;

    background:linear-gradient(90deg,#00c8ff,#00c8ff);
    color:white;

    font-weight:800;
    cursor:pointer;

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

    transition:.2s;
}

button:hover {
    opacity:.85;
}

/* ERROR TEXT */
.error{
    display:none;
    color:red;
    font-size:12px;
    margin-bottom:6px;
}

/* SVG MENU / ICON */
.svg-icon {
    width:20px;
    height:20px;
    fill:white;
}

/* SOCIAL BUTTON */
.social {
    margin-top:25px;
    display:flex;
    gap:12px;
}

.social a {
    flex:1;

    padding:12px;
    border-radius:14px;

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

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

    gap:10px;

    text-decoration:none;
    color:white;

    transition:.2s;
}

.social a:hover {
    background:rgba(255,255,255,.14);
}

/* BOX INFO / PREMIUM NOTE */
.info-box {
    margin-top:20px;
    padding:20px;

    border-radius:18px;

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

    line-height:1.7;
    opacity:.9;
}

/* LIST PREMIUM */
.info-box li {
    margin:6px 0;
}

/* BOX QR ANIMASI HALUS */
#box-qr {
    opacity:0;
    transform:translateY(20px);
    transition: all .35s ease;
}

#box-qr.show {
    opacity:1;
    transform:translateY(0);
}

/* STATUS BOX */
.status-box {
    margin-top:12px;
    padding:12px;
    border-radius:14px;

    background:rgba(0,200,255,.10);
    border:1px solid rgba(0,200,255,.30);

    font-size:14px;
}

.status-box b {
    color:#00d6ff;
}

/* RESPONSIVE */
@media (max-width:480px){
    h1 {
        font-size:32px;
    }
    .card {
        padding:20px;
    }
}