/* =====================================================
   OZİ • YILDIZ TEPESİ
   stars.css
===================================================== */

/* ---------- SAYFA ARKA PLANI ---------- */

body{
    background:linear-gradient(180deg,#08152F 0%,#10264A 40%,#173B66 100%);
    color:#F5FBFF;
}

/* Hareketli yıldızlar */

.space-stars{
    position:fixed;
    inset:0;
    z-index:-5;
    pointer-events:none;

    background-image:
        radial-gradient(circle,#ffffff 1.5px,transparent 2px),
        radial-gradient(circle,#8BEAFF 1px,transparent 2px),
        radial-gradient(circle,#FFD86B 1px,transparent 2px);

    background-size:
        160px 160px,
        240px 240px,
        320px 320px;

    animation:spaceStars 60s linear infinite;
    opacity:.7;
}

@keyframes spaceStars{
    from{transform:translateY(0);}
    to{transform:translateY(-300px);}
}

/* Uzay parıltısı */

.space-glow{
    position:fixed;
    width:700px;
    height:700px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(79,214,255,.25),
        transparent 70%);
    left:50%;
    top:-250px;
    transform:translateX(-50%);
    filter:blur(70px);
    z-index:-4;
}

/* =====================================================
   HERO
===================================================== */

.space-hero{
    padding:100px 0 80px;
    overflow:hidden;
}

.space-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:60px;
}

.space-hero h1{
    font-size:68px;
    color:#FFFFFF;
    margin:20px 0;
    text-shadow:0 0 18px rgba(90,215,255,.4);
}

.space-hero p{
    font-size:22px;
    line-height:1.8;
    color:#DDEEFF;
    max-width:560px;
}

.space-ozi{
    display:flex;
    justify-content:center;
}

.space-ozi img{
    width:min(430px,100%);
    filter:drop-shadow(0 0 40px rgba(71,214,255,.45));
    animation:oziSpace 5s ease-in-out infinite;
}

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

/* =====================================================
   BÖLÜMLER
===================================================== */

.space-section{
    padding:110px 0;
}

.space-section.dark{
    background:linear-gradient(180deg,#09192F,#0D254A);
}

.space-section .section-title h2{
    color:#FFFFFF;
}

.space-section .section-title span{
    background:rgba(255,255,255,.08);
    color:#9EEBFF;
}

.space-section .section-title p{
    color:#D6E8FF;
}

/* =====================================================
   GEZEGEN KARTLARI
===================================================== */

.planet-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:28px;
}

.planet-card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    border-radius:30px;
    padding:30px;
    text-align:center;
    transition:.35s;
}

.planet-card:hover{
    transform:translateY(-10px);
    border-color:#6FEFFF;
    box-shadow:0 0 30px rgba(111,239,255,.25);
}

.planet{
    font-size:60px;
    margin-bottom:18px;
    animation:planetSpin 10s linear infinite;
}

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

.planet-card h3{
    color:#FFFFFF;
    font-size:28px;
    margin-bottom:10px;
}

.planet-card p{
    color:#D8E9FF;
    font-size:18px;
}

/* =====================================================
   TAKIMYILDIZLARI
===================================================== */

.constellation-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:24px;
}

.constellation-card{
    background:linear-gradient(180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03));

    border:1px solid rgba(120,220,255,.2);

    border-radius:24px;

    padding:30px;

    text-align:center;

    font-size:22px;
    font-weight:700;

    color:#FFF8CC;

    transition:.35s;
}

.constellation-card:hover{
    transform:scale(1.04);
    box-shadow:0 0 35px rgba(255,230,109,.18);
}

/* =====================================================
   AY EVRELERİ
===================================================== */

.moon-phases{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:24px;
    margin-top:40px;
}

.moon-phases div{
    background:rgba(255,255,255,.06);
    border-radius:20px;
    padding:22px 12px;
    text-align:center;
    transition:.3s;
}

.moon-phases div:hover{
    background:rgba(255,255,255,.12);
    transform:translateY(-8px);
}

.moon-phases span{
    display:block;
    margin-top:12px;
    font-size:16px;
    color:#D6E8FF;
}

/* =====================================================
   FİNAL OZİ KUTUSU
===================================================== */

.space-end{
    padding:90px 0 120px;
    background:linear-gradient(180deg,#09192F,#071221);
}

.space-end .ozi-box{
    background:linear-gradient(135deg,#245D9B,#31BEE4);
    box-shadow:0 0 40px rgba(55,208,255,.18);
}

.space-end .ozi-box img{
    width:180px;
    animation:oziSpace 5s infinite;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:900px){

    .space-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .space-hero p{
        margin:auto;
    }

    .space-ozi{
        order:-1;
    }

}

@media(max-width:600px){

    .space-hero h1{
        font-size:42px;
    }

    .space-hero p{
        font-size:18px;
    }

    .planet{
        font-size:48px;
    }

}