/* Google Font Ekleme */
@import url("https://fonts.googleapis.com/css?family=Varela+Round");

/* --------------------------------------------------
   GLOBAL STYLE – PREMIUM DARK COSMIC THEME
-------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    color: #ffffff;

    /* Yeni eklenen font + mevcut serif */
    font-family: 'Varela Round', 'Georgia', 'Times New Roman', serif;

    font-size: 16px;
    line-height: 1.7;
    
    /* Derin & Yumuşak Premium Gradient */
    background: linear-gradient(135deg,
        #050505 0%,
        #0f0f23 30%,
        #221238 60%,
        #3a1454 85%,
        #550055 100%
    );

    /* Glow efektli modern yıldız pattern */
    background-image:
      url('data:image/svg+xml;utf8,
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle opacity="0.8" fill="%23ffffff" cx="25" cy="18" r="0.9"/>
        <circle opacity="0.15" fill="%23ffffff" cx="70" cy="80" r="0.5"/>
        <circle opacity="0.4" fill="%23ffffff" cx="50" cy="50" r="0.6"/>
        <circle opacity="0.25" fill="%23ffffff" cx="15" cy="65" r="0.8"/>
        <circle opacity="0.55" fill="%23ffffff" cx="80" cy="28" r="1"/>
      </svg>');

    background-size: 38rem 38rem;
    background-blend-mode: screen;
    animation: bg-float 18s ease-in-out infinite;
}

/* Arka plan hareketi */
@keyframes bg-float {
    0%   { background-position: 0 0; }
    50%  { background-position: 80px 120px; }
    100% { background-position: 0 0; }
}


/* --------------------------------------------------
   PLANET – Yüksek kalite 3D görünüm
-------------------------------------------------- */
.planet_wraper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;

    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.8),
        0 0 80px rgba(80, 0, 130, 0.4);
}

.planet_wraper:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
        0 0 60px rgba(0, 0, 0, 0.9),
        0 0 95px rgba(150, 0, 200, 0.55);
}


/* Gezegen yüzeyi */
.planet {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;

    background: radial-gradient(circle at 30% 30%, 
        #34d3a3 0%,
        #1c8f7a 40%,
        #0d4a45 90%
    );

    animation: planet-rotate 16s linear infinite;

    box-shadow:
        inset 0 -10px 30px rgba(0, 0, 0, 0.6),
        inset 0 8px 18px rgba(255, 255, 255, 0.1),
        0 0 40px rgba(180, 230, 230, 0.4);
}

@keyframes planet-rotate {
    to { transform: rotate(360deg); }
}


/* Kraterler */
.crater {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
    filter: blur(0.5px);
}

.crater:nth-of-type(1) { top: 2rem; left: 1.5rem; width: 0.9rem; height: 0.9rem; }
.crater:nth-of-type(2) { top: -0.7rem; left: 5rem; width: 2.6rem; height: 2.6rem; }
.crater:nth-of-type(3) { top: 0.6rem; left: 2.1rem; width: 1.4rem; height: 1.4rem; }
.crater:nth-of-type(4) { top: -1.4rem; left: 3.7rem; width: 0.6rem; height: 0.6rem; }
.crater:nth-of-type(5) { top: 1.4rem; left: 3.4rem; width: 2.1rem; height: 1.6rem; }


/* Mobil uyum */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        padding: 10px;
    }

    .planet_wraper {
        width: 8rem;
        height: 8rem;
    }
}