/* Alan genel SSS sayfası (rk_sss.html, mp_sss.html) ortak stili.
   4 Ekim 2026: rk-rk-sss.css adından ortak ada taşındı. */
    /* rota-core.css body::before/after z-index düzeltmesi */
    body::before { z-index: 1 !important; }
    body::after  { z-index: 0 !important; }

    /* Token'lar rota-core.css + rota-theme.css'ten yükleniyor */

    /* ══════════ TEMA ══════════ */

    /* ══════════ TEMA FAB ══════════ */
    .theme-fab {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 500;
    }

    .theme-fab-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--bg3);
      border: 1px solid var(--border2);
      color: var(--text2);
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
    }

    .theme-fab-btn:hover {
      color: var(--sss-renk, var(--primary));
      border-color: var(--sss-renk, var(--primary));
    }

    .theme-tray {
      position: absolute;
      bottom: 58px;
      right: 0;
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 14px;
      padding: 12px;
      width: 220px;
      display: none;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
    }

    .theme-tray.open {
      display: flex;
    }

    .tray-label {
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text3);
      padding: 2px 6px 8px;
    }

    .tray-opt {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 9px;
      cursor: pointer;
      transition: background .15s;
    }

    .tray-opt:hover {
      background: var(--bg4);
    }

    .tray-opt.act {
      background: rgba(167, 139, 250, .1);
    }

    .tray-swatches {
      display: flex;
      gap: 3px;
      flex-shrink: 0;
    }

    .tray-swatch {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .tray-name {
      font-size: .75rem;
      font-weight: 700;
      color: var(--text1);
    }

    .tray-sub {
      font-size: .62rem;
      color: var(--text3);
    }

    /* ══════════ TEMEL ══════════ */
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      background: var(--bg1);
    }

    body {
      color: var(--text1);
      font-family: 'Inter', system-ui, sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      overflow-y: auto;
    }

    body.sss-acik {
      overflow-x: hidden;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* ══════════ HEADER ══════════ */

    /* RK-K-04/madde-5 (17 Eylül 2026): .logo-link/.logo-img/.logo-text/
       .logo-ad/.logo-ad span/.logo-sl kaldırıldı — hiçbir RK sayfasında
       bu sınıflar canlı header'da kullanılmıyor (yalnız "header-logo-*"
       alt dizesi olarak yanlış eşleşiyordu, tam belirteç olarak sıfır
       eşleşme doğrulandı). Güncel header standardı .header-logo-*
       sınıflarını kullanır (§9.1); bu kural kilitli header'a dokunmaz,
       yalnız ölü CSS'i temizler. */

    .back-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 13px;
      border-radius: 8px;
      border: 1px solid var(--border2);
      font-size: .74rem;
      color: var(--text2);
      transition: all .2s;
    }

    .back-btn:hover {
      border-color: var(--sss-renk, var(--primary));
      color: var(--sss-renk, var(--primary));
    }

    /* ══════════ HERO — TAM EKRAN ══════════ */
    .page-hero {
      height: calc(100vh - 60px);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 40px clamp(24px, 5vw, 120px);
      background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 100%);
      border-bottom: 1px solid var(--border);
      position: relative;
    }

    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 70% at 85% 40%, rgba(167, 139, 250, .07) 0%, transparent 65%),
        radial-gradient(ellipse 35% 55% at 10% 75%, rgba(124, 58, 237, .05) 0%, transparent 55%);
      pointer-events: none;
    }

    .page-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .035) 1px, transparent 1px);
      background-size: 30px 30px;
      pointer-events: none;
      z-index: 0;
    }

    .ph-inner {
      width: 100%;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(20px, 4vw, 60px);
      flex-wrap: nowrap;
    }

    .ph-left {
      flex: 1 1 50%;
    }

    .ph-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(167, 139, 250, .1);
      border: 1px solid rgba(167, 139, 250, .25);
      border-radius: 30px;
      padding: 4px 13px;
      margin-bottom: 16px;
    }

    .ph-badge i {
      font-size: .65rem;
      color: var(--sss-renk, var(--primary));
    }

    .ph-badge span {
      font-size: .64rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--sss-renk, var(--primary));
    }

    .ph-h1 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: clamp(2rem, 4vw, 4rem);
      line-height: 1.05;
      letter-spacing: -.03em;
      margin-bottom: 16px;
    }

    .ph-h1 .g {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .ph-desc {
      font-size: clamp(.9rem, 1.2vw, 1.1rem);
      color: var(--text2);
      line-height: 1.8;
      max-width: 520px;
      margin-bottom: 24px;
    }

    /* Arama kutusu */
    .sss-arama {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg3);
      border: 1.5px solid var(--border2);
      border-radius: 14px;
      padding: 12px 18px;
      transition: border-color .2s;
      max-width: 480px;
    }

    .sss-arama:focus-within {
      border-color: var(--sss-renk, var(--primary));
      box-shadow: 0 0 0 3px rgba(167, 139, 250, .12);
    }

    .sss-arama i {
      color: var(--text3);
      font-size: .85rem;
      flex-shrink: 0;
    }

    .sss-arama input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      font-family: 'Inter', sans-serif;
      font-size: .88rem;
      color: var(--text1);
    }

    .sss-arama input::placeholder {
      color: var(--text3);
    }

    /* Hero sağ: istatistik kartları */
    .ph-right {
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 2vw, 32px);
      flex: 1 1 50%;
      max-width: 480px;
    }

    .sss-stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(10px, 1.2vw, 16px);
    }

    .sss-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: clamp(18px, 2.2vw, 30px) clamp(20px, 2.5vw, 36px);
      position: relative;
      overflow: hidden;
    }

    .sss-stat::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
    }

    .sss-stat-n {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: clamp(2rem, 3vw, 3.4rem);
      color: var(--sss-renk, var(--primary));
      line-height: 1;
    }

    .sss-stat-l {
      font-size: clamp(.6rem, .7vw, .72rem);
      color: var(--text3);
      letter-spacing: .1em;
      text-transform: uppercase;
      text-align: center;
    }

    /* ══════════ SCROLL BUTONU ══════════ */

    @keyframes chv {

      0%,
      55%,
      100% {
        opacity: .2;
      }

      25% {
        opacity: .9;
      }
    }

    /* ══════════ SSS PANELİ ══════════ */
    .sss-panel {
      display: none;
    }

    .sss-panel.acik {
      display: block;
    }

    /* ══════════ TOOLBAR — KATEGORİ FİLTRE ══════════ */
    .toolbar {
      position: sticky;
      top: 60px;
      z-index: 90;
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(12px);
    }

    .tb-inner {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 clamp(24px, 5vw, 120px);
      height: 52px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tb-inner::-webkit-scrollbar {
      display: none;
    }

    .tb-label {
      font-size: .64rem;
      font-weight: 700;
      color: var(--text3);
      letter-spacing: .1em;
      text-transform: uppercase;
      white-space: nowrap;
      flex-shrink: 0;
      margin-right: 4px;
    }

    .tb-filter {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: .72rem;
      font-weight: 600;
      border: 1.5px solid var(--border2);
      color: var(--text2);
      background: transparent;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all .18s;
    }

    .tb-filter:hover {
      border-color: rgba(167, 139, 250, .5);
      color: var(--text1);
    }

    .tb-filter.act {
      background: rgba(167, 139, 250, .12);
      border-color: rgba(167, 139, 250, .4);
      color: var(--sss-renk, var(--primary));
    }

    .tb-filter i {
      font-size: .63rem;
    }

    .tb-sep {
      width: 1px;
      height: 22px;
      background: var(--border);
      flex-shrink: 0;
      margin: 0 4px;
    }

    .tb-sayi {
      margin-left: auto;
      font-family: 'JetBrains Mono', monospace;
      font-size: .65rem;
      color: var(--text3);
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* ══════════ ANA İÇERİK ══════════ */
    .main {
      padding: 32px clamp(24px, 5vw, 120px) 80px;
      display: flex;
      gap: 32px;
      align-items: flex-start;
    }

    /* Yan çubuk — kategori listesi */
    .sss-sidebar {
      width: 240px;
      flex-shrink: 0;
      position: sticky;
      top: 112px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .sidebar-baslik {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text3);
      padding: 0 8px;
      margin-bottom: 8px;
    }

    .sidebar-link {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 12px;
      border-radius: 10px;
      font-size: .78rem;
      font-weight: 600;
      color: var(--text2);
      cursor: pointer;
      transition: all .18s;
      border: 1px solid transparent;
    }

    .sidebar-link:hover {
      background: var(--bg3);
      color: var(--text1);
    }

    .sidebar-link.akt {
      background: rgba(167, 139, 250, .1);
      border-color: rgba(167, 139, 250, .2);
      /* Soluk zeminde AA kontrastı: tema yazı rengiyle karıştırılır. */
      color: color-mix(in srgb, var(--sss-renk, var(--primary)) 72%, var(--text1));
    }

    .sidebar-link i {
      font-size: .7rem;
      width: 14px;
      text-align: center;
      flex-shrink: 0;
    }

    .sidebar-sayi {
      margin-left: auto;
      font-family: 'JetBrains Mono', monospace;
      font-size: .6rem;
      color: var(--text3);
      background: var(--bg4);
      padding: 1px 6px;
      border-radius: 5px;
    }

    /* Boş durum */
    .bos-wr {
      display: none;
      text-align: center;
      padding: 60px 20px;
    }

    .bos-wr.goster {
      display: block;
    }

    /* ══════════ KATEGORİ BLOĞU ══════════ */
    .sss-icerik {
      flex: 1;
      min-width: 0;
    }

    .kat-blok {
      margin-bottom: 32px;
      animation: fadeUp .4s ease both;
    }

    .kat-blok:nth-child(1) {
      animation-delay: .04s;
    }

    .kat-blok:nth-child(2) {
      animation-delay: .08s;
    }

    .kat-blok:nth-child(3) {
      animation-delay: .12s;
    }

    .kat-blok:nth-child(4) {
      animation-delay: .16s;
    }

    .kat-blok:nth-child(5) {
      animation-delay: .20s;
    }

    .kat-blok:nth-child(6) {
      animation-delay: .24s;
    }

    .kat-blok:nth-child(7) {
      animation-delay: .28s;
    }

    .kat-blok:nth-child(8) {
      animation-delay: .32s;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .kat-baslik-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 20px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-left: 4px solid var(--kc, var(--primary));
      border-radius: 14px 14px 0 0;
    }

    .kat-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      background: rgba(var(--kc-rgb, var(--primary-rgb)), .12);
      color: var(--kc, var(--primary));
      border: 1px solid rgba(var(--kc-rgb, var(--primary-rgb)), .22);
    }

    .kat-ad {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 1rem;
      color: var(--text1);
      flex: 1;
    }

    .kat-sayi {
      font-family: 'JetBrains Mono', monospace;
      font-size: .68rem;
      color: var(--kc, var(--primary));
      background: rgba(var(--kc-rgb, var(--primary-rgb)), .1);
      border: 1px solid rgba(var(--kc-rgb, var(--primary-rgb)), .2);
      padding: 3px 10px;
      border-radius: 8px;
    }

    /* ══════════ SORU ACCORDION ══════════ */
    .soru-list {
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 14px 14px;
      overflow: hidden;
    }

    .soru-item {
      border-bottom: 1px solid var(--border);
    }

    .soru-item:last-child {
      border-bottom: none;
    }

    .soru-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px 20px;
      cursor: pointer;
      background: var(--bg3);
      transition: background .18s;
      user-select: none;
    }

    .soru-header:hover {
      background: var(--bg4);
    }

    .soru-header.acik {
      background: rgba(var(--kc-rgb, var(--primary-rgb)), .04);
    }

    .soru-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: .58rem;
      font-weight: 700;
      color: var(--kc, var(--primary));
      background: rgba(var(--kc-rgb, var(--primary-rgb)), .1);
      padding: 2px 6px;
      border-radius: 5px;
      flex-shrink: 0;
    }

    .soru-metin {
      font-size: .88rem;
      font-weight: 600;
      color: var(--text1);
      flex: 1;
      line-height: 1.4;
    }

    .soru-chevron {
      font-size: .65rem;
      color: var(--text3);
      transition: transform .25s;
      flex-shrink: 0;
    }

    .soru-header.acik .soru-chevron {
      transform: rotate(90deg);
    }

    .soru-cevap {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .4s ease, opacity .3s ease;
      background: rgba(var(--kc-rgb, var(--primary-rgb)), .02);
    }

    .soru-cevap.acik {
      max-height: 800px;
      opacity: 1;
    }

    .cevap-ic {
      padding: 16px 20px 20px 52px;
      font-size: .84rem;
      color: var(--text2);
      line-height: 1.85;
      border-top: 1px solid rgba(var(--kc-rgb, var(--primary-rgb)), .1);
    }

    .cevap-ic p {
      margin-bottom: 10px;
    }

    .cevap-ic p:last-child {
      margin-bottom: 0;
    }

    .cevap-ic strong {
      color: var(--text1);
    }

    .cevap-ic code {
      font-family: 'JetBrains Mono', monospace;
      font-size: .78rem;
      background: var(--bg4);
      border: 1px solid var(--border2);
      padding: 1px 6px;
      border-radius: 5px;
      color: var(--kc, var(--primary));
    }

    .cevap-ic ul {
      padding-left: 18px;
      margin: 6px 0;
    }

    .cevap-ic ul li {
      margin-bottom: 5px;
    }

    /* İç linkler */
    .ic-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: color-mix(in srgb, var(--sss-renk, var(--primary)) 72%, var(--text1));
      border-bottom: 1px dashed rgba(167, 139, 250, .4);
      font-weight: 600;
      transition: border-color .18s;
    }

    .ic-link:hover {
      border-color: var(--sss-renk, var(--primary));
    }

    .ic-link i {
      font-size: .65rem;
    }

    /* Yönlendirme butonu */
    .cevap-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 12px;
      padding: 8px 16px;
      border-radius: 10px;
      background: rgba(var(--kc-rgb, var(--primary-rgb)), .1);
      border: 1px solid rgba(var(--kc-rgb, var(--primary-rgb)), .25);
      color: var(--kc, var(--primary));
      font-size: .76rem;
      font-weight: 700;
      transition: all .18s;
      cursor: pointer;
    }

    .cevap-btn:hover {
      background: rgba(var(--kc-rgb, var(--primary-rgb)), .18);
      transform: translateX(4px);
    }

    .cevap-btn i {
      font-size: .68rem;
    }

    /* ══════════ TOAST ══════════ */
    .toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 10px 22px;
      font-size: .8rem;
      color: var(--text1);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s, transform .3s;
      z-index: 9999;
      white-space: nowrap;
    }

    .toast.goster {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ══════════ RESPONSIVE ══════════ */
    @media(max-width:1100px) {
      .sss-sidebar {
        display: none;
      }

      .main {
        padding-left: clamp(16px, 3vw, 32px);
        padding-right: clamp(16px, 3vw, 32px);
      }

      .ph-h1 {
        font-size: clamp(2rem, 3.8vw, 3.2rem);
      }
    }

    @media(max-width:850px) {

      .tb-inner,
.main {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }

      .page-hero {
        padding-left: 16px;
        padding-right: 16px;
        height: auto;
        min-height: calc(100vh - 60px);
      }

      .ph-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 0 80px;
        gap: 32px;
      }

      .ph-left {
        width: 100%;
        flex: auto;
      }

      .ph-right {
        width: 100%;
        max-width: none;
        flex: auto;
      }

      .ph-h1 {
        font-size: 2rem;
      }
    }

    @media(max-height:680px) and (min-width:851px) {
      .page-hero {
        height: auto;
        min-height: calc(100vh - 60px);
      }

      .ph-inner {
        padding: 20px 0 60px;
      }
    }

