/* ==========================================================================
   SSS sayfası (sss-*). v2-sss (details/summary) üstüne: sol yapışkan grup gezintisi + gruplanmış sorular + arama.
   ========================================================================== */

.sss-duzen{display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start}
.sss-yan{position:sticky; top:calc(var(--ust-yuk) + 24px); display:grid; gap:20px; min-width:0}
.sss-gezinti{min-width:0}
.sss-gezinti ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.sss-gezinti a{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:0 14px; border-radius:12px;
  font-weight:650; font-size:.95rem; color:var(--gri); text-decoration:none; border:1px solid transparent; transition:background-color .2s,color .2s;
}
.sss-gezinti a small{font:700 .72rem/1 var(--font-baslik); padding:4px 8px; border-radius:99px; background:#E9EEF6; color:var(--gri); font-variant-numeric:tabular-nums}
.sss-gezinti a:hover{background:var(--zemin); color:var(--lac); text-decoration:none}
.sss-gezinti a.aktif{background:#fff; color:var(--lac); border-color:var(--cizgi); box-shadow:var(--v2-golge-1)}
.sss-gezinti a.aktif small{background:var(--lac); color:#fff}

.sss-ara{display:grid; gap:8px; padding:16px; border-radius:16px; background:var(--zemin); border:1px solid var(--cizgi-2)}
.sss-ara label{font:700 .74rem/1 var(--font-baslik); letter-spacing:.1em; text-transform:uppercase; color:var(--gri)}
.sss-ara-dugmeler{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.sss-ara-dugmeler .dugme{flex:1 1 auto; padding:0 12px; font-size:.85rem}

.sss-icerik{display:grid; gap:clamp(40px,5vw,64px); min-width:0}
.sss-durum{margin:0; font-size:.92rem; font-weight:600; color:var(--gri)}
.sss-grup{scroll-margin-top:calc(var(--ust-yuk) + 24px)}
.sss-grup[hidden],.sss-icerik details[hidden]{display:none !important}
.sss-grup-ust{display:flex; align-items:center; gap:16px; margin-bottom:20px}
.sss-grup-ust h2{margin:0; font-size:clamp(1.35rem,2.3vw,1.75rem)}
.sss-grup-ust p{margin:2px 0 0; font-size:.95rem; color:var(--gri)}
.sss-icerik .v2-sss{max-width:none; margin:0}
.sss-icerik .v2-sss details{scroll-margin-top:calc(var(--ust-yuk) + 20px)}
.sss-icerik .v2-sss details:target{border-color:var(--baglanti); box-shadow:0 0 0 3px rgba(28,107,208,.14)}
.sss-icerik .v2-sss-cevap p{margin:0}
.sss-icerik .v2-sss-cevap a{font-weight:650}
.sss-bos{margin:0; padding:40px 24px; text-align:center; border:1px dashed #BCC8DC; border-radius:18px; color:var(--gri)}

/* cevap bulamadınız mı */
.sss-yanit{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px 24px; align-items:center; padding:clamp(22px,3vw,34px); border-radius:22px; background:#fff; border:1px solid var(--cizgi); box-shadow:var(--v2-golge-1)}
.sss-yanit h2{margin:0 0 .25em; font-size:clamp(1.25rem,2vw,1.55rem)}
.sss-yanit p{margin:0; color:var(--gri); max-width:56ch}

@media (max-width:980px){
  .sss-duzen{grid-template-columns:minmax(0,1fr)}
  .sss-yan{position:static; gap:14px}
  /* grup gezintisi: yatay kayan çipler (data-spy aktif olanı görünür tutar) */
  .sss-gezinti{position:sticky; top:var(--ust-yuk); z-index:40; margin-inline:calc(var(--gutter) * -1); padding:8px var(--gutter); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--cizgi)}
  .sss-gezinti ul{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none}
  .sss-gezinti ul::-webkit-scrollbar{display:none}
  .sss-gezinti a{white-space:nowrap; min-height:40px; border-color:var(--cizgi); background:#fff}
  .sss-gezinti a small{display:none}
  .sss-grup,.sss-icerik .v2-sss details{scroll-margin-top:calc(var(--ust-yuk) + 64px)}
}
@media (max-width:720px){
  .sss-yanit{grid-template-columns:minmax(0,1fr)}
  .sss-yanit .dugme-sira .dugme{flex:1 1 100%}
}
@media (max-width:480px){
  .v2-sss summary{padding:16px 18px; font-size:.98rem}
  .v2-sss .v2-sss-cevap{padding:0 18px 18px}
}