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

html, body {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    /* Arka planı buraya taşıdık, en arkada dursun diye */
    background: repeating-radial-gradient(
            circle at center,
            rgba(255,255,255,0.25) 0px,
            rgba(255,255,255,0.25) 1px,
            transparent 2px,
            transparent 8px
        ),
        linear-gradient(
            -45deg,
            #e07aa5,
            #e69cb9,
            #e8b6c5,
            #d67d9e
        );
    background-size: 200% 200%, 400% 400%;
    animation: diary-move 25s ease infinite;
}
/* --- TEMEL AYARLAR --- */

/* Scroll Snap (Sayfa Sayfa Kayma) */
.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
/* Scroll Snap (Sayfa Sayfa Kayma) */

/* Bölümler (Aylar) */
.section {
    min-height: 100vh; /* İçerik azsa tam ekran, çoksa uzar */
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column; /* İçerikleri alt alta dizebilsin */
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    padding: 40px 20px 100px 20px;
}
/* Bölümler (Aylar) */

/* --- ÖZEL EL YAZISI STİLİ --- */
.el-yazisi {
    font-family: 'Caveat', cursive;  /* El yazısı fontu */
    font-size: 4.5rem;               /* Büyüklük */
    color: #e91e63;                  /* Pembe renk */
    text-shadow: none;               /* Gölgeyi kaldır */
    margin-bottom: 20px;             /* Altına biraz boşluk */
    line-height: 1.2;                /* Satır aralığını düzeltir */
}
/* --- ÖZEL EL YAZISI STİLİ --- */

/* --- Backgrounds --- */
.pastel-theme, .dark-theme, .light-theme {
    position: relative;
    overflow-x: hidden;
    color: #fff;
    
    /* Arka planı temizledik ki kalpler gözüksün */
    background: transparent; 
}
@keyframes diary-move {
    0%   { background-position: 0% 50%, 0% 50%; }
    50%  { background-position: 100% 50%, 100% 50%; }
    100% { background-position: 0% 50%, 0% 50%; }
}

/* --- UÇUŞAN KIRMIZI KALPLER (GÜNCELLENMİŞ: ÇİFT YÖNLÜ) --- */
.flying-hearts-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; 
    pointer-events: none;
}

.heart {
    position: absolute;
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff0000'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.8;
}

.heart.big-heart {
    width: 80px;  /* Bayağı büyük olsunlar */
    height: 80px;
    opacity: 0.6; /* Çok göz yormasın diye hafif şeffaf */
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.4)); /* Hafif parlama */
}

/* --- GRUP 1: AŞAĞIDAN YUKARI ÇIKANLAR (Tek Sayılar: 1, 3, 5...) --- */
.heart:nth-child(odd) {
    bottom: -100px;
    animation: floatingUp 10s linear infinite;
}

/* --- GRUP 2: YUKARIDAN AŞAĞI İNENLER (Çift Sayılar: 2, 4, 6...) --- */
.heart:nth-child(even) {
    top: -100px; /* Yukarıda başlasın */
    animation: floatingDown 12s linear infinite;
}

/* --- Animasyonlar --- */

@keyframes floatingUp {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}

@keyframes floatingDown {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    100% { transform: translateY(120vh) rotate(-360deg); opacity: 0; }
}

/* KÜÇÜK KALPLER (1-20) */
.heart:nth-child(1) { left: 5%; animation-duration: 9s; animation-delay: 0s; }
.heart:nth-child(2) { left: 12%; animation-duration: 14s; animation-delay: 2s; transform: scale(0.8); }
.heart:nth-child(3) { left: 18%; animation-duration: 11s; animation-delay: 5s; }
.heart:nth-child(4) { left: 24%; animation-duration: 16s; animation-delay: 1s; transform: scale(1.1); }
.heart:nth-child(5) { left: 30%; animation-duration: 13s; animation-delay: 3s; }
.heart:nth-child(6) { left: 36%; animation-duration: 10s; animation-delay: 6s; transform: scale(0.9); }
.heart:nth-child(7) { left: 42%; animation-duration: 15s; animation-delay: 2s; }
.heart:nth-child(8) { left: 48%; animation-duration: 12s; animation-delay: 4s; transform: scale(1.2); }
.heart:nth-child(9) { left: 54%; animation-duration: 17s; animation-delay: 1s; }
.heart:nth-child(10) { left: 60%; animation-duration: 9s; animation-delay: 5s; }
.heart:nth-child(11) { left: 66%; animation-duration: 14s; animation-delay: 0s; transform: scale(0.8); }
.heart:nth-child(12) { left: 72%; animation-duration: 11s; animation-delay: 3s; }
.heart:nth-child(13) { left: 78%; animation-duration: 16s; animation-delay: 6s; transform: scale(1.1); }
.heart:nth-child(14) { left: 84%; animation-duration: 13s; animation-delay: 2s; }
.heart:nth-child(15) { left: 90%; animation-duration: 10s; animation-delay: 4s; transform: scale(0.9); }
.heart:nth-child(16) { left: 95%; animation-duration: 15s; animation-delay: 1s; }
.heart:nth-child(17) { left: 3%; animation-duration: 18s; animation-delay: 7s; }
.heart:nth-child(18) { left: 28%; animation-duration: 19s; animation-delay: 5s; }
.heart:nth-child(19) { left: 58%; animation-duration: 20s; animation-delay: 2s; }
.heart:nth-child(20) { left: 88%; animation-duration: 12s; animation-delay: 6s; }

