/* ==========================================================================
   AYDERAI (.ai) — maskot ve sohbet paneli
   --------------------------------------------------------------------------
   Maskot (kulaklikli, ayaksiz robot) sag altta havada durur. Oturumun ILK
   sayfasinda sagdan kayarak girer, el sallar, cizimdeki uc nokta ziplar ve
   baloncukta tanitim satirlari yazilir. Ayni oturumun sonraki sayfalarinda
   dogrudan yerinde durur — .ai--tanit sinifi eklenmez.

   SINIFLAR
     .ai--girdi  maskot yerinde (kayma bunun uzerinden calisir)
     .ai--ani    kayma gecisi kapali — tanitimi gecilen sayfalar icin
     .ai--tanit  giris canlandirmalari (el sallama + zipzip noktalar)
     .ai--acik   sohbet paneli acik
     .ai--uyari  okunmamis bildirim noktasi

   UCUS iki katman:
     .ai__uc     govdeyi agir agir asagi yukari tasir
     .ai__golge  altta TERS fazda buyuyup kuculur

   TASMA KESILMEZ: .ai__sahne'nin ustunde pay var ve overflow acik —
   maskot salinimda yukari ciktiginda kafasi kirpilmasin diye.

   ONEMLI: maskot SVG'sinin viewBox'i 0 0 1286 1287. Ic parcalarin
   (.ai__kol, .ai__goz, .ai__knb, .ai__kn) transform-origin ve translate
   degerleri EKRAN PIKSELI DEGIL, bu viewBox birimindedir.

   Hareketi azaltma tercihi aciksa: kayma, ucus, el sallama ve zipzip
   kapanir; maskot dogrudan yerinde durur.
   ========================================================================== */
.ai { position: fixed; right: 0; bottom: var(--s5); z-index: var(--z-dr);
      display: flex; flex-direction: column; align-items: flex-end;
      gap: var(--s3); pointer-events: none; }
.ai > * { pointer-events: auto; }


/* ==========================================================================
   1. MASKOT
   ========================================================================== */
.ai__mas { position: relative; display: block;
           /* Sag kenara yapismasin */
           padding-right: var(--s5); }

/* -- Sahne: maskotun yeri. Ustte salinim, altta golge icin pay var ve
      TASMA KESILMEZ — yoksa robot yukari ciktiginda kafasi kirpiliyor. -- */
.ai__sahne { position: relative; display: block;
             width: 130px; height: 162px; padding: 12px 0 20px; }

/* -- Dugme: maskotun kendisi. En buyuk olcu 130 px. -- */
.ai__ac { position: relative; display: block;
          width: 130px; height: 130px;
          padding: 0; background: none; cursor: pointer;
          /* Baslangic: ekranin disinda, saga yatik ve ezik */
          transform: translateX(135%) rotate(12deg) scale(.86);
          opacity: 0;
          transition: transform .8s cubic-bezier(.22,1.16,.36,1),
                      opacity .3s var(--e) .1s; }
.ai--girdi .ai__ac { transform: translateX(0) rotate(0) scale(1); opacity: 1; }

/* Tanitim gecilen sayfalarda kayma olmasin: maskot zaten yerinde dursun */
.ai--ani .ai__ac { transition: none; }

/* -- Ucus: robotun ayagi yok, havada duruyor.
      Salinim govdede, golge ayri katmanda — ikisi TERS fazda calisir:
      robot yukaridayken golge kuculup soluyor. Tek basina yukari asagi
      hareket "ucuyor" degil "titriyor" gibi duruyordu. -- */
.ai__uc { display: block; width: 100%; height: 100%;
          animation: ai-uc 4s ease-in-out infinite; }
@keyframes ai-uc {
  0%, 100% { transform: translateY(3px); }
  50%      { transform: translateY(-7px); }
}

.ai__golge { position: absolute; left: 62%; bottom: -14px;
             width: 62px; height: 12px;
             transform: translateX(-50%);
             border-radius: var(--rp);
             background: radial-gradient(ellipse at center,
                         rgba(16,30,54,.34), rgba(16,30,54,0) 70%);
             animation: ai-golge 4s ease-in-out infinite; }
@keyframes ai-golge {
  0%, 100% { transform: translateX(-50%) scale(1);   opacity: .9; }
  50%      { transform: translateX(-50%) scale(.74); opacity: .45; }
}

