/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Nunito:wght@400;700&display=swap');

:root {
    --font-title: 'Great Vibes', cursive;
    --font-body: 'Nunito', sans-serif;
    --color-primary: #e11d48; /* Canlı Gül Rengi */
    --color-secondary: #fce7f3; /* Çok Açık Pembe */
    --color-accent: #a6c1ee; /* Açık Mavi */
    --color-text: #4a4a4a;
    --gradient-1: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%); /* Pembe-Mavi */
    --gradient-2: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); /* Mercan-Pembe */
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh; /* Mobil cihazlarda tam yüksekliği sağlamak için min-height */
    font-family: var(--font-body);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-text);
    box-sizing: border-box;
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
}

/* Arka Plan Renkleri */
.gradient-bg { background: var(--gradient-1); }
.gradient-bg-alt { background: var(--gradient-2); }

/* Hareketli Arka Plan Parçacıkları */
.particle-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
    background: transparent; overflow: hidden; pointer-events: none;
}
.particle {
    position: absolute; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%;
    animation: move-particle 25s linear infinite; bottom: -20px;
}
@keyframes move-particle {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-110vh) rotate(720deg); opacity: 0; }
}

/* Ana İçerik Kutusu */
.container {
    background-color: rgba(255, 255, 255, 0.92); padding: clamp(1.5rem, 4vw, 2.5rem); /* Padding'i biraz azalttık */
    border-radius: 25px; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15); backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3); max-width: 95%; /* Genişliği biraz artırdık */
    width: 700px; /* Maksimum genişlik */ margin: 1rem auto; box-sizing: border-box; position: relative; z-index: 1;
}

/* Görseller */
.main-image, .result-image, .final-image {
    max-width: clamp(150px, 30vw, 200px); /* Boyutları uyumlu hale getirdik */
    height: auto; border-radius: 50%; margin: 0 auto 1.5rem auto; display: block;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); border: 6px solid white;
}
.final-image { max-width: clamp(200px, 40vw, 280px); border-radius: 20px; }
.result-image { max-width: clamp(250px, 50vw, 350px); border-radius: 15px; }

/* Başlıklar */
.title {
    font-family: var(--font-title); font-size: clamp(2.5rem, 7vw, 4rem); font-weight: normal;
    color: var(--color-primary); margin-bottom: 0.8rem; line-height: 1.2;
}
.subtitle {
    font-size: clamp(0.9rem, 2.2vw, 1.1rem); line-height: 1.6; margin-bottom: 1.8rem; color: #555;
}

/* Butonlar */
.button {
    display: inline-block; background: linear-gradient(45deg, var(--color-primary), #ff758c); color: white;
    padding: clamp(12px, 2.5vw, 16px) clamp(25px, 5vw, 35px); /* Dinamik padding */
    border-radius: 50px; text-decoration: none; font-weight: bold; font-size: clamp(0.9rem, 2vw, 1.1rem);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 15px rgba(225, 29, 72, 0.25);
    border: none; cursor: pointer; margin: 0.5rem;
}
.button:hover {
    transform: translateY(-5px) scale(1.05); box-shadow: 0 8px 25px rgba(225, 29, 72, 0.35);
}

/* Form Elemanları */
.question-container { margin-bottom: 1.3rem; text-align: left; }
.question-container label { display: block; margin-bottom: 0.6rem; font-weight: bold; color: #555; font-size: clamp(0.9rem, 2vw, 1rem); }
.input-field {
    width: 100%; padding: clamp(10px, 2vw, 15px); border-radius: 12px; border: 1px solid #ddd;
    font-size: clamp(0.9rem, 2vw, 1rem); box-sizing: border-box; transition: all 0.2s ease;
}
.input-field:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 8px rgba(225, 29, 72, 0.15); }

/* Hata Mesajı */
.error-text { color: var(--color-primary); margin-top: 0.8rem; font-weight: bold; min-height: 1.2em; transition: opacity 0.3s; font-size: 0.9rem; }
.info-text { margin-top: 1rem; color: #555; font-weight: bold; min-height: 1.2em; font-size: 0.9rem; }


/* Sonuç Kutuları */
.result-box {
    background-color: var(--color-secondary); border: 2px dashed var(--color-primary); padding: 0.8rem 1.2rem;
    border-radius: 15px; font-size: clamp(1.3rem, 4vw, 2rem); font-weight: bold; letter-spacing: 0.3em; /* Aralığı biraz azalttık */
    color: var(--color-primary); margin: 1.5rem auto; text-align: center; display: inline-block;
    padding-left: calc(0.5em + 5px); /* Harf aralığı için düzeltme */
}
.next-step-box { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid #eee; }
.next-step-box p { margin-bottom: 0.8rem; font-size: clamp(0.9rem, 2vw, 1rem); }

/* Şarkı Sözü & Spotify */
.lyrics-box { font-style: italic; font-size: 1.1rem; margin-bottom: 1rem; padding: 1.2rem; background-color: var(--color-secondary); border-left: 4px solid var(--color-primary); border-radius: 10px; text-align: center; }
.spotify-button { background: #1DB954; padding-left: 25px; padding-right: 25px; display: inline-flex; align-items: center; }
.spotify-button:hover { background: #1aa34a; box-shadow: 0 8px 25px rgba(29, 185, 84, 0.4); }
.spotify-icon { width: 1.2em; height: 1.2em; vertical-align: middle; margin-right: 0.5em; }

/* Emoji Stilleri */
.emoji-container { margin-bottom: 1.5rem; }
.emoji { width: clamp(30px, 6vw, 40px); height: clamp(30px, 6vw, 40px); margin: 0 8px; cursor: pointer; transition: transform 0.2s ease; display: inline-block; }
.emoji:hover { transform: scale(1.3); }
.love-note {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); background: white; padding: 20px 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 100; opacity: 0; transition: all 0.3s ease-out; max-width: 80%; font-size: clamp(1rem, 3vw, 1.2rem); color: var(--color-primary); border-left: 5px solid var(--color-primary);
}
.love-note.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* Yapboz Stilleri - 9 Parça (3x3) */
.puzzle-container { max-width: 95%; width: 500px; }
#puzzle-wrapper { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
#puzzle-board {
    width: 306px; height: 306px; border: 3px solid var(--color-primary); margin: 1rem auto; position: relative;
    background-color: rgba(255, 255, 255, 0.5); overflow: hidden; border-radius: 5px;
}
#puzzle-pieces {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 1rem;
    width: 330px; min-height: 100px; margin-left: auto; margin-right: auto;
    background-color: rgba(255, 255, 255, 0.3); padding: 10px; border-radius: 10px;
}
.puzzle-piece {
    width: 100px; height: 100px; background-size: 300px 300px; border: 1px solid #ccc; cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease; user-select: none; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 3px; background-color: #eee;
}
.puzzle-piece.dragging { opacity: 0.7; cursor: grabbing; transform: scale(1.1); box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 100; }
.drop-zone {
    width: 100px; height: 100px; border: 1px dashed #aaa; position: absolute; box-sizing: border-box;
    background-color: rgba(255,255,255,0.1); transition: background-color 0.2s;
}
.drop-zone.hover { background-color: rgba(225, 29, 72, 0.2); border: 1px dashed var(--color-primary); }
.puzzle-piece.placed { cursor: default; box-shadow: none; border: 1px solid transparent; }

/* Fotoğraf Yükleme */
.file-label { display: inline-block; background: linear-gradient(45deg, var(--color-accent), #c2e9fb); color: #555; }
.file-label:hover { background: linear-gradient(45deg, #9cbbed, #b0dff0); box-shadow: 0 8px 25px rgba(166, 193, 238, 0.4); }
.hidden-input { display: none; } /* Dosya inputunu gizle */

/* Teklif Anı Stilleri */
.proposal-container { animation: fadeIn 2s ease-in; margin-top: 1rem; }
.proposal-title { font-size: clamp(2rem, 7vw, 3rem); letter-spacing: 0.1em; color: #333; font-family: var(--font-body); font-weight: bold; margin-bottom: 0.5rem; }
.proposal-subtitle { font-size: clamp(1.2rem, 4vw, 1.8rem); color: #555; margin-top: 0.5rem; font-family: var(--font-title); }
.proposal-video { max-width: 100%; max-height: 200px; border-radius: 10px; margin-top: 1rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Final Sayfası Stilleri */
#confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.final-title, .final-subtitle, .final-image { position: relative; z-index: 20; }
.final-title { font-size: clamp(3rem, 10vw, 5rem); color: var(--color-primary); animation: popIn 1s ease-out; }
@keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.final-subtitle { font-family: var(--font-title); font-size: clamp(2rem, 5vw, 2.5rem); }

/* Gizleme & Animasyonlar */
.hidden { opacity: 0; pointer-events: none; display: none !important; /* !important ekledik */ }
.animate-fade-in { animation: fadeIn 1.5s ease-out both; }
.animate-fade-in-delay { animation: fadeIn 1.5s 0.5s ease-out both; }
.animate-fade-in-delay-more { animation: fadeIn 1.5s 1s ease-out both; }
.animate-pop-in { animation: popIn 1s 0.5s ease-out both; }
.animate-pop-in-delay { animation: popIn 1s 1s ease-out both; }

/* Mobil Yatay İyileştirmeler */
@media (max-width: 900px) and (orientation: landscape) {
    .container { padding: 1rem 1.5rem; width: 85%; max-height: 95vh; overflow-y: auto; }
    .title { font-size: 2.2rem; }
    .subtitle { font-size: 0.95rem; margin-bottom: 1.2rem; }
    .button { padding: 10px 22px; font-size: 0.9rem; }
    .input-field { padding: 10px; font-size: 0.9rem; }
    .result-box { font-size: 1.5rem; }
    .proposal-title { font-size: 1.8rem; }
    .proposal-subtitle { font-size: 1.3rem; }
    .final-title { font-size: 2.8rem; }
    .final-subtitle { font-size: 1.8rem; }
    #puzzle-board { width: 246px; height: 246px; border-width: 2px;} /* 80*3 + 2*3 */
    #puzzle-pieces { width: 270px; gap: 6px; padding: 8px;}
    .puzzle-piece { width: 80px; height: 80px; background-size: 240px 240px; }
    .drop-zone { width: 80px; height: 80px; }
    .main-image, .result-image, .final-image { max-width: 120px; }
    .final-image { max-width: 180px; }
}