/* BÜYÜK KALPLER (21-28) - Daha yavaş ve ağır */
.heart:nth-child(21) { left: 10%; animation-duration: 22s; animation-delay: 0s; } /* Yukarı */
.heart:nth-child(22) { left: 80%; animation-duration: 25s; animation-delay: 1s; } /* Aşağı */
.heart:nth-child(23) { left: 25%; animation-duration: 20s; animation-delay: 8s; } /* Yukarı */
.heart:nth-child(24) { left: 65%; animation-duration: 28s; animation-delay: 2s; } /* Aşağı */
.heart:nth-child(25) { left: 45%; animation-duration: 24s; animation-delay: 5s; } /* Yukarı */
.heart:nth-child(26) { left: 15%; animation-duration: 26s; animation-delay: 10s; } /* Aşağı */
.heart:nth-child(27) { left: 92%; animation-duration: 21s; animation-delay: 3s; } /* Yukarı */
.heart:nth-child(28) { left: 55%; animation-duration: 29s; animation-delay: 7s; } /* Aşağı */
/* --- Backgrounds --- */



/* Siyah Giriş Ekranı İçin Özel */
.dark-mode-start {
    background: #000 !important;
    color: #fff;
}
/* Siyah Giriş Ekranı İçin Özel */


@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* --- AY İÇİNDEKİ ZİKZAK DÜZEN --- */
.month-container {
    max-width: 1100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Her anı arasında boşluk */
    z-index: 2;
    padding-top: 50px;
    padding-bottom: 50px;
}

.month-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.2);
    padding: 10px 30px;
    border-radius: 50px;
    display: inline-block;
}
/* --- AY İÇİNDEKİ ZİKZAK DÜZEN --- */


/* Anı Satırı (Resim + Yazı) */
.memory-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: rgba(255, 255, 255, 0.15);
    padding: 30px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.memory-row:hover {
    transform: translateY(-5px);
}
/* Anı Satırı (Resim + Yazı) */


/* Zikzak Mantığı: Çift sayıdaki satırları ters çevir */
.memory-row:nth-child(even) {
    flex-direction: row-reverse;
}
/* Zikzak Mantığı: Çift sayıdaki satırları ters çevir */


/* Mobilde Hep Alt Alta */
@media (max-width: 768px) {
    .memory-row, .memory-row:nth-child(even) {
        flex-direction: column;
        text-align: center;
    }
}

.media-col { flex: 1; }
.text-col { flex: 1; text-align: left; }
.memory-row:nth-child(even) .text-col { text-align: right; } /* Sağdaki yazı sağa yaslı */
@media (max-width: 768px) { .text-col, .memory-row:nth-child(even) .text-col { text-align: center; } }
/* Mobilde Hep Alt Alta */