.ai__svg { display: block; width: 100%; height: 100%;
           filter: drop-shadow(-5px 3px 10px rgba(16,30,54,.22));
           transition: transform var(--t2); }
.ai__ac:hover .ai__svg { transform: scale(1.05); }
.ai__ac:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px;
                        border-radius: var(--r3); }

/* -- El sallama: omuzdan donen sol kol.
      Eksen omuz kapsulunun govdeye bakan ucu. -- */
.ai__kol { transform-origin: 640px 825px; }
.ai--tanit .ai__kol { animation: ai-salla 2.2s var(--e) .8s 3; }
@keyframes ai-salla {
  0%, 60%, 100% { transform: rotate(0); }
  15%, 45%      { transform: rotate(26deg); }
  30%           { transform: rotate(-7deg); }
}


/* ==========================================================================
   1b. BOSTAKI HAREKETLER  (.ai--i1 / .ai--i2 / .ai--i3)
   --------------------------------------------------------------------------
   Maskot arada bir kendini hatirlatir. SESSIZ: ses yalnizca ilk cikista
   calar, sonrasinda hicbir hareket ses cikarmaz.

   Uc ayri hareket var ve sirayla degil RASTGELE secilir (js/ai.js);
   hep ayni sey tekrarlanirsa goz kisa surede korlesiyor.
   ========================================================================== */

/* i1 — selam: el sallar ve goz kirpar */
.ai--i1 .ai__kol { animation: ai-salla 2s var(--e) 2; }
.ai--i1 .ai__goz-k { animation: ai-goz-k 2s steps(1) 2; }
.ai--i1 .ai__goz-a { animation: ai-goz-a 2s steps(1) 2; }

/* -- USTUNE GELINCE (.ai--el) --
   Fare maskotun uzerindeyken el sallar ve goz kirpar; yanindaki baloncuk
   da js/ai.js tarafindan acilir. Tiklamadan once "bu ne?" sorusu burada
   yanitlanmali.

   Sinif JS ile 2,2 sn sonra kaldirilir — fare erken cikarsa hareket
   yarida kesilip kol zipladigi icin mouseleave'e baglanmadi. */
.ai--el .ai__kol { animation: ai-salla 2s var(--e) 1; }
.ai--el .ai__goz-k { animation: ai-goz-k 2s steps(1) 1; }
.ai--el .ai__goz-a { animation: ai-goz-a 2s steps(1) 1; }

/* i2 — etrafa bakinma: gozler saga sola kayar, govde hafif yana yatar */
.ai--i2 .ai__goz { animation: ai-bak 3.2s ease-in-out 1; }
.ai--i2 .ai__svg { animation: ai-yat 3.2s ease-in-out 1; }
@keyframes ai-bak {
  0%, 100%  { transform: translateX(0); }
  22%, 34%  { transform: translateX(-38px); }
  58%, 70%  { transform: translateX(34px); }
}
@keyframes ai-yat {
  0%, 100%  { transform: rotate(0); }
  28%       { transform: rotate(-4deg); }
  64%       { transform: rotate(4deg); }
}

/* i3 — sevinc: iki kez zipla, kolu cabucak salla */
.ai--i3 .ai__svg { animation: ai-zipla 1.5s var(--e) 1; }
.ai--i3 .ai__kol { animation: ai-salla 0.75s var(--e) 2; }
@keyframes ai-zipla {
  0%, 100%    { transform: translateY(0) scale(1); }
  18%         { transform: translateY(-12px) scale(1.04); }
  34%         { transform: translateY(0) scale(.97); }
  52%         { transform: translateY(-9px) scale(1.03); }
  70%         { transform: translateY(0) scale(.98); }
}

/* -- Goz kirpma: iki goz birlikte kapanir -- */
.ai--girdi .ai__goz { transform-origin: 795px 359px;
                      animation: ai-kirp 5.5s steps(1) 2s infinite; }
@keyframes ai-kirp {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(.12); }
}

/* -- Sag goz: ACIK duruyor, yalnizca el sallarken goz kirpiyor.
      Cizimde sag goz kirpik cizilmis; .ai__goz-a acik hali, .ai__goz-k
      kirpik hali. Ikisi opaklikla degistirilir — steps(1) ile ani gecis,
      cunku goz kirpmada ara kare yok.
      Sureler .ai__kol el sallamasiyla ayni (2.2s x 3): kol yukaridayken
      goz kapali, kol inince aciliyor. Son tekrarda ACIK kaliyor. -- */
