/* ═══════════════════════════════════════════════════════════════
   whitemodz — SSS IV  (faq.html; wm-site4.css'ten sonra)

   Tek sahne: solda başlık + yapışkan destek kartı, sağda numaralı
   akordeon. Açık soru yükselir, numarası sarıya döner, artı çarpıya.
   Cevap yüksekliği grid satırıyla (0fr → 1fr) açılır; ölçüm yok.
   faq-inline.js sözleşmesi: .faq-item / .faq-question / .faq-answer / .open
   ═══════════════════════════════════════════════════════════════ */

.fq4.s4-hero{ padding-bottom: clamp(64px, 8vw, 120px); }
.fq4 .s4-hero__bg{
  background:
    radial-gradient(720px 440px at calc(50% - 560px) 0%, rgba(255,199,0,.14), transparent 62%),
    radial-gradient(640px 520px at calc(50% + 420px) 38%, rgba(255,199,0,.06), transparent 64%);
}
.fq4-in.s4-hero__in{
  grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
  grid-template-areas: "head list" "help list";
  grid-template-rows: auto 1fr; align-items: start; gap: 30px clamp(40px, 6vw, 96px);
}
.fq4-head{ grid-area: head; }
.fq4 .fq4-head h1{ font-size: clamp(38px, 3.9vw, 56px); }
.fq4-list{ grid-area: list; }
.fq4-help{ grid-area: help; position: sticky; top: 96px; }

/* ═══ Akordeon ══════════════════════════════════════════════════ */
.fq4-list.faq-list{ gap: 12px; padding-top: 6px; }
.fq4 .faq-item.fq4-item{
  border-radius: 22px; overflow: hidden; scroll-margin-top: 96px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 70%), var(--wm-k-raise);
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.45), var(--wm-e1);
  transition: border-color var(--wm-dur-2) var(--wm-ease-out), background var(--wm-dur-2) var(--wm-ease-out), box-shadow var(--wm-dur-2) var(--wm-ease-out);
}
.fq4 .faq-item.fq4-item:hover{ border-color: rgba(255,255,255,.14); }
.fq4 .faq-item.fq4-item.open{
  border-color: rgba(255,199,0,.28);
  background: linear-gradient(180deg, rgba(255,199,0,.05), rgba(255,199,0,0) 60%), var(--wm-k-raise);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.45), 0 0 0 5px rgba(255,199,0,.05), var(--wm-e2);
}
.fq4 .fq4-item .faq-question{
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 38px; align-items: center; gap: 14px;
  width: 100%; min-height: 76px; padding: 16px 18px 16px 20px; margin: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--wm-w); font-family: var(--wm-display); font-size: 17px; line-height: 1.3; font-weight: 700;
  font-variation-settings: "wdth" 104, "wght" 700; letter-spacing: -.012em; text-transform: none;
}
.fq4 .fq4-item .faq-question:focus-visible{ outline: 2px solid var(--wm-y); outline-offset: -3px; border-radius: 22px; }
.fq4-n{
  color: var(--wm-g-dim); font-family: var(--wm-body); font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; transition: color var(--wm-dur-2) var(--wm-ease-out);
}
.fq4-q{ min-width: 0; text-wrap: pretty; }
.fq4-ic{
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--wm-g); background: rgba(255,255,255,.045); border: 1px solid var(--wm-line-2);
  transition: transform 520ms var(--wm-ease-spring), background var(--wm-dur-2) var(--wm-ease-out), color var(--wm-dur-2) var(--wm-ease-out), border-color var(--wm-dur-2) var(--wm-ease-out);
}
.fq4 .fq4-item .fq4-ic svg{  /* wm-page.css'in eski daire stilini sıfırla */
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; transform: none; transition: none;
}
.fq4-item:hover .fq4-ic{ color: var(--wm-w); border-color: rgba(255,255,255,.2); }
.fq4-item.open .fq4-n{ color: var(--wm-y); }
.fq4-item.open .fq4-ic{ transform: rotate(135deg); color: var(--wm-y); background: var(--wm-y-soft); border-color: var(--wm-y-line); }

