.modal-background {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9998;
    animation: fadeIn 0.3s forwards;
  }
  :root {
    color-scheme: light only;
}
  .modal-box {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    background: white;
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
    opacity: 0;
    animation: modalFade 0.3s forwards;
  }

  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }


  /* Animasyonlar */
  @keyframes fadeIn {
    from { background-color: rgba(0,0,0,0); }
    to { background-color: rgba(0,0,0,0.5); }
  }

  @keyframes modalFade {
    from { opacity: 0; transform: translate(50%, -40%); }
    to { opacity: 1; transform: translate(50%, -50%); }
  }

  @keyframes fadeOut {
    from { background-color: rgba(0,0,0,0.5); }
    to { background-color: rgba(0,0,0,0); }
  }

  @keyframes modalFadeOut {
    from { opacity: 1; transform: translate(50%, -50%); }
    to { opacity: 0; transform: translate(50%, -40%); }
  }

  @media screen and (max-width: 768px) {
    @keyframes modalFade {
        from { opacity: 0; transform: translate(50%, -10%); }
        to { opacity: 1; transform: translate(50%, 0%); }
      }
      @keyframes modalFadeOut {
        from { opacity: 1; transform: translate(50%, 0); }
        to { opacity: 0; transform: translate(50%, -10%); }
      }
}
#modalBox button{
    background-color: white;
    border: 2px solid #484545; /* İnce, keskin kenarlık */
}