body {
    margin: 0;
    padding: 0;
    font-family: 'Orbitron', sans-serif;
    background-color: #0c001f;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background-image: radial-gradient(circle, #1a0033, #0c001f 70%);
}

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

.generator-box {
    background: rgba(18, 0, 41, 0.6);
    padding: 40px 50px;
    border-radius: 15px;
    border: 2px solid #6a0dad;
    box-shadow: 0 0 25px rgba(106, 13, 173, 0.7), inset 0 0 15px rgba(106, 13, 173, 0.5);
    backdrop-filter: blur(10px);
}

.title {
    font-size: 2.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
    color: #f0f0f0;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
}

.title span {
    color: #00e5ff;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00e5ff, 0 0 30px #00e5ff;
}

.subtitle {
    color: #c0c0c0;
    margin-bottom: 40px;
    font-size: 1.1em;
}

.input-wrapper {
    display: flex;
    gap: 15px;
}

#urlInput {
    flex-grow: 1;
    padding: 15px 20px;
    border-radius: 50px;
    border: 2px solid #00e5ff;
    background: transparent;
    color: #fff;
    font-size: 1em;
    outline: none;
    transition: all 0.3s ease;
}

#urlInput:focus {
    box-shadow: 0 0 15px #00e5ff, inset 0 0 10px #00e5ff;
}

/* Tombol Menyala */
.glow-button {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color: #00e5ff;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    letter-spacing: 4px;
    background: transparent;
    border: 2px solid #00e5ff;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
}

.glow-button:hover {
    background: #00e5ff;
    color: #050801;
    box-shadow: 0 0 5px #00e5ff, 0 0 25px #00e5ff, 0 0 50px #00e5ff, 0 0 100px #00e5ff;
}

.glow-button span {
    position: absolute;
    display: block;
}

/* Animasi garis pada tombol */
.glow-button span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #00e5ff); animation: btn-anim1 1s linear infinite; }
@keyframes btn-anim1 { 0% { left: -100%; } 50%,100% { left: 100%; } }

.glow-button span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #00e5ff); animation: btn-anim2 1s linear infinite; animation-delay: .25s; }
@keyframes btn-anim2 { 0% { top: -100%; } 50%,100% { top: 100%; } }

.glow-button span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #00e5ff); animation: btn-anim3 1s linear infinite; animation-delay: .5s; }
@keyframes btn-anim3 { 0% { right: -100%; } 50%,100% { right: 100%; } }

.glow-button span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #00e5ff); animation: btn-anim4 1s linear infinite; animation-delay: .75s; }
@keyframes btn-anim4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; } }

.result-box {
    margin-top: 40px;
    padding: 20px;
    min-height: 100px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px dashed #6a0dad;
}

.result-box img {
    max-width: 100%;
    background: white;
    padding: 10px;
    border-radius: 5px;
}

.result-box a {
    margin-top: 15px;
    color: #ff00ff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border: 1px solid #ff00ff;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.result-box a:hover {
    background: #ff00ff;
    color: #fff;
    box-shadow: 0 0 15px #ff00ff;
}

.error-message {
    color: #ff4d4d;
    margin-top: 15px;
    font-weight: bold;
}