/* Görseller */
/* --- YENİ POLAROID STİLİ --- */
.media-col img, .media-col video {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    
    /* Polaroid Çerçevesi (Alt tarafı geniş beyaz) */
    background-color: #fff;
    padding: 12px 12px 60px 12px; 
    border-radius: 2px; /* Köşeler daha sivri olur, fotoğraf kağıdı gibi */
    
    /* Gölgelendirme */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    
    /* Geçiş efekti */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Üzerine gelince düzelsin ve yaklaşsın */
.media-col img:hover, .media-col video:hover {
    transform: scale(1.05) rotate(0deg) !important;
    box-shadow: 10px 10px 25px rgba(0,0,0,0.3);
    z-index: 10;
}
/* Görseller */

/* Film Şeridi */
.film-strip-wrapper {
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.25);
    padding: 15px 0;
    transform: rotate(-2deg); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
    border-top: 2px dashed #fff;
    border-bottom: 2px dashed #fff;
    /* Mac/iPhone Titreme Önleyici Kodlar: */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
.film-track {
    display: flex;
    width: max-content;
    gap: 15px;
    /* Hız ayarı: 120s yaptım ki yavaş ve takılmadan aksın */
    animation: scroll-left 45s linear infinite; 
    will-change: transform; /* Tarayıcıya 'hazır ol' diyoruz */
}
.film-track img, .film-track video {
    height: 220px; 
    width: auto;
    border-radius: 8px;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    object-fit: cover;
    margin: 0;
    /* GPU Hızlandırma Kodları (Silinmeyi Önler) */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}
/* Film Şeridi */

/* --- TIMELINE (SAĞ ZAMAN ÇİZELGESİ) --- */
.timeline-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999; /* En üstte olsun diye artırdım */
    
    /* BAŞLANGIÇ DURUMU (SİYAH EKRAN İÇİN) */
    opacity: 0; 
    visibility: hidden; /* Tıklanmasın diye */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* JS İLE EKLENECEK GÖRÜNÜR OLMA KURALI */
.timeline-nav.visible {
    opacity: 1 !important; /* Kesinlikle görünür olsun */
    visibility: visible !important;
}

.timeline-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.timeline-nav li { text-align: right; }

.timeline-nav a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7); /* Biraz daha belirgin beyaz */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2); /* Arka planı koyulaştırdım ki okunsun */
    border-radius: 20px;
    display: block;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.timeline-nav a:hover, .timeline-nav a.active {
    color: #e91e63;
    background: #fff;
    transform: scale(1.1) translateX(-5px);
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.4);
}
/* --- TIMELINE (SAĞ ZAMAN ÇİZELGESİ) --- */

/* Yazılar */
h2 { 
    font-family: 'Playfair Display', serif; 
    font-size: 1.8rem; 
    margin-bottom: 10px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
h3 {
    font-family: 'Playfair Display', serif; /* Aynı şık font */
    font-size: 1.2rem; /* h2'den (1.8rem) biraz daha küçük */
    margin-bottom: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
p { font-size: 1.1rem; line-height: 1.6; }
/* Yazılar */


/* --- FOTOĞRAF DÜZELTME AYARLARI --- */
/* 1. Resmi kırpmadan, olduğu gibi sığdırır (Kenarlarda boşluk kalabilir) */
.tam-sigdir {
    object-fit: contain !important; 
    background-color: rgba(255, 255, 255, 0.1); /* Boşluk kalırsa şeffaf fon */
}

/* 2. Resmin odağını yukarı kaydırır (Kafası kesilen fotolar için) */
.yukari-odakla {
    object-position: top center !important;
}

/* 3. Resmin odağını aşağı kaydırır */
.asagi-odakla {
    object-position: bottom center !important;
}

/* 4. Özel boyutlandırma (Çok uzun/kısa resimler için) */
.ozel-boyut {
    max-height: 70vh !important; /* Yüksekliği biraz daha serbest bırakır */
    width: auto !important; /* Genişliği otomatiğe alır */
    margin: 0 auto; /* Ortalar */
    display: block;
}
/* --- FOTOĞRAF DÜZELTME AYARLARI --- */


/* Giriş Ekranı vb. */
#login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 100000; display: flex; justify-content: center; align-items: center; color: white; }
.login-content { text-align: center; }
input { padding: 10px; margin-top: 10px; border-radius: 5px; border:none;}
button { padding: 10px 20px; margin-top:10px; background: #e91e63; color: white; border: none; border-radius: 5px; cursor: pointer; }
#timer { font-family: 'Courier New', monospace; font-size: 1.5rem; font-weight: bold; color: #e91e63;}
/* Giriş Ekranı vb. */

/* Foto Düzeni ve Başlık Stili */
/* Çift sıradaki fotolar hafif sağa yatsın */
.memory-row:nth-child(even) .media-col img, 
.memory-row:nth-child(even) .media-col video {
    transform: rotate(2deg);
}

/* Tek sıradaki fotolar hafif sola yatsın */
.memory-row:nth-child(odd) .media-col img, 
.memory-row:nth-child(odd) .media-col video {
    transform: rotate(-2deg);
}

/* Başlıkları el yazısı (Caveat) yapma */
.text-col h2 {
    font-family: 'Caveat', cursive; 
    font-size: 2.5rem; 
    color: #e91e63; 
    transform: rotate(-3deg); 
    margin-bottom: 15px;
    text-shadow: none; /* Polaroid üstünde temiz dursun diye gölgeyi kaldırdım */
}
/* Foto Düzeni ve Başlık Stili */