/**/
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto:wght@400;700&display=swap');

  header {
      height: 18vh; /* Header yüksekliği */
    text-align: center;
    padding: 50px 20px 40px;
    /*background: linear-gradient(180deg, #004d7a 0%, #2a5298 40%, #665191 75%, #003f5c 100%);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);*/
  }

  header h1 {   
    font-family: 'Pacifico', cursive;
    font-size: 3.5rem;
    margin: 0;
    letter-spacing: 3px;
    color: #00bcd4;
  }

  header p {
    font-size: 1.2rem;
    margin-top: 5px;
    font-style: italic;
    color: #a7ffeb;
  }

  /* Responsive */
  @media (max-width: 600px) {
    header h1 {
      font-size: 2.8rem;
    }
    main {
      margin: 20px 15px 40px;
      padding: 25px 20px;
    }
  }

  /***/
html, body {
    margin:0; padding:0; height:100%;
    background: linear-gradient(to bottom, #0b1d3a 0%, #5fa8f2 80%);
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    color: #e0f7fa;
  }
  body {
    position: relative;
    height: 100vh;
  }

/* Büyük yıldızlar */
  .big-star {
    position: absolute;
    width: 30px;  /* %50 küçültüldü */
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
     filter: drop-shadow(0 0 8px rgba(255,255,220,1));
  animation: glow 3s ease-in-out infinite;
    transform: translate(-50%, -50%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="7" fill="%23fff9d9"/><path fill="%23fff9d9" d="M32 2 L36 28 L32 26 L28 28 Z"/><path fill="%23fff9d9" d="M62 32 L36 36 L38 32 L36 28 Z"/><path fill="%23fff9d9" d="M32 62 L28 36 L32 38 L36 36 Z"/><path fill="%23fff9d9" d="M2 32 L28 28 L26 32 L28 36 Z"/></svg>');
  }

  /* Küçük yıldızlar */
  .small-star {
    position: absolute;
    background: radial-gradient(circle, #fff9d9 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.6;
  filter: drop-shadow(0 0 3px rgba(255,255,220,0.9));
  }
  /* small %30 küçültüldü */
  .small-star.small {
    width: 3.7px;   /* önce 4px idi */
    height: 3.7px;
  }
  /* medium %50 küçültüldü */
  .small-star.medium {
    width: 5.4px;   /* önce 7px idi */
    height: 5.4px;
  }
  /* large (küçük yıldızların büyükleri) kaldırıldı, çünkü medium zaten var */

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,255,220,1)); opacity: 1; }
  50% { filter: drop-shadow(0 0 20px rgba(255,255,220,1)); opacity: 0.6; }
}