/* FAQ Page Styles */
:root{
  --indigo:#6366f1; --indigo-dark:#4f46e5; --slate-900:#0f172a; --slate-700:#374151; --white:#fff; --muted:#6b7280;
}
html{scroll-behavior:smooth}

/* Hero */
.faq-hero{position:relative; color:#fff; padding:72px 0; overflow:hidden}
.faq-hero__bg{position:absolute; inset:0; background:linear-gradient(135deg, rgba(99,102,241,.85), rgba(79,70,229,.85)), url('../img/anasayfa-hero.webp') center/cover no-repeat; filter:saturate(1.1)}
.faq-hero__inner{position:relative; z-index:1}
.faq-hero__content{max-width:720px; margin:0 auto; text-align:center}
.faq-hero h1{font-weight:800; letter-spacing:.2px; margin:.2rem 0 1rem; font-size:clamp(1.75rem, 3.5vw, 2.4rem); line-height:1.15}
.faq-hero p{opacity:.95}
.badge--soft{display:inline-block; font-weight:700; font-size:.8rem; padding:.35rem .6rem; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3)}

/* Search */
.faq-search{position:relative; display:flex; align-items:center; gap:.5rem; margin-top:1rem; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); padding:.6rem .8rem; border-radius:12px}
.faq-search i{opacity:.9}
.faq-search input{flex:1; border:none; outline:none; background:transparent; color:#fff}
.faq-search input::placeholder{color:rgba(255,255,255,.9)}
.faq-quick-tags{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:.75rem}
.faq-quick-tags .tag{border:none; background:rgba(255,255,255,.18); color:#fff; padding:.35rem .7rem; border-radius:999px; font-weight:600; display:flex; align-items:center; gap:.35rem}
.faq-quick-tags .tag:hover{background:rgba(255,255,255,.28)}

/* Sticky Nav */
.faq-container{margin-top:28px}
.faq-nav{position:sticky; top:64px; z-index:20; background:rgba(255,255,255,.78); backdrop-filter:saturate(140%) blur(8px); border:1px solid #e5e7eb; border-radius:14px; padding:10px; box-shadow:0 6px 22px rgba(0,0,0,.06); margin-bottom:18px; transition:box-shadow .2s ease, border-color .2s ease, background-color .2s ease}
.faq-nav.is-stuck{background:rgba(255,255,255,.92); border-color:#d1d5db; box-shadow:0 10px 30px rgba(0,0,0,.10)}
.faq-nav__scroller{display:flex; gap:8px; overflow:auto; scrollbar-width:none}
.faq-nav__scroller::-webkit-scrollbar{display:none}
.chip{border:2px solid #dbeafe; background:linear-gradient(135deg,#eef2ff,#e0e7ff); color:#4338ca; font-weight:700; border-radius:999px; padding:.5rem .8rem; transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.chip:hover{background:linear-gradient(135deg,#e0e7ff,#c7d2fe); transform:translateY(-1px); box-shadow:0 6px 16px rgba(59,130,246,.18)}
.chip:focus-visible{outline:3px solid rgba(59,130,246,.45); outline-offset:2px}
.chip.is-active{background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; border-color:transparent; box-shadow:0 8px 22px rgba(59,130,246,.25)}

/* Grid */
.faq-grid{display:grid; gap:36px}
@media (min-width:768px){.faq-grid{grid-template-columns:1fr 1fr}}
@media (min-width:992px){.faq-grid{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:1200px){.faq-grid{grid-template-columns:repeat(4,1fr); gap:48px}}

/* Section */
.faq-section{background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease}
.faq-section:hover{box-shadow:0 16px 40px rgba(2,6,23,.08); border-color:#e2e8f0; transform:translateY(-2px)}
.faq-section__header{display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem}
.faq-section__header .icon{width:50px; height:50px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--bg)}
.faq-section h2{font-size:1.3rem; font-weight:800; margin:0; letter-spacing:.1px; background:transparent !important; color:var(--slate-900); padding:0}
/* Hard reset for any inherited gradient/text-fill applying dark bg */
.faq-section__header h2{
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Headings reset for sss.html structure to avoid unwanted dark/black background behind titles */
#faqContainer h3,
.category-card h4 {
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Accordion */
.accordion{display:flex; flex-direction:column; gap:12px}
.accordion-item{border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:box-shadow .15s ease, border-color .15s ease}
.accordion-button{width:100%; text-align:left; padding:16px 18px; font-weight:700; background:#fff; border:none; outline:none; cursor:pointer; transition:background-color .15s ease, color .15s ease}
.accordion-button:hover{background:#f8fafc}
.accordion-button:focus-visible{outline:3px solid rgba(99,102,241,.35); outline-offset:2px}
.accordion-button[aria-expanded="true"]{background:linear-gradient(135deg, rgba(99,102,241,.1), rgba(99,102,241,.05)); color:#4338ca}
.accordion-panel{display:none; padding:16px 18px; border-top:1px solid #eef2f7; color:var(--slate-700); line-height:1.8}
.accordion-panel.is-open{display:block; animation:fadeSlide .22s ease}
@keyframes fadeSlide{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)}}

/* Show More */
.show-more{margin-top:8px; text-align:center}
.show-more__btn{padding:10px 16px; border-radius:999px; background:linear-gradient(135deg,#eef2ff,#e0e7ff); border:1px solid #c7d2fe; color:#4338ca; font-weight:700; transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.show-more__btn:hover{background:linear-gradient(135deg,#e0e7ff,#c7d2fe); transform:translateY(-1px); box-shadow:0 10px 24px rgba(67,56,202,.18)}
.show-more__btn:focus-visible{outline:3px solid rgba(67,56,202,.35); outline-offset:2px}

/* Helpers */
.faq-item-hidden{display:none !important}
.section-hidden{display:none !important}