/* =====================================
   1. GLOBAL STYLE
===================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    color: #75465a;

    background: linear-gradient(
        135deg,
        #f8bfd3 0%,
        #ffe9ad 52%,
        #f7c5d7 100%
    );

    overflow-x: hidden;
}


/* =====================================
   2. CONTAINER DAN HALAMAN
===================================== */

.container {
    min-height: 100vh;

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

    padding: 24px 16px;
}

.page {
    display: none;

    width: 100%;
    max-width: 520px;

    text-align: center;

    animation: fadeIn 0.7s ease;
}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =====================================
   3. TYPOGRAPHY
===================================== */

h1 {
    color: #a64f73;

    font-size: 32px;
    font-weight: 700;

    line-height: 1.4;

    margin-bottom: 15px;
}

h2 {
    color: #a64f73;

    font-size: 22px;
    font-weight: 600;

    margin-bottom: 12px;
}

p {
    font-size: 13px;
    font-weight: 400;

    line-height: 1.9;
}


/* =====================================
   4. CARD DAN PASSWORD
===================================== */

.card {
    background: rgba(255, 255, 255, 0.68);

    padding: 35px 28px;

    border-radius: 25px;

    box-shadow:
        0 12px 36px rgba(135, 70, 95, 0.12);

    backdrop-filter: blur(8px);
}

input {
    width: 100%;

    margin-top: 20px;

    padding: 14px;

    border: 1px solid #eab2c6;
    border-radius: 12px;

    outline: none;

    background: white;

    color: #75465a;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;

    text-align: center;

    letter-spacing: 5px;
}

input:focus {
    border-color: #d77d9f;

    box-shadow:
        0 0 0 3px rgba(215, 125, 159, 0.12);
}

.error {
    min-height: 20px;

    margin-top: 8px;

    color: #bd456b;

    font-size: 12px;
}


/* =====================================
   5. BUTTON
===================================== */

button {
    border: none;

    border-radius: 30px;

    padding: 12px 30px;

    margin-top: 20px;

    background: linear-gradient(
        90deg,
        #e88eae,
        #e8bd68
    );

    color: white;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}

button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 6px 16px rgba(150, 80, 110, 0.18);
}

button:active {
    transform: scale(0.97);
}


/* =====================================
   6. HALAMAN WELCOME
===================================== */

.welcome {
    text-align: center;
}

.welcome h1 {
    font-size: 34px;
}

.welcome p {
    max-width: 390px;

    margin: auto;
}


/* =====================================
   7. AREA AMPLOP
===================================== */

.envelope-area {
    position: relative;

    width: 300px;
    height: 280px;

    margin: 52px auto 0;

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

    overflow: visible;
}


/* Bentuk utama amplop */

.envelope {
    position: relative;

    width: 260px;
    height: 170px;

    border-radius: 5px;

    background: #f3a9c1;

    box-shadow:
        0 12px 25px rgba(140, 70, 100, 0.18);

    cursor: pointer;

    z-index: 5;
}


/* Penutup atas amplop */

.envelope::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    border-left: 130px solid transparent;
    border-right: 130px solid transparent;

    border-top: 100px solid #ec88a9;

    transform-origin: top;

    transition: transform 0.6s ease;

    z-index: 10;
}


/* Animasi amplop terbuka */

.envelope.open::before {
    transform: rotateX(180deg);

    z-index: 1;
}


/* Bagian depan amplop */

.envelope::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    border-left: 130px solid #e98cab;
    border-right: 130px solid #e98cab;

    border-top: 85px solid transparent;

    z-index: 8;
}


/* =====================================
   8. TIGA LEMBAR KERTAS
===================================== */

.paper {
    position: absolute;

    top: 10px;
    left: 50%;

    width: 215px;
    height: 145px;

    padding: 10px;

    border-radius: 7px;

    background: #fffaf2;

    color: #a64f73;

    box-shadow:
        0 5px 15px rgba(100, 50, 70, 0.12);

    display: flex;

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

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: transform 0.7s ease;
}


/* Urutan tumpukan kertas */

#paper1 {
    z-index: 3;
}

#paper2 {
    z-index: 2;
}

