/* Atur tampilan dasar halaman */
    body {
      background: linear-gradient(180deg, #1b2730, #090a0f, #1b2730);
      margin: 0;
      padding: 0;
      overflow: auto;
      display: flex;
      justify-content: center;
      align-content: center;
      height: 100vh;
      width: 100vw;
    }
    
    /* Container untuk bintang-bintang */
    .stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
    }
    .star {
      position: absolute;
      background: #fff;
      border-radius: 50%;
    }
    @keyframes blink {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }
    @keyframes moveStar {
      from { transform: translateX(0); }
      to { transform: translateX(20px); }
    }
    
    /* Container scene dengan perspektif agar tampak 3D */
    .scene {
      position: relative;
      width: 100vw;
      height: 100vh;
      perspective: 1200px;
    }
    /* Container sistem tata surya, diberi rotasi pada sumbu X untuk sudut samping */
    .system {
      position: relative;
      width: 800px;
      height: 800px;
      transform: rotateX(60deg);
      transform-style: preserve-3d;
    }
    
    /* Matahari */
    .sun {
      position: absolute;
      width: 80px;
      height: 80px;
      background: radial-gradient(circle, #ff0, #fc0);
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 25px #ff0;
    }
    
    /* Orbit (jalur lintasan) */
    .mer-path, .ven-path, .ear-path, .mar-path, .jup-path,
    .sat-path, .ura-path, .nep-path, .plu-path {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px dashed rgba(255,255,255,0.2);
      border-radius: 50%;
    }
    .mer-path { width: 120px; height: 120px; }
    .ven-path { width: 180px; height: 180px; }
    .ear-path { width: 240px; height: 240px; }
    .mar-path { width: 300px; height: 300px; }
    .jup-path { width: 400px; height: 400px; }
    .sat-path { width: 500px; height: 500px; }
    .ura-path { width: 600px; height: 600px; }
    .nep-path { width: 700px; height: 700px; }
    .plu-path { width: 800px; height: 800px; }
    
    /* Gaya untuk planet-planet */
    .mer {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #aaa;
      border-radius: 50%;
      box-shadow: 0 0 5px #fff;
    }
    .ven {
      position: absolute;
      width: 10px;
      height: 10px;
      background: radial-gradient(circle, #ec7, #fb7);
      border-radius: 50%;
      box-shadow: 0 0 5px #ec7;
    }
    .ear {
      position: absolute;
      width: 12px;
      height: 12px;
      background: radial-gradient(circle, #2af, #4ad);
      border-radius: 50%;
      box-shadow: 0 0 5px #2af;
    }
    /* Bulan Bumi */
    .lune,
    /* Bulan-bulan Mars */
    .pho, .dem,
    /* Bulan-bulan Jupiter */
    .jove {
      position: absolute;
      width: 4px;
      height: 4px;
      background: radial-gradient(circle, #ff0, #fc0);
      border-radius: 50%;
      box-shadow: 0 0 3px #ff0;
    }
    .mar {
      position: absolute;
      width: 15px;
      height: 15px;
      background: radial-gradient(circle, #d14, #b00);
      border-radius: 50%;
      box-shadow: 0 0 5px #d14;
    }

    .jup {
      position: absolute;
      width: 20px;
      height: 20px;
      background: radial-gradient(circle, #d4a373, #fa8);
      border-radius: 50%;
      box-shadow: 0 0 5px #d4a373;
    }
    .sat {
      position: absolute;
      width: 16px;
      height: 16px;
      background: radial-gradient(circle, #fdb, #edb);
      border-radius: 50%;
      box-shadow: 0 0 5px #fdb;
    }
    /* Cincin Saturnus */
    .f-ring, .a-ring, .b-ring, .c-ring {
      position: absolute;
      border: 1px solid #fdb;
      border-radius: 50%;
      box-shadow: 0 0 5px #fca;
    }
    .f-ring {
      width: 24px;
      height: 24px;
      top: -4px;
      left: -4px;
    }
    .a-ring {
      width: 28px;
      height: 28px;
      top: -6px;
      left: -6px;
    }
    .b-ring {
      width: 32px;
      height: 32px;
      top: -8px;
      left: -8px;
    }
    .c-ring {
      width: 36px;
      height: 36px;
      top: -10px;
      left: -10px;
    }
    .ura {
      position: absolute;
      width: 14px;
      height: 14px;
      background: radial-gradient(circle, #7ff, #3ff);
      border-radius: 50%;
      box-shadow: 0 0 5px #7ff;
    }
    .e-ring {
      position: absolute;
      border: 1px solid #7ff;
      border-radius: 50%;
      box-shadow: 0 0 5px #7ff;
      width: 20px;
      height: 20px;
      top: -3px;
      left: -3px;
    }
    .nep {
      position: absolute;
      width: 14px;
      height: 14px;
      background: radial-gradient(circle, #46e, #46a);
      border-radius: 50%;
      box-shadow: 0 0 5px #46e;
    }

    .plu {
      position: absolute;
      width: 6px;
      height: 6px;
      background: radial-gradient(circle, #a52, #a43);
      border-radius: 50%;
      box-shadow: 0 0 5px #a52;
    }