/* ==========================================================================
   Yalınay Şekerleme — Site Asistanı
   Tema değişkenlerini kullanır; renk kovaları yalnız burada tanımlıdır.
   ========================================================================== */

.ai-gizli {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ai-asistan {
    position: fixed;
    inset-inline-end: 18px;
    bottom: 18px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-family: inherit;

    /* 🔴 TEK BOYUT JETONU (12 Eki). Ölçülen: boyut CSS'e gömülüydü
       (düğme 56px, görsel 52px) ve `--ai-mascot-size` HİÇ tanımlı
       değildi — "ölçeklenebilir" talebi karşılanamıyordu.
       Düğme ve görsel ikisi de bu jetondan okur; ikinci bir sabit
       yazmak yeniden "yarım boy" hatası üretir.
       Karakter kaynakları 100×110 (tam boy); 52×52'lik DAİREYE
       sıkıştırılıyordu, baş ve ayaklar kırpılıyordu. */
    --ai-mascot-size: 88px;
}

/* Üç hazır boy. Veri niteliğiyle seçilir (HTML'den), böylece JS'e
   gerek kalmadan da değiştirilebilir. */
.ai-asistan[data-ai-maskot-boyut="kucuk"] { --ai-maskot-size: 56px; }
.ai-asistan[data-ai-maskot-boyut="buyuk"] { --ai-mascot-size: 120px; }

/* Duyarlı: dar ekranda bir kademe küçülür, geniş ekranda büyür. */
@media (max-width: 640px) {
    .ai-asistan { --ai-mascot-size: 60px; }
}
@media (min-width: 1440px) {
    .ai-asistan { --ai-mascot-size: 88px; }
}

/* ------------------------------------------------------------- açma düğmesi */
.ai-ac {
    order: 2;                    /* panel büyürken maskot altta kalsın */
    width:  var(--ai-mascot-size);
    height: var(--ai-mascot-size);
    /* 🔴 İSTEK: "arka planı olmayan bir masket". Düğmenin ZEMİNİ,
       ÇERÇEVESİ ve KÖŞESİ kaldırıldı; yalnız masketin kendisi ve
       okunabilirlik için odak halkası var. Ölçülen: eskiden 90×90
       renkli yuvarlatılmış dikdörtgen + 1px kenarlık vardı. */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    /* Karakter saydam olduğu için gölge ZEMİN yerine kenardan düşer;
       kutu gölgesi kullanılsaydı "arka planı varmış" gibi görünürdü. */
    filter: drop-shadow(0 6px 10px rgb(0 0 0 / 30%));
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.ai-ac:hover  { transform: translateY(-5px); filter: drop-shadow(0 13px 20px rgb(0 0 0 / 38%)); }
/* Klavye kullanıcısı için halka; köşe yalnız odak halkasında yuvarlak. */
.ai-ac:focus-visible { outline: 3px solid var(--yalinay-primary, #8a5a3b); outline-offset: 5px; border-radius: 16px; }
/* 🔴 İSTEK: "tıkladığında maskot kaybolsun". Panel açılınca ayakta duran
   maskot DOM'dan çıkar; kapatılınca geri gelir. Durum tek yerden
   (`aria-expanded`) okunur — JS'de ek satır yazılmaz. */
.ai-ac[aria-expanded="true"] { display: none; }

.ai-maskot {
    display: block;
    color: inherit;
    /* SVG yedeği de aynı jetondan okur (ölçülen: 40×40 sabitti). */
    width: var(--ai-mascot-size);
    height: var(--ai-mascot-size);
}
/* 16 Eki: JS kareyi `<span>` üzerinde `background-image` olarak da
   uygular (`src` yalnız `<img>`de görsel üretir). Aynı görünüm için
   span yolunun kuralları — `object-fit`'in background karşılığı. */
.ai-maskot:not(img) {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}
.ai-maskot-svg { width: 100%; height: 100%; }

/* Kaynak karakter karesi TAM BOY (ölçülen: 100×110). Daireye kırpma
   YOK; `object-fit: contain` oranı korur, `object-position: bottom`
   ayakları zemine yaslar. `border-radius: 0` şart — 50% değeri karakteri
   yuvarlıyordu. */
.ai-maskot[src] {
    width: var(--ai-mascot-size);
    height: var(--ai-mascot-size);
    object-fit: contain;
    object-position: center bottom;
    border-radius: 0;
    /* Kırpmasız görsel için hafif gölge: zemine yapışmasın. */
    filter: drop-shadow(0 3px 6px rgb(0 0 0 / 18%));
}

/* Durumlar: göz kırpma ve ağız hareketi CSS ile; ilerleme YOK (prefers-reduced-motion) */
.ai-maskot[data-ai-durum="dusunuyor"] .ai-agiz { animation: ai_dusun 1.4s ease-in-out infinite; }
.ai-maskot[data-ai-durum="hata"]     .ai-goz  { transform: translateY(2px); }
@keyframes ai_dusun { 0%, 100% { d: path("M27 32 q5 4 10 0"); } 50% { d: path("M27 32 h10"); } }
@media (prefers-reduced-motion: reduce) {
    .ai-maskot[data-ai-durum="dusunuyor"] .ai-agiz { animation: none; }
    .ai-ac { transition: none; }
}

.ai-nokta {
    position: absolute;
    top: 3px; inset-inline-end: 3px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #16a34a;
    border: 2px solid var(--yalinay-surface, #fff);
}

/* ------------------------------------------------------------------- panel */
.ai-panel {
    order: 1;
    /* İstek: "sohbet penceresini biraz daha genişletelim" 360 → 420px.
       `min()` koruması duruyor: dar ekranda `100vw - 32px` devreye girer,
       yatay taşma olmaz (ölçülecek). */
    width: min(420px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    border: 1px solid var(--yalinay-border, #d8cfc4);
    border-radius: 14px;
    background: var(--yalinay-surface, #fff);
    box-shadow: 0 18px 48px rgb(0 0 0 / 18%);
    overflow: hidden;
}
.ai-panel[hidden] { display: none; }

.ai-kafa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--yalinay-primary, #8a5a3b);
    color: #fff;
}
.ai-ad { font-size: 15px; font-weight: 600; }
.ai-kapat {
    background: transparent; border: 0; color: #fff;
    font-size: 22px; line-height: 1; cursor: pointer;
    padding: 0 4px; border-radius: 4px;
}
.ai-kapat:focus-visible { outline: 2px solid #fff; }

.ai-konusma {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-mesaj {
    margin: 0;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
    max-width: 88%;
    /* 🔴 ÖLÇÜLEN KUSUR (12 Eki): `white-space: pre-wrap` HTML KAYNAĞINDAKİ
       satır kırılmasını ve girintiyi ekrana taşıyordu. Karşılama cümlesi
       kaynakta iki satıra bölünmüş yazıldığı için ekranda da bölündü ve
       16 satır kutusuna indi (ölçüldü: mesaj kutusu 183×180px — iki
       satırlık cümle 180px yer kaplıyordu, bu yüzden "ortalı ve bölünmüş"
       görünüyordu). Cevaplar tek paragraf olduğundan `normal` doğru.
       `break-word` yalnız SİĞMAYAN TEK KELİMEDE bölür; `anywhere`
       kelime ortasından zorla kırabiliyordu. */
    white-space: normal;
    overflow-wrap: break-word;
    /* İstek: "cevaplar mümkün olduğunca sol tarafa yanaşık olacak".
       Kutu zaten `align-self: flex-start` ile sola yaslanıyor; metnin de
       sola yaslanması açıkça yazılıyor (içerik kaynağının girintisi
       bir daha devreye giremez). */
    text-align: left;
}
.ai-bot     { background: color-mix(in srgb, var(--yalinay-primary, #8a5a3b) 10%, var(--yalinay-surface, #fff)); align-self: flex-start; }
.ai-kullanici { background: var(--yalinay-primary, #8a5a3b); color: #fff; align-self: flex-end; }

.ai-kart {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid var(--yalinay-border, #d8cfc4);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    background: var(--yalinay-surface, #fff);
}
.ai-kart:hover { border-color: var(--yalinay-primary, #8a5a3b); }
.ai-kart strong { font-size: 14px; color: var(--yalinay-primary, #8a5a3b); }
.ai-kart span   { font-size: 12.5px; opacity: .78; }

.ai-eylem {
    align-self: flex-start;
    font-size: 13px;
    color: var(--yalinay-primary, #8a5a3b);
    text-decoration: underline;
}

.ai-etiket {
    align-self: flex-start;
    font-size: 11.5px;
    font-style: normal;
    color: #6b7280;
    border: 1px dashed var(--yalinay-border, #d8cfc4);
    border-radius: 999px;
    padding: 2px 9px;
}

/* "Yazıyor" göstergesi — istek: "yazıyormuş gibi animasyon çıksın, hani
   3 nokta". ESKİ HÂL: panelin dibinde düz metin (`Yazıyorum…`), konuşma
   alanının DIŞINDA — mesajlar arasında yer kaplıyordu, kimse onu son
   mesaj gibi okumuyordu.
   Yeni hâl: konuşma alanının İÇİNDE, asistan balonuyla aynı görünümde
   bir balon; içinde ÜÇ nokta. Metin `.ai-gizli` içinde durur, yani
   ekran okuyucu "Yazıyorum…" duyar, gören kullanıcı yalnız noktaları
   görür. Üç nokta `<i>` öğeleridir; JS yalnız metni verir. */
.ai-ipucu {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 12px 13px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--yalinay-primary, #8a5a3b) 10%, var(--yalinay-surface, #fff));
}
.ai-ipucu > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--yalinay-primary, #8a5a3b) 62%, var(--yalinay-surface, #fff));
    animation: ai_yaziyor 1.1s ease-in-out infinite;
}
/* Gecikmeler sırayla: noktalar birbirinin peşinden gelsin, hep birlikte
   sıçramasınlar (ölçülecek: üçü aynı anda hareketlenmemeli).
   🔴 `nth-of-type`, `nth-child` DEĞİL: balonun içinde gizli metin
   `<span>`i de var ve o da 1. çocuk. `nth-child(2)` ilk `<i>`'ye
   biniyordu → gecikmeler 0,16/0,32/0 çıkıp dalga ÜÇÜNCÜ noktadan
   başlıyordu (ölçüldü). `nth-of-type` yalnız `<i>` etiketlerini sayar. */
.ai-ipucu > i:nth-of-type(2) { animation-delay: .16s; }
.ai-ipucu > i:nth-of-type(3) { animation-delay: .32s; }
@keyframes ai_yaziyor {
    0%, 60%, 100% { transform: translateY(0);    opacity: .40; }
    30%           { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    /* Hareket azaltmada noktalar durur ama ÜÇÜ DE görünür kalır
       (gizlenirse "asistan cevap veriyor" bilgisi kaybolur). */
    .ai-ipucu > i { animation: none; opacity: .75; }
}

/* ------------------------------------------------------------------- form */
.ai-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--yalinay-border, #d8cfc4); }
.ai-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--yalinay-border, #d8cfc4);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 14px;
    background: var(--yalinay-surface, #fff);
    color: inherit;
}
.ai-input:focus-visible { outline: 2px solid var(--yalinay-primary, #8a5a3b); }
.ai-gonder {
    border: 0; border-radius: 8px;
    padding: 9px 14px;
    background: var(--yalinay-primary, #8a5a3b);
    color: #fff; font-size: 14px; cursor: pointer;
}
.ai-gonder:disabled { opacity: .55; cursor: progress; }

.ai-sifirla {
    border: 0; background: transparent;
    font-size: 12px; color: #6b7280;
    padding: 0 12px 10px; cursor: pointer; text-decoration: underline;
}

@media (max-width: 420px) {
    .ai-asistan { inset-inline-end: 12px; bottom: 12px; }
    .ai-panel   { width: calc(100vw - 24px); }
}

/* ── SOHBET KUTUSU İÇİNDE KONUŞMACI ────────────────────────────────
 * İstek: "sohbet kutusunun içerisinde konuşmacı olarak sadece belden
 * üst tarafı görünsün ve sorulara göre yüz/el animasyonu olsun".
 *
 * KIRPMA NASIL YAPILIYOR: kaynak kare saydam (ölçüldü) ve tam boy
 * (idle 114×140). Kutu `overflow:hidden` + `object-fit:cover` +
 * `object-position` üçlüsüyle yalnız ÜST kısım gösterilir → gövde
 * görünür, bacaklar kırpılır = belden üst. Kırpma oranı tek jetonla
 * ayarlanır; ölçümde bu değer tarayıcıda yeniden ölçülüp güncellendi.
 *
 * ANİMASYON: `talk` slotu 5–7 kare ve hem yüz hem kol bölgesinde
 * ölçülebilir hareket içerir (bu turda GD ile ölçüldü: kafa %99,8,
 * kol/gövde %99,9). Konuşma sırasında bu kareler döngüye girer.
 */
.ai-sahne {
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 10px 12px 0;
    min-height: 0;
}
.ai-sahne .ai-konusma { flex: 1 1 auto; min-width: 0; }

.ai-konusmaci {
    flex: 0 0 auto;
    /* İstek: "maskotun resmini biraz daha küçültelim" 92 → 78px.
       Sütun genişliği de aynı değerden okunur, ikisi ayrışamaz. */
    width: 78px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ai-konusmaci-cerceve {
    position: relative;
    width: 78px;
    height: 62px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--yalinay-border, #d8cfc4) 62%, transparent);
    background: color-mix(in srgb, var(--yalinay-soft-bg, #f6f1ea) 78%, transparent);
}
.ai-konusmaci-gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔴 BELDEN ÜST: object-fit: cover yalnızca kutu oranı GÖRSEL
       oranından GENİŞ olduğunda alttan kırpar. Ölçülen hata: 92x116
       kutusu 114x136 görselden DAHA DAR olduğu için cover yükseklikten
       ölçekliyor ve DİKEY KIRPMA HİÇ OLMUYORDU (ayaklar görünüyordu).
       78x62 kutusu oranı 1,26 > 0,84 (görsel) → üstten kırpma başlar.
       Ölçüm tarayıcıda yapıldı: görünen kaynak satır aralığı raporlandı.
       ⚠️ BU KURAL TÜM `.ai-konusmaci-cerceve` kuralları için geçerli;
       dar ekran kuralı da oranı bozmayacak biçimde yazıldı (aşağıda). */
    object-position: 50% 0%;
    border-radius: 0;
    filter: none;
}
.ai-konusmaci-ad {
    font-size: 10.5px;
    line-height: 1.25;
    text-align: center;
    color: var(--yalinay-muted, #6b7280);
}
/* Konuşurken konuşmacı hafifçe canlanır (yalnızca kare değişimi değil,
   zamana bağlı bir hareket; `prefers-reduced-motion` altında susar). */
.ai-konusmaci-gorsel[data-ai-durum="konusuyor"] {
    animation: ai_konusuyor 900ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ai-konusmaci-gorsel[data-ai-durum="konusuyor"] { animation: none; }
}
@keyframes ai_konusuyor {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* Dar ekranda konuşmacı yan sütun yerine başlık şeridine döner;
   aksi halde mesaj alanı çok daralıyordu (ölçülecek).
   ⚠️ Kutu 64x80 İDİ ve oranı 0,80 < 0,84 idi → `object-fit: cover`
   yükseklikten ölçekliyor, DİKEY KIRPMA olmuyordu ve AYAKLAR görünüyordu
   (yani dar ekranda "belden üst" kuralı bozuluyordu). 64x54 → oran 1,19. */
@media (max-width: 400px) {
    .ai-sahne { flex-direction: column; gap: 8px; }
    .ai-konusmaci { width: 100%; flex-direction: row; align-items: center; gap: 8px; }
    .ai-konusmaci-cerceve { width: 64px; height: 54px; border-radius: 12px; }
    .ai-konusmaci-ad { text-align: left; }
}