/* ═══════════════════════════════════════════════════════════════════
   SSS + İNLİNE ASİSTAN · sss
   -------------------------------------------------------------------
   İki sütun: solda asistan (yapışkan), sağda soru listesi.
   Bütün ölçüler ortak token'lardan gelir — bu parça kendi clamp'ini
   yazmaz, yoksa site ritmi dağılır (bkz. taban.css BLOK BOŞLUK ÖLÇEĞİ).
   Gölge ve renkli halka yok: derinlik yüzey katmanı (--z1/--z2/--z3)
   ve çizgi ile kurulur.
   ═════════════════════════════════════════════════════════════════ */

.sss{
  padding-block: var(--blm-pd); background: var(--z1);
  /* NAVİGASYONUN KAPLADIĞI ŞERİT — tek token değil, ÜÇ parçanın toplamı.
     .nv07 yüzen bir kutudur: ekran kenarından --cerceve kadar içeride
     durur (16 px), iç yüksekliği --nav-h'tır (4.25rem = 68 px) ve
     1 px kenarlığı vardır. Toplam 86 px — canlıda ölçüldü.
     --nav-h'ı tek başına kullanmak 18 px eksik veriyor; yapışkan panel
     kapsüle 0,4 px kalıyordu, yani değiyordu. */
  --sss-nav-serit: calc(var(--cerceve) + var(--nav-h) + 2px);
}

/* ── başlık bloğu ── */
/* Üst bölümle (talep) AYNI başlık ölçüsü: 800 ağırlık, 1.1 satır,
   -.035em harf aralığı. Ayrı bir değer yazmak iki bölümü ayrıştırırdı. */
/* Başlık panelin hemen üstünde durur: bölüm başlığı mesafesi değil,
   blok ayrımı mesafesi. Liste ise satırın tepesinden başlar. */
.sss-bas{ margin-block-end: var(--bo-2); }
.sss-bsl{
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; font-weight: 800; margin: 0;
  font-size: var(--blm-bsl); line-height: 1.1; letter-spacing: -.035em;
}
html[lang="ar"] .sss-bsl{ font-family: "Noto Kufi Arabic", sans-serif; letter-spacing: 0; line-height: 1.4; }

/* ── ızgara ── İKİ SATIR, üç öğe:
     (1,1) başlık · (2,1) asistan · (1→3, 2) liste iki satırı birden kaplar.
   İkinci satır 1fr olduğu için listenin fazla boyu o satıra geçer; asistan
   o uzun alanın tepesinde durur ve YAPIŞMA MENZİLİ oradan gelir.
   align-items:start ŞART: gerilen ızgara öğesi yapışkan olamaz — sütun
   satırın boyuna uzarsa panel hiç kaymaz (ölçüldü). */
.sss-iz{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--bo-4);
  align-items: start;
}
.sss-bas{ grid-column: 1; grid-row: 1; }
/* Otomatik yerleşime bırakmıyoruz: yerleşim açıkça yazılır ki
   ileride araya bir öğe girdiğinde satırlar kaymasın. */
.sss-bot{ grid-column: 1; grid-row: 2; }
.sss-liste{ grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 64rem){
  .sss-iz{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: var(--bo-3);
  }
  .sss-bas, .sss-bot, .sss-liste{ grid-column: 1; grid-row: auto; }
}

/* ══════════════ SOL · ASİSTAN ══════════════ */
.sss-bot{
  position: sticky;
  /* Şeridin ALTINDAN başlar, üstüne bir de nefes: kapsül ile panel
     arasında her ölçüde görünür boşluk kalır. Kayan sütun panelin
     arkasından yukarı çıkabilir — orada sınır yok. */
  inset-block-start: calc(var(--sss-nav-serit) + var(--bo-2));
  display: flex; flex-direction: column;
  background: var(--z2);
  border: 1px solid var(--cizgi);
  border-radius: var(--yr-l);
  overflow: hidden;
}
@media (max-width: 64rem){
  .sss-bot{ position: static; }
}

.sss-bot-bas{
  display: flex; align-items: center; gap: .6rem;
  padding: calc(var(--bo-1) * .8) var(--kart-pd);
  border-block-end: 1px solid var(--cizgi2);
  background: var(--z3);
}
.sss-nokta{
  inline-size: .5rem; block-size: .5rem; border-radius: var(--yr-tam);
  background: var(--aksan); flex: none;
}
.sss-bot-ad{
  font-size: var(--yz-dgm); font-weight: 700; color: var(--mrk);
  flex: 1 1 auto; min-inline-size: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sss-bot-dur{
  font-size: var(--yz-etk); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mrk3); flex: none;
}
html[lang="ar"] .sss-bot-dur{ letter-spacing: 0; text-transform: none; }

