/* ══════════════════════════════════════════════════════════════════════
   RehberBox — tanışma akışı
   ──────────────────────────────────────────────────────────────────────
   Renk, boşluk ve yarıçapların tamamı ortak sistemin token'larından
   (`ortak/kt-tema.css`). Burada sabit hex YOK — tema değişirse akış da
   kendiliğinden takip eder.

   Mobilde alttan yükselen sayfa (bottom sheet), masaüstünde ortada
   iletişim kutusu. Seçenekler, 21.08'de kurulan mobil menü kartlarıyla
   aynı dili konuşuyor: iki kolonlu ızgara, 48 px dokunma hedefi.
   ══════════════════════════════════════════════════════════════════════ */

/* Arkadaki sayfa kaymasın — kutu açıkken gövde kilitleniyor. */
html.rb-tanisma-acik,
html.rb-tanisma-acik body { overflow: hidden; }

.rb-tanisma {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;              /* mobil: alttan */
  justify-content: center;
}

.rb-tanisma__perde {
  position: absolute;
  inset: 0;
  background: rgba(37, 39, 46, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: rb-tanisma-belir 180ms ease-out both;
}

.rb-tanisma__kutu {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--kt-kart);
  color: var(--kt-metin);
  border-radius: var(--kt-yari) var(--kt-yari) 0 0;
  padding: var(--kt-b5) var(--kt-b4) var(--kt-b4);
  box-shadow: var(--kt-golge-l);
  animation: rb-tanisma-yuksel 260ms cubic-bezier(.32, .72, 0, 1) both;
}

@media (min-width: 620px) {
  .rb-tanisma { align-items: center; }
  .rb-tanisma__kutu {
    border-radius: var(--kt-yari);
    padding: var(--kt-b6) var(--kt-b6) var(--kt-b5);
    animation-name: rb-tanisma-belir;
  }
}

/* ── Başlık ve soru ── */
.rb-tanisma__baslik {
  font-family: var(--kt-font-baslik);
  font-size: var(--kt-yazi-xl);
  font-weight: 800;
  letter-spacing: var(--kt-harf-xl);
  line-height: var(--kt-satir-xl);
  margin: 0;
}
/* ── Marka turkuazı ──────────────────────────────────────────────────
   Logo rengi #23999C. Arayüz yeşil, logolar turkuaz — bu ayrım KASITLI
   (bkz. 19.08.2026 renk denemesi), tutarsızlık sanıp eşitleme.

   ERİŞİLEBİLİRLİK: #23999C beyaz üstünde 3,44:1. Küçük yazıda AA eşiği
   4,5:1 olduğu için YETMEZ; bu başlık --kt-yazi-xl / 800 ağırlık, yani
   WCAG'ın "büyük yazı" tanımında ve orada eşik 3:1. Bu rengi küçük
   metinde kullanma. */
.rb-tanisma__baslik--marka { color: #23999C; }

.rb-tanisma__giris {
  margin: var(--kt-b2) 0 0;
  font-size: var(--kt-yazi-s);
  line-height: var(--kt-satir-normal);
  color: var(--kt-metin-soluk);
}
.rb-tanisma__soru {
  margin: var(--kt-b5) 0 var(--kt-b3);
  font-family: var(--kt-font-baslik);
  font-size: var(--kt-yazi-m);
  font-weight: 700;
}
.rb-tanisma__ust { margin-bottom: var(--kt-b2); }

/* ── Seçenek ızgarası — mobil menü kartlarının aynı dili ── */
.rb-tanisma__izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kt-b2);
}
@media (max-width: 380px) {
  .rb-tanisma__izgara { grid-template-columns: 1fr; }
}

/* Tek sayıda seçenek varsa sonuncusu yalnız kalıyordu (3 seçenekli
   ekranlarda 2+1). Son öğe tek konumdaysa iki kolonu birden alsın. */