.ai__goz-k { opacity: 0; }
.ai--tanit .ai__goz-k { animation: ai-goz-k 2.2s steps(1) .8s 3; }
.ai--tanit .ai__goz-a { animation: ai-goz-a 2.2s steps(1) .8s 3; }
@keyframes ai-goz-k {
  0%, 11%        { opacity: 0; }
  12%, 47%       { opacity: 1; }
  48%, 100%      { opacity: 0; }
}
@keyframes ai-goz-a {
  0%, 11%        { opacity: 1; }
  12%, 47%       { opacity: 0; }
  48%, 100%      { opacity: 1; }
}

/* -- Cizimdeki konusma baloncugu: maskot gelince belirir, uc nokta ziplar,
      sonra soner — sirayi HTML baloncugu (.ai__bal) devralir.
      Kuyrugundan buyusun diye eksen asagida. -- */
.ai__knb { transform-origin: 440px 660px; opacity: 0; transform: scale(.3); }
.ai--tanit .ai__knb { animation: ai-knb 3.6s var(--e) .9s both; }

/* Cizimdeki baloncuk YALNIZCA bostaki hareketlerde cikar.
   Ustune gelindiginde de cikarilmisti ama o an ustteki metin baloncugu
   da aciliyor ve ekranda iki baloncuk birden duruyordu. */
.ai--i1 .ai__knb, .ai--i3 .ai__knb {
  animation: ai-knb 2.6s var(--e) .15s both;
}

/* -- .ai--sus : fare maskotun ustundeyken cizimdeki baloncuk susar --
   Tanitim ya da bostaki hareket surerken ustune gelinirse cizimdeki
   baloncuk hâlâ ekrandaydi ve ustteki metin baloncuguyla ust uste
   biniyordu. Sinif JS ile fare girince eklenir, cikinca kaldirilir.
   !important sart: yukaridaki .ai--tanit / .ai--i1 / .ai--i3 kurallari
   ayni ozgullukte ve daha sonra geldigi icin aksi hâlde kazanirdi. */
.ai--sus .ai__knb,
.ai--sus .ai__kn { animation: none !important; }
.ai--sus .ai__knb { opacity: 0; }
.ai--i1 .ai__kn, .ai--i3 .ai__kn {
  animation: ai-kn 1s ease-in-out .35s 2;
}
.ai--i1 .ai__kn + .ai__kn,
.ai--i3 .ai__kn + .ai__kn { animation-delay: .47s; }
.ai--i1 .ai__kn + .ai__kn + .ai__kn,
.ai--i3 .ai__kn + .ai__kn + .ai__kn { animation-delay: .59s; }
@keyframes ai-knb {
  0%        { opacity: 0; transform: scale(.3); }
  12%, 86%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(.86); }
}
/* Kardes zinciri ile sirali gecikme: ayni <g> icinde baska <circle>'lar da
   oldugu icin nth-of-type yanlis dugume denk geliyordu. */
.ai--tanit .ai__kn { animation: ai-kn 1.1s ease-in-out 1.2s 3; }
.ai--tanit .ai__kn + .ai__kn { animation-delay: 1.34s; }
.ai--tanit .ai__kn + .ai__kn + .ai__kn { animation-delay: 1.48s; }
/* Oteleme viewBox biriminde (1286 genislik) olculur — ekran pikseli degil */
@keyframes ai-kn {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-46px); opacity: 1; }
}

/* Okunmamis bildirim noktasi */
.ai__nb { position: absolute; right: 10px; top: 10px;
          width: 13px; height: 13px;
          background: #E5484D; border: 2px solid var(--white);
          border-radius: var(--rp); opacity: 0; transform: scale(.4);
          transition: opacity var(--t2), transform var(--t2); }
.ai--uyari .ai__nb { opacity: 1; transform: none; }


