@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');

/* === Animasi Global === */
@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes card-flip-in {
    from {
        transform: perspective(1000px) rotateY(-90deg) scale(0.8);
        opacity: 0;
    }
    to {
        transform: perspective(1000px) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes text-glow {
    0%, 100% { text-shadow: 0 0 10px #fff, 0 0 20px #ff7a7a, 0 0 30px #ff4d4d; }
    50% { text-shadow: 0 0 20px #fff, 0 0 30px #ff7a7a, 0 0 40px #ff4d4d; }
}

@keyframes confetti-fall {
    0% { transform: translateY(-100vh) rotateZ(0deg); }
    100% { transform: translateY(100vh) rotateZ(720deg); }
}

/* === Gaya Dasar === */
body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
    color: #333;
    margin: 0;
    padding: 20px;
    box-sizing: border-box; /* Tambahkan ini untuk kalkulasi padding yang benar */
    overflow-x: hidden;
}

/* === Gaya Kartu (Generator & Ucapan) === */
.card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 500px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 10;
}

.ucapan-card {
    animation: card-flip-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

h1 {
    font-family: 'Playfair Display', serif;
    color: #b74b4b;
    margin-bottom: 10px;
    font-size: 2.5rem;
}

p { color: #555; margin-bottom: 25px; line-height: 1.6; }

/* === Gaya Form Generator === */
input[type="text"], input[type="url"], textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 20px;
    box-sizing: border-box; 
    transition: all 0.3s ease;
}
textarea { resize: vertical; min-height: 80px; }
input[type="text"]:focus, input[type="url"]:focus, textarea:focus {
    outline: none;
    border-color: #e73c7e;
    box-shadow: 0 0 10px rgba(231, 60, 126, 0.3);
}
button {
    background-color: #b74b4b;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}
button:hover:not(:disabled) {
    background-color: #a13a3a;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
button:disabled { background-color: #ccc; cursor: not-allowed; }
input[type="file"] { display: none; }
.file-upload-label {
    display: block;
    width: 100%;
    background-color: #f0f0f0;
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.file-upload-label:hover {
    background-color: #e9e9e9;
    border-color: #e73c7e;
}
.file-upload-label span { font-weight: 500; color: #555; }
#fileList p { margin: 5px 0; font-size: 0.9rem; color: #333; }
#hasil { margin-top: 25px; border-top: 1px solid #eee; padding-top: 20px; }
.link-box { display: flex; margin-bottom: 10px; }
#hasilLink { flex-grow: 1; margin-bottom: 0; background-color: #f4f4f4; }
#copyBtn { width: auto; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px; }
.hidden { display: none; }
#loading { margin-top: 15px; color: #e73c7e; font-weight: 500; }

/* === Gaya Kartu Ucapan Spesifik === */
.ucapan-title { font-size: 2rem; margin-bottom: 0; }
.nama-penerima {
    font-family: 'Playfair Display', serif;
    color: #b74b4b;
    font-size: 3.5rem;
    margin-top: 0;
    word-break: break-word;
    animation: text-glow 2s ease-in-out infinite;
}
#mediaContainer { width: 100%; margin-bottom: 25px; display: grid; gap: 10px; }
.media-item {
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 10px;
    background-color: #f0f0f0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
#mediaContainer iframe.media-item { aspect-ratio: 16 / 9; height: auto; }

/* === Animasi Confetti === */
.confetti-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
.confetti { position: absolute; width: 10px; height: 10px; background-color: #f00; top: -50px; opacity: 0.8; animation: confetti-fall 5s linear infinite; }
.confetti:nth-child(2) { background-color: #0f0; left: 10%; animation-delay: -0.5s; animation-duration: 6s; }
.confetti:nth-child(3) { background-color: #00f; left: 20%; animation-delay: -1s; animation-duration: 4s; }
.confetti:nth-child(4) { background-color: #ff0; left: 30%; animation-delay: -1.5s; animation-duration: 7s; }
.confetti:nth-child(5) { background-color: #f0f; left: 40%; animation-delay: -2s; animation-duration: 5.5s; }
.confetti:nth-child(6) { background-color: #0ff; left: 50%; animation-delay: -2.5s; animation-duration: 6.5s; }
.confetti:nth-child(7) { background-color: #f90; left: 60%; animation-delay: -3s; animation-duration: 5s; }
.confetti:nth-child(8) { background-color: #90f; left: 70%; animation-delay: -3.5s; animation-duration: 4.5s; }
.confetti:nth-child(9) { background-color: #09f; left: 80%; animation-delay: -4s; animation-duration: 8s; }
.confetti:nth-child(10) { background-color: #f09; left: 90%; animation-delay: -4.5s; }

/* === FOOTER BARU === */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    text-align: center;
    font-size: 1.4rem;
    z-index: 20;
}

/* === DESAIN RESPONSIVE UNTUK HP (Layar di bawah 600px) === */
@media (max-width: 600px) {
    body {
        padding: 10px; /* Kurangi padding di layar kecil */
        align-items: flex-start; /* Mulai dari atas */
        padding-top: 5vh;
    }

    .card {
        padding: 20px 25px; /* Kurangi padding kartu */
        margin-bottom: 60px; /* Beri ruang untuk footer */
    }

    h1 {
        font-size: 2rem; /* Kecilkan ukuran judul */
    }

    .ucapan-title {
        font-size: 1.5rem;
    }

    .nama-penerima {
        font-size: 2.5rem; /* Kecilkan ukuran nama */
    }

    p {
        font-size: 1.4rem; /* Sesuaikan ukuran font paragraf */
    }
}