:root {
    --bg-color: #0f0c29; 
    --glass-bg: rgba(25, 25, 45, 0.4);
    --glass-border: rgba(255, 255, 255, 0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: radial-gradient(circle at center, #1b1b3a 0%, #0f0c29 100%);
    font-family: 'Inter', sans-serif;
    color: #fff; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    overflow-y: auto; overflow-x: hidden; position: relative; -webkit-tap-highlight-color: transparent;
    padding-top: 5vh; padding-bottom: 5vh;
}
.background-blobs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; animation: drift 15s infinite alternate ease-in-out; }
.blob1 { width: 450px; height: 450px; background: #ff007a; top: -100px; left: -100px; }
.blob2 { width: 550px; height: 550px; background: #6b21a8; bottom: -150px; right: -100px; animation-delay: -5s; }
.blob3 { width: 400px; height: 400px; background: #ff758c; top: 30%; left: 40%; filter: blur(120px); opacity: 0.3; animation: drift2 20s infinite alternate ease-in-out; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 60px) scale(1.1); } }
@keyframes drift2 { 0% { transform: translate(0, 0) scale(1.2); } 100% { transform: translate(-100px, 80px) scale(0.8); } }

/* KILIT EKRANI */
#lock-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #0b0914; z-index: 9999; display: flex; justify-content: center; align-items: center;
    transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}
#lock-screen.unlocked { opacity: 0; pointer-events: none; transform: scale(1.1); }
.lock-box { padding: 40px 30px; text-align: center; max-width: 380px; width: 90%; }
.lock-title { font-size: 1.8rem; font-weight: 300; letter-spacing: 2px; color: #fff; margin-bottom: 20px; }
.lock-desc { font-size: 0.95rem; color: #ccc; margin-bottom: 35px; }
.pin-display { display: flex; justify-content: center; gap: 12px; margin-bottom: 35px; height: 16px; }
.dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); transition: all 0.2s; }
.dot.filled { background: #ff007f; border-color: #ff007f; box-shadow: 0 0 15px #ff007f; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; justify-items: center; }
.key { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; width: 70px; height: 70px; color: white; font-size: 2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; font-weight: 300;}
.key:active { background: rgba(255,255,255,0.2); transform: scale(0.9); }
.key:empty { border: none; background: transparent; cursor: default; }
.error-btn { color: #ff416c; font-weight: 400; font-size: 1.6rem; }
.hidden-error { color: #ff416c; opacity: 0; margin-top: 25px; font-size: 1rem; transition: opacity 0.3s; }
.hidden-error.show { opacity: 1; }
.vibrate { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-3px, 0, 0); } 20%, 80% { transform: translate3d(5px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-7px, 0, 0); } 40%, 60% { transform: translate3d(7px, 0, 0); } }

/* ASK SAYACI */
.love-counter {
    background: rgba(25, 25, 45, 0.4); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px;
    padding: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 100%; max-width: 550px;
    z-index: 20; position: relative; margin-top: 0; margin-bottom: 20px;
    animation: popIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.counter-title { font-family: 'Dancing Script', cursive; font-size: 2.2rem; background: linear-gradient(135deg, #ff758c, #ff007f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 15px; }
.counter-digits { display: flex; justify-content: center; gap: 10px; }
.time-box { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.05); padding: 12px; border-radius: 12px; min-width: 65px; border: 1px solid rgba(255,255,255,0.05); }
.time-box span { font-size: 2rem; font-weight: 800; font-family: 'Inter', monospace; color: white; text-shadow: 0 0 15px rgba(255, 255, 255, 0.4); }
.time-box small { font-size: 0.75rem; color: #aaa; text-transform: uppercase; margin-top: 6px; letter-spacing: 1px; font-weight: 600; }

/* Voice Button Animation */
.voice-playing { animation: voicePulse 1.5s infinite alternate !important; background: linear-gradient(135deg, #38ef7d, #11998e) !important; color: white !important; }
@keyframes voicePulse { from { box-shadow: 0 0 15px rgba(56,239,125,0.4); } to { box-shadow: 0 0 35px rgba(17,153,142,0.8); transform: scale(1.02); } }

/* DİĞER STİLLER */
.side-note { position: fixed; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 18px 25px; border-radius: 16px; font-size: 0.95rem; color: #ffd1dc; box-shadow: 0 8px 32px rgba(0,0,0,0.3); opacity: 0; transition: all 1.2s ease; z-index: 5; max-width: 220px; text-align: center; pointer-events: none; }
.left-note { left: -300px; } .right-note { right: -300px; }
.show-note.left-note { left: 8%; opacity: 1; } .show-note.right-note { right: 8%; opacity: 1; }
.note-1 { top: 15%; transform: rotate(-6deg); } .note-2 { top: 65%; transform: rotate(7deg); } .note-3 { top: 22%; transform: rotate(5deg); } .note-4 { top: 72%; transform: rotate(-8deg); }
.note-1.show-note { transform: rotate(-4deg); } .note-2.show-note { transform: rotate(5deg); } .note-3.show-note { transform: rotate(4deg); } .note-4.show-note { transform: rotate(-5deg); }

.dynamic-note { position: fixed; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.25); padding: 12px 22px; border-radius: 14px; font-size: 0.95rem; color: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.4); z-index: 200; pointer-events: none; animation: floatUp 4s ease-out forwards; text-align: center; }
@keyframes floatUp { 0% { transform: translateY(30px) scale(0.8); opacity: 0; } 10% { transform: translateY(0px) scale(1.1); opacity: 1; } 20% { transform: translateY(-10px) scale(1); opacity: 1; } 80% { transform: translateY(-70px) scale(1); opacity: 1; } 100% { transform: translateY(-90px) scale(0.9); opacity: 0; } }

.container { position: relative; z-index: 10; padding: 20px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.glass-card { background: var(--glass-bg); backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 28px; padding: 45px 40px; text-align: center; max-width: 550px; width: 100%; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5); transform: translateY(30px); opacity: 0; animation: fadeUp 1.2s ease-out forwards; flex-shrink: 0; }
@keyframes fadeUp { to { transform: translateY(0); opacity: 1; } }

.title { font-size: 2rem; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: #e0e0e0; }
.name { font-family: 'Dancing Script', cursive; font-size: 5rem; background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 50%, #ff0f7b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 5px; display: inline-block; filter: drop-shadow(0 0 10px rgba(255, 117, 140, 0.3)); }
.heart { display: inline-block; -webkit-text-fill-color: #ff2a55; animation: beat 1s infinite alternate; }
.subtitle { font-size: 1.05rem; line-height: 1.5; color: #d1d5db; margin-bottom: 25px; font-weight: 300; }
.hidden { display: none; opacity: 0; transition: opacity 1.5s ease-in-out; }
.message-text { font-size: 1.1rem; line-height: 1.7; color: #fce3ec; font-style: italic; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; margin-bottom: 30px; font-weight: 300; }

.hidden-item { display: none !important; }
.glow-btn { background: linear-gradient(135deg, #ff007f, #b21f66); border: 1px solid rgba(255,255,255,0.2); padding: 15px 35px; border-radius: 50px; color: white; font-size: 1.1rem; font-weight: 600; cursor: pointer; box-shadow: 0 0 20px rgba(255, 0, 127, 0.4); transition: all 0.3s ease; position: relative; outline: none; }
.glow-btn:hover, .glow-btn:active { box-shadow: 0 0 30px rgba(255, 0, 127, 0.7); transform: translateY(-2px); }
.active-btn { background: linear-gradient(135deg, #ff2a55, #ff007f); animation: pulseGlow 2s infinite alternate; }
@keyframes pulseGlow { from { box-shadow: 0 0 20px rgba(255, 0, 127, 0.5); } to { box-shadow: 0 0 40px rgba(255, 42, 85, 0.8); } }
.small-btn { font-size: 0.95rem !important; padding: 10px 25px !important; background: linear-gradient(135deg, #7928ca, #ff007f) !important; margin-top: 20px; animation: popIn 0.8s forwards; }
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.hidden-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); backdrop-filter: blur(15px); z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.hidden-modal.show { opacity: 1; pointer-events: auto; }
.gallery-content { width: 95%; max-width: 550px; max-height: 85vh; overflow-y: auto; overflow-x: hidden; position: relative; padding: 25px 20px 40px 20px; }
.gallery-content::-webkit-scrollbar { width: 6px; }
.gallery-content::-webkit-scrollbar-thumb { background: #ff007f; border-radius: 10px; }
#close-gallery { position: absolute; top: 15px; right: 20px; background: transparent; border: none; color: white; font-size: 1.8rem; cursor: pointer; z-index: 100; transition: transform 0.3s; }
#close-gallery:hover { transform: rotate(90deg) scale(1.2); color: #ff007f; }

.polaroid-container { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 15px; }
.polaroid { background: #fff; padding: 12px 12px 20px 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.4); transform: rotate(calc(var(--rot) * 1deg)); width: 90%; max-width: 350px; border-radius: 4px; transition: transform 0.4s; }
.polaroid:hover { transform: rotate(0deg) scale(1.05); z-index: 10; }
.polaroid img { width: 100%; height: auto; object-fit: contain; max-height: 400px; }
.polaroid .caption { color: #333; font-family: 'Dancing Script'; font-size: 1.7rem; text-align: center; margin-top: 12px; font-weight: bold; }

#particles-js { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.falling-heart { position: fixed; top: -10vh; font-size: 26px; animation: fall linear forwards; z-index: 100; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.6)); }
@keyframes fall { 0% { transform: translateY(0vh) rotate(0deg) scale(var(--start-scale)); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(110vh) rotate(360deg) scale(var(--end-scale)); opacity: 0; } }

@media (max-width: 768px) {
    body { padding: 0 5px; overflow-y: auto; overflow-x: hidden; align-items: flex-start; padding-top: 5vh; }
    .glass-card { padding: 35px 20px; }
    .title { font-size: 1.6rem; }
    .name { font-size: 4rem; }
    .side-note { font-size: 0.75rem; padding: 10px 14px; max-width: 130px; z-index: 50; }
    .note-1 { top: 15%; left: 5px !important; }
    .note-2 { top: 45%; left: 5px !important; }
    .note-3 { top: 18%; right: 5px !important; }
    .note-4 { top: 50%; right: 5px !important; }
    .gallery-content { padding: 20px 15px 40px 15px; }
    .counter-title { font-size: 1.6rem; }
    .time-box span { font-size: 1.5rem; }
    .time-box { padding: 8px; min-width: 55px; }
}
@media (max-width: 380px) {
    .name { font-size: 3.5rem; }
    .time-box { min-width: 45px; }
    .time-box span { font-size: 1.3rem; }
    .key { width: 55px; height: 55px; font-size: 1.5rem; }
}

/* ZARFLAR (OPEN WHEN LETTERS) */
.envelopes-title { font-family: 'Dancing Script', cursive; font-size: 2.2rem; color: #ff7eb3; margin-bottom: 5px; }
.envelopes-desc { font-size: 0.95rem; color: #ccc; margin-bottom: 20px; font-weight: 300; }
.envelopes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.env-btn { 
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 117, 140, 0.3); border-radius: 12px; 
    padding: 15px 10px; color: #fff; font-size: 0.85rem; cursor: pointer; transition: all 0.3s;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.02); line-height: 1.4; font-family: 'Inter', sans-serif;
}
.env-btn:hover { background: rgba(255, 117, 140, 0.2); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255,117,140,0.3);}
.close-modal-btn { position: absolute; top: 15px; right: 20px; background: transparent; border: none; color: white; font-size: 1.5rem; cursor: pointer; transition: transform 0.3s; z-index: 100;}
.close-modal-btn:hover { transform: rotate(90deg) scale(1.2); color: #ff007f; }
.env-content { padding: 40px 25px; text-align: center; }
.env-text-style { font-family: 'Dancing Script', cursive; font-size: 2rem; line-height: 1.4; color: #fff; text-shadow: 0 0 15px rgba(255,0,127,0.8); }
@media (max-width: 480px) { .envelopes-grid { grid-template-columns: 1fr; } }

/* PASTA CSS */
.cake { position: relative; width: 200px; height: 120px; margin: 40px auto 20px auto; transition: transform 0.5s; cursor: pointer;}
.cake.explode { transform: scale(1.3); animation: fadeOutCake 1s forwards; pointer-events:none;}
@keyframes fadeOutCake { to { opacity: 0; transform: scale(2); filter: blur(10px); } }
.layer { position: absolute; display: block; width: 200px; height: 80px; border-radius: 50%; box-shadow: 0 2px 0px #e04050, 0 4px 0px #cf3040, 0 6px 0px #cf3040, 0 8px 0px #cf3040; }
.layer-bottom { top: 80px; background-color: #f5576c; z-index: 1;}
.layer-middle { top: 55px; background-color: #ff9a9e; z-index: 2; box-shadow: 0 2px 0px #e48286, 0 4px 0px #e48286, 0 6px 0px #e48286;}
.layer-top { top: 30px; background-color: #fca5f1; z-index: 3; box-shadow: inset 0 0 10px rgba(0,0,0,0.1); }
.candle { background-color: #fff; width: 10px; height: 40px; border-radius: 5px; top: 0px; left: 50%; margin-left: -5px; z-index: 5; position: absolute; }
.flame { position: absolute; background-color: orange; width: 12px; height: 20px; border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px; top: -22px; left: 50%; margin-left: -6px; z-index: 10; box-shadow: 0 0 15px rgba(255,165,0,0.8); transform-origin: 50% 90%; animation: flicker 0.5s ease-in-out alternate infinite; transition: opacity 0.3s;}
.candle.out .flame { opacity: 0; animation: none; }
@keyframes flicker { 0% { transform: skewX(3deg); } 100% { transform: skewX(-3deg); } }

/* Kalp Atışı Titreşim Butonu */
.heartbeat-active { animation: superPulse 0.4s infinite alternate !important; transform: scale(1.05); box-shadow: 0 0 35px #ff0844 !important; color: white;}
@keyframes superPulse { 0% { box-shadow: 0 0 15px #ff0844; } 100% { box-shadow: 0 0 45px #ff0844; } }