#heroKatBadgeler{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;}
.bos-ikon-sss{font-size:3rem;opacity:.15;margin-bottom:14px;}
.bos-baslik-sss{font-size:.9rem;color:var(--text3);margin-bottom:6px;font-weight:600;}
.bos-metin-sss{font-size:.78rem;color:var(--text3);}

/* RK-M-02 (15 Eylül 2026): mobilde dokunma hedefi en az 44 px.
   Yalnız bu sayfaya ait denetimler büyütülür; header/footer ve ortak
   bh-* bileşenleri CLAUDE.md §9.1/§9.2 gereği dışarıda bırakılmıştır. */
@media (max-width: 767px) {
  .cevap-btn,
  .ic-link,
  .tb-filter {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* RK-K-07 (17 Eylül 2026): .main'in yan dolgusu clamp(24px,5vw,120px)
   ile TAVANLIYDI ama kendisi hiç max-width taşımıyordu — akıllı
   tahta/4K'de .sss-icerik (flex:1) viewport'un neredeyse tamamını
   dolduruyor, tek sütunluk soru-cevap metni okunamayacak kadar uzun
   satırlara yayılıyordu. rk-konu.css'in tersine burada sorun "dar
   kap" değil "üst sınır yok"tu; okunabilirlik için üst sınır eklendi. */
@media (min-width: 1920px) {
  .main {
    max-width: 1800px;
    margin-inline: auto;
  }
}

@media (min-width: 3200px) {
  .main {
    max-width: 2200px;
  }
}

/* Kategori kimlik rengi (--kc) rozet oranıyla metin rengine karıştırılır:
   açık temada oran %100 (renk aynen), koyu temada %65 (koyu zeminde okunur
   kalsın diye açılır). Kural önceden yalnız açık temaya kapsanmıştı; koyu
   temada kontrast 3.73 idi (25 Eylül 2026). */
.kat-icon,
.kat-sayi,
.soru-num,
.cevap-ic code,
.cevap-btn {
  color: color-mix(in srgb, var(--kc, var(--primary)) var(--rozet-yazi-orani, 100%), var(--text1));
}