<?php <?php 

session_start();session_start();



// --- Fonksiyonlar ---// --- Fonksiyonlar ---

function clean_input($data) {function clean_input($data) {

    return htmlspecialchars(strip_tags(trim($data)), ENT_QUOTES, 'UTF-8');    return htmlspecialchars(strip_tags(trim($data)), ENT_QUOTES, 'UTF-8');

}}



function get_notes() {function get_notes() {

    if (!file_exists('notlar.txt')) return [];    if (!file_exists('notlar.txt')) return [];

    $notes_content = file_get_contents('notlar.txt');    $notes_content = file_get_contents('notlar.txt');

    $notes_array = explode("\n", trim($notes_content));    $notes_array = explode("\n", trim($notes_content));

    return array_reverse(array_filter($notes_array));    return array_reverse(array_filter($notes_array));

}}



function get_memories() {function get_memories() {

    if (!file_exists('anilar.txt')) return [];    if (!file_exists('anilar.txt')) return [];

    $memories_content = file_get_contents('anilar.txt');    $memories_content = file_get_contents('anilar.txt');

    $memories_array = preg_split('/-{3,}/', $memories_content);    $memories_array = preg_split('/-{3,}/', $memories_content);

    return array_reverse(array_filter(array_map('trim', $memories_array)));    return array_reverse(array_filter(array_map('trim', $memories_array)));

}}



// --- Form İşlemleri ---// --- Form İşlemleri ---

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] == 'save_note') {if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] == 'save_note') {

    $note = clean_input($_POST['note']);    $note = clean_input($_POST['note']);

    $author = clean_input($_POST['author']);    $author = clean_input($_POST['author']);

        

    if (!empty($note) && !empty($author)) {    if (!empty($note) && !empty($author)) {

        $date = date('d.m.Y H:i');        $date = date('d.m.Y H:i');

        $emoji = ($author == 'Buğra') ? '💙' : '💖';        $emoji = ($author == 'Buğra') ? '💙' : '💖';

        $note_entry = "[$date] $emoji $author: $note\n";        $note_entry = "[$date] $emoji $author: $note\n";

        file_put_contents('notlar.txt', $note_entry, FILE_APPEND | LOCK_EX);        file_put_contents('notlar.txt', $note_entry, FILE_APPEND | LOCK_EX);

        header('Location: ' . $_SERVER['PHP_SELF'] . '?saved=1');        header('Location: ' . $_SERVER['PHP_SELF'] . '?saved=1');

        exit;        exit;

    }    }

}}



if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] == 'save_memory') {if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] == 'save_memory') {

    $title = clean_input($_POST['memory_title']);    $title = clean_input($_POST['memory_title']);

    $text = clean_input($_POST['memory_text']);    $text = clean_input($_POST['memory_text']);

        

    if (!empty($title) && !empty($text)) {    if (!empty($title) && !empty($text)) {

        $date = date('d.m.Y');        $date = date('d.m.Y');

        $memory_entry = "Tarih: $date\n=== $title ===\n$text\n\n---\n\n";        $memory_entry = "Tarih: $date\n=== $title ===\n$text\n\n---\n\n";

        file_put_contents('anilar.txt', $memory_entry, FILE_APPEND | LOCK_EX);        file_put_contents('anilar.txt', $memory_entry, FILE_APPEND | LOCK_EX);

        header('Location: ' . $_SERVER['PHP_SELF'] . '?saved=1');        header('Location: ' . $_SERVER['PHP_SELF'] . '?saved=1');

        exit;        exit;

    }    }

}}



$notes = get_notes();$notes = get_notes();

$memories = get_memories();$memories = get_memories();



// Günün aşk sözü// Günün aşk sözü

$love_quotes = [$love_quotes = [

    "Seninle her an özel, her gün bir yeni macera 💕",    "Seninle her an özel, her gün bir yeni macera 💕",

    "Gözlerinin içine baktığımda zamanın durduğunu hissediyorum ⏰",    "Gözlerinin içine baktığımda zamanın durduğunu hissediyorum ⏰",

    "Seninle olmak, hayatımın en güzel kararı 💖",    "Seninle olmak, hayatımın en güzel kararı 💖",

    "Her gülüşün kalbime dokunuyor 😊",    "Her gülüşün kalbime dokunuyor 😊",

    "Seninle paylaştığım her an benim için paha biçilmez 💎",    "Seninle paylaştığım her an benim için paha biçilmez 💎",

    "Seninle geçirdiğim her saniye bir ömür değerinde 🌟",    "Seninle geçirdiğim her saniye bir ömür değerinde 🌟",

    "Sen benim en güzel şiirimsin 📖",    "Sen benim en güzel şiirimsin 📖",

    "Gülüşün güneşim, bakışların yıldızlarım ✨",    "Gülüşün güneşim, bakışların yıldızlarım ✨"

    "Seninle geçen her gün bir harika 🌈",];

    "Kalbim sadece senin için atıyor 💓"$daily_quote = $love_quotes[array_rand($love_quotes)];

];?>

$daily_quote = $love_quotes[array_rand($love_quotes)];<!DOCTYPE html>

?><html lang="tr">

<!DOCTYPE html><head>

<html lang="tr">    <meta charset="UTF-8">

