/* — 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%
     }
 }