/* Cevap: satır yüksekliğiyle aç/kapa (faq-inline.js artık max-height yazmaz) */
.fq4 .fq4-item .faq-answer{
  display: grid; grid-template-rows: 0fr; max-height: none; overflow: hidden;
  transition: grid-template-rows 520ms var(--wm-ease-out);
}
.fq4 .fq4-item.open .faq-answer{ grid-template-rows: 1fr; max-height: none; }
.fq4 .fq4-item .faq-answer-inner{
  min-height: 0; overflow: hidden; padding: 0 76px 0 78px;
  color: rgba(247,247,249,.74); font-size: 15px; line-height: 1.75;
  opacity: 0; transform: translateY(-4px); transition: opacity 360ms var(--wm-ease-out), transform 520ms var(--wm-ease-out), padding 520ms var(--wm-ease-out);
}
.fq4 .fq4-item.open .faq-answer-inner{ padding-bottom: 24px; opacity: 1; transform: none; }

/* Giriş: sorular sırayla (i18n perdesi kalkınca) */
html:not(.wm-i18n-pending) .fq4-item{ animation: s4-up 700ms var(--wm-ease-out) both; }
html:not(.wm-i18n-pending) .fq4-item:nth-child(1){ animation-delay: 120ms; }
html:not(.wm-i18n-pending) .fq4-item:nth-child(2){ animation-delay: 170ms; }
html:not(.wm-i18n-pending) .fq4-item:nth-child(3){ animation-delay: 220ms; }
html:not(.wm-i18n-pending) .fq4-item:nth-child(4){ animation-delay: 270ms; }
html:not(.wm-i18n-pending) .fq4-item:nth-child(5){ animation-delay: 320ms; }
html:not(.wm-i18n-pending) .fq4-item:nth-child(6){ animation-delay: 370ms; }
html:not(.wm-i18n-pending) .fq4-help{ animation: s4-up 760ms var(--wm-ease-out) 260ms both; }

/* ═══ Destek kartı (çift çerçeve) ═══════════════════════════════ */
.fq4-help{ padding: 6px; border-radius: 28px; background: var(--s4-shell); border: 1px solid var(--s4-shell-line); }
.fq4-help__core{
  position: relative; overflow: hidden; padding: 26px 24px 24px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 55%), var(--wm-k-raise);
  box-shadow: var(--s4-core-top);
}
.fq4-help__core::before{
  content: ""; position: absolute; right: -80px; top: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,199,0,.16), transparent);
}
.fq4-help__ic{
  position: relative; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px;
  color: var(--wm-y); background: var(--wm-y-soft); border: 1px solid var(--wm-y-line);
}
.fq4-help__ic svg{ width: 22px; height: 22px; }
.fq4-help h2{
  position: relative; margin: 0; color: var(--wm-w); font-family: var(--wm-display); font-size: 24px; line-height: 1.1;
  font-weight: 800; font-variation-settings: "wdth" 108, "wght" 800; letter-spacing: -.022em; text-transform: none;
}
.fq4-help p{ position: relative; margin: 10px 0 0; color: var(--wm-g); font-size: 14.5px; line-height: 1.6; }
.fq4-help__acts{ position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
.fq4-help__acts .s4-cta{ justify-content: space-between; }
.fq4-help__acts .s4-ghost{ justify-content: center; }

/* ═══ Duyarlı ═══════════════════════════════════════════════════ */
@media (max-width: 980px){
  .fq4-in.s4-hero__in{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "help"; grid-template-rows: auto; gap: 26px; }
  .fq4-help{ position: static; max-width: 560px; }
}
@media (max-width: 620px){
  .fq4 .fq4-item .faq-question{ grid-template-columns: 30px minmax(0, 1fr) 34px; gap: 10px; min-height: 68px; padding: 14px 14px 14px 16px; font-size: 15.5px; }
  .fq4-ic{ width: 34px; height: 34px; }
  .fq4 .fq4-item .faq-answer-inner{ padding-inline: 16px; font-size: 14.5px; }
  .fq4 .fq4-item.open .faq-answer-inner{ padding-bottom: 20px; }
}

/* ═══ Hareket hassasiyeti ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html:not(.wm-i18n-pending) .fq4-item, html:not(.wm-i18n-pending) .fq4-help{ animation: none; }
  .fq4 .fq4-item .faq-answer, .fq4 .fq4-item .faq-answer-inner, .fq4-ic{ transition: none; }
}