body {
    background-color: #11151a;
}

* {
    -webkit-tap-highlight-color: transparent;
}


.header h1{
    font-family: 'Poppins', sans-serif;
    font-size: 64px;
    color: #fff;
    position: absolute;
    top: 120px;
    left: 15%;
    z-index: 3;
}

.space-light-glow {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1800px;
    height: 1500px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    color: #fff;
    position: absolute;
    top: 260px;
    width: 45%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.text p {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #e2e2e2;
    position: absolute;
    top: 400px;
    width: 40%;
    left: 15%;
    z-index: 1;
    text-align: left;
}



.forest-container {
    background-color: transparent;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    width: 30%;
    position: absolute;
    top: 300px;
    right: 5%;
    z-index: 3;
}


.scene {
    position: relative;
    width: 100%;
    height: 600px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.footer {
    position: absolute;
    top: 1200px;
    left: 0%;
}

/*RESPONSIVE*/
@media (min-width: 240px) and (max-width: 359.98px) and (orientation: portrait)  {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 0%;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 600px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.forest-container {
    background-color: transparent;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: absolute;
    top: 260px;
    right: 5%;
    z-index: 3;
}

.scene {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.mobile-footer {
    position: absolute;
    top: 1850px;
    left: 0%;
}  
}
  
@media (min-width: 360px) and (max-width: 575.98px) and (orientation: portrait) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 0%;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #e2e2e2;
    position: absolute;
    top: 920px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.forest-container {
    background-color: transparent;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: absolute;
    top: 260px;
    right: 5%;
    z-index: 3;
}

.scene {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.mobile-footer {
    position: absolute;
    top: 1700px;
    left: 0%;
}
}

@media (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait)  {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.forest-container {
    background-color: transparent;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: absolute;
    top: 260px;
    right: 5%;
    z-index: 3;
}

.scene {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.mobile-footer {
    position: absolute;
    top: 1700px;
    left: 0%;
}
}
     
@media  (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 730px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.forest-container {
    background-color: transparent;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: absolute;
    top: 260px;
    right: 5%;
    z-index: 3;
}

.scene {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.mobile-footer {
    position: absolute;
    top: 1600px;
    left: 0%;
}
}
     
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait)  {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    color: #fff;
    position: absolute;
    top: 140px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 960px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.forest-container {
    background-color: transparent;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: absolute;
    top: 260px;
    right: 5%;
    z-index: 3;
}

.scene {
    position: relative;
    width: 100%;
    height: 500px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 20px 40px;
    border: none;
    border-radius: 8px;
    font-size: 1.4em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}


.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 940px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #e2e2e2;
    position: absolute;
    top: 1090px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.mobile-footer {
    position: absolute;
    top: 1950px;
    left: 0%;
}
}

@media  (min-width: 1200px) and (max-width: 1399.98px)  {
body {
    background-color: #11151a;
}

.header h1{
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 15%;
    z-index: 3;
}

.space-light-glow {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 1200px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    color: #fff;
    position: absolute;
    top: 190px;
    width: 50%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.text p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #e2e2e2;
    position: absolute;
    top: 300px;
    width: 38%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.forest-container {
    background-color: transparent;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    width: 30%;
    position: absolute;
    top: 240px;
    right: 5%;
    z-index: 3;
}


.scene {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.footer {
    position: absolute;
    top: 1000px;
    left: 0%;
}  
}
     
@media  (min-width: 1400px) and (max-width: 1599.98px)  {
body {
    background-color: #11151a;
}

.header h1{
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 15%;
    z-index: 3;
}

.space-light-glow {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 1200px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    color: #fff;
    position: absolute;
    top: 190px;
    width: 50%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.text p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #e2e2e2;
    position: absolute;
    top: 300px;
    width: 38%;
    left: 15%;
    z-index: 1;
    text-align: left;
}

.forest-container {
    background-color: transparent;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    width: 30%;
    position: absolute;
    top: 200px;
    right: 5%;
    z-index: 3;
}


.scene {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.footer {
    position: absolute;
    top: 1000px;
    left: 0%;
}       
}
     


/* LANDSCAPE RESPONSIVE*/
@media (min-width: 500px) and (max-width: 639.98px) and (orientation: landscape) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 0%;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #e2e2e2;
    position: absolute;
    top: 920px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.forest-container {
    background-color: transparent;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: absolute;
    top: 260px;
    right: 5%;
    z-index: 3;
}

.scene {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.mobile-footer {
    position: absolute;
    top: 1700px;
    left: 0%;
}
}

@media (min-width: 640px) and (max-width: 811.98px) and (orientation: landscape) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.forest-container {
    background-color: transparent;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: absolute;
    top: 260px;
    right: 5%;
    z-index: 3;
}

.scene {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.mobile-footer {
    position: absolute;
    top: 1700px;
    left: 0%;
}
}

@media (min-width: 812px) and (max-width: 999.98px) and (orientation: landscape) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 100px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 730px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.forest-container {
    background-color: transparent;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: absolute;
    top: 260px;
    right: 5%;
    z-index: 3;
}

.scene {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}

.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    color: #fff;
    position: absolute;
    top: 800px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #e2e2e2;
    position: absolute;
    top: 890px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.mobile-footer {
    position: absolute;
    top: 1600px;
    left: 0%;
}
}

@media (min-width: 1000px) and (max-width: 1200px) and (orientation: landscape) {
body {
    background-color: #11151a;
}

.header h1{ 
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    color: #fff;
    position: absolute;
    top: 140px;
    left: 6%;
    z-index: 3;
    width: 88%;
    text-align: left;
}

.space-light-glow { 
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 960px;
    height: 1000px;
    background: radial-gradient(ellipse at right,
            rgba(0, 217, 255, 0.4),
            rgba(0, 0, 0, 0) 70%);
    filter: blur(150px);
    opacity: 0.8;
    border-radius: 50%;
    animation: glowPulse 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

.forest-container {
    background-color: transparent;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: absolute;
    top: 260px;
    right: 5%;
    z-index: 3;
}

.scene {
    position: relative;
    width: 100%;
    height: 500px;
    background: linear-gradient(to top, #c8e6c9 0%, #a5d6a7 100%); /* Hafif yeşil zemin */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #81c784; /* Çimen yeşili */
    z-index: 0;
}


/* --- GÜNCELLENMİŞ VE DAHA TATLI PANDA STİLLERİ --- */

/* Panda'nın Ana Kapsayıcısı */
.panda {
    position: absolute;
    bottom: 40px;
    left: 20%;
    transform: translateX(-50%);
    width: 100px; /* Pandayı biraz büyütelim */
    height: 120px; /* Boyunu da artıralım */
    z-index: 10; /* Bambuların üstünde olsun */
    animation: pandaIdle 5s infinite ease-in-out;
}

/* Kafa ve Vücut (Daha Yuvarlak ve Yumuşak) */
.panda .body {
    width: 80px;
    height: 85px; /* Daha dolgun bir vücut */
    background-color: #fff;
    border-radius: 50% / 60% 60% 40% 40%; /* Hafifçe armutvari şekil */
    position: absolute;
    bottom: 0;
    left: 10px;
    border: 3px solid #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    z-index: 1;
}

.panda .face {
    width: 65px; /* Daha büyük kafa */
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px; /* Baş kısmı biraz yukarı kaydırıldı */
    left: 17px;
    z-index: 3;
    border: 2px solid #000;
}

/* Kulaklar */
.panda .ear {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

.panda .ear.left { left: 5px; transform: rotate(-5deg); }
.panda .ear.right { right: 5px; transform: rotate(5deg); }

/* Gözler (Daha Sevimli İfade İçin Değişiklikler) */
.panda .eye.left {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px; 
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* Damla/Yaprak şekli */
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotate(-30deg);
    z-index: 3;
}

.panda .eye.right {
    /* Göz Halkası (Siyah Bölge) */
    width: 25px;
    height: 20px;
    background-color: #000;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
    position: absolute;
    top: 10px;
    right: 5px;
    transform: rotate(30deg);
    z-index: 3;
}

/* Gerçek Göz (Beyaz Parıltı) */
.panda .eye.left::before,
.panda .eye.right::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 5px #fff; /* Parlaklık efekti */
}


/* Burun ve Ağız */
.panda .nose {
    width: 10px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 30px; /* Yüzde konumu ayarlandı */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.panda .mouth {
    width: 15px;
    height: 5px;
    border-top: 2px solid #000;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

/* Kollar ve Bacaklar (Daha Dolgun) */
.panda .arm, .panda .leg {
    width: 30px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2; /* Kolları vücudun önünde tutalım */
}

.panda .arm.left { top: 55px; left: 0; transform: rotate(10deg); }
.panda .arm.right { top: 55px; right: 0; transform: rotate(-10deg); }

.panda .leg.left { bottom: 0; left: 10px; width: 35px; height: 30px; z-index: 0; }
.panda .leg.right { bottom: 0; right: 10px; width: 35px; height: 30px; z-index: 0; }

/* Mevcut animasyonunuzu koruyalım */
@keyframes pandaIdle {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}


/* --- MUTLU PANDA STİLLERİ --- */

/* Butona 10 kez tıklandığında devreye girer */
.panda.happy {
    /* Baş sallama (sevincini ifade etmek için) */
    animation: pandaJump 1s infinite alternate; 
}

/* Ağız: Geniş ve Gülen Bir Ağız */
.panda.happy .mouth {
    width: 20px; /* Ağzı daha genişlet */
    height: 8px; /* Daha dolgun gülümseme */
    border-top: none;
    border-bottom: 3px solid #000; /* Aşağı doğru kavisli gülümseme */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 35px; /* Konumunu biraz aşağı kaydır */
}



/* Panda Sevinç Zıplaması Animasyonu */
@keyframes pandaJump {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-15px); } /* 15px yukarı zıpla */
}

/* --- Bambu Stilleri --- */
.bamboo {
    position: absolute;
    bottom: 50px; /* Zeminin üzerinden başlar */
    left: var(--bamboo-left, 50%); /* JS ile ayarlanacak veya default */
    width: 20px;
    height: 0; /* Başlangıçta gizli veya çok kısa */
    background-color: #66bb6a; /* Bambu yeşili */
    border-radius: 0 0% 0 0;
    transition: height 1s ease-out, transform 0.5s ease-out; /* Büyüme ve sallanma */
    transform-origin: bottom center;
    z-index: 0;
    opacity: 0; /* Başlangıçta görünmez */
    animation: sway 5s infinite ease-in-out var(--bamboo-delay, 0s); /* Sallanma animasyonu */
}

.bamboo.initial {
    height: 80px;
    opacity: 1;
}

.bamboo.grown {
    height: 400px; /* Büyüdüğünde ulaşacağı yükseklik */
    opacity: 1;
}

/* Yeni bambuların büyüme animasyonu gecikmesi */
.bamboo.new {
    height: 0;
    opacity: 0;
    animation: growBamboo 1s forwards ease-out var(--bamboo-delay);
}


@keyframes growBamboo {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: 400px; /* Final yükseklik */
        opacity: 1;
    }
}

@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Bambu eklemeleri için yapraklar */
.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-color: #8bc34a; /* Daha açık yeşil yaprak */
    border-radius: 50%;
    top: 30%; /* Gövdenin ortalarına doğru */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease-in-out var(--bamboo-delay);
}

.bamboo::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 45%;
}

.bamboo.grown::before,
.bamboo.grown::after,
.bamboo.new::before,
.bamboo.new::after {
    opacity: 1;
}


/* Düğme Stili */
button {
    background-color: #4caf50; /* Yeşil düğme */
    color: white;
    padding: 20px 40px;
    border: none;
    border-radius: 8px;
    font-size: 1.4em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #388e3c; /* Daha koyu yeşil */
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

p {
    color: #424242;
    margin-top: 20px;
    font-size: 0.9em;
}


.text h1 {  
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #fff;
    position: absolute;
    top: 940px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.text p { 
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #e2e2e2;
    position: absolute;
    top: 1090px;
    width: 88%;
    left: 6%;
    z-index: 1;
    text-align: left;
}

.mobile-footer {
    position: absolute;
    top: 1950px;
    left: 0%;
}
}