/* ==========================================
   404 PAGE
========================================== */

.error-page {

    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at top left,
            rgba(173,20,20,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(244,187,0,.12),
            transparent 40%
        ),
        #0f1115;

    color: white;
}

.error-glow {

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(173,20,20,.12),
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(244,187,0,.08),
            transparent 45%
        );

    pointer-events: none;
}

.error-page .container {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

/* ==========================================
   LEFT
========================================== */

.error-tag {

    display: inline-block;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(173,20,20,.12);

    border: 1px solid rgba(173,20,20,.25);

    color: var(--color-gold-soft);

    margin-bottom: 20px;

    letter-spacing: 1px;

    text-transform: uppercase;

    font-size: .8rem;
}

.error-code {

    font-size: clamp(5rem, 15vw, 10rem);

    font-weight: 900;

    line-height: 1;

    margin-bottom: 10px;

    background:
        linear-gradient(
            135deg,
            var(--color-gold),
            var(--color-gold-soft)
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error-divider {

    width: 120px;
    height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--color-accent),
            var(--color-gold)
        );

    margin: 20px 0;
}

.error-title {

    font-size: 2rem;

    margin-bottom: 20px;
}

.error-text {

    color: rgba(255,255,255,.7);

    max-width: 500px;

    line-height: 1.8;
}

/* ==========================================
   BUTTONS
========================================== */

.error-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 35px;
}

.btn-home {

    padding: 14px 24px;

    border-radius: 12px;

    text-decoration: none;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-accent),
            var(--color-accent-dark)
        );

    box-shadow:
        0 0 25px rgba(173,20,20,.3);

    transition: .3s ease;
}

.btn-home:hover {

    transform: translateY(-2px);

    color: white;
}

.btn-contact {

    padding: 14px 24px;

    border-radius: 12px;

    text-decoration: none;

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

    color: var(--color-gold);

    transition: .3s ease;
}

.btn-contact:hover {

    background: rgba(244,187,0,.08);

    color: var(--color-gold-soft);
}

/* ==========================================
   TERMINAL
========================================== */

.error-terminal {

    background: #171717;

    border-radius: 18px;

    border: 1px solid rgba(244,187,0,.15);

    padding: 30px;

    box-shadow:
        0 0 50px rgba(173,20,20,.15);

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

.error-terminal pre {

    margin: 0;

    color: #d4d4d4;

    font-family:
        Consolas,
        Monaco,
        monospace;

    line-height: 1.8;
}

@keyframes terminalFloat {

    0%,100% {
        transform: translateY(0);
    }

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

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

@media (max-width: 992px) {

    .error-page .container {

        grid-template-columns: 1fr;

        text-align: center;
    }

    .error-divider {

        margin-left: auto;
        margin-right: auto;
    }

    .error-actions {

        justify-content: center;
    }
}