/* ==========================================================
   SIKÇA SORULAN SORULAR (qp-faq4) — SVG SYMBOL + FIXED PANEL
   - FontAwesome yok, sadece <svg><use/></svg>
   - İkonlar "tek renk mor" görünmezlik sorunu çözüldü
   - Panel her durumda en üstte (hero arkası bitiyor)
========================================================== */

:root{
  --qt-page-bg:#f6f7ff;
}

.qp-faq4,
.qp-faq4 *{ box-sizing:border-box; }

.qp-faq4{
  --ink:#0f172a;
  --muted:#5a638a;

  --card:#ffffff;
  --bd:#e6e9ff;

  /* platform rengi */
  --ac1: var(--qt-buy-accent, #6a7eff);
  --ac2: var(--qt-buy-accent-2, #8ea2ff);

  --radius:18px;

  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:26px 0 40px;

  background:transparent !important;

  position:relative;
  isolation:isolate;
  z-index:2;
}

/* FULL BLEED “sayfa bg” maskesi */
.qp-faq4::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  top:0;
  bottom:0;
  background:var(--qt-page-bg) !important;
  pointer-events:none;
  z-index:0;
}
.qp-faq4::after{ content:none !important; display:none !important; }

.qp-faq4 .head,
.qp-faq4 .grid{
  position:relative;
  z-index:1;
}

/* Header */
.qp-faq4 .head{
  max-width:900px;
  margin:0 auto 26px;
  padding:0 16px;
}
.qp-faq4 .head h1{
  margin:0;
  font-size:clamp(1.5rem, 3vw, 2rem);
  font-weight:900;
  background:linear-gradient(90deg,#1a2359,#3b4bd6,#1a2359);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
}
.qp-faq4 .head p{
  margin:8px 0 0;
  color:var(--muted);
  font-weight:600;
}

/* GRID */
.qp-faq4 .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:18px;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

.qp-faq4 .card{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--radius);
  padding:18px;
  cursor:pointer;

  display:flex;
  align-items:center;
  gap:14px;

  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 6px 18px rgba(24,32,64,.06);
}
.qp-faq4 .card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(24,32,64,.12);
}

.qp-faq4 .ttl{
  font-weight:800;
  font-size:1.1rem;
}

/* ==========================================================
   ICON SYSTEM (SVG)
   - Mor kutu: background gradient
   - Asıl ikon: svg.qp-ic currentColor ile çizilir
   - Büyük görünme ve renksiz görünme buradan düzeliyor
========================================================== */

.qp-faq4 .icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex-shrink:0;

  /* kutu */
  background:linear-gradient(135deg,var(--ac1),var(--ac2));
  box-shadow:0 6px 14px rgba(24,32,64,.14);

  /* ikon rengini biraz koyu yap (mora gömülmesin) */
  color:rgba(15,23,42,.86);
}

.qp-faq4 svg.qp-ic{
  width:22px;
  height:22px;
  display:block;
  flex:0 0 auto;

  /* Symbol çizimleri için */
  fill:currentColor;
  stroke:currentColor;
}

/* Bazı symbol’lar stroke ağırlıklı: daha net dursun */
.qp-faq4 svg.qp-ic path{
  vector-effect:non-scaling-stroke;
}

/* ==========================================================
   SLIDE PANEL — FIXED & TOP LAYER
========================================================== */

.qp-faq4 #faqPanel.panel{
  position:fixed !important;
  top:0 !important;
  bottom:0 !important;
  left:auto !important;

  right:calc(-1 * min(420px, 100vw)) !important;
  width:min(420px, 100vw) !important;
  height:100vh !important;

  background:#fff !important;
  border-left:1px solid var(--bd, #e6e9ff) !important;
  box-shadow:-6px 0 22px rgba(24,32,64,.12) !important;

  z-index:2147483647 !important;

  display:flex !important;
  flex-direction:column !important;

  transform:none !important;
  filter:none !important;

  transition:right .35s ease !important;
}
.qp-faq4 #faqPanel.panel.open{ right:0 !important; }

@media (max-width:640px){
  .qp-faq4 #faqPanel.panel{
    width:100vw !important;
    right:-100vw !important;
  }
  .qp-faq4 #faqPanel.panel.open{ right:0 !important; }
}

/* Panel header */
.qp-faq4 .panel-head{
  padding:18px;
  border-bottom:1px solid var(--bd);
  display:flex;
  align-items:center;
  gap:12px;
}

.qp-faq4 .panel-head .back{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(230,233,255,.9);
  background:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;

  /* buton ikonu */
  color:var(--ac1);
  box-shadow:0 6px 16px rgba(24,32,64,.08);
}
.qp-faq4 .panel-head .back svg.qp-ic{
  width:20px;
  height:20px;
  transform:rotate(180deg); /* arrow-right => arrow-left gibi */
}

.qp-faq4 .panel-head .ph-ttl{
  font-size:1.25rem;
  font-weight:900;
  color:#0f172a;
}

/* Panel body */
.qp-faq4 .panel-body{
  padding:18px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Q/A item */
.qp-faq4 .q-item{
  margin-bottom:14px;
  border:1px solid var(--bd);
  border-radius:14px;
  padding:14px;
  background:#fafbff;
}
.qp-faq4 .q-item summary{
  font-weight:800;
  cursor:pointer;
  list-style:none;
}
.qp-faq4 .q-item summary::-webkit-details-marker{ display:none; }
.qp-faq4 .q-item[open] summary{ color:var(--ac1); }

.qp-faq4 .q-item p{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.6;
  font-weight:600;
}

/* Mobil grid: 2 sütun */
@media (max-width:640px){
  .qp-faq4 .grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    padding:0 12px;
  }
  .qp-faq4 .card{
    padding:14px 10px;
    gap:10px;
    border-radius:14px;
  }
  .qp-faq4 .icon{
    width:34px;
    height:34px;
    border-radius:10px;
  }
  .qp-faq4 svg.qp-ic{
    width:16px;
    height:16px;
  }
  .qp-faq4 .ttl{
    font-size:.85rem;
    font-weight:700;
  }
}
/* ==== FAQ PANEL Z-INDEX KESİN FIX (EN ALTA) ==== */
/* qp-faq4 stacking context kilidini kaldır */
.qp-faq4{
  isolation: auto !important;
  z-index: auto !important; /* 2 yüzünden panel dışarıyla yarışamıyordu */
}

/* maske arkada kalsın */
.qp-faq4::before{ z-index: 0 !important; }
.qp-faq4 .head,
.qp-faq4 .grid{ z-index: 1 !important; }

/* panel her şeyin üstünde kalsın */
#faqPanel{
  position: fixed !important;
  z-index: 2147483647 !important;
}