.rb-tanisma__izgara > .rb-tanisma__secenek:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.rb-tanisma__secenek {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                   /* dokunma hedefi */
  padding: var(--kt-b2) var(--kt-b3);
  text-align: center;
  text-wrap: balance;
  font-family: var(--kt-font-govde);
  font-size: var(--kt-yazi-s);
  font-weight: 600;
  line-height: 1.25;
  color: var(--kt-metin);
  background: var(--kt-kart);
  border: 1px solid var(--kt-cizgi-koyu);
  border-radius: var(--kt-yari-s);
  cursor: pointer;
  transition: border-color var(--kt-gecis), color var(--kt-gecis),
              transform 120ms cubic-bezier(.4, 0, .2, 1);
}
.rb-tanisma__secenek:hover { border-color: var(--kt-vurgu); color: var(--kt-vurgu); }
.rb-tanisma__secenek:active { transform: scale(.985); }

/* ── Sonuç kartları ── */
.rb-tanisma__sonuc {
  display: grid;
  gap: var(--kt-b2);
  margin-top: var(--kt-b4);
}
.rb-tanisma__kart {
  display: block;
  padding: var(--kt-b3) var(--kt-b4);
  text-decoration: none;
  background: var(--kt-kart);
  border: 1px solid var(--kt-cizgi-koyu);
  border-radius: var(--kt-yari-s);
  transition: border-color var(--kt-gecis), transform 120ms cubic-bezier(.4, 0, .2, 1);
}
.rb-tanisma__kart:hover { border-color: var(--kt-vurgu); }
.rb-tanisma__kart:active { transform: scale(.99); }

.rb-tanisma__kart-ad {
  display: block;
  font-family: var(--kt-font-baslik);
  font-size: var(--kt-yazi-m);
  font-weight: 700;
  color: var(--kt-metin);
}
.rb-tanisma__kart-not {
  display: block;
  margin-top: 2px;
  font-size: var(--kt-yazi-s);
  line-height: var(--kt-satir-normal);
  color: var(--kt-metin-soluk);
}

/* Birincil kart dolu — "önce buraya bak" demenin en kısa yolu. */
.rb-tanisma__kart--birincil {
  background: var(--kt-vurgu);
  border-color: var(--kt-vurgu);
}
.rb-tanisma__kart--birincil .rb-tanisma__kart-ad  { color: var(--kt-metin-ters); }
.rb-tanisma__kart--birincil .rb-tanisma__kart-not { color: rgba(255, 255, 255, .82); }
.rb-tanisma__kart--birincil:hover { background: var(--kt-vurgu-koyu); border-color: var(--kt-vurgu-koyu); }