#paper3 {
    z-index: 1;
}


/* Tulisan pada kertas */

.paper-title {
    position: absolute;

    top: 48%;
    left: 0;

    width: 100%;

    text-align: center;

    pointer-events: none;
}


/* =====================================
   9. ANIMASI TIGA KERTAS KELUAR
===================================== */

/* Kertas pertama */

.envelope.open #paper1 {
    transform:
        translate(-50%, -105px)
        rotate(-4deg);

    z-index: 9;
}


/* Kertas kedua */

.envelope.open #paper2 {
    transform:
        translate(calc(-50% + 12px), -140px)
        rotate(3deg);

    z-index: 8;
}


/* Kertas ketiga */

.envelope.open #paper3 {
    transform:
        translate(calc(-50% - 12px), -175px)
        rotate(-3deg);

    z-index: 7;
}


/* Bagian depan amplop tidak menutupi kertas */

.envelope.open::after {
    z-index: 4;
}


/* =====================================
   10. SURAT KETIKA DIBUKA
===================================== */

.paper.opened {
    position: fixed;

    top: 50%;
    left: 50%;

    width: min(90%, 420px);

    height: 75vh;
    max-height: 650px;

    padding: 28px 24px;

    display: block;

    overflow-y: auto;

    transform:
        translate(-50%, -50%) !important;

    z-index: 50 !important;

    cursor: pointer;

    background: #fffaf2;

    animation: paperOpen 0.4s ease;
}


/* Animasi surat terbuka */

@keyframes paperOpen {

    from {
        opacity: 0;

        transform:
            translate(-50%, -45%)
            scale(0.9);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =====================================
   11. ISI SURAT
===================================== */

.paper-content {
    display: none;

    text-align: left;

    font-weight: 400;
}

.paper.opened .paper-content {
    display: block;
}

.paper.opened .paper-title {
    display: none;
}

.paper-content h2 {
    text-align: center;

    margin-bottom: 20px;

    font-size: 20px;

    color: #b85f83;
}

.paper-content p {
    margin-bottom: 14px;

    line-height: 2;

    font-size: 13px;
}


/* Penutup surat */

.signature {
    text-align: right;

    margin-top: 22px;

    font-weight: 600;
}

.close-hint {
    text-align: center;

    color: #a64f73;

    font-size: 11px !important;

    margin-top: 20px;
}


/* =====================================
   12. PETUNJUK AMPLOP
===================================== */

.hint {
    margin-top: 24px;

    font-size: 12px;

    color: #80566a;
}


/* =====================================
   13. TOMBOL NEXT
===================================== */

#nextButton {
    margin-top: 20px;
}

#nextButton[hidden] {
    display: none;
}


/* =====================================
   14. HALAMAN KESAN DAN PESAN
===================================== */

.message-card h2 {
    color: #a64f73;

    margin-bottom: 20px;
}

.message-card p {
    text-align: left;

    margin-bottom: 17px;
}

.message-card strong {
    color: #a64f73;

    font-weight: 600;
}

.message-card .closing {
    text-align: center;

    font-weight: 600;

    margin-top: 22px;
}


/* =====================================
   15. TOMBOL MUSIK
===================================== */

.music-btn {
    position: fixed;

    right: 16px;
    bottom: 16px;

    z-index: 100;

    margin: 0;

    padding: 10px 17px;

    font-size: 11px;
}


/* =====================================
   16. RESPONSIVE MOBILE
===================================== */

@media (max-width: 480px) {

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 20px;
    }

    .card {
        padding: 30px 21px;
    }

    .envelope {
        width: 240px;
    }

    .envelope::before {
        border-left-width: 120px;
        border-right-width: 120px;
    }

    .envelope::after {
        border-left-width: 120px;
        border-right-width: 120px;
    }

    .paper.opened {
        width: 90%;

        height: 75vh;

        padding: 24px 19px;
    }

    .paper-content p {
        font-size: 12px;
    }

}


/* =====================================
   17. RESPONSIVE LAPTOP
===================================== */

@media (min-width: 768px) {

    .container {
        padding: 40px;
    }

    .page {
        max-width: 550px;
    }

}