/* --- SAYFA MİMARİSİ VE DEFTER ÇİZGİLERİ --- */
body {
    background-color: #fdf6e3; 
    background-image: repeating-linear-gradient(
        transparent,
        transparent 39px,
        #e4d9b9 40px
    );
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 100px 0; 
    overflow-x: hidden; 
    position: relative; 
}

/* --- GİRİŞ EKRANI TASARIMI --- */
#login-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #fdf6e3;
    background-image: repeating-linear-gradient(transparent, transparent 39px, #e4d9b9 40px);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; transition: opacity 0.8s ease;
}
.login-card { background-color: white; padding: 40px; border-radius: 10px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); text-align: center; width: 300px; }
.lock-icon { font-size: 50px; margin-bottom: 10px; }
.login-card h2 { color: #5c4e3a; margin: 0 0 10px 0; }
.login-card p { color: #777; font-size: 14px; margin-bottom: 25px; }
.login-card input { width: 90%; padding: 10px; margin-bottom: 15px; border: 2px solid #e4d9b9; border-radius: 5px; font-size: 16px; text-align: center; outline: none; }
.login-card input:focus { border-color: #5c4e3a; }
.login-card button { background-color: #5c4e3a; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer; width: 100%; transition: background 0.3s; }
.login-card button:hover { background-color: #3f3527; }
#errorMessage { color: #d9534f; font-size: 13px; margin-top: 15px; display: none; }

#main-content { display: none; opacity: 0; transition: opacity 1s ease; position: relative; }

/* --- OTOMATİK ARKA PLAN SÜSLEMELERİ --- */
.bg-decoration {
    position: absolute;
    opacity: 0.30; /* Fotoğrafları boğmaması için hafif soluk */
    z-index: -10; 
    pointer-events: none; 
}

/* --- KONTEYNER VE SAĞ ÜST MÜZİK KUTUSU --- */
.notebook-container {
    max-width: 950px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 120px; /* Fotoğraflar arası ideal boşluk */
}

.music-box {
    position: fixed; 
    top: 20px; right: 20px;
    background-color: rgba(253, 246, 227, 0.95);
    padding: 15px; border-radius: 15px; border: 2px dashed #c2b59b; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); width: 260px; z-index: 1000; 
}
.music-box h3 { margin: 0 0 10px 0; font-size: 16px; text-align: center; color: #5c4e3a; }
.music-box audio { width: 100%; height: 35px; margin-bottom: 8px; }

/* --- İDEAL BOYUTTA POLAROID KARTLAR (450px) --- */
.polaroid {
    position: relative; 
    background-color: white;
    padding: 20px 20px 35px 20px; 
    width: 400px; /* Ne çok büyük ne çok küçük, ideal boyut */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
    transition: transform 0.4s ease; 
}

/* Çerçeve İçindeki Süsler ve Oklar */
.cute-figure { position: absolute; z-index: 5; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.25)); }
.arrow-svg { position: absolute; z-index: 2; }

/* Çerçeve İçindeki Tarih ve Yazılar */
.polaroid .date {
    font-weight: bold; text-align: center; color: #5c4e3a; 
    margin-bottom: 20px;
    font-size: 18px; 
    letter-spacing: 1px;
}
.polaroid img { width: 100%; height: auto; display: block; border-radius: 3px; }
.polaroid p {
    color: #4a4a4a; line-height: 1.6; 
    font-size: 16px; 
    margin-top: 25px; text-align: justify;
}

/* --- SAĞA VE SOLA EĞİKLİK (TILT) AYARLARI --- */
.left {
    align-self: flex-start;
    margin-left: 60px; 
    transform: rotate(-3deg); 
}
.right {
    align-self: flex-end;
    margin-right: 60px;
    transform: rotate(4deg); 
}

/* Üzerine gelince düzelme efekti */
.polaroid:hover {
    transform: scale(1.03) rotate(0deg);
    z-index: 10; box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
/* TELEFON (MOBİL) EKRANLARI İÇİN MÜZİK KUTUSU AYARI */
@media screen and (max-width: 768px) {
    /* Müzik kutusunu yukarı taşı ve ortala */
    .music-box {
        position: relative !important; /* Sağ üste yapışmaktan kurtarır */
        top: 0 !important;
        right: 0 !important;
        margin: 20px auto 30px auto !important; /* Ortalar ve altından boşluk bırakır */
        width: 90% !important; /* Ekrana tam sığması için genişliği ayarlar */
        max-width: 350px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Hafif gölge */
    }

    /* Ana içeriği (fotoğrafları) müzik kutusunun altına it */
    .notebook-container {
        padding-top: 20px !important; 
    }
    
    /* Fotoğrafları telefonda ekranın tam ortasına hizala */
    .polaroid {
        margin: 30px auto !important;
        float: none !important;
        left: 0 !important;
        right: 0 !important;
        width: 85% !important; /* Telefonda fotoğraflar ekrana sığsın */
    }
}