/* ===== Soru-cevap (SSS) bloğu =====
   Makale/hizmet kartının zemini her iki temada da krem kâğıt olduğu için
   burada tema değişkenleri değil, bloğun kendi mürekkep renkleri kullanılır. */

.faq-list{display:grid;gap:12px;margin:20px 0 30px}

.faq-item{
  border:1px solid rgba(184,147,63,.34);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.5);
  transition:border-color .3s, box-shadow .3s;
}
.faq-item:hover{border-color:rgba(184,147,63,.6)}
.faq-item[open]{box-shadow:0 12px 30px -22px rgba(20,33,61,.55)}

/* --- soru satırı --- */
.faq-item summary.faq-q{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:15px 18px;
  margin:0;
  background:linear-gradient(135deg,#131A2C 0%,#1E2740 100%);
  color:#EEF1FA;
  font-family:'Marcellus',serif;
  font-size:1.04rem;
  line-height:1.5;
  transition:background .35s;
}
.faq-item summary.faq-q::-webkit-details-marker{display:none}
.faq-item summary.faq-q::marker{content:""}
.faq-item summary.faq-q:hover{background:linear-gradient(135deg,#182036 0%,#26314F 100%)}
.faq-item summary.faq-q:focus-visible{outline:2px solid #D9B877;outline-offset:-3px}

/* numara rozeti */
.faq-q .fq-no{
  flex:0 0 auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;
  letter-spacing:.1em;
  color:#D9B877;
  border:1px solid rgba(217,184,119,.45);
  border-radius:6px;
  padding:4px 7px;
  margin-top:3px;
  line-height:1;
}

/* soru metni + altı çizgisi */
.faq-q .fq-t{
  flex:1 1 auto;
  border-bottom:1px solid rgba(217,184,119,.38);
  padding-bottom:3px;
  transition:border-color .3s;
}
.faq-item[open] .faq-q .fq-t{border-bottom-color:rgba(217,184,119,.75)}

/* açılır ok */
.faq-q .fq-ch{
  flex:0 0 auto;
  width:18px;height:18px;
  margin-top:5px;
  position:relative;
  transition:transform .32s ease;
}
.faq-q .fq-ch::before,
.faq-q .fq-ch::after{
  content:"";position:absolute;top:8px;width:9px;height:1.6px;
  background:#D9B877;border-radius:2px;
}
.faq-q .fq-ch::before{left:1px;transform:rotate(45deg)}
.faq-q .fq-ch::after{right:1px;transform:rotate(-45deg)}
.faq-item[open] .fq-ch{transform:rotate(180deg)}

/* --- cevap --- */
.faq-a{padding:16px 19px 4px;animation:faqIn .34s ease both}
.faq-a p{margin:0 0 12px;color:#232936}
.faq-a p:last-child{margin-bottom:12px}
.faq-a ul{margin:0 0 12px}
@keyframes faqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

@media(max-width:620px){
  .faq-item summary.faq-q{font-size:.98rem;padding:14px 15px;gap:10px}
  .faq-a{padding:14px 16px 2px}
}

@media(prefers-reduced-motion:reduce){
  .faq-item summary.faq-q,.faq-q .fq-ch{transition:none}
  .faq-a{animation-duration:.01s}
}