/* ===========================
   RESET
=========================== */

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

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

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

    background:#000;

    color:white;

}

/* ===========================
   COMMON SECTIONS
=========================== */

section{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

#intro{

    display:flex;

}

/* ===========================
   INTRO
=========================== */

#intro{

    background:

    radial-gradient(circle at center,
    #2d214d 0%,
    #15111f 45%,
    #000 100%);

}

/* ===========================
   STARS
=========================== */

#stars{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(white 1px,transparent 1px);

    background-size:65px 65px;

    opacity:.25;

    animation:starsMove 60s linear infinite;

}

@keyframes starsMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(80px);

    }

}

/* ===========================
   GOLD OVERLAY
=========================== */

.overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top,
    rgba(255,210,0,.15),
    transparent 60%),

    radial-gradient(circle at bottom,
    rgba(255,170,0,.08),
    transparent 70%);

}

/* ===========================
   INTRO CONTENT
=========================== */

.introContent{

    position:relative;

    z-index:2;

    width:90%;

    text-align:center;

}

.heart{

    font-size:65px;

    color:#ff8fb0;

    margin-bottom:30px;

    animation:heartBeat 2s infinite;

}

@keyframes heartBeat{

    50%{

        transform:scale(1.15);

    }

}

#line1{

    opacity:0;

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(90px,12vw,180px);

    color:#FFD54F;

    letter-spacing:8px;

    transition:2s;

    text-shadow:

    0 0 20px gold,

    0 0 60px orange;

}

#line2,
#line3{

    opacity:0;

    margin-top:20px;

    font-size:clamp(30px,3vw,55px);

    font-family:'Cormorant Garamond',serif;

    transition:2s;

}

#tapText{

    opacity:0;

    margin-top:90px;

    font-size:clamp(22px,2vw,30px);

    letter-spacing:3px;

    animation:pulse 2s infinite;

}

@keyframes pulse{

    50%{

        opacity:.3;

    }

}

/* ===========================
   QUIZ
=========================== */

#quiz{

    background:

    radial-gradient(circle,
    #24193d,
    #120d20,
    #000);

}

.quizCard{

    width:min(900px,90vw);

    padding:60px;

    border-radius:30px;

    text-align:center;

    backdrop-filter:blur(15px);

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    0 0 60px rgba(255,215,0,.15);

}

#questionNumber{

    color:#FFD54F;

    font-size:28px;

    margin-bottom:30px;

}

#question{

    font-family:'Cormorant Garamond',serif;

    font-size:55px;

    margin-bottom:60px;

}

#answers{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.answer{

    padding:22px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:30px;

    transition:.3s;

}

.answer:hover{

    transform:scale(1.03);

    background:#FFD54F;

    color:black;

}

/* Doğru */

.correct{

    background:#38d27a !important;

    color:white !important;

}

/* Yanlış */

.wrong{

    background:#ff4f6d !important;

}

/* Sallanma */

.shake{

    animation:shake .35s;

}

@keyframes shake{

0%{transform:translateX(0);}
25%{transform:translateX(-12px);}
50%{transform:translateX(12px);}
75%{transform:translateX(-12px);}
100%{transform:translateX(0);}

}

/* ===========================
   VIDEO
=========================== */

#videoSection{

    background:black;

}

#birthdayVideo{

    width:100vw;

    height:100vh;

    object-fit:cover;

}

/* ===========================
   GALLERY
=========================== */

#gallery{

    background:black;

}

.galleryContent{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

#galleryImage{

    max-width:90%;

    max-height:90%;

    border-radius:25px;

    box-shadow:

    0 0 50px rgba(255,255,255,.2);

}

/* ===========================
   LETTER
=========================== */

#letter{

    background:

    linear-gradient(#f8f2e8,#efe4d3);

    color:#3d2a1a;

}

.letterBox{

    width:min(900px,90vw);

    padding:60px;

    background:white;

    border-radius:25px;

    box-shadow:

    0 0 40px rgba(0,0,0,.25);

}

.letterBox h1{

    text-align:center;

    font-size:55px;

    margin-bottom:30px;

}

#letterText{

    font-size:26px;

    line-height:1.9;

    white-space:pre-wrap;

}

/* ===========================
   FINAL
=========================== */

#final{

    background:

    radial-gradient(circle,
    #2d214d,
    #120d20,
    black);

}

.finalContent{

    text-align:center;

}

.finalContent h1{

    font-size:80px;

    color:#FFD54F;

    margin-bottom:30px;

}

.finalContent h2{

    font-size:42px;

    margin-bottom:20px;

}

.finalContent p{

    font-size:28px;

}

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

@media(max-width:768px){

.quizCard{

padding:35px;

}

#question{

font-size:34px;

}

.answer{

font-size:22px;

padding:18px;

}

.finalContent h1{

font-size:46px;

}

.finalContent h2{

font-size:28px;

}

}