/* ==========================================================
   SIKÇA SORULAN SORULAR (qp-faq4) — SLIDE PANEL SAĞDA (FINAL)
   Sorun: Aşağıdaki eski blokta `.qp-faq4 .panel{ position:relative; }`
          gibi bir override paneli akışa sokup “alta atıyordu”.
   Çözüm: Maskeyi koruyoruz ama panelin position:fixed yapısını ASLA bozmayız.
========================================================== */

:root{
  /* Sayfanın gerçek arka planı neyse burası aynı olmalı */
  --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;

  /* dış boyama kapalı */
  background:transparent !important;

  position:relative;
  isolation:isolate;
  z-index:2; /* alttaki bleed’lerin üstünde kalsın */
}

/* FULL BLEED “sayfa bg” maskesi (SSS dış boyama yerine) */
.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;
}

/* ekstra glow/pseudo kesin kapalı */
.qp-faq4::after{
  content:none !important;
  display:none !important;
}

/* içerik maskenin üstünde */
.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 .icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;

  color:#fff;
  font-size:22px;
  flex-shrink:0;

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

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

/* ==========================================================
   SLIDE PANEL (SAĞDAN AÇILIR) — ÖNEMLİ: position:fixed KALACAK
========================================================== */

.qp-faq4 .panel{
  position:fixed;             /* ✅ sağ panel mutlaka fixed */
  top:0;
  right:-100%;
  width:420px;
  height:100%;

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

  transition:right .35s ease;
  z-index:99999;              /* header vs üstünde */
  display:flex;
  flex-direction:column;
}

.qp-faq4 .panel.open{ right:0; }

@media (max-width:640px){
  .qp-faq4 .panel{
    width:100%;
    right:-100%;
  }
}

/* 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{
  font-size:20px;
  cursor:pointer;
  color:var(--ac1);
}
.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 stabil */
@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;
    font-size:16px;
    border-radius:10px;
  }
  .qp-faq4 .ttl{
    font-size:.85rem;
    font-weight:700;
  }
}

/* ==========================================================
   FAQ PANEL — HARD FIX (EN ALTA KOY)
   Amaç: Başka CSS'ler paneli ezse bile sağdan fixed açılması.
========================================================== */

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

  /* Soldan gelen ezmeleri iptal et */
  left: auto !important;
  margin-left: 0 !important;

  /* Sağdan aç */
  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; /* her şeyin üstüne */
  display: flex !important;
  flex-direction: column !important;

  /* kayma/itme yapan şeyleri engelle */
  transform: none !important;
  filter: none !important;
  contain: layout paint !important;

  transition: right .35s ease !important;
}

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

/* Mobil: zaten width:100vw olduğu için ekstra garanti */
@media (max-width: 640px){
  .qp-faq4 #faqPanel.panel{
    width: 100vw !important;
    right: -100vw !important;
  }
  .qp-faq4 #faqPanel.panel.open{
    right: 0 !important;
  }
}