:root {
  --main_color: black;
  --orange: rgb(172, 98, 169);
  --text: white;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 90%; /* Daha fazla esneklik için */
  max-width: 1000px;
  min-height: 100vh; /* Ekran yüksekliğini tam olarak kapsar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Başlangıçtan hizalamayı garantiye al */
  margin: 0 auto;
  position: relative; /* Üst üste binmeyi önler */
  overflow: visible; /* Taşan öğelerin görünmesini sağlar */
}

h1 {
  background-color: var(--header);
  color: white;
  text-align: center;
  font-size: 4rem;
  padding: 3rem 0;
}

.faq {
  background-color: transparent;
  border: 2px solid #cdbac8;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
  position: relative;
  overflow: visible; /* Taşan içerikleri gösterir */
}

.faq h2 {
  font-size: 3rem;
  color: var(--header);
  font-weight: bold;
}

.faq p {
  font-size: 2rem;
  word-spacing: 1.5;
  letter-spacing: .3px;
  display: none;
  color: var(--text);
  margin-top: 1rem;
}

.faq.active p {
  display: block;
}

.faq.active h2 {
  color: var(--orange);
}

.faq.active {
  background-color: white;
  color: black;
  
}

.faq.active h2{
  color:black;
  font-size:2.5rem;
}
.faq.active p {
  color: #222;
  font-size:2rem;
}

.btn {
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 2rem;
  color: rgb(172, 98, 169);
  position: absolute;
  top: 18px;
  right: 20px;
  cursor: pointer;
}

.faq button i.fa-chevron-up {
  display: none;
}

.faq.active button i.fa-chevron-down {
  display: none;
}

.faq.active button i.fa-chevron-up {
  display: block;
  color: var(--orange);
}

.faq::before,
.faq::after {
  font-family: 'Font Awesome 6 Free';
  font-size: 10rem;
  position: absolute;
  top: 10px;
  left: 10px;
  color: var(--bg_one);
  opacity: .3;
  z-index: -1;
  display: none;
}

.faq::before {
  color: var(--bg_two);
  top: -30px;
  left: -30px;
  transform: rotateY(180deg);
}

.faq.active::before,
.faq.active::after {
  display: block;
}

@media (max-width: 480px) {
  .container {
    width: 100%;  /* Ekran boyutu daha da küçüldükçe container tam genişlikte olacak */
  }

  h1 {
    font-size: 2rem;  /* Başlık font boyutu küçültüldü */
  }

  .faq h2 {
    font-size: 1.4rem;  /* Başlık font boyutu küçültüldü */
  }

  .faq p {
    font-size: 1rem;  /* Paragraf font boyutu küçültüldü */
  }

  .faq.active h2 {
    font-size: 1.4rem;  /* Başlık boyutu aktif olduğunda daha küçük */
  }

  .faq.active p {
    font-size: 1rem;  /* Paragraf boyutu aktif olduğunda daha küçük */
  }

  .btn {
    font-size: 1.4rem;  /* Button font boyutu küçültüldü */
    top: 5px;  /* Button'un yukarıdan mesafesi azaltıldı */
    right: 5px;  /* Button'un sağdan mesafesi azaltıldı */
  }

  .faq::before,
  .faq::after {
    font-size: 4rem;  /* İkon boyutu daha da küçültüldü */
  }
}