@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,700&display=swap');

    :root {
      --solar-atolye-duration: 0.5s;
      --solar-atolye-ease: ease-in-out;
      --solar-atolye-carousel-speed: 20s; /* Dairesel dönüş hızı */
    }

    .solar-system-atolye * {
      box-sizing: border-box;
      position: relative;
    }

    .solar-system-atolye {
      background: white; /* Arka plan beyaz */
      color: black; /* Yazılar siyah */
      font-family: 'DM Sans', sans-serif;
      width: 100%;
      padding: 2rem 0;
      text-align: center;
    }

    .solar-system-atolye img {
      max-width: 100%;
    }

    #solar-atolye-app {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Yarım Dairesel Navigasyon (Carousel) */
    .solar-atolye-nav {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 2rem;
      overflow: hidden;
      height: 150px; /* Yarım daire için yüksekliği sınırlıyoruz */
    }

    .solar-atolye-nav-carousel {
      position: relative;
      width: 300px;
      height: 300px;
      clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); /* Üst yarım daireyi gösterir */
    }

    .solar-atolye-nav-items {
      position: absolute;
      width: 100%;
      height: 100%;
      animation: solar-atolye-rotate var(--solar-atolye-carousel-speed) linear infinite;
    }

    @keyframes solar-atolye-rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .solar-atolye-nav-item {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 1rem;
      font-weight: 500;
      text-transform: uppercase;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity var(--solar-atolye-duration) var(--solar-atolye-ease);
      transform-origin: center center;
    }

    .solar-atolye-nav-item:hover,
    .solar-atolye-nav-item.active {
      opacity: 1;
      font-weight: 700;
    }

    /* Gezegen Görselleri */
    .solar-atolye-planet {
      display: none;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    .solar-atolye-planet[data-active] {
      display: block;
    }

    .solar-atolye-planet-image {
      margin: 0;
      width: 100%;
      opacity: 0;
      transition: opacity var(--solar-atolye-duration) var(--solar-atolye-ease);
    }

    .solar-atolye-planet[data-active] .solar-atolye-planet-image {
      opacity: 1;
    }

    .solar-atolye-planet-image img {
      width: 100%;
      height: auto;
      border-radius: 10px;
    }