/* ==========================================================================
   2. BALONCUK
   --------------------------------------------------------------------------
   Cizimdeki uc noktali baloncugun devami. Robotun TAM BASININ USTUNDE
   durur, kuyrugu dumduz asagi — basa — bakar. Bu yuzden akista degil,
   MUTLAK konumlanir.

   OLCU: maskotla ayni genislikte (en fazla 130 px), yazi satirlara
   bolunur. Boyu icerige gore degistigi icin ustten degil ALTTAN
   sabitlenir — kuyruk her zaman basin ustunde kalir.

   Kuyruk basin merkezine denk gelecek sekilde saga sabitlenir: basin
   merkezi SVG'de x=789/1286, yani 130 px'lik maskotta soldan 80 px.
   Baloncuk sag kenardan 6 px iceride ve .ai__mas 150 px genis oldugu
   icin 144 - 80 - 8 = 56.

   Kendiliginden kapanmaz: son satirda kalir, ziyaretci kapatir ya da
   sohbeti acinca gider.
   ========================================================================== */
.ai__bal { --bal-kyr: 56px;
           /* Salinim robotu 7 px yukari tasiyor; kuyruk ona degmesin */
           position: absolute; right: 6px; bottom: 172px; z-index: 2;
           width: 130px; max-width: calc(100vw - 28px);
           padding: 10px var(--s5) 10px var(--s4);
           text-align: center;
           background: var(--white); border: 2px solid var(--brand);
           border-radius: var(--r5);
           box-shadow: 0 14px 32px rgba(16,30,54,.2);
           animation: ai-bal .45s var(--e) both; }
@keyframes ai-bal {
  from { opacity: 0; transform: translateY(10px) scale(.8); }
  to   { opacity: 1; transform: none; }
}

/* Kuyruk — dumduz asagi, robotun basina */
.ai__bal::after { content: ''; position: absolute;
                  right: var(--bal-kyr); bottom: -10px;
                  width: 17px; height: 17px; transform: rotate(45deg);
                  background: var(--white);
                  border-right: 2px solid var(--brand);
                  border-bottom: 2px solid var(--brand);
                  border-bottom-right-radius: 4px; }

/* Satirlar sirayla degisir; her degisimde kisa bir belirme */
.ai__bal-m { display: block; min-height: 1.4em;
             font-size: var(--fs-3xs); font-weight: var(--fw-700);
             line-height: 1.4; color: var(--tx); }
