/* ==========================================================================
   Merak Edilenler — tüm sayfalardan derlenen tek soru listesi.
   İki sütunlu kart: solda kategori menüsü, sağda başlık + arama + akordeon.
   Akordeon ve arama kutusu paylaşılan .faq__* sınıflarını kullanır
   (styles: ['faq'] ile yüklenir).
   ========================================================================== */

.sslist {
  background: var(--bg);
}

/* Equal padding top and bottom — the card is the section's only content, so
   matching them is what centres it between the hero and the CTA below. */
.sslist__inner {
  padding-top: 72px;
  padding-bottom: 72px;
  max-width: 1080px;
}

/* Fixed height so the questions scroll inside the card instead of stretching
   the page. It is the card and not the list that is pinned: the list is the
   only part that flexes, so the card stays the same size whether the intro
   block above it is showing or a category has hidden it. */
.sslist__card {
  display: flex;
  align-items: stretch;
  height: clamp(600px, calc(100vh - 220px), 720px);
  background: var(--bg-tint);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  overflow: hidden;
}

/* --- sol: kategori menüsü ------------------------------------------------- */
/* Never scrolls: the card's min height below is set so all 12 rows fit. If a
   category is ever added, raise that min or these rows start getting clipped. */
.sslist__side {
  flex: none;
  width: 268px;
  padding: 22px 16px;
  border-right: 1px solid var(--line-soft);
}

.sslist__side-title {
  padding: 0 8px;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.sslist__cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sslist__cat {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Overrides the site-wide icon-collapse rule (see globals.css). */
.sslist__cat-icon svg {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

.sslist__cat-icon {
  display: flex;
  flex: none;
  color: var(--muted-2);
  transition: color .15s ease;
}

.sslist__cat-label {
  flex: 1;
  min-width: 0;
}

.sslist__cat:hover {
  background: var(--white);
  color: var(--ink);
}

/* Raised "pressed out of the surface" look from the reference design: a warm
   drop shadow below-right plus white highlights above-left. */
.sslist__cat.is-active {
  background: var(--white);
  border-color: var(--line-soft);
  color: var(--ink);
  box-shadow:
    18px 26px 40px -18px rgba(209, 217, 230, .85),
    10px 12px 18px -8px rgba(209, 217, 230, .45),
    -14px -12px 28px 0 rgba(255, 255, 255, .9),
    -6px -8px 14px 0 rgba(255, 255, 255, .7);
}

.sslist__cat.is-active .sslist__cat-icon {
  color: var(--indigo);
}

/* --- sağ: başlık, arama, liste -------------------------------------------- */
.sslist__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 34px;
  background: var(--white);
}

.sslist__main-head {
  flex: none;
  margin-bottom: 18px;
}

.sslist__main-title {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sslist__main-desc {
  margin: 0;
  font-size: 14px;
  color: var(--muted-2);
}

.sslist__main .faq__search {
  flex: none;
  margin: 0 0 22px;
  max-width: none;
}

/* The only part that flexes, so it absorbs whatever the header leaves.
   overscroll-behavior stops a flick at the end of the list from carrying on
   into the page scroll, which is the whole point of boxing it in. */
.sslist__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.sslist__list::-webkit-scrollbar {
  width: 8px;
}

.sslist__list::-webkit-scrollbar-thumb {
  border-radius: var(--r-pill);
  background: var(--line-3);
}

.sslist__list::-webkit-scrollbar-thumb:hover {
  background: var(--muted-3);
}

/* Picking a category answers "which questions am I looking at" by itself, so
   the intro copy and the search box only earn their space on the full list. */
.sslist__main[data-view="cat"] .sslist__main-head,
.sslist__main[data-view="cat"] .faq__search {
  display: none;
}

/* Each question becomes its own card, unlike the underlined rows the shared
   .faq__item renders inside a page section. */
.sslist__list .faq__item {
  padding: 0;
  margin-bottom: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--white);
  transition: border-color .15s ease;
}

.sslist__list .faq__item:hover {
  border-color: var(--line-3);
}

.sslist__list .faq__item[data-open="true"] {
  border-color: var(--line-3);
}

.sslist__list .faq__q {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 15px 16px;
}

.sslist__list .faq__a-inner {
  padding: 0 16px 16px;
}

/* The tag only earns its place when the list mixes categories — while one
   category is selected every row would repeat the same word. */
.sslist__list[data-showtags="false"] .faq__cattag {
  display: none;
}

.sslist__list .faq__cattag {
  margin: 14px 16px 0;
}

.sslist__empty {
  display: none;
  text-align: center;
  color: var(--muted-2);
  font-size: 15px;
  padding: 32px 0;
}

.sslist__empty:not([hidden]) {
  display: block;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .sslist__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .sslist__card {
    flex-direction: column;
    height: calc(100vh - 170px);
    min-height: 420px;
    border-radius: 18px;
  }

  /* Horizontal scroller on phones — a 12-row vertical menu would push the
     questions themselves off the first screen. */
  .sslist__side {
    width: auto;
    padding: 16px 0 14px;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
  }

  .sslist__side-title {
    padding: 0 16px;
  }

  .sslist__cats {
    flex-direction: row;
    gap: 8px;
    padding: 2px 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sslist__cats::-webkit-scrollbar {
    display: none;
  }

  .sslist__cat {
    width: auto;
    flex: none;
    padding: 9px 14px;
    border-color: var(--line-soft);
    background: var(--white);
    border-radius: var(--r-pill);
    font-size: 13.5px;
    white-space: nowrap;
  }

  .sslist__cat.is-active {
    background: var(--indigo);
    border-color: var(--indigo);
    color: var(--white);
    box-shadow: none;
  }

  .sslist__cat.is-active .sslist__cat-icon {
    color: var(--white);
  }

  .sslist__main {
    padding: 22px 16px 26px;
  }

  .sslist__main-title {
    font-size: 20px;
  }
}