@layer pages {
  /* — Sade hero — */
  .sss-hero{position:relative;background:var(--bb-grad-hero);color:var(--bb-on-dark);overflow:hidden}
  /* tek yumuşak altın hâle — kapsayıcı overflow:hidden içinde, taşma yok */
  .sss-hero::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;
    background:radial-gradient(circle,rgba(201,162,75,.14),transparent 70%);top:-200px;right:-140px;filter:blur(24px);pointer-events:none}
  /* ince altın taban çizgisi — koyu hero'yu açık bölüme bağlar */
  .sss-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--bb-border-gold),transparent)}
  .sss-hero .bb-container{position:relative;padding-block:clamp(48px,7vh,92px);max-width:720px}
  .sss-hero h1{font-family:var(--bb-font-display);font-weight:var(--bb-fw-display);
    font-size:var(--bb-display-m);line-height:var(--bb-lh-tight);
    letter-spacing:var(--bb-ls-display);margin:0 0 var(--bb-4)}
  .sss-hero p{color:var(--bb-on-dark-dim);max-width:60ch;font-size:var(--bb-text-l);line-height:var(--bb-lh-body);margin:0}

  /* — İçerik genişliği: tek sütun, okunabilir kolon — */
  .sss-wrap{max-width:780px}

  /* — Kategori bloğu — */
  .sss-grup + .sss-grup{margin-top:var(--bb-9)}
  .sss-grup__head{margin-bottom:var(--bb-3)}
  .sss-grup__t{font-family:var(--bb-font-display);font-weight:var(--bb-fw-display);
    font-size:var(--bb-display-s);letter-spacing:var(--bb-ls-display);
    color:var(--bb-cacao-700);line-height:var(--bb-lh-snug);margin:0;overflow-wrap:anywhere}
  .sss-grup__n{font-size:var(--bb-text-s);color:var(--bb-on-light-dim);margin:var(--bb-1) 0 0;line-height:var(--bb-lh-snug)}

  /* — Akordeon yüzeyi (component bb-acc'i bozmadan rafine eder) — */
  .sss-grup .bb-acc{border-bottom:1px solid var(--bb-border)}
  .sss-grup .bb-acc:first-of-type{border-top:1px solid var(--bb-border)}
  .sss-grup .bb-acc__q{transition:color var(--bb-dur-fast) var(--bb-ease-standard)}
  .sss-grup .bb-acc.open .bb-acc__q{color:var(--bb-teal-700)}
  .sss-grup .bb-acc__a p{max-width:68ch;overflow-wrap:anywhere}

  /* — Kapanış CTA — */
  .sss-cta{background:var(--bb-grad-hero);color:var(--bb-on-dark);border-radius:var(--bb-r-2xl);
    padding:clamp(40px,6vw,76px);text-align:center;position:relative;overflow:hidden}
  .sss-cta::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 82% -10%,rgba(63,180,180,.16),transparent 60%)}
  .sss-cta > *{position:relative}
  .sss-cta h2{font-family:var(--bb-font-display);font-weight:var(--bb-fw-display);
    font-size:var(--bb-display-s);letter-spacing:var(--bb-ls-display);
    color:var(--bb-on-dark);line-height:var(--bb-lh-snug);margin:0 0 var(--bb-3)}
  .sss-cta p{color:var(--bb-on-dark-dim);max-width:50ch;margin:0 auto;line-height:var(--bb-lh-body)}
  .sss-cta .acts{display:flex;gap:var(--bb-3);justify-content:center;flex-wrap:wrap;margin-top:var(--bb-6)}

  @media (max-width:768px){
    .sss-grup + .sss-grup{margin-top:var(--bb-8)}
  }
  @media (max-width:480px){
    .sss-grup + .sss-grup{margin-top:var(--bb-7)}
    .sss-cta .acts{flex-direction:column}
    .sss-cta .acts .bb-btn{width:100%}
  }
}