.ai__bal-m--gec { animation: ai-bal-m .3s var(--e) both; }
@keyframes ai-bal-m {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* Baloncuk dar oldugu icin kapat dugmesi kucuk ve sag ust kosede */
.ai__bal-k { position: absolute; right: 3px; top: 3px;
             display: inline-flex; align-items: center; justify-content: center;
             width: 19px; height: 19px; color: var(--tx-faint);
             border-radius: var(--rp); transition: all var(--t1); }
.ai__bal-k:hover { color: var(--white); background: var(--tx-mute); }


/* ==========================================================================
   3. SOHBET PANELI
   ========================================================================== */
.ai__pnl { display: flex; flex-direction: column;
           width: min(380px, calc(100vw - var(--s5) * 2));
           height: min(560px, calc(100vh - var(--hd-h-s) - var(--s7)));
           margin-right: var(--s5);
           background: var(--white); border: 1px solid var(--line);
           border-radius: var(--r4); overflow: hidden;
           box-shadow: 0 24px 60px rgba(16,30,54,.26);
           animation: ai-ac .26s var(--e) both; }
@keyframes ai-ac {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* -- Baslik -- */
.ai__bas-s { display: flex; align-items: center; gap: var(--s3);
             padding: var(--s3) var(--s4); background: var(--g-koyu); }
.ai__av { flex: none; display: inline-flex; align-items: center; justify-content: center;
          width: 38px; height: 38px; overflow: hidden;
          background: var(--brand-50); border-radius: var(--rp); }
.ai__av-s { width: 38px; height: 29px; }

.ai__kim { flex: 1; min-width: 0; }
.ai__kim b { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-800);
             color: var(--white); }
.ai__kim i { display: flex; align-items: center; gap: 5px; margin-top: 1px;
             font-size: 10px; font-style: normal; color: rgba(255,255,255,.66); }
.ai__nokta { width: 7px; height: 7px; background: #34D399; border-radius: var(--rp);
             box-shadow: 0 0 0 0 rgba(52,211,153,.6);
             animation: ai-cnl 2.2s var(--e) infinite; }
@keyframes ai-cnl {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.ai__kapa { flex: none; display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 30px; color: rgba(255,255,255,.8);
            border-radius: var(--rp); transition: all var(--t1); }
.ai__kapa:hover { color: var(--white); background: rgba(255,255,255,.14); }

/* Temizle: kapatma dugmesinin yaninda, ayni koyu baslik uzerinde */
.ai__tmz { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px;
           font-family: inherit; font-size: 11px; font-weight: var(--fw-600); color: rgba(255,255,255,.8);
           background: none; border: 1px solid rgba(255,255,255,.22); border-radius: var(--rp);
           cursor: pointer; transition: all var(--t1); }
.ai__tmz:hover { color: var(--white); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.ai__tmz[hidden] { display: none; }
@media (max-width: 380px) { .ai__tmz span { display: none; } .ai__tmz { padding: 0; width: 30px; justify-content: center; } }

/* -- Ses ac/kapat: maskot kendiliginden ses cikardigi icin gorunur bir
      kapatma yolu sart. Basili durum (aria-pressed) = ses kapali. -- */
.ai__ses { flex: none; display: inline-flex; align-items: center; justify-content: center;
           width: 30px; height: 30px; color: rgba(255,255,255,.7);
           border-radius: var(--rp); transition: all var(--t1); }
.ai__ses:hover { color: var(--white); background: rgba(255,255,255,.14); }
.ai__ses-k { display: none; }
.ai__ses[aria-pressed="true"] { color: rgba(255,255,255,.45); }
.ai__ses[aria-pressed="true"] .ai__ses-a { display: none; }
.ai__ses[aria-pressed="true"] .ai__ses-k { display: inline-flex; }

/* -- Demo uyarisi -- */
.ai__demo { display: flex; align-items: flex-start; gap: 6px;
            padding: var(--s2) var(--s4);
            font-size: 10px; line-height: 1.5; color: var(--brand-700);
            background: var(--brand-50);
            border-bottom: 1px solid var(--brand-200); }
.ai__demo svg { flex: none; margin-top: 1px; color: var(--brand); }

/* -- Mesaj akisi -- */
.ai__akis { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
            display: flex; flex-direction: column; gap: var(--s3);
            padding: var(--s4); background: var(--mist);
            scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.ai__akis::-webkit-scrollbar { width: 6px; }
.ai__akis::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--rp); }

.ai__m { max-width: 86%; padding: var(--s3) var(--s4);
         font-size: var(--fs-3xs); line-height: 1.65;
         border-radius: var(--r3);
         animation: ai-m .24s var(--e) both; }
@keyframes ai-m { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ai__m--bot { align-self: flex-start; color: var(--tx-soft);
              background: var(--white); border: 1px solid var(--line);
              border-bottom-left-radius: 5px; }
.ai__m--ben { align-self: flex-end; color: var(--white);
              background: var(--brand); border-bottom-right-radius: 5px; }
.ai__m b { color: inherit; font-weight: var(--fw-700); }

/* Yanit altindaki baglanti dugmesi */
.ai__m-bag { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s3);
             padding: 6px var(--s3); font-size: 10px; font-weight: var(--fw-700);
             color: var(--brand-700); background: var(--brand-50);
             border: 1px solid var(--brand-200); border-radius: var(--rp);
             transition: all var(--t1); }
.ai__m-bag:hover { color: var(--white); background: var(--brand); border-color: var(--brand); }
/* Danisman baglantisi WhatsApp acar; rengi de onu soylesin */
.ai__m-bag--wa { color: var(--white); background: #25D366; border-color: #25D366; }
.ai__m-bag--wa:hover { background: #1FBF5B; border-color: #1FBF5B; }

/* Yaziyor gostergesi */
.ai__yzr { align-self: flex-start; display: flex; gap: 4px;
           padding: var(--s3) var(--s4);
           background: var(--white); border: 1px solid var(--line);
           border-radius: var(--r3) var(--r3) var(--r3) 5px; }
.ai__yzr i { width: 6px; height: 6px; background: var(--tx-faint);
             border-radius: var(--rp); animation: ai-zip 1.2s ease-in-out infinite; }
.ai__yzr i:nth-child(2) { animation-delay: .16s; }
.ai__yzr i:nth-child(3) { animation-delay: .32s; }
@keyframes ai-zip {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* -- Hazir sorular -- */
.ai__hizli { display: flex; flex-wrap: wrap; gap: 5px;
             padding: var(--s3) var(--s4);
             background: var(--white); border-top: 1px solid var(--line-soft); }
.ai__hz { display: inline-flex; align-items: center; gap: 5px;
          padding: 6px var(--s3); font-family: var(--font);
          font-size: 10px; font-weight: var(--fw-600); color: var(--tx-soft);
          background: var(--mist); border: 1px solid var(--line-soft);
          border-radius: var(--rp); transition: all var(--t1); }
.ai__hz svg { color: var(--brand); }
.ai__hz:hover { color: var(--brand-700); background: var(--brand-50);
                border-color: var(--brand-200); }

/* -- Yazma alani -- */
.ai__yaz { display: flex; align-items: flex-end; gap: var(--s2);
           padding: var(--s3) var(--s4); background: var(--white);
           border-top: 1px solid var(--line); }
.ai__giris { flex: 1; min-height: 42px; max-height: 120px; resize: none;
             padding: 11px var(--s4);
             font-family: var(--font); font-size: var(--fs-3xs); line-height: 1.5;
             color: var(--tx); background: var(--mist);
             border: 1.5px solid transparent; border-radius: var(--r3);
             transition: border-color var(--t1), background var(--t1), box-shadow var(--t1); }
.ai__giris:focus { outline: none; background: var(--white); border-color: var(--brand);
                   box-shadow: 0 0 0 3px var(--brand-50); }

.ai__gonder { flex: none; display: inline-flex; align-items: center; justify-content: center;
              width: 42px; height: 42px; color: var(--white);
              background: var(--brand); border-radius: var(--rp);
              transition: all var(--t1); }
.ai__gonder:hover { background: var(--brand-600); transform: scale(1.06); }
.ai__gonder:disabled { background: var(--line); cursor: not-allowed; transform: none; }

/* -- Insana ulasma seridi --
   Demo modunda asistan gercek yanit veremiyor; bu serit panelin en
   isine yarar parcasi. Ince gri bir satirken goz kaciriyordu, artik
   kendi zemini ve iki dolu dugmesi var. */
.ai__alt { display: flex; flex-direction: column; gap: var(--s2);
           padding: var(--s3) var(--s4);
           background: var(--mist); border-top: 1px solid var(--line); }
.ai__alt-e { display: flex; align-items: center; gap: 5px;
             font-size: var(--fs-3xs); font-weight: var(--fw-600); color: var(--tx-mute); }
.ai__alt-e svg { flex: none; color: var(--brand); }
.ai__alt-d { display: flex; gap: var(--s2); }
/* Ikisi de DOLU dugme, yazi beyaz. Telefon dugmesi beyaz zeminli ve
   numara siyahti; yanindaki yesil WhatsApp dugmesiyle ayni serit icinde
   yamali duruyordu. */
.ai__alt-b { flex: 1; display: inline-flex; align-items: center; justify-content: center;
             gap: 6px; min-height: 38px; padding: 0 var(--s3);
             font-size: var(--fs-3xs); font-weight: var(--fw-700);
             color: var(--white); background: var(--brand);
             border: 1px solid transparent; border-radius: var(--r2);
             transition: all var(--t1); }
.ai__alt-b svg { flex: none; color: currentColor; }
.ai__alt-b:hover { color: var(--white); background: var(--brand-600);
                   box-shadow: 0 4px 12px rgba(244,125,24,.28); transform: translateY(-1px); }
.ai__alt-b--wa { color: var(--white); background: #25D366; border-color: #25D366; }
.ai__alt-b--wa svg { color: var(--white); }
.ai__alt-b--wa:hover { color: var(--white); background: #1FBF5B; border-color: #1FBF5B;
                       box-shadow: 0 6px 16px rgba(37,211,102,.34); }


/* ==========================================================================
   4. DAR EKRAN
   ========================================================================== */
@media (max-width: 560px) {
  .ai { bottom: var(--s4); }
  .ai__mas { padding-right: var(--s4); }
  .ai__sahne { width: 104px; height: 130px; padding: 10px 0 16px; }
  .ai__ac { width: 104px; height: 104px; }
  .ai__golge { width: 54px; bottom: -12px; }
  /* Maskot 104 px: bas merkezi soldan 64, .ai__mas 120 -> 114-64-8 = 42 */
  .ai__bal { --bal-kyr: 42px;
             right: 6px; bottom: 142px; width: 116px;
             padding: 9px var(--s4) 9px var(--s3); }
  .ai__pnl { width: calc(100vw - var(--s4) * 2); margin-right: var(--s4);
             height: min(72vh, 560px); }
}

/* Panel acikken maskot gizlenir: kucuk ekranda ikisi birden yer kaplamasin */
@media (max-width: 560px) {
  .ai--acik .ai__mas { display: none; }
}


/* ==========================================================================
   5. HAREKET AZALTMA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ai__ac { transition: none; }
  .ai__uc, .ai__golge { animation: none; }
  .ai--tanit .ai__kol,
  .ai--girdi .ai__goz,
  .ai--tanit .ai__kn,
  .ai--tanit .ai__knb,
  .ai--tanit .ai__goz-k,
  .ai--tanit .ai__goz-a,
  .ai--i1 .ai__kol, .ai--i1 .ai__goz-k, .ai--i1 .ai__goz-a,
  .ai--i2 .ai__goz, .ai--i2 .ai__svg,
  .ai--i3 .ai__svg, .ai--i3 .ai__kol,
  .ai--el .ai__kol, .ai--el .ai__goz-k, .ai--el .ai__goz-a,
  .ai--i1 .ai__knb, .ai--i3 .ai__knb,
  .ai--i1 .ai__kn,  .ai--i3 .ai__kn { animation: none; }
  .ai__bal, .ai__bal-m--gec, .ai__pnl, .ai__m { animation: none; }
  .ai__nokta { animation: none; }
  .ai__yzr i { animation: none; opacity: .6; }
}




/* ==========================================================================
   CAMA TIKLATMA (.ai--tik)  —  yalnizca tur detay sayfasinda
   --------------------------------------------------------------------------
   Maskot elini kaldirip ekranin ic yuzune iki kez tiklatir ve o tura ozel
   cumleyi soyler.

   ONCEKI SURUM NEDEN OTURMUYORDU: kol rotate(-16deg) ile donduruluyordu.
   Kol omuzdan (640,825) doner ve el dinlenmede (362,1100) noktasindadir —
   yani omuzun ALTINDA ve SOLUNDA. NEGATIF donus eli asagi saga savuruyor;
   ekranda "kol dusuyor" gibi goruluyordu, vurma gibi degil.
   POZITIF donus eli yukari kaldirir: 34 derecede el (256,898) noktasina,
   yani gogus hizasina gelir. Dogru hareket budur.

   VURUS NASIL ANLATILIYOR: kol tek parca, dirsek bukulemiyor. Bu yuzden
   "one uzanma" omuz ekseninden yapilan kucuk bir scale ile anlatiliyor —
   eksen omuzda oldugu icin buyutme eli omuzdan UZAKLASTIRIR, yani izleyiciye
   dogru uzanmis gibi gorunur.

   OLCULER TAHMIN DEGIL: el konumu SVG yol verisi ayristirilarak hesaplandi
   (scratchpad/kololc.php). Dalga halkalari elin 34 derecedeki yerinden
   cikar; baska bir noktadan ciksa el bir yere vurur halka baska yerden
   yayilir ve efekt dagilir.

   SES ILE ESLESME: dizi 1,7 sn. Temas anlari %16 (0,27 sn) ve %24 (0,41 sn).
   js/ai.js icindeki cal('tiktik') sesleri tam bu iki ana zamanlar.
   ========================================================================== */

/* -- Kol: kalkar, iki kez uzanip geri ceker, sonra iner -- */
.ai--tik .ai__kol { animation: ai-tikla 1.7s var(--e) 1; }
@keyframes ai-tikla {
  0%   { transform: rotate(0deg)  scale(1); }
  13%  { transform: rotate(34deg) scale(1); }      /* el kalkti */
  16%  { transform: rotate(35deg) scale(1.07); }   /* 1. temas */
  20%  { transform: rotate(33deg) scale(1); }
  24%  { transform: rotate(35deg) scale(1.07); }   /* 2. temas */
  28%  { transform: rotate(33deg) scale(1); }
  70%  { transform: rotate(34deg) scale(1); }      /* bir an havada bekler */
  100% { transform: rotate(0deg)  scale(1); }
}

/* -- Govde: cama dogru hafifce yaslanir.
      Onceki surumde butun govde %7 buyuyordu; bu "yakinlasma" degil
      "yakinlastirma" gibi duruyordu. Kucuk bir yaslanma daha inandirici. -- */
.ai--tik .ai__svg { animation: ai-tik-govde 1.7s var(--e) 1; }
@keyframes ai-tik-govde {
  0%, 100%  { transform: translateX(0) rotate(0deg); }
  13%, 70%  { transform: translateX(-3px) rotate(-2deg); }
}

/* -- Cam dalgasi: elin 34 derecedeki yerinden yayilan iki ince halka --
      Konum SVG olcumunden: el (256,898) -> %19,9 soldan, %69,8 ustten.
      Salinimla birlikte hareket etsin diye govdenin ucus animasyonunun
      AYNISINI tasir; yoksa robot yukari sallanirken halka yerinde kalip
      elden kopuyor. Ikisi de sayfa acilisinda basladigi icin ayni fazda. */
.ai__cam { position: absolute; left: 17.8%; top: 69.6%;
           width: 0; height: 0; pointer-events: none;
           animation: ai-uc 4s ease-in-out infinite; }

.ai__cam i { position: absolute; left: 50%; top: 50%;
             width: 18px; height: 18px; margin: -9px 0 0 -9px;
             border: 1.5px solid var(--brand); border-radius: var(--rp);
             opacity: 0; transform: scale(.25); }

.ai--tik .ai__cam i { animation: ai-cam .72s var(--e) 1; animation-delay: .27s; }
.ai--tik .ai__cam i + i { animation-delay: .41s; }

@keyframes ai-cam {
  0%   { opacity: 0;   transform: scale(.25); }
  10%  { opacity: .75; transform: scale(.55); }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* Hareketi azaltma tercihinde vurus gorsel olarak yapilmaz; baloncuk yine
   acilir. Ses ayri bir tercih (maskot ses dugmesi) ve ondan etkilenmez. */
@media (prefers-reduced-motion: reduce) {
  .ai--tik .ai__kol, .ai--tik .ai__svg, .ai--tik .ai__cam i { animation: none; }
  .ai__cam { animation: none; }
  .ai__cam i { opacity: 0; }
}


/* ==========================================================================
   [2026/CI] GERCEK YANITLAR — tur kartlari, sayfa baglantilari, bicim
   Sunucu (ajax/chatbot) bulunan turlari kart, ilgili sayfalari baglanti
   olarak dondurur; js/ai.js mesajin hemen altina cizer.
   ========================================================================== */
.ai__m a { color: inherit; font-weight: var(--fw-700); text-decoration: underline; text-underline-offset: 2px; }
.ai__m--bot a { color: var(--brand-700); }

/* Tur kartlari: pencere genisliginde alt alta, solda kucuk gorsel sagda bilgi.
   (Yatay kaydirmali seritte ucuncu kart kesiliyor ve kaydirma cubugu cikiyordu.) */
.ai__turlar { flex: none; display: flex; flex-direction: column; gap: 6px; }
.ai__tur { display: grid; grid-template-columns: 84px minmax(0,1fr); align-items: stretch; overflow: hidden;
           color: var(--tx); background: var(--white);
           border: 1px solid var(--line); border-radius: var(--r3);
           transition: border-color var(--t1), box-shadow var(--t1); }
.ai__tur:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(16,30,54,.1); }
.ai__tur-g { position: relative; display: block; min-height: 76px; overflow: hidden; background: var(--mist-2); }
.ai__tur-g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ai__tur-g i { position: absolute; left: 4px; top: 4px; padding: 1px 6px; font-style: normal;
               font-size: 8px; font-weight: var(--fw-800); color: var(--white); background: var(--no);
               border-radius: var(--rp); white-space: nowrap; }
.ai__tur-i { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0;
             padding: 7px var(--s3) 8px; }
.ai__tur-i b { font-size: 11px; font-weight: var(--fw-700); line-height: 1.3;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai__tur-i small { font-size: 10px; color: var(--tx-mute); line-height: 1.35;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai__tur-i em { margin-top: 1px; font-style: normal; font-size: 12px; font-weight: var(--fw-800); color: var(--brand); }
.ai__tur-i em s { font-size: 10px; font-weight: var(--fw-500); color: var(--tx-faint); }
.ai__tur-i em span { font-size: 9px; font-weight: var(--fw-500); color: var(--tx-mute); }
.ai__baglar { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ai__baglar .ai__m-bag { margin-top: 0; }

/* Yanit beklenirken gonder dugmesi pasif gorunur */
.ai--bekliyor .ai__gonder, .ai--bekliyor .ai__tmz { opacity: .5; pointer-events: none; }

/* Acik pencere cerez bandinin (--z-tp) ustunde kalsin: band pencerenin altini kapatiyordu */
.ai--acik { z-index: calc(var(--z-tp) + 1); }