<head>    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta charset="UTF-8">    <title>💕 Damla & Buğra | Bizim Hikayemiz 💕</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="preconnect" href="https://fonts.googleapis.com">

    <title>💕 Damla & Buğra | Bizim Hikayemiz 💕</title>    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link rel="preconnect" href="https://fonts.googleapis.com">    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>    <style>

    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">        * {

    <style>            margin: 0;

        * {            padding: 0;

            margin: 0;            box-sizing: border-box;

            padding: 0;        }

            box-sizing: border-box;

        }        body {

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

        body {            background: linear-gradient(-45deg, #667eea, #764ba2, #b565d8, #8b5cf6, #a855f7, #c084fc, #e879f9, #f0abfc);

            font-family: 'Poppins', sans-serif;            background-size: 400% 400%;

            background: linear-gradient(-45deg, #667eea, #764ba2, #b565d8, #8b5cf6, #a855f7, #c084fc, #e879f9, #f0abfc);            animation: dreamyGradient 25s ease infinite;

            background-size: 400% 400%;            min-height: 100vh;

            animation: dreamyGradient 25s ease infinite;            overflow-x: hidden;

            min-height: 100vh;            position: relative;

            overflow-x: hidden;        }

            position: relative;

        }        @keyframes dreamyGradient {

            0% { background-position: 0% 50%; }

        @keyframes dreamyGradient {            20% { background-position: 100% 50%; }

            0% { background-position: 0% 50%; }            40% { background-position: 50% 100%; }

            20% { background-position: 100% 50%; }            60% { background-position: 100% 100%; }

            40% { background-position: 50% 100%; }            80% { background-position: 0% 100%; }

            60% { background-position: 100% 100%; }            100% { background-position: 0% 50%; }

            80% { background-position: 0% 100%; }        }

            100% { background-position: 0% 50%; }

        }        /* Magical Particles Background */

        .particles-bg {

        /* Magical Particles Background */            position: fixed;

        .particles-bg {            top: 0;

            position: fixed;            left: 0;

            top: 0;            width: 100%;

            left: 0;            height: 100%;

            width: 100%;            pointer-events: none;

            height: 100%;            z-index: 1;

            pointer-events: none;        }

            z-index: 1;

        }        .particle {

            position: absolute;

        .particle {            border-radius: 50%;

            position: absolute;            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);

            border-radius: 50%;            animation: floatParticle 15s infinite linear;

            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);        }

            animation: floatParticle 15s infinite linear;

        }        @keyframes floatParticle {

            0% {

        @keyframes floatParticle {                transform: translateY(100vh) translateX(0px) scale(0);

            0% {                opacity: 0;

                transform: translateY(100vh) translateX(0px) scale(0);            }

                opacity: 0;            10% {

            }                opacity: 1;

            10% {                transform: translateY(90vh) translateX(10px) scale(1);

                opacity: 1;            }

                transform: translateY(90vh) translateX(10px) scale(1);            90% {

            }                opacity: 1;

            90% {            }

                opacity: 1;            100% {

            }                transform: translateY(-10vh) translateX(-10px) scale(0);

            100% {                opacity: 0;

                transform: translateY(-10vh) translateX(-10px) scale(0);            }

                opacity: 0;        }

            }

        }        /* Floating Hearts Background */

        .hearts-bg {

        /* Floating Hearts Background */            position: fixed;

        .hearts-bg {            top: 0;

            position: fixed;            left: 0;

            top: 0;            width: 100%;

            left: 0;            height: 100%;

            width: 100%;            pointer-events: none;

            height: 100%;            z-index: 1;

            pointer-events: none;            overflow: hidden;

            z-index: 1;        }

            overflow: hidden;

        }        .heart {

            position: absolute;

        .heart {            font-size: 20px;

            position: absolute;            color: rgba(255, 255, 255, 0.6);

            font-size: 20px;            animation: floatHeart 10s infinite;

            color: rgba(255, 255, 255, 0.6);        }

            animation: floatHeart 10s infinite;

        }        @keyframes floatHeart {

            0% {

        @keyframes floatHeart {                transform: translateY(100vh) rotate(0deg);

            0% {                opacity: 0;

                transform: translateY(100vh) rotate(0deg);            }

                opacity: 0;            10% {

            }                opacity: 1;

            10% {            }

                opacity: 1;            90% {

            }                opacity: 1;

            90% {            }

                opacity: 1;            100% {

            }                transform: translateY(-10vh) rotate(360deg);

            100% {                opacity: 0;

                transform: translateY(-10vh) rotate(360deg);            }

                opacity: 0;        }

            }

        }        .container {

            max-width: 1200px;

        .container {            margin: 0 auto;

            max-width: 1200px;            padding: 20px;

            margin: 0 auto;            position: relative;

            padding: 20px;            z-index: 100;

            position: relative;        }

            z-index: 100;

        }        /* Header */

        .header {

        /* Header */            text-align: center;

        .header {            padding: 80px 20px 50px;

            text-align: center;            position: relative;

            padding: 100px 20px 50px;        }

            position: relative;

        }        .header h1 {

            font-family: 'Dancing Script', cursive;

        .header h1 {            font-size: 5em;

            font-family: 'Dancing Script', cursive;            color: white;

            font-size: 5em;            text-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);

            color: white;            margin-bottom: 15px;

            text-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);            animation: glow 2s ease-in-out infinite alternate;

            margin-bottom: 15px;        }

            animation: glow 2s ease-in-out infinite alternate;

        }        @keyframes glow {

            from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3); }

        @keyframes glow {            to { text-shadow: 0 0 40px rgba(255, 255, 255, 0.8), 0 5px 20px rgba(0, 0, 0, 0.4); }

            from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3); }        }

            to { text-shadow: 0 0 40px rgba(255, 255, 255, 0.8), 0 5px 20px rgba(0, 0, 0, 0.4); }

        }        .header p {

            font-size: 1.5em;

        .header p {            color: white;

            font-size: 1.5em;            opacity: 0.95;

            color: white;            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

            opacity: 0.95;        }

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

        }        /* Quote of the Day */

        .quote-box {

        /* Quote of the Day */            background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.25));

        .quote-box {            backdrop-filter: blur(25px);

            background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.25));            border-radius: 30px;

            backdrop-filter: blur(25px);            padding: 30px;

            border-radius: 30px;            margin: 35px auto;

            padding: 30px;            text-align: center;

            margin: 35px auto;            border: 2px solid rgba(192, 132, 252, 0.5);

            text-align: center;            box-shadow: 0 20px 45px rgba(139, 92, 246, 0.4);

            border: 2px solid rgba(192, 132, 252, 0.5);            animation: float 6s ease-in-out infinite;

            box-shadow: 0 20px 45px rgba(139, 92, 246, 0.4);            position: relative;

            animation: float 6s ease-in-out infinite;            overflow: hidden;

            position: relative;        }

            overflow: hidden;

        }        .quote-box::before {

            content: '';

        .quote-box::before {            position: absolute;

            content: '';            top: -50%;

            position: absolute;            right: -50%;

            top: -50%;            width: 200%;

            right: -50%;            height: 200%;

            width: 200%;            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);

            height: 200%;            animation: rotate 15s linear infinite;

            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);        }

            animation: rotate 15s linear infinite;

        }        @keyframes rotate {

            from { transform: rotate(0deg); }

        @keyframes rotate {            to { transform: rotate(360deg); }

            from { transform: rotate(0deg); }        }

            to { transform: rotate(360deg); }

        }        @keyframes float {

            0%, 100% { transform: translateY(0px); }

        @keyframes float {            50% { transform: translateY(-15px); }

            0%, 100% { transform: translateY(0px); }        }

            50% { transform: translateY(-15px); }

        }        .quote-box p {

            font-size: 1.4em;

        .quote-box p {            color: white;

            font-size: 1.4em;            font-style: italic;

            color: white;            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);

            font-style: italic;            position: relative;

            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);            z-index: 1;

            position: relative;        }

            z-index: 1;        /* Cards */

        }        .card {

            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);

        /* Cards */            backdrop-filter: blur(25px);

        .card {            border-radius: 30px;

            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);            padding: 45px;

            backdrop-filter: blur(25px);            margin: 35px 0;

            border-radius: 30px;            border: 2px solid rgba(192, 132, 252, 0.4);

            padding: 45px;            box-shadow: 0 25px 60px rgba(139, 92, 246, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1);

            margin: 35px 0;            transition: transform 0.4s ease, box-shadow 0.4s ease;

            border: 2px solid rgba(192, 132, 252, 0.4);            animation: float 6s ease-in-out infinite;

            box-shadow: 0 25px 60px rgba(139, 92, 246, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1);        }

            transition: transform 0.4s ease, box-shadow 0.4s ease;

            animation: float 6s ease-in-out infinite;        .card:nth-child(2) { animation-delay: 1s; }

        }        .card:nth-child(3) { animation-delay: 2s; }

        

        .card:nth-child(2) { animation-delay: 1s; }        .card:hover {

        .card:nth-child(3) { animation-delay: 2s; }            transform: translateY(-12px) scale(1.01);

            box-shadow: 0 30px 70px rgba(139, 92, 246, 0.5), inset 0 0 40px rgba(255, 255, 255, 0.15);

        .card:hover {            border-color: rgba(192, 132, 252, 0.6);

            transform: translateY(-12px) scale(1.01);        }

            box-shadow: 0 30px 70px rgba(139, 92, 246, 0.5), inset 0 0 40px rgba(255, 255, 255, 0.15);

            border-color: rgba(192, 132, 252, 0.6);        .section-title {

        }            font-family: 'Dancing Script', cursive;

            font-size: 3em;

        .section-title {            text-align: center;

            font-family: 'Dancing Script', cursive;            color: white;

            font-size: 3em;            margin-bottom: 30px;

            text-align: center;            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

            color: white;        }

            margin-bottom: 30px;

            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);        /* Counter */

        }        .counter-card {

            text-align: center;

        /* Counter */        }

        .counter-card {

            text-align: center;        .days {

        }        .days {

            font-size: 5em;

        .days {            font-weight: 700;

            font-size: 5em;            color: white;

            font-weight: 700;            text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);

            color: white;            line-height: 1;

            text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);        }

            line-height: 1;

        }        .label {

            font-size: 1.3em;

        .label {            color: white;

            font-size: 1.3em;            margin-top: 10px;

            color: white;            opacity: 0.95;

            margin-top: 10px;        }

            opacity: 0.95;        /* Gallery */

        }        .gallery {

            display: grid;

        /* Gallery */            grid-template-columns: 1fr 1fr;

        .gallery {            gap: 30px;

            display: grid;        }

            grid-template-columns: 1fr 1fr;

            gap: 30px;        .photo-frame {

        }            border-radius: 20px;

            overflow: hidden;

        .photo-frame {            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);

            border-radius: 25px;            transition: transform 0.4s ease;

            overflow: hidden;            border: 3px solid rgba(255, 255, 255, 0.3);

            box-shadow: 0 20px 50px rgba(139, 92, 246, 0.4);        }

            transition: transform 0.5s ease, box-shadow 0.5s ease;

            border: 3px solid rgba(192, 132, 252, 0.5);        .photo-frame:hover {

            position: relative;            transform: scale(1.05) rotate(2deg);

        }        }



        .photo-frame::before {        /* Gallery */

            content: '';        .gallery {

            position: absolute;            display: grid;

            inset: 0;            grid-template-columns: 1fr 1fr;

            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.2));            gap: 30px;

            opacity: 0;        }

            transition: opacity 0.5s ease;

            z-index: 1;        .photo-frame {

        }            border-radius: 25px;

            overflow: hidden;

        .photo-frame:hover::before {            box-shadow: 0 20px 50px rgba(139, 92, 246, 0.4);

            opacity: 1;            transition: transform 0.5s ease, box-shadow 0.5s ease;

        }            border: 3px solid rgba(192, 132, 252, 0.5);

            position: relative;

        .photo-frame:hover {        }

            transform: scale(1.07) rotate(3deg);

            box-shadow: 0 25px 60px rgba(139, 92, 246, 0.6);        .photo-frame::before {

            border-color: rgba(192, 132, 252, 0.8);            content: '';

        }            position: absolute;

            inset: 0;

        .photo-frame img {            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.2));

            width: 100%;            opacity: 0;

            height: 400px;            transition: opacity 0.5s ease;

            object-fit: cover;            z-index: 1;

            display: block;        }

        }

        .photo-frame:hover::before {

        .caption {            opacity: 1;

            text-align: center;        }

            padding: 18px;

            background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.3));        .photo-frame:hover {

            backdrop-filter: blur(15px);            transform: scale(1.07) rotate(3deg);

            color: white;            box-shadow: 0 25px 60px rgba(139, 92, 246, 0.6);

            font-weight: 600;            border-color: rgba(192, 132, 252, 0.8);

            font-size: 1.15em;        }

            position: relative;

            z-index: 2;        .photo-frame img {

        }            width: 100%;

            height: 400px;

        /* Content Grid */            object-fit: cover;

        .content-grid {            display: block;

            display: grid;        }

            grid-template-columns: 1fr 1fr;

            gap: 30px;        .caption {

        }            text-align: center;

            padding: 18px;

        .form-card h3, .display-card h3 {            background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.3));

            font-family: 'Dancing Script', cursive;            backdrop-filter: blur(15px);

            font-size: 2.2em;            color: white;

            color: white;            font-weight: 600;

            margin-bottom: 25px;            font-size: 1.15em;

            text-align: center;            position: relative;

            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);            z-index: 2;

        }        }form-group {

            margin-bottom: 20px;

        /* Forms */        }

        .form-group {

            margin-bottom: 20px;        .form-group label {

        }            display: block;

            font-weight: 500;

        .form-group label {            margin-bottom: 8px;

            display: block;            color: white;

            font-weight: 500;            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

            margin-bottom: 8px;        }

            color: white;

            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);        .form-group input[type="text"],

        }        .form-group textarea,

        .form-group select {

        .form-group input[type="text"],            width: 100%;

        .form-group textarea,            padding: 14px;

        .form-group select {            border: 2px solid rgba(255, 255, 255, 0.3);

            width: 100%;            border-radius: 15px;

            padding: 14px;            font-family: 'Poppins', sans-serif;

            border: 2px solid rgba(255, 255, 255, 0.3);            font-size: 1em;

            border-radius: 15px;            background: rgba(255, 255, 255, 0.15);

            font-family: 'Poppins', sans-serif;            backdrop-filter: blur(10px);

            font-size: 1em;            color: white;

            background: rgba(255, 255, 255, 0.15);            transition: all 0.3s ease;

            backdrop-filter: blur(10px);        }

            color: white;

            transition: all 0.3s ease;        .form-group input::placeholder,

        }        .form-group textarea::placeholder {

            color: rgba(255, 255, 255, 0.7);

        .form-group input::placeholder,        }

        .form-group textarea::placeholder {

            color: rgba(255, 255, 255, 0.7);        .form-group input:focus,

        }        .form-group textarea:focus,

        .form-group select:focus {

        .form-group select option {            outline: none;

            background: #764ba2;            border-color: rgba(255, 255, 255, 0.6);

            color: white;            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);

        }            background: rgba(255, 255, 255, 0.2);

        }

        .form-group input:focus,        .btn {

        .form-group textarea:focus,            width: 100%;

        .form-group select:focus {            padding: 18px;

            outline: none;            background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);

            border-color: rgba(255, 255, 255, 0.6);            color: white;

            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);            border: none;

            background: rgba(255, 255, 255, 0.2);            border-radius: 20px;

        }            font-size: 1.15em;

            font-weight: 600;

        .btn {            cursor: pointer;

            width: 100%;            transition: all 0.4s ease;

            padding: 18px;            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);

            background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);            position: relative;

            color: white;            overflow: hidden;

            border: none;        }

            border-radius: 20px;

            font-size: 1.15em;        .btn::before {

            font-weight: 600;            content: '';

            cursor: pointer;            position: absolute;

            transition: all 0.4s ease;            top: 0;

            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);            left: -100%;

            position: relative;            width: 100%;

            overflow: hidden;            height: 100%;

        }            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

            transition: left 0.5s;

        .btn::before {        }

            content: '';

            position: absolute;        .btn:hover::before {

            top: 0;            left: 100%;

            left: -100%;        }

            width: 100%;

            height: 100%;        .btn:hover {

            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);            transform: translateY(-4px) scale(1.02);

            transition: left 0.5s;            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.6);

        }        }



        .btn:hover::before {        /* Display Area */

            left: 100%;        .display-area {

        }            max-height: 450px;

            overflow-y: auto;

        .btn:hover {            padding-right: 15px;

            transform: translateY(-4px) scale(1.02);        }

            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.6);

        }        .item-card {

            background: rgba(255, 255, 255, 0.15);

        /* Display Area */            backdrop-filter: blur(10px);

        .display-area {            border-left: 5px solid rgba(255, 255, 255, 0.5);

            max-height: 450px;            padding: 18px;

            overflow-y: auto;            border-radius: 12px;

            padding-right: 15px;            margin-bottom: 18px;

        }            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

        }

        .item-card {

            background: rgba(255, 255, 255, 0.15);        .item-card .header {

            backdrop-filter: blur(10px);            font-size: 0.95em;

            border-left: 5px solid rgba(255, 255, 255, 0.5);            font-weight: 600;

            padding: 18px;            color: white;

            border-radius: 12px;            margin-bottom: 8px;

            margin-bottom: 18px;            opacity: 0.9;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);        }

        }

        .item-card .text {

        .item-card .header {            font-size: 1em;

            font-size: 0.95em;            color: white;

            font-weight: 600;            white-space: pre-wrap;

            color: white;            word-wrap: break-word;

            margin-bottom: 8px;            line-height: 1.6;

            opacity: 0.9;        }

        }

        .item-card.bugra {

        .item-card .text {            border-left-color: #4facfe;

            font-size: 1em;        }

            color: white;

            white-space: pre-wrap;        /* Scrollbar */

            word-wrap: break-word;        ::-webkit-scrollbar {

            line-height: 1.6;            width: 10px;

        }        }

        ::-webkit-scrollbar-track {

        .item-card.bugra {            background: rgba(255, 255, 255, 0.1);

            border-left-color: #4facfe;            border-radius: 10px;

        }        }

        ::-webkit-scrollbar-thumb {

        .item-card.damla {            background: rgba(255, 255, 255, 0.3);

            border-left-color: #ff6b9d;            border-radius: 10px;

        }        }

        ::-webkit-scrollbar-thumb:hover {

        /* Success Message */            background: rgba(255, 255, 255, 0.5);

        .success-message {        }

            background: rgba(76, 175, 80, 0.3);

            backdrop-filter: blur(10px);        /* Responsive */

            border: 2px solid #4CAF50;        @media (max-width: 768px) {

            color: white;            .header h1 { font-size: 3.5em; }

            padding: 18px;            gap: 15px;

            border-radius: 15px;            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);

            text-align: center;        }

            margin-bottom: 25px;

            font-weight: 500;        .nav-item {

            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

        }        /* Navigation Menu */

        .love-navigation {r: blur(10px);

        /* Scrollbar */            border: 2px solid #4CAF50;

        ::-webkit-scrollbar {            color: white;

            width: 10px;            padding: 18px;

        }            border-radius: 15px;

        ::-webkit-scrollbar-track {            text-align: center;

            background: rgba(255, 255, 255, 0.1);            margin-bottom: 25px;

            border-radius: 10px;            font-weight: 500;

        }            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

        ::-webkit-scrollbar-thumb {        }

            background: rgba(255, 255, 255, 0.3);

            border-radius: 10px;        /* Scrollbar */

        }        ::-webkit-scrollbar {

        ::-webkit-scrollbar-thumb:hover {            width: 10px;

            background: rgba(255, 255, 255, 0.5);        }

        }        ::-webkit-scrollbar-track {

            background: rgba(255, 255, 255, 0.1);

        /* Navigation Menu */        /* Navigation Menu */

        .love-navigation {        .love-navigation {

            position: fixed;            position: fixed;

            top: 25px;            top: 25px;

            left: 50%;            left: 50%;

            transform: translateX(-50%);            transform: translateX(-50%);

            z-index: 1000;            z-index: 1000;

            background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.25));            background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.25));

            backdrop-filter: blur(25px);            backdrop-filter: blur(25px);

            border-radius: 50px;            border-radius: 50px;

            padding: 15px 30px;        .nav-item::after {

            border: 2px solid rgba(192, 132, 252, 0.5);            content: '';

            display: flex;            position: absolute;

            gap: 15px;            bottom: 5px;

            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);            left: 50%;

        }            transform: translateX(-50%);

            width: 0;

        .nav-item {            height: 2px;

            color: white;            background: white;

            text-decoration: none;            transition: width 0.3s ease;

            font-weight: 600;        }

            padding: 10px 20px;

            border-radius: 25px;        .nav-item:hover {

            transition: all 0.4s ease;            background: rgba(168, 85, 247, 0.4);

            font-size: 0.95em;            transform: scale(1.08);

            cursor: pointer;            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);

            position: relative;        }

        }

        .nav-item:hover::after {

        .nav-item::after {            width: 70%;

            content: '';        }

            position: absolute;

            bottom: 5px;        /* Music Control */

            left: 50%;            transform: scale(1.15) rotate(5deg);

            transform: translateX(-50%);            box-shadow: 0 20px 50px rgba(139, 92, 246, 0.6);

            width: 0;            border-color: rgba(192, 132, 252, 0.8);

            height: 2px;        }

            background: white;

            transition: width 0.3s ease;        /* Kiss Counter Styles */

        }            border-radius: 25px;

            transition: all 0.4s ease;

        .nav-item:hover {            font-size: 0.95em;

            background: rgba(168, 85, 247, 0.4);            cursor: pointer;

            transform: scale(1.08);            position: relative;

            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);        }

        }

        .nav-item::after {

        .nav-item:hover::after {            content: '';

            width: 70%;            position: absolute;

        }            bottom: 5px;

        /* Music Control */

        /* Music Control */        .music-control {

        .music-control {            position: fixed;

            position: fixed;            bottom: 35px;

            bottom: 35px;            right: 35px;

            right: 35px;            z-index: 1000;

            z-index: 1000;            background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.3));

            background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.3));            backdrop-filter: blur(25px);

            backdrop-filter: blur(25px);            border-radius: 60px;

            border-radius: 60px;            border: 2px solid rgba(192, 132, 252, 0.5);

            border: 2px solid rgba(192, 132, 252, 0.5);            padding: 18px 30px;

            padding: 18px 30px;            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);

            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);            transition: all 0.4s ease;

            transition: all 0.4s ease;            cursor: pointer;

            cursor: pointer;            color: white;

            color: white;            font-weight: 600;

            font-weight: 600;        }

        }

        .music-control:hover {

        .music-control:hover {            transform: scale(1.15) rotate(5deg);

            transform: scale(1.15) rotate(5deg);            box-shadow: 0 20px 50px rgba(139, 92, 246, 0.6);

            box-shadow: 0 20px 50px rgba(139, 92, 246, 0.6);            border-color: rgba(192, 132, 252, 0.8);

            border-color: rgba(192, 132, 252, 0.8);        }nav-item {

        }            color: white;

        .kiss-btn:hover::before {

        /* Kiss Counter Styles */            opacity: 0.5;

        .kiss-counter-section {            animation: pulse 1s infinite;

            text-align: center;        }

            padding: 25px;

        }        @keyframes pulse {

            0%, 100% { transform: scale(1); opacity: 0.5; }

        .counter-buttons {            50% { transform: scale(1.1); opacity: 0.3; }

            display: flex;        }

            justify-content: center;

            gap: 25px;        .kiss-btn:hover {

            margin: 30px 0;            transform: scale(1.25) rotate(15deg);

            flex-wrap: wrap;            box-shadow: 0 15px 40px rgba(168, 85, 247, 0.6);

        }        }



        .kiss-btn {        .kiss-count {

            background: linear-gradient(135deg, #a855f7, #c084fc, #e879f9);            font-size: 1.8em;

            border: 3px solid rgba(255, 255, 255, 0.3);            color: white;

            border-radius: 50%;            font-weight: 700;

            width: 90px;            margin: 15px 0;

            height: 90px;            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

            font-size: 2.8em;        }

            cursor: pointer;

            transition: all 0.4s ease;        /* Mood Tracker */

            box-shadow: 0 12px 30px rgba(168, 85, 247, 0.4);        .mood-tracker { center;

            position: relative;            padding: 25px;

        }        }



        .kiss-btn::before {        .counter-buttons {

            content: '';            display: flex;

            position: absolute;            justify-content: center;

            inset: -5px;        .mood-btn:hover::before, .mood-btn.active::before {

            border-radius: 50%;            opacity: 1;

            background: linear-gradient(135deg, #a855f7, #e879f9);        }

            opacity: 0;

            transition: opacity 0.4s ease;        .mood-btn:hover, .mood-btn.active {

            z-index: -1;            transform: scale(1.12) translateY(-5px);

        }            border-color: rgba(192, 132, 252, 0.8);

            box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);

        .kiss-btn:hover::before {        }

            opacity: 0.5;

            animation: pulse 1s infinite;        .mood-emoji {

        }            font-size: 2.5em;

            display: block;

        @keyframes pulse {            margin-bottom: 8px;

            0%, 100% { transform: scale(1); opacity: 0.5; }        }

            50% { transform: scale(1.1); opacity: 0.3; }

        }        .mood-label {

            color: white;

        .kiss-btn:hover {            font-size: 1em;

            transform: scale(1.25) rotate(15deg);            font-weight: 500;

            box-shadow: 0 15px 40px rgba(168, 85, 247, 0.6);        }

        }

        /* Video Container */

        .kiss-count {        .video-container {

            font-size: 1.8em;            position: relative;

            color: white;            border-radius: 25px;

            font-weight: 700;            overflow: hidden;

            margin: 15px 0;            box-shadow: 0 25px 50px rgba(139, 92, 246, 0.5);

            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);            border: 3px solid rgba(192, 132, 252, 0.5);

        }            margin: 25px 0;

            transition: all 0.4s ease;

        /* Mood Tracker */        }

        .mood-tracker {

            display: grid;        .video-container:hover {

            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));            box-shadow: 0 30px 60px rgba(139, 92, 246, 0.7);

            gap: 20px;            transform: scale(1.02);

            margin: 25px 0;            border-color: rgba(192, 132, 252, 0.8);

        }        }



        .mood-btn {        video {

            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.15));            width: 100%;

            backdrop-filter: blur(15px);            height: auto;

            border: 2px solid rgba(192, 132, 252, 0.4);            display: block;

            border-radius: 20px;        }

            padding: 25px;

            cursor: pointer;        /* Stats Cards */

            transition: all 0.4s ease;        .stats-grid {

            text-align: center;

            position: relative;        .mood-btn::before {

            overflow: hidden;            content: '';

        }            position: absolute;

            inset: 0;

        .mood-btn::before {            background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(192, 132, 252, 0.2));

            content: '';            opacity: 0;

            position: absolute;            transition: opacity 0.4s ease;

            inset: 0;        }

            background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(192, 132, 252, 0.2));

            opacity: 0;        .mood-btn:hover::before, .mood-btn.active::before {

            transition: opacity 0.4s ease;            opacity: 1;

        }        }



        .mood-btn:hover::before, .mood-btn.active::before {        /* Video Container */

            opacity: 1;        .video-container {

        }            position: relative;

            border-radius: 25px;

        .mood-btn:hover, .mood-btn.active {            overflow: hidden;

            transform: scale(1.12) translateY(-5px);            box-shadow: 0 25px 50px rgba(139, 92, 246, 0.5);

            border-color: rgba(192, 132, 252, 0.8);            border: 3px solid rgba(192, 132, 252, 0.5);

            box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);            margin: 25px 0;

        }            transition: all 0.4s ease;

        }

        .mood-emoji {

            font-size: 2.5em;        .video-container:hover {

            display: block;            box-shadow: 0 30px 60px rgba(139, 92, 246, 0.7);

            margin-bottom: 8px;            transform: scale(1.02);

            position: relative;            border-color: rgba(192, 132, 252, 0.8);

            z-index: 1;        }counter-buttons {

        }            display: flex;

            justify-content: center;

        .mood-label {            gap: 20px;

            color: white;            margin: 25px 0;

            font-size: 1em;        }

            font-weight: 500;

            position: relative;        .kiss-btn {

            z-index: 1;            background: linear-gradient(135deg, #ff6b9d, #ff8a80);

        }            border: none;

            border-radius: 50%;

        /* Video Container */            width: 80px;

        .video-container {            height: 80px;

            position: relative;            font-size: 2.5em;

            border-radius: 25px;            cursor: pointer;

            overflow: hidden;            transition: all 0.3s ease;

            box-shadow: 0 25px 50px rgba(139, 92, 246, 0.5);            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

            border: 3px solid rgba(192, 132, 252, 0.5);        }

            margin: 25px 0;

            transition: all 0.4s ease;        .kiss-btn:hover {

        }            transform: scale(1.2) rotate(10deg);

            box-shadow: 0 12px 30px rgba(255, 107, 157, 0.4);

        .video-container:hover {        }

            box-shadow: 0 30px 60px rgba(139, 92, 246, 0.7);

            transform: scale(1.02);        .kiss-count {

            border-color: rgba(192, 132, 252, 0.8);            font-size: 1.8em;

        }            color: white;

            box-shadow: 0 20px 45px rgba(139, 92, 246, 0.5);

        video {            border-color: rgba(192, 132, 252, 0.7);

            width: 100%;        }

            height: auto;

            display: block;        /* Video Container */

        }        .video-container {

            position: relative;

        /* Stats Cards */            border-radius: 20px;

        .stats-grid {            overflow: hidden;

            display: grid;            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));            border: 3px solid rgba(255, 255, 255, 0.3);

            gap: 25px;            margin: 20px 0;

            margin: 25px 0;        }

        }

        video {

        .stat-card {            width: 100%;

            background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(168, 85, 247, 0.2));            height: auto;

            backdrop-filter: blur(15px);            display: block;

            border-radius: 25px;        }

            padding: 30px;

            text-align: center;        /* Stats Cards */

            border: 2px solid rgba(192, 132, 252, 0.4);        .stats-grid {

            transition: all 0.4s ease;            display: grid;

            position: relative;            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            overflow: hidden;            gap: 20px;

        }            margin: 20px 0;

        }

        .stat-card::before {

            content: '';        .stat-card {

            position: absolute;            background: rgba(255, 255, 255, 0.15);

            top: -50%;            backdrop-filter: blur(10px);

            left: -50%;            border-radius: 20px;

            width: 200%;            padding: 25px;

            height: 200%;            text-align: center;

            background: radial-gradient(circle, rgba(192, 132, 252, 0.2) 0%, transparent 70%);            border: 2px solid rgba(255, 255, 255, 0.3);

            opacity: 0;            transition: all 0.3s ease;

            transition: opacity 0.4s ease;        }

        }

        .stat-card:hover {

        .stat-card:hover::before {            transform: translateY(-5px);

            opacity: 1;            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

        }        }



        .stat-card:hover {        .stat-number {

            transform: translateY(-8px) scale(1.03);            font-size: 2.5em;

            box-shadow: 0 20px 45px rgba(139, 92, 246, 0.5);            font-weight: 700;

            border-color: rgba(192, 132, 252, 0.7);            color: white;

        }            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

        }

        .stat-number {

            font-size: 2.5em;        .stat-label {

            font-weight: 700;            color: white;

            color: white;            font-size: 1em;

            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);            margin-top: 10px;

            position: relative;            opacity: 0.9;

            z-index: 1;        }

        }    </style>