/* ── Alt satır ── */
.rb-tanisma__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kt-b3);
  margin-top: var(--kt-b4);
  padding-top: var(--kt-b3);
  border-top: 1px solid var(--kt-cizgi);
}
.rb-tanisma__metin-dugme {
  padding: var(--kt-b2) 0;
  font-family: var(--kt-font-govde);
  font-size: var(--kt-yazi-s);
  font-weight: 600;
  color: var(--kt-metin-soluk);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.rb-tanisma__metin-dugme:hover { color: var(--kt-metin); }
.rb-tanisma__gizlilik {
  font-size: var(--kt-yazi-xs);
  line-height: 1.4;
  color: var(--kt-metin-soluk);
}

/* ── Kapattıktan sonra küçük tetik ── */
/* Sarmal konumu taşır, kart yalnız kayar — böylece çarpı ve tutamak
   kartla birlikte hareket eder. `var()` yedekli: token /ortak/kt-tema.css'ten
   geliyor, yedeksiz kalsaydı eksik olduğu an left/bottom komple düşer ve
   düğme sayfanın ortasına otururdu. */
.rb-tanisma-tetik-sarmal {
  position: fixed;
  left: 0;
  bottom: var(--kt-b4, 1rem);
  z-index: 8000;
}
.rb-tanisma-tetik-kutu {
  position: relative;
  margin-left: var(--kt-b4, 1rem);
}
/* Geçişler ilk kareden SONRA açılıyor (--canli): toplu başlayan kart sayfa
   her açıldığında gözün önünde sola kaçmasın. */
.rb-tanisma-tetik-sarmal--canli .rb-tanisma-tetik-kutu,
.rb-tanisma-tetik-sarmal--canli .rb-tanisma-tutamak {
  transition: transform .26s ease, opacity .18s ease, visibility .26s;
}
/* `visibility` ŞART, opacity yetmez: saydamlığı 0 olan düğme klavyeyle hâlâ
   sekmelenir ve ekran okuyucuya okunur — görünmeyen bir tuzak olurdu. */
.rb-tanisma-tetik-sarmal--kapali .rb-tanisma-tetik-kutu {
  transform: translateX(calc(-100% - var(--kt-b4, 1rem)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Tutamak: toplu haldeyken sol kenarda duran ince dil. Kart SİLİNMEDİĞİ için
   akışa dönüş her zaman bir dokunuş ötede. */
.rb-tanisma-tutamak {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  min-height: 44px;            /* dokunma hedefi 44 px'in altına inmesin */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  background: #1B7A7D;
  border: 1px solid #1B7A7D;
  border-left: 0;
  border-radius: 0 var(--kt-yari-hap, 999px) var(--kt-yari-hap, 999px) 0;
  box-shadow: 0 4px 14px rgba(27, 122, 125, .28);
  cursor: pointer;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.rb-tanisma-tetik-sarmal--kapali .rb-tanisma-tutamak {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rb-tanisma-tutamak:hover { background: #156366; border-color: #156366; }
.rb-tanisma-tutamak:focus-visible { outline: 2px solid #23999C; outline-offset: 3px; }

/* Çarpı kartın sağ üst köşesine BİNER. Kartın içinde değil kardeşi —
   iç içe <button> geçerli HTML değil ve ekran okuyucuda tek düğme olurdu. */
.rb-tanisma-tetik__kapat {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: #1B7A7D;
  background: #fff;
  border: 1px solid rgba(27, 122, 125, .45);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.rb-tanisma-tetik__kapat:hover { background: #eef6f6; }
.rb-tanisma-tetik__kapat:focus-visible { outline: 2px solid #23999C; outline-offset: 2px; }

/* Modal açıkken tetik görünmez — iki kutu aynı anda durmaz. */
.rb-tanisma-acik .rb-tanisma-tetik-sarmal { display: none; }

.rb-tanisma-tetik {
  position: relative;
  min-height: 40px;
  padding: var(--kt-b2) var(--kt-b4);
  font-family: var(--kt-font-govde);
  font-size: var(--kt-yazi-s);
  font-weight: 600;
  /* Turkuaz DOLGU — kapanan akışı geri açan tek yol bu düğme, görünür olmalı.
     Dolgu rengi logo turkuazının koyultulmuşu (#1B7A7D): beyaz yazıyla 5,1:1,
     yani küçük yazıda da AA. Logonun kendi #23999C'si burada kullanılamaz —
     beyazla 3,44:1 eder ve bu yazı büyük yazı değil. Vurgu isteniyorsa yol
     rengi açmak değil, gölgeyi güçlendirmektir. */
  color: #fff;
  background: #1B7A7D;
  border: 1px solid #1B7A7D;
  border-radius: var(--kt-yari-hap);
  box-shadow: 0 6px 18px rgba(27, 122, 125, .32);
  cursor: pointer;
}
/* Hover KOYULAŞIR, açılmaz: açılsaydı beyaz yazının kontrastı düşerdi. */
.rb-tanisma-tetik:hover { background: #156366; border-color: #156366; color: #fff; }
.rb-tanisma-tetik:focus-visible { outline: 2px solid #23999C; outline-offset: 3px; }

/* ── Hareket ── */
@keyframes rb-tanisma-belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-tanisma-yuksel {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-tanisma__perde,
  .rb-tanisma__kutu { animation: none; }
  .rb-tanisma-tetik-sarmal--canli .rb-tanisma-tetik-kutu,
  .rb-tanisma-tetik-sarmal--canli .rb-tanisma-tutamak { transition: none; }
  .rb-tanisma__secenek,
  .rb-tanisma__kart { transition: none; }
}

/* ── Sonuç ekranı: cevap şeridi ve dipnot (22.08.2026) ──────────────
   Şerit, kişiselleştirmeyi iddia etmeden gösteriyor: "sana özel" demeden
   ziyaretçi kendi cevaplarını görüyor. */
.rb-tanisma__serit {
  margin-bottom: var(--kt-b2);
  font-size: var(--kt-yazi-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kt-vurgu);
}
.rb-tanisma__dipnot {
  margin: var(--kt-b3) 0 0;
  font-size: var(--kt-yazi-xs);
  line-height: 1.45;
  color: var(--kt-metin-soluk);
}