/* akış — sabit yükseklik, içerik büyüyünce kendi içinde kayar */
.sss-akis{
  padding: var(--kart-pd);
  display: flex; flex-direction: column; gap: var(--bo-1);
  block-size: clamp(19rem, 34vh, 25rem);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* [hidden] UA kuralı (display:none) sınıf özgüllüğüyle eziliyor: display
   veren her öğede hidden durumu AÇIKÇA geri yazılmalı. Yoksa betik
   bos.hidden=true dese bile metin ekranda kalır (28 Agu'da ölçüldü). */
.sss-bos[hidden]{ display: none; }
.sss-bos{
  margin: auto 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding-inline: var(--bo-1);
}
.sss-bos-ik{ inline-size: 2.25rem; block-size: 2.25rem; color: var(--mrk3); opacity: .55; }
.sss-bos-yzi{
  margin: 0; font-size: var(--yz-kck); line-height: var(--sy-gvd);
  color: var(--mrk3); max-inline-size: 34ch;
}

/* balonlar */
.sss-balon{
  max-inline-size: 88%;
  padding: .65rem .95rem;
  border-radius: var(--yr-m);
  font-size: var(--yz-kck); line-height: var(--sy-gvd);
  align-self: start;
  background: var(--z1); color: var(--mrk2);
  border: 1px solid var(--cizgi2);
  border-start-start-radius: var(--yr-s);
}
/* Zemin --aksan iken 13 px metin açık temada 4,39:1 kalıyordu (AA eşiği
   4,5). --mrk/--z1 çifti tema ile BİRLİKTE döner: iki temada da 13:1 üstü. */
.sss-balon[data-sss-kim="ben"]{
  align-self: end;
  background: var(--mrk); color: var(--z1);
  border-color: transparent;
  border-start-start-radius: var(--yr-m);
  border-start-end-radius: var(--yr-s);
}
.sss-balon p{ margin: 0; }
.sss-balon p + p{ margin-block-start: .5rem; }

/* balon içi bağlantı — cevap metniyle KARDEŞ değil, betiğin ürettiği
   düğümde iç içedir; i18n katmanı bu düğüme dokunmaz (data-i18n yok). */
.sss-balon-bag{
  display: inline-flex; align-items: center; gap: .35rem;
  margin-block-start: .55rem;
  font-size: var(--yz-kck); font-weight: 700; color: var(--toprak-mtn);
  border-block-end: 1px solid currentColor; padding-block-end: 1px;
}

/* düşünüyor */
.sss-dusun{ display: inline-flex; gap: .25rem; align-items: center; padding-block: .2rem; }
.sss-dusun i{
  inline-size: .3rem; block-size: .3rem; border-radius: var(--yr-tam);
  background: currentColor; opacity: .35;
  animation: sss-nabiz 1.05s var(--egri) infinite;
}
.sss-dusun i:nth-child(2){ animation-delay: .16s; }
.sss-dusun i:nth-child(3){ animation-delay: .32s; }
@keyframes sss-nabiz{ 0%, 70%, 100%{ opacity: .3 } 35%{ opacity: .95 } }

/* giriş satırı */
.sss-giris{
  display: flex; align-items: center; gap: .4rem;
  padding: calc(var(--bo-1) * .7) calc(var(--kart-pd) * .7);
  border-block-start: 1px solid var(--cizgi2);
  background: var(--z1);
}
.sss-alan{
  flex: 1 1 auto; min-inline-size: 0;
  background: transparent; border: 0; outline: 0;
  padding: .55rem .7rem;
  font-size: var(--yz-dgm); color: var(--mrk);
}
.sss-alan::placeholder{ color: var(--mrk3); opacity: 1; }
.sss-gnd{
  flex: none; inline-size: 2.35rem; block-size: 2.35rem;
  display: grid; place-items: center;
  border: 0; border-radius: var(--yr-tam); cursor: pointer;
  background: var(--aksan); color: var(--z1);
  transition: background-color var(--mikro) var(--egri), opacity var(--mikro) var(--egri);
}
.sss-gnd svg{ inline-size: 1.05rem; block-size: 1.05rem; }
html[dir="rtl"] .sss-gnd svg{ transform: scaleX(-1); }
.sss-gnd:disabled{ opacity: .35; cursor: default; }
@media (hover: hover){ .sss-gnd:not(:disabled):hover{ background: var(--mrk); } }

/* ══════════════ SAĞ · SORU LİSTESİ ══════════════ */
/* 28 Ağu 2026 · Beyefendi: "SSS'lerde en üst ve en alt borderlar kalksın."
   Listenin üst çizgisi ilk sorunun üstünde asılı kalıyordu; ayırıcı
   çizginin işi öğeleri BİRBİRİNDEN ayırmak, listeyi çerçevelemek değil.
   Üst çizgi kaldırıldı, alt çizgi de son öğede kesiliyor (aşağıda). */
.sss-liste{ border-block-start: 0; }
.sss-oge{ border-block-end: 1px solid var(--cizgi2); }
.sss-oge:last-child{ border-block-end: 0; }

.sss-h{ margin: 0; font-size: inherit; font-weight: inherit; }
.sss-soru{
  inline-size: 100%;
  display: flex; align-items: center; gap: var(--bo-1);
  background: transparent; border: 0; cursor: pointer;
  padding: calc(var(--bo-2) * .78) 0;
  text-align: start;
  font-size: var(--yz-alt); font-weight: 700; line-height: 1.32;
  letter-spacing: -.015em; color: var(--mrk);
  transition: color var(--mikro) var(--egri);
}
.sss-soru-yzi{ flex: 1 1 auto; min-inline-size: 0; }
@media (hover: hover){ .sss-soru:hover{ color: var(--toprak-mtn); } }

.sss-art{
  flex: none; inline-size: 1.6rem; block-size: 1.6rem;
  display: grid; place-items: center;
  border-radius: var(--yr-tam);
  background: var(--z2); color: var(--mrk2);
  transition: transform var(--mikro) var(--egri), background-color var(--mikro) var(--egri);
}
.sss-art svg{ inline-size: .85rem; block-size: .85rem; }
.sss-soru[aria-expanded="true"] .sss-art{
  transform: rotate(45deg);
  background: var(--aksan); color: var(--z1);
}

.sss-cvp{ padding-block-end: var(--bo-2); }
.sss-cvp-yzi{
  margin: 0;
  font-size: var(--yz-gvd); line-height: var(--sy-gvd); color: var(--mrk2);
  max-inline-size: 56ch;
}
.sss-eyl{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--bo-1);
  margin-block-start: var(--bo-1);
}
.sss-ilet{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem;
  background: var(--z2); color: var(--mrk); border: 1px solid var(--cizgi2);
  border-radius: var(--yr-tam); cursor: pointer;
  font-size: var(--yz-kck); font-weight: 700;
  transition: background-color var(--mikro) var(--egri), color var(--mikro) var(--egri);
}
.sss-ilet-ik{ inline-size: .8rem; block-size: .8rem; flex: none; }
html[dir="rtl"] .sss-ilet-ik{ transform: scaleX(-1); }
@media (hover: hover){ .sss-ilet:hover{ background: var(--mrk); color: var(--z1); } }
.sss-ilet[data-yollandi]{ background: var(--mrk); color: var(--z1); }

.sss-bag{
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--yz-kck); font-weight: 700; color: var(--mrk2);
  transition: color var(--mikro) var(--egri);
}
.sss-bag-one{ color: var(--toprak-mtn); }
.sss-bag-ik{ inline-size: .8rem; block-size: .8rem; flex: none; }
html[dir="rtl"] .sss-bag-ik{ transform: scaleX(-1); }
@media (hover: hover){ .sss-bag:hover{ color: var(--mrk); } }

@media (prefers-reduced-motion: reduce){
  .sss-dusun i{ animation: none; }
  .sss-art, .sss-gnd, .sss-ilet, .sss-bag, .sss-soru{ transition: none; }
}

/* SOL → SAĞ İZ: serbest yazılan soru bir maddeye eşleşince o madde
   açılır ve kısa süre işaretlenir — cevabın nereden geldiği görünür.
   İşaret gölge veya renkli halka ile değil, yüzey ve kenar şeridiyle. */
.sss-oge{
  padding-inline: 0;
  transition: background-color var(--gecis) var(--egri), padding-inline var(--gecis) var(--egri);
}
.sss-oge[data-vurgu]{
  background: var(--z2);
  padding-inline: var(--bo-1);
  border-radius: var(--yr-s);
}
@media (prefers-reduced-motion: reduce){ .sss-oge{ transition: none; } }