</head>

        .stat-label {<body>

            color: white;    <!-- Magical Particles Background -->

            font-size: 1em;    <div class="particles-bg" id="particlesContainer"></div>

            margin-top: 10px;    <!-- Floating Hearts Background -->

            opacity: 0.9;    <div class="hearts-bg" id="heartsContainer"></div>

            position: relative;

            z-index: 1;    <!-- Navigation Menu -->

        }    <div class="love-navigation">

        <a href="#home" class="nav-item">🏠 Ana Sayfa</a>

        /* Responsive */        <a href="#gallery" class="nav-item">📸 Galeri</a>

        @media (max-width: 768px) {        <a href="#notes" class="nav-item">💌 Notlar</a>

            .header h1 { font-size: 3.5em; }        <a href="#memories" class="nav-item">📖 Anılar</a>

            .gallery, .content-grid { grid-template-columns: 1fr; }    </div>

            .card { padding: 25px; }

            .days { font-size: 3.5em; }    <!-- Music Control -->

            .love-navigation {     <div class="music-control" onclick="toggleMusic()">

                flex-wrap: wrap;        <span id="musicIcon">🎵</span>

                padding: 12px 20px;        <span id="musicText">Müzik</span>

                gap: 10px;    </div>

            }

            .nav-item {    <div class="container">

                padding: 8px 15px;        <!-- Header -->

                font-size: 0.85em;        <header class="header" id="home">

            }            <h1>Damla & Buğra</h1>

            .kiss-btn {            <p>Birlikte yazdığımız aşk hikayesi 💕</p>

                width: 70px;        </header>

                height: 70px;

                font-size: 2.2em;        <?php if (isset($_GET['saved'])): ?>

            }            <div class="success-message">

        }                ✨ Harika! Yeni bir anı daha eklendi! 💕

    </style>            </div>

</head>        <?php endif; ?>

<body>

    <!-- Magical Particles Background -->        <!-- Quote of the Day -->

    <div class="particles-bg" id="particlesContainer"></div>        <div class="quote-box">

    <!-- Floating Hearts Background -->            <p><?php echo $daily_quote; ?></p>

    <div class="hearts-bg" id="heartsContainer"></div>        </div>



    <!-- Navigation Menu -->        <!-- Counter -->

    <div class="love-navigation">        <section class="card counter-card">

        <a href="#home" class="nav-item">🏠 Ana Sayfa</a>            <div class="days" id="daysCounter">0</div>

        <a href="#gallery" class="nav-item">📸 Galeri</a>            <div class="label">gündür birlikteyiz 💖</div>

        <a href="#notes" class="nav-item">💌 Notlar</a>        </section>

        <a href="#memories" class="nav-item">📖 Anılar</a>

    </div>        <!-- Kiss Counter & Mood Tracker -->

        <section class="card">

    <!-- Music Control -->            <h2 class="section-title">💋 Günlük Aşk Ölçer</h2>

    <div class="music-control" onclick="toggleMusic()">            <div class="kiss-counter-section">

        <span id="musicIcon">🎵</span>                <div class="counter-buttons">

        <span id="musicText">Müzik</span>                    <button class="kiss-btn" onclick="addKiss()" title="Öpücük">💋</button>

    </div>                    <button class="kiss-btn" onclick="addHug()" title="Sarılma">🤗</button>

                    <button class="kiss-btn" onclick="addLove()" title="Seni Seviyorum">❤️</button>

    <div class="container">                </div>

        <!-- Header -->                <div class="kiss-count">

        <header class="header" id="home">                    Bugün: <span id="kissCount">0</span> öpücük, 

            <h1>Damla & Buğra</h1>                    <span id="hugCount">0</span> sarılma, 

            <p>Birlikte yazdığımız aşk hikayesi 💕</p>                    <span id="loveCount">0</span> seni seviyorum

        </header>                </div>

            </div>

        <?php if (isset($_GET['saved'])): ?>            

            <div class="success-message">            <h2 class="section-title" style="font-size: 2em; margin-top: 40px;">😊 Bugünkü Ruh Halin</h2>

                ✨ Harika! Yeni bir anı daha eklendi! 💕            <div class="mood-tracker">

            </div>                <div class="mood-btn" onclick="setMood('happy')">

        <?php endif; ?>                    <span class="mood-emoji">😊</span>

                    <span class="mood-label">Mutlu</span>

        <!-- Quote of the Day -->                </div>

        <div class="quote-box">                <div class="mood-btn" onclick="setMood('love')">

            <p><?php echo $daily_quote; ?></p>                    <span class="mood-emoji">😍</span>

        </div>                    <span class="mood-label">Aşık</span>

                </div>

        <!-- Counter -->                <div class="mood-btn" onclick="setMood('excited')">

        <section class="card counter-card">                    <span class="mood-emoji">🤩</span>

            <div class="days" id="daysCounter">0</div>                    <span class="mood-label">Heyecanlı</span>

            <div class="label">gündür birlikteyiz 💖</div>                </div>

        </section>                <div class="mood-btn" onclick="setMood('romantic')">

                    <span class="mood-emoji">🥰</span>

        <!-- Kiss Counter & Mood Tracker -->                    <span class="mood-label">Romantik</span>

        <section class="card">                </div>

            <h2 class="section-title">💋 Günlük Aşk Ölçer</h2>                <div class="mood-btn" onclick="setMood('dreamy')">

            <div class="kiss-counter-section">                    <span class="mood-emoji">😌</span>

                <div class="counter-buttons">                    <span class="mood-label">Hayalci</span>

                    <button class="kiss-btn" onclick="addKiss()" title="Öpücük">💋</button>                </div>

                    <button class="kiss-btn" onclick="addHug()" title="Sarılma">🤗</button>            </div>

                    <button class="kiss-btn" onclick="addLove()" title="Seni Seviyorum">❤️</button>        </section>

                </div>

                <div class="kiss-count">        <!-- Stats -->

                    Bugün: <span id="kissCount">0</span> öpücük,         <section class="card">

                    <span id="hugCount">0</span> sarılma,             <h2 class="section-title">📊 Aşk İstatistiklerimiz</h2>

                    <span id="loveCount">0</span> seni seviyorum            <div class="stats-grid">

                </div>                <div class="stat-card">

            </div>                    <div class="stat-number" id="daysCounter2">0</div>

                                <div class="stat-label">Gün Birlikte</div>

            <h2 class="section-title" style="font-size: 2em; margin-top: 40px;">😊 Bugünkü Ruh Halin</h2>                </div>

            <div class="mood-tracker">                <div class="stat-card">

                <div class="mood-btn" onclick="setMood('happy')">                    <div class="stat-number" id="totalNotes">0</div>

                    <span class="mood-emoji">😊</span>                    <div class="stat-label">Romantik Not</div>

                    <span class="mood-label">Mutlu</span>                </div>

                </div>                <div class="stat-card">

                <div class="mood-btn" onclick="setMood('love')">                    <div class="stat-number" id="totalMemories">0</div>

                    <span class="mood-emoji">😍</span>                    <div class="stat-label">Güzel Anı</div>

                    <span class="mood-label">Aşık</span>                </div>

                </div>                <div class="stat-card">

                <div class="mood-btn" onclick="setMood('excited')">                    <div class="stat-number">∞</div>

                    <span class="mood-emoji">🤩</span>                    <div class="stat-label">Sevgi</div>

                    <span class="mood-label">Heyecanlı</span>                </div>

                </div>            </div>

                <div class="mood-btn" onclick="setMood('romantic')">        </section>

                    <span class="mood-emoji">🥰</span>

                    <span class="mood-label">Romantik</span>        <!-- Gallery -->

                </div>        <section class="card" id="gallery">

                <div class="mood-btn" onclick="setMood('dreamy')">            <h2 class="section-title">📸 Bizim Anlarımız</h2>

                    <span class="mood-emoji">😌</span>            <div class="gallery">

                    <span class="mood-label">Hayalci</span>                <div class="photo-frame">

                </div>                    <img src="damlafoto2.jpeg" alt="Damla'nın fotoğrafı">

            </div>                    <div class="caption">Güzel Damlam ❤️</div>

        </section>                </div>

                <div class="photo-frame">

        <!-- Stats -->                    <img src="bugrafoto.jpeg" alt="Buğra'nın fotoğrafı">

        <section class="card">                    <div class="caption">Yakışıklı Buğram ❤️</div>

            <h2 class="section-title">📊 Aşk İstatistiklerimiz</h2>                </div>

            <div class="stats-grid">            </div>

                <div class="stat-card">        </section>

                    <div class="stat-number" id="daysCounter2">0</div>

                    <div class="stat-label">Gün Birlikte</div>        <!-- Video Section -->

                </div>        <section class="card">

                <div class="stat-card">            <h2 class="section-title">🎬 Bizim Şarkımız</h2>

                    <div class="stat-number" id="totalNotes">0</div>            <div class="video-container">

                    <div class="stat-label">Romantik Not</div>                <video controls preload="metadata">

                </div>                    <source src="damlabuğra.mp4" type="video/mp4">

                <div class="stat-card">                    Tarayıcınız video oynatmayı desteklemiyor.

                    <div class="stat-number" id="totalMemories">0</div>                </video>

                    <div class="stat-label">Güzel Anı</div>            </div>

                </div>        </section>

                <div class="stat-card">

                    <div class="stat-number">∞</div>        <!-- Notes -->

                    <div class="stat-label">Sevgi</div>        <section class="card" id="notes">

                </div>            <h2 class="section-title">💌 Aşk Notlarımız</h2>

            </div>            <div class="content-grid">

        </section>                <div class="form-card">

                    <h3>✍️ Yeni Not Bırak</h3>

        <!-- Gallery -->                    <form method="POST" action="">

        <section class="card" id="gallery">                        <input type="hidden" name="action" value="save_note">

            <h2 class="section-title">📸 Bizim Anlarımız</h2>                        <div class="form-group">

            <div class="gallery">                            <label for="author">Kimden:</label>

                <div class="photo-frame">                            <select name="author" id="author">

                    <img src="damlafoto2.jpeg" alt="Damla'nın fotoğrafı">                                <option value="Buğra">💙 Buğra</option>

                    <div class="caption">Güzel Damlam ❤️</div>                                <option value="Damla">💖 Damla</option>

                </div>                            </select>

                <div class="photo-frame">                        </div>

                    <img src="bugrafoto.jpeg" alt="Buğra'nın fotoğrafı">                        <div class="form-group">

                    <div class="caption">Yakışıklı Buğram ❤️</div>                            <label for="note">Notun:</label>

                </div>                            <textarea name="note" id="note" rows="5" placeholder="Aklından geçen güzel bir söz..." required></textarea>

            </div>                        </div>

        </section>                        <button type="submit" class="btn">💕 Gönder</button>

                    </form>

        <!-- Video Section -->                </div>

        <section class="card">                <div class="display-card">

            <h2 class="section-title">🎬 Bizim Şarkımız</h2>                    <h3>Son Notlar</h3>

            <div class="video-container">                    <div class="display-area">

                <video controls preload="metadata">                        <?php if (empty($notes)): ?>

                    <source src="damlabuğra.mp4" type="video/mp4">                            <p style="text-align: center; color: rgba(255,255,255,0.8); padding: 40px;">Henüz not yok. İlk notu sen bırak! 💕</p>

                    Tarayıcınız video oynatmayı desteklemiyor.                        <?php else: ?>

                </video>                            <?php foreach ($notes as $note):

            </div>                                $is_bugra = strpos($note, 'Buğra') !== false;

        </section>                                $is_damla = strpos($note, 'Damla') !== false;

                                $class = $is_bugra ? 'bugra' : ($is_damla ? 'damla' : '');

        <!-- Notes -->                                $parts = explode(': ', $note, 2);

        <section class="card" id="notes">                                $header = $parts[0] ?? '';

            <h2 class="section-title">💌 Aşk Notlarımız</h2>                                $text = $parts[1] ?? '';

            <div class="content-grid">                            ?>

                <div class="form-card">                                <div class="item-card <?php echo $class; ?>">

                    <h3>✍️ Yeni Not Bırak</h3>                                    <div class="header"><?php echo htmlspecialchars($header); ?></div>

                    <form method="POST" action="">                                    <div class="text"><?php echo htmlspecialchars($text); ?></div>

                        <input type="hidden" name="action" value="save_note">                                </div>

                        <div class="form-group">                            <?php endforeach; ?>

                            <label for="author">Kimden:</label>                        <?php endif; ?>

                            <select name="author" id="author">                    </div>

                                <option value="Buğra">💙 Buğra</option>                </div>

                                <option value="Damla">💖 Damla</option>            </div>

                            </select>        </section>

                        </div>

                        <div class="form-group">        <!-- Memories -->

                            <label for="note">Notun:</label>        <section class="card" id="memories">

                            <textarea name="note" id="note" rows="5" placeholder="Aklından geçen güzel bir söz..." required></textarea>            <h2 class="section-title">📖 Anı Defterimiz</h2>

                        </div>            <div class="content-grid">

                        <button type="submit" class="btn">💕 Gönder</button>                <div class="form-card">

                    </form>                    <h3>✨ Yeni Anı Ekle</h3>

                </div>                    <form method="POST" action="">

                <div class="display-card">                        <input type="hidden" name="action" value="save_memory">

                    <h3>Son Notlar</h3>                        <div class="form-group">

                    <div class="display-area">                            <label for="memory_title">Anı Başlığı:</label>

                        <?php if (empty($notes)): ?>                            <input type="text" name="memory_title" id="memory_title" placeholder="Örn: İlk buluşmamız" required>

                            <p style="text-align: center; color: rgba(255,255,255,0.8); padding: 40px;">Henüz not yok. İlk notu sen bırak! 💕</p>                        </div>

                        <?php else: ?>                        <div class="form-group">

                            <?php foreach ($notes as $note):                            <label for="memory_text">Anının Detayları:</label>

                                $is_bugra = strpos($note, 'Buğra') !== false;                            <textarea name="memory_text" id="memory_text" rows="8" placeholder="O gün neler olduğunu anlat..." required></textarea>

                                $is_damla = strpos($note, 'Damla') !== false;                        </div>

                                $class = $is_bugra ? 'bugra' : ($is_damla ? 'damla' : '');                        <button type="submit" class="btn">📝 Anıyı Kaydet</button>

                                $parts = explode(': ', $note, 2);                    </form>

                                $header = $parts[0] ?? '';                </div>

                                $text = $parts[1] ?? '';                <div class="display-card">

                            ?>                    <h3>Unutulmaz Anlar</h3>

                                <div class="item-card <?php echo $class; ?>">                    <div class="display-area">

                                    <div class="header"><?php echo htmlspecialchars($header); ?></div>                        <?php if (empty($memories)): ?>

                                    <div class="text"><?php echo htmlspecialchars($text); ?></div>                            <p style="text-align: center; color: rgba(255,255,255,0.8); padding: 40px;">Anı defteriniz boş. İlk anınızı ekleyin! 🎉</p>

                                </div>                        <?php else: ?>

                            <?php endforeach; ?>                            <?php foreach ($memories as $memory): ?>

                        <?php endif; ?>                                <div class="item-card">

                    </div>                                    <div class="text"><?php echo nl2br(htmlspecialchars($memory)); ?></div>

                </div>                                </div>

            </div>                            <?php endforeach; ?>

        </section>                        <?php endif; ?>

                    </div>

        <!-- Memories -->                </div>

        <section class="card" id="memories">            </div>

            <h2 class="section-title">📖 Anı Defterimiz</h2>        </section>

            <div class="content-grid">    </div>

                <div class="form-card">

                    <h3>✨ Yeni Anı Ekle</h3>    <script>

                    <form method="POST" action="">        // Days Counter - Başlangıç: 05.01.2025

                        <input type="hidden" name="action" value="save_memory">        const startDate = new Date('2025-01-05');

                        <div class="form-group">        const today = new Date();

                            <label for="memory_title">Anı Başlığı:</label>        const timeDiff = today.getTime() - startDate.getTime();

                            <input type="text" name="memory_title" id="memory_title" placeholder="Örn: İlk buluşmamız" required>        const daysPassed = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

                        </div>        document.getElementById('daysCounter').innerText = daysPassed;

                        <div class="form-group">        document.getElementById('daysCounter2').innerText = daysPassed;

                            <label for="memory_text">Anının Detayları:</label>

                            <textarea name="memory_text" id="memory_text" rows="8" placeholder="O gün neler olduğunu anlat..." required></textarea>        // Update stats

                        </div>        const notesCount = <?php echo count($notes); ?>;

                        <button type="submit" class="btn">📝 Anıyı Kaydet</button>        const memoriesCount = <?php echo count($memories); ?>;

                    </form>        document.getElementById('totalNotes').innerText = notesCount;

                </div>        document.getElementById('totalMemories').innerText = memoriesCount;

                <div class="display-card">

                    <h3>Unutulmaz Anlar</h3>        // Magical Particles Background

                    <div class="display-area">        function createParticle() {

                        <?php if (empty($memories)): ?>            const particle = document.createElement('div');

                            <p style="text-align: center; color: rgba(255,255,255,0.8); padding: 40px;">Anı defteriniz boş. İlk anınızı ekleyin! 🎉</p>            particle.className = 'particle';

                        <?php else: ?>            particle.style.left = Math.random() * 100 + '%';

                            <?php foreach ($memories as $memory): ?>            particle.style.width = Math.random() * 5 + 3 + 'px';

                                <div class="item-card">            particle.style.height = particle.style.width;

                                    <div class="text"><?php echo nl2br(htmlspecialchars($memory)); ?></div>            particle.style.animationDuration = (Math.random() * 10 + 10) + 's';

                                </div>            particle.style.animationDelay = Math.random() * 5 + 's';

                            <?php endforeach; ?>            document.getElementById('particlesContainer').appendChild(particle);

                        <?php endif; ?>            

                    </div>            setTimeout(() => {

                </div>                particle.remove();

            </div>            }, 20000);

        </section>        }

    </div>

        // Create initial particles

    <script>        for (let i = 0; i < 30; i++) {

        // Days Counter - Başlangıç: 05.01.2025            setTimeout(createParticle, i * 200);

        const startDate = new Date('2025-01-05');        }

        const today = new Date();        setInterval(createParticle, 700);

        const timeDiff = today.getTime() - startDate.getTime();

        const daysPassed = Math.floor(timeDiff / (1000 * 60 * 60 * 24));        // Floating Hearts Background

        document.getElementById('daysCounter').innerText = daysPassed;        function createHeart() {

        document.getElementById('daysCounter2').innerText = daysPassed;            const heart = document.createElement('div');

            heart.className = 'heart';

        // Update stats            heart.innerHTML = '❤️';

        const notesCount = <?php echo count($notes); ?>;            heart.style.left = Math.random() * 100 + '%';

        const memoriesCount = <?php echo count($memories); ?>;            heart.style.animationDuration = (Math.random() * 5 + 5) + 's';

        document.getElementById('totalNotes').innerText = notesCount;            heart.style.fontSize = (Math.random() * 10 + 15) + 'px';

        document.getElementById('totalMemories').innerText = memoriesCount;            document.getElementById('heartsContainer').appendChild(heart);

            

        // Magical Particles Background            setTimeout(() => {

        function createParticle() {                heart.remove();

            const particle = document.createElement('div');            }, 10000);

            particle.className = 'particle';        }

            particle.style.left = Math.random() * 100 + '%';

            particle.style.width = Math.random() * 5 + 3 + 'px';        setInterval(createHeart, 500);

            particle.style.height = particle.style.width;

            particle.style.animationDuration = (Math.random() * 10 + 10) + 's';        // Kiss Counter Functions

            particle.style.animationDelay = Math.random() * 5 + 's';        let kissCount = parseInt(localStorage.getItem('kissCount_' + new Date().toDateString()) || 0);

            document.getElementById('particlesContainer').appendChild(particle);        let hugCount = parseInt(localStorage.getItem('hugCount_' + new Date().toDateString()) || 0);

                    let loveCount = parseInt(localStorage.getItem('loveCount_' + new Date().toDateString()) || 0);

            setTimeout(() => {

                particle.remove();        document.getElementById('kissCount').innerText = kissCount;

            }, 20000);        document.getElementById('hugCount').innerText = hugCount;

        }        document.getElementById('loveCount').innerText = loveCount;



        // Create initial particles        function addKiss() {

        for (let i = 0; i < 30; i++) {            kissCount++;

            setTimeout(createParticle, i * 200);            localStorage.setItem('kissCount_' + new Date().toDateString(), kissCount);

        }            document.getElementById('kissCount').innerText = kissCount;

        setInterval(createParticle, 700);            showFloatingEmoji('💋');

        }

        // Floating Hearts Background

        function createHeart() {        function addHug() {

            const heart = document.createElement('div');            hugCount++;

            heart.className = 'heart';            localStorage.setItem('hugCount_' + new Date().toDateString(), hugCount);

            heart.innerHTML = '❤️';            document.getElementById('hugCount').innerText = hugCount;

            heart.style.left = Math.random() * 100 + '%';            showFloatingEmoji('🤗');

            heart.style.animationDuration = (Math.random() * 5 + 5) + 's';        }

            heart.style.fontSize = (Math.random() * 10 + 15) + 'px';

            document.getElementById('heartsContainer').appendChild(heart);        function addLove() {

                        loveCount++;

            setTimeout(() => {            localStorage.setItem('loveCount_' + new Date().toDateString(), loveCount);

                heart.remove();            document.getElementById('loveCount').innerText = loveCount;

            }, 10000);            showFloatingEmoji('❤️');

        }        }



        setInterval(createHeart, 500);        function showFloatingEmoji(emoji) {

            const floater = document.createElement('div');

        // Kiss Counter Functions            floater.innerText = emoji;

        let kissCount = parseInt(localStorage.getItem('kissCount_' + new Date().toDateString()) || 0);            floater.style.position = 'fixed';

        let hugCount = parseInt(localStorage.getItem('hugCount_' + new Date().toDateString()) || 0);            floater.style.left = '50%';

        let loveCount = parseInt(localStorage.getItem('loveCount_' + new Date().toDateString()) || 0);            floater.style.top = '50%';

            floater.style.fontSize = '3em';

        document.getElementById('kissCount').innerText = kissCount;            floater.style.zIndex = '9999';

        document.getElementById('hugCount').innerText = hugCount;            floater.style.pointerEvents = 'none';

        document.getElementById('loveCount').innerText = loveCount;            floater.style.animation = 'floatUp 2s ease-out forwards';

            document.body.appendChild(floater);

        function addKiss() {            

            kissCount++;            setTimeout(() => floater.remove(), 2000);

            localStorage.setItem('kissCount_' + new Date().toDateString(), kissCount);        }

            document.getElementById('kissCount').innerText = kissCount;

            showFloatingEmoji('💋');        // Add CSS for floating emoji animation

        }        const style = document.createElement('style');

        style.textContent = `

        function addHug() {            @keyframes floatUp {

            hugCount++;                0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }

            localStorage.setItem('hugCount_' + new Date().toDateString(), hugCount);                50% { transform: translate(-50%, -150%) scale(1.5); opacity: 1; }

            document.getElementById('hugCount').innerText = hugCount;                100% { transform: translate(-50%, -250%) scale(1); opacity: 0; }

            showFloatingEmoji('🤗');            }

        }        `;

        document.head.appendChild(style);

        function addLove() {

            loveCount++;        // Mood Tracker

            localStorage.setItem('loveCount_' + new Date().toDateString(), loveCount);        function setMood(mood) {

            document.getElementById('loveCount').innerText = loveCount;            document.querySelectorAll('.mood-btn').forEach(btn => btn.classList.remove('active'));

            showFloatingEmoji('❤️');            event.target.closest('.mood-btn').classList.add('active');

        }            localStorage.setItem('mood_' + new Date().toDateString(), mood);

            showFloatingEmoji(event.target.closest('.mood-btn').querySelector('.mood-emoji').innerText);

        function showFloatingEmoji(emoji) {        }

            const floater = document.createElement('div');

            floater.innerText = emoji;        // Load saved mood

            floater.style.position = 'fixed';        const savedMood = localStorage.getItem('mood_' + new Date().toDateString());

            floater.style.left = '50%';        if (savedMood) {

            floater.style.top = '50%';            document.querySelectorAll('.mood-btn').forEach(btn => {

            floater.style.fontSize = '3em';                if (btn.onclick.toString().includes(savedMood)) {

            floater.style.zIndex = '9999';                    btn.classList.add('active');

            floater.style.pointerEvents = 'none';                }

            floater.style.animation = 'floatUp 2s ease-out forwards';            });

            document.body.appendChild(floater);        }

            

            setTimeout(() => floater.remove(), 2000);        // Music Control

        }        let musicPlaying = false;

        function toggleMusic() {

        // Add CSS for floating emoji animation            musicPlaying = !musicPlaying;

        const style = document.createElement('style');            const icon = document.getElementById('musicIcon');

        style.textContent = `            const text = document.getElementById('musicText');

            @keyframes floatUp {            

                0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }            if (musicPlaying) {

                50% { transform: translate(-50%, -150%) scale(1.5); opacity: 1; }                icon.innerText = '🎵';

                100% { transform: translate(-50%, -250%) scale(1); opacity: 0; }                text.innerText = 'Çalıyor';

            }            } else {

        `;                icon.innerText = '🎵';

        document.head.appendChild(style);                text.innerText = 'Müzik';

            }

        // Mood Tracker        }

        function setMood(mood) {

            document.querySelectorAll('.mood-btn').forEach(btn => btn.classList.remove('active'));        // Smooth Scroll for Navigation

            event.target.closest('.mood-btn').classList.add('active');        document.querySelectorAll('.nav-item').forEach(item => {

            localStorage.setItem('mood_' + new Date().toDateString(), mood);            item.addEventListener('click', function(e) {

            showFloatingEmoji(event.target.closest('.mood-btn').querySelector('.mood-emoji').innerText);                e.preventDefault();

        }                const target = this.getAttribute('href');

                document.querySelector(target).scrollIntoView({

        // Load saved mood                    behavior: 'smooth',

        const savedMood = localStorage.getItem('mood_' + new Date().toDateString());                    block: 'start'

        if (savedMood) {                });

            document.querySelectorAll('.mood-btn').forEach(btn => {            });

                if (btn.onclick.toString().includes(savedMood)) {        });

                    btn.classList.add('active');

                }        // Auto-hide success message

            });        if (window.location.search.includes('saved=1')) {

        }            setTimeout(() => {

                const cleanUrl = window.location.href.split('?')[0];

        // Music Control                window.history.replaceState({}, document.title, cleanUrl);

        let musicPlaying = false;            }, 3000);

        function toggleMusic() {        }

            musicPlaying = !musicPlaying;    </script>

            const icon = document.getElementById('musicIcon');</body>

            const text = document.getElementById('musicText');</html>

            
            if (musicPlaying) {
                icon.innerText = '🎵';
                text.innerText = 'Çalıyor';
            } else {
                icon.innerText = '🎵';
                text.innerText = 'Müzik';
            }
        }

        // Smooth Scroll for Navigation
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const target = this.getAttribute('href');
                document.querySelector(target).scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            });
        });

        // Auto-hide success message
        if (window.location.search.includes('saved=1')) {
            setTimeout(() => {
                const cleanUrl = window.location.href.split('?')[0];
                window.history.replaceState({}, document.title, cleanUrl);
            }, 3000);
        }
    </script>
</body>
</html>
