:root {
    --strawberry-red: #FC5A8D;
    --strawberry-red-hover: #E53939;
    --leaf-green: #8CB360;
    --leaf-green-hover: #4F6D3A;
    --petal-pink: #FC9FB1;
    --cream-background: #FFFACD;
    --soft-white: #FFFFFF;
    --berry-dark: #2D0A14;
}

/* ============================================
   TEMEL STİLLER
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: #fff9fa;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1,
h2,
h3,
.font-playful {
    font-family: 'Baloo 2', cursive;
}

/* ============================================
   NAVBAR STİLLERİ
   ============================================ */
.glass-morphism {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Navbar için güvenli alan (notch, status bar vb.) */
@supports (padding-top: env(safe-area-inset-top)) {
    nav.fixed {
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }
}

/* ============================================
   ANİMASYONLAR
   ============================================ */
.squishy {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.squishy:hover {
    transform: scale(1.05);
}

/* Mobil cihazlarda hover efektlerini azalt */
@media (hover: none) {
    .squishy:hover {
        transform: scale(1.02);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

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

@keyframes bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

/* ============================================
   RENK YARDIMCI SINIFLARI
   ============================================ */
.bg-strawberry {
    background-color: var(--strawberry-red);
}

.bg-leaf {
    background-color: var(--leaf-green);
}

.text-strawberry {
    color: var(--strawberry-red);
}

/* ============================================
   MOBİL MENÜ STİLLERİ
   ============================================ */
#mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Tam ekran kaplama garantisi */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#mobile-menu.hidden {
    display: none !important;
}

/* Mobil menü görünür olduğunda */
#mobile-menu:not(.hidden) {
    display: block;
}

/* Mobil menü açıkken body scroll engelle */
body.menu-open {
    overflow: hidden !important;
    /* position: fixed kaldırıldı - scroll pozisyonunu bozuyordu */
}

/* Mobil menü içerik ortalama */
#mobile-menu > div {
    min-height: 100%;
}

/* ============================================
   LIGHTBOX STİLLERİ
   ============================================ */
#lightbox {
    display: none;
}

#lightbox:not(.hidden) {
    display: block;
}

/* Lightbox resmi ortalama */
#lightbox > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobil lightbox düzenlemeleri */
@media (max-width: 640px) {
    #lightbox img {
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 6rem);
        border-radius: 0.5rem;
    }
    
    #lightbox button {
        top: 0.5rem;
        right: 0.5rem;
    }
}

/* ============================================
   RESPONSİVE YARDIMCI STİLLER
   ============================================ */

/* Çok küçük ekranlar (320px altı) */
@media (max-width: 320px) {
    nav .text-base {
        font-size: 0.875rem;
    }
    
    nav .w-8 {
        width: 1.75rem;
        height: 1.75rem;
    }
}

/* Küçük mobil (320px - 480px) */
@media (min-width: 320px) and (max-width: 480px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Tablet ve küçük laptop (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    nav .gap-8 {
        gap: 1rem;
    }
}

/* Touch cihazlar için daha büyük tıklanabilir alanlar */
@media (pointer: coarse) {
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }
    
    #mobile-menu a {
        padding: 0.75rem 1rem;
    }
}