/* Sık sorulanlar (sss.html): yalnız ortak kitte olmayan yerleşim. Tüm sınıflar "ss-" önekli. */

/* ——— Arama ve konu süzgeci (JS yoksa gizli; o durumda tüm sorular açıkta) ——— */
html:not(.js) .ss-arac { display: none; }
.ss-arac { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 48rem; }

.ss-ara { position: relative; }
.ss-ara__alan {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 3.25rem; margin: 0;
  padding: .7rem 3.4rem .7rem 3.15rem;
  font: inherit; font-size: 1.0625rem; line-height: 1.3; color: var(--metin);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  transition: border-color .25s, background-color .25s;
}
.ss-ara__alan::placeholder { color: var(--sis); opacity: 1; }
.ss-ara__alan:hover { border-color: rgba(127, 214, 255, .6); }
.ss-ara__alan:focus { border-color: var(--altin); background: rgba(255, 255, 255, .08); }
.ss-ara__alan:focus-visible { outline: 3px solid var(--altin); outline-offset: 3px; }
.ss-ara__alan::-webkit-search-cancel-button,
.ss-ara__alan::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.ss-ara__ikon {
  position: absolute; left: 1.15rem; top: 50%; translate: 0 -50%; width: 1.25rem; height: 1.25rem;
  fill: none; stroke: var(--buz); stroke-width: 1.6; stroke-linecap: round; pointer-events: none;
}
.ss-ara__ikon * { vector-effect: non-scaling-stroke; }
.ss-ara__temizle {
  position: absolute; right: .25rem; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--sis); cursor: pointer;
  transition: color .2s, background-color .2s;
}
.ss-ara__temizle[hidden] { display: none; }
.ss-ara__temizle:hover { color: var(--metin); background: rgba(255, 255, 255, .08); }
.ss-ara__temizle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ss-ara__temizle svg * { vector-effect: non-scaling-stroke; }

.ss-etiketler .etiket { min-height: 2.75rem; padding: .4rem 1.05rem; font-size: .95rem; cursor: pointer; }
.ss-etiketler .etiket:not([aria-pressed="true"]):hover { border-color: rgba(127, 214, 255, .6); }
.ss-sayi { margin: 0; min-height: 1.5em; font-size: .95rem; color: var(--buz); }

/* ——— Demo notu ve boş sonuç ——— */
.ss-ust .not { margin: 0 0 1rem; }
.ss-bos { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ss-bos p { color: var(--metin); }
.ss-bos__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; }
.ss-bos__eylem .bag, .ss-diger__bag { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ——— Soru grupları: ana sayfadaki .sss düzeni, daha sık aralık ve daha küçük başlık ——— */
.ss-grup { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.ss-grup .baslik { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem); }
.ss-grup__bas { position: sticky; top: 6.25rem; }
.ss-grup details p + p { margin-top: -.45rem; }
.ss-grup details .demo-etiket { margin-right: .45rem; vertical-align: .1em; }

/* ——— "Sorunuz burada yok mu?" kutusu ——— */
.ss-diger-bolum { padding-block: clamp(2.5rem, 5vw, 4rem); }
.ss-diger {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2.5rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
}
.ss-diger h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.ss-diger p { margin: 0; }

@media (max-width: 60rem) {
  .ss-grup__bas { position: static; }
}
@media (max-width: 40rem) {
  .ss-diger { grid-template-columns: minmax(0, 1fr); }
  .ss-bos__eylem .dugme { width: 100%; }
}