* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; overflow-x: hidden; background: #fff0f5; }

/* AÇILIŞ SAHNESİ */
#intro { height: 100vh; background: radial-gradient(circle at center, #ffd6e7, #ffb6d9, #ff9acb); display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; overflow: hidden; text-align: center; }

.floating-hearts span { position: absolute; color: white; font-size: 22px; animation: floatUp 8s linear infinite; opacity: .7; }
@keyframes floatUp { from { transform: translateY(100vh) scale(0.5) } to { transform: translateY(-10vh) scale(1.4) } }

.circle-frame { width: 320px; height: 320px; border-radius: 50%; background: white; box-shadow: 0 30px 80px rgba(255, 105, 180, .5); display: flex; align-items: center; justify-content: center; flex-direction: column; animation: popIn 2s ease forwards; border: 10px solid #ffd1dc; }
@keyframes popIn { from { transform: scale(.3); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.names { font-family: 'Great Vibes'; font-size: 56px; color: #e75480; }
.heart { font-size: 40px; animation: pulse 1.5s infinite; color: #ff4d88; }
@keyframes pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.2) } }

.envelope-btn { width: 220px; height: 140px; position: relative; margin-top: 40px; cursor: pointer; perspective: 800px; }
.env-body { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, #ff9acb, #ff6fa8); border-radius: 12px; box-shadow: 0 20px 40px rgba(255, 105, 180, .5); }
.env-flap { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, #ff7eb3, #ff4f93); clip-path: polygon(0 0, 50% 60%, 100% 0); transform-origin: top; transition: transform 1s ease; border-radius: 12px; z-index: 2; }
.env-text { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 18px; z-index: 3; }

/* DAVETİYE İÇERİK */
#invite { display: none; padding: 40px 20px; background: #fff0f5; animation: fadeIn 2s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }

.section { max-width: 750px; margin: 40px auto; background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 40px rgba(255, 105, 180, .2); }
.hero { text-align: center; padding: 30px 20px 40px; }
.hero h1 { font-family: 'Great Vibes'; font-size: 70px; color: #e75480; }
.photo-frame { text-align: center; margin: 40px 0; }
.photo-frame img { width: 85%; border-radius: 30px; box-shadow: 0 30px 80px rgba(255, 105, 180, .3); }
.info-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin: 50px 0; }
.card { background: white; padding: 30px; width: 260px; border-radius: 20px; text-align: center; box-shadow: 0 10px 40px rgba(255, 105, 180, .2); }
.rsvp, .memory { max-width: 700px; background: white; padding: 35px; border-radius: 25px; box-shadow: 0 10px 40px rgba(255, 105, 180, .2); }
input, select { width: 100%; padding: 14px; margin-bottom: 15px; border-radius: 10px; border: 1px solid #ffd1dc; }
button { padding: 14px; width: 100%; border: none; border-radius: 10px; background: #ff69b4; color: white; font-size: 18px; cursor: pointer; }
.flash-screen { position: fixed; inset: 0; background: white; opacity: 0; z-index: 9999; pointer-events: none; }
.petal { position: fixed; top: -20px; font-size: 24px; animation: fall 3s linear forwards; z-index: 9999; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }
.zoom-out { animation: zoomMagic 1.8s ease forwards; }
@keyframes zoomMagic { 0% { transform: scale(1) } 100% { transform: scale(8); opacity: 0 } }
.card {
    transition: transform 0.3s;
}
.card:hover {
    transform: translateY(-10px);
}
.hero h1 span {
    font-size: 40px;
    display: inline-block;
    animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}
/* Inputları daha zarif yapalım */
input, select {
    border: 2px solid #ffd1dc !important;
    background: #fffafa !important;
    font-size: 16px !important;
}
/* Kartların üzerine hafif bir hover efekti */
.glass-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(231, 84, 128, 0.25) !important;
}

/* Harita ve Kartlar için temiz kenarlıklar */
iframe {
    filter: grayscale(0.2);
    transition: filter 0.3s;
}
iframe:hover {
    filter: grayscale(0);
}
.choice-card { transition: all 0.3s; }
.choice-card:hover { transform: scale(1.02); }
#submit-btn:disabled { cursor: not-allowed; background-color: #ccc !important; }
#custom-alert {
    background: rgba(255, 255, 255, 0.2); /* Arka planı hafif buzlu cam yap */
}
/* Modal açıldığında hafif bir büyüme efekti için */
.animate__zoomIn {
    --animate-duration: 0.5s;
}

.preview-box {
    display: block;
    width: 100%;
    height: 160px; /* h-40 ile uyumlu */
    object-fit: cover;
    border-radius: 30px;
    border: 2px solid #e75480;
}
.tab-btn.active {
    background: white !important;
    color: #e75480 !important;
}
/* Görünürlüğü garanti altına alan sınıflar */
.show-element { display: block !important; }
.hide-element { display: none !important; }
/* Modal içindeki kapatma butonunu genel button kuralından kurtar */
/* Bu kod, o inatçı genişlik kuralını ezer */
.modal-close-btn {
    width: auto !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 5px !important;
    margin: 0 !important;
}
/* Kapat butonunu her türlü baskıdan kurtar */
.absolute {
    position: absolute !important;
}
/* Ses oynatıcısının düzgün görünmesini sağlar */
#audio-preview {
    display: none; /* Başlangıçta gizli */
    width: 100% !important;
    height: 45px !important;
    margin-top: 15px !important;
    background: #fffafa !important;
    border-radius: 20px !important;
}