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

    height: 100vh;
    margin: 0;

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

    background:
        radial-gradient(
            circle at 50% 35%,
            #263b8f 0%,
            #101a45 45%,
            #050817 100%
        );

    perspective: 1000px;
    overflow: hidden;
}

/* Cahaya lembut di belakang kalkulator */
body::before {
    content: "";

    position: fixed;
    width: 500px;
    height: 500px;

    background: rgba(255, 255, 255, 0.04);

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}

/* Animasi kalkulator muncul */
@keyframes popUp {
    0% {
        opacity: 0;
        transform: scale(0.6) translateY(40px) rotateX(15deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0);
    }
}

/* CALCULATOR */
.calculator {
    width: 260px;
    padding: 20px;

    background: #0b0b0b;
    border-radius: 14px;

    /* Efek 3D */
    box-shadow:
        0 8px 0 #000000,
        0 15px 25px rgb(0, 0, 0),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);

    animation:
        popUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;

    transform-style: preserve-3d;
}

/* DISPLAY */
#display {
    width: 100%;
    height: 60px;

    padding: 10px;
    box-sizing: border-box;

    font-size: 2rem;
    text-align: right;

    background: #f6f6f6;
    color: #000;

    border: none;
    border-radius: 7px;

    margin-bottom: 15px;

    /* Sedikit efek kedalaman */
    box-shadow:
        inset 0 3px 5px rgba(0, 0, 0, 0.12),
        0 2px 0 #cfcfcf;
}

/* GRID TOMBOL */
.button {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* TOMBOL */
.btn {
    padding: 15px 0;

    border: none;
    border-radius: 7px;

    background: #f0f0f0;
    color: #111;

    font-size: 1.1rem;
    cursor: pointer;

    /* Efek tombol 3D */
    box-shadow:
        0 4px 0 #bdbdbd,
        0 6px 8px rgba(0, 0, 0, 0.15);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background-color 0.2s ease;
}

/* Hover */
.btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 6px 0 #bdbdbd,
        0 9px 12px rgba(0, 0, 0, 0.18);
}

/* Saat ditekan */
.btn:active {
    background: #ddd;

    transform: translateY(3px);

    box-shadow:
        0 1px 0 #aaa,
        0 2px 4px rgba(0, 0, 0, 0.15);
}

/* OPERATOR */
.operator {
    background: #ff9500;
    color: white;

    box-shadow:
        0 4px 0 #bd6900,
        0 6px 8px rgba(0, 0, 0, 0.2);
}

.operator:hover {
    box-shadow:
        0 6px 0 #bd6900,
        0 9px 12px rgba(0, 0, 0, 0.22);
}

.operator:active {
    background: #e08900;

    box-shadow:
        0 1px 0 #a85f00,
        0 2px 4px rgba(0, 0, 0, 0.15);
}

/* RESET */
.btn-reset {
    background: #ff3b30;
    color: white;

    grid-column: span 2;

    box-shadow:
        0 4px 0 #b5221c,
        0 6px 8px rgba(0, 0, 0, 0.2);
}

.btn-reset:hover {
    box-shadow:
        0 6px 0 #b5221c,
        0 9px 12px rgba(0, 0, 0, 0.22);
}

/* DELETE */
.btn-delete {
    background: #555;
    color: white;

    grid-column: span 2;

    box-shadow:
        0 4px 0 #333,
        0 6px 8px rgba(0, 0, 0, 0.2);
}

.btn-delete:hover {
    box-shadow:
        0 6px 0 #333,
        0 9px 12px rgba(0, 0, 0, 0.22);
}