/* site/css/asistan.css — FEYDEM site asistanı (sağ-alt köşe balonu).
   Yalnız css/tema.css jetonlarını okur (--marka, --zemin, --metin, --mono …) —
   yeni renk/font İCAT EDİLMEDİ. Radius 2-4px "neredeyse keskin", sektör imzasına
   sadık (Alleima/Krompa/FEYDEM). Kaynak: tasks/faz3-asistan-yon/ prototipi (Yön A),
   burada tek yön olarak cilalandı — "-a" ekleri düşürüldü.
   Barış'a sunulmaz; body[data-asistan="kapali"] sayfada tamamen gizlenir
   (ör. ileride _yapilandir.html — kendi token sistemi css/tema.css'ten bağımsız). */

:root{ --fd-r:4px; --fd-r-buyuk:6px; }

body[data-asistan="kapali"] .fd-fab,
body[data-asistan="kapali"] .fd-panel{ display:none !important; }

.fd-fab,.fd-panel,.fd-mesaj,.fd-kart,.fd-cip,.fd-giris{ box-sizing:border-box; }

/* ── Yüzen düğme ─────────────────────────────────────────────────── */
.fd-fab{
  position:fixed; right:24px; bottom:24px; z-index:9998;
  width:60px; height:60px; border-radius:50%;
  background:var(--marka); color:#fff; border:2px solid var(--marka-ustu,#fff); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform 160ms cubic-bezier(0.23,1,0.32,1), background 160ms ease-out;
}
.fd-fab:hover{ background:var(--marka-koyu); transform:translateY(-2px); }
.fd-fab:active{ transform:scale(0.97); }
.fd-fab:focus-visible{ outline:2px solid var(--marka-halka); outline-offset:3px; }
.fd-fab svg{ width:26px; height:26px; }
.fd-fab .fd-nokta{ position:absolute; top:6px; right:6px; width:10px; height:10px; background:#22c55e; border:2px solid #fff; border-radius:50%; }
html[dir="rtl"] .fd-fab{ right:auto; left:24px; }
html[dir="rtl"] .fd-fab .fd-nokta{ right:auto; left:6px; }
/* ── Maskot (VERİ: data/asistan-arayuz.json → "maskot") ──────────────
   Görsel kendi zeminiyle gelir, daireyi tarayıcı görselin kendisinden keser (dekupe yok). js görseli yalnız
   YÜKLENİNCE ekler; alan yoksa / yüklenmezse bu bloğun hiçbir kuralı eşleşmez, balon aynen kalır.
   Görsel daireden 2px içeride durur: düğmenin kendi --marka zemini çevresinde ince bir halka olarak kalır. Bu halka
   beyaz sayfada dairenin alt kenarını kapatır (robotun beyaz gövdesi sayfaya karışmasın) ve üstüne gelince koyulaşır.
   Çevrimiçi noktası robotun yüzünü kapatmasın diye maskot varken dairenin kenarına oturur (profil resmi düzeni).
   Arapçada nokta sola geçtiği için görsel de aynalanır: el hep noktanın karşı tarafında kalır. */
.fd-fab .fd-maskot{
  position:absolute; top:2px; left:2px; width:calc(100% - 4px); height:calc(100% - 4px); border-radius:50%; object-fit:cover;
  display:block; pointer-events:none; user-select:none;
  transition:transform 160ms cubic-bezier(0.23,1,0.32,1); animation:fd-maskot-gel 180ms ease-out;
}
@keyframes fd-maskot-gel{ from{ opacity:0; } }
.fd-fab .fd-maskot ~ .fd-nokta{ top:2px; right:2px; }
html[dir="rtl"] .fd-fab .fd-maskot{ transform:scaleX(-1); }
html[dir="rtl"] .fd-fab .fd-maskot ~ .fd-nokta{ left:2px; }
@media (hover:hover){ /* daire kendi içinde döner, ayak izi değişmez: üstüne gelince baş eğme */
  .fd-fab:hover .fd-maskot{ transform:rotate(-6deg); }
  html[dir="rtl"] .fd-fab:hover .fd-maskot{ transform:scaleX(-1) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){ .fd-fab .fd-maskot{ transition:none; animation:none; } }

/* ── Panel ───────────────────────────────────────────────────────── */
.fd-panel{
  position:fixed; right:24px; bottom:98px; z-index:9997;
  width:380px; max-width:calc(100vw - 32px); height:600px; max-height:calc(100vh - 140px);
  background:var(--zemin); border:2px solid var(--cizgi-kuvvetli); border-radius:var(--fd-r-buyuk);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:var(--sans, -apple-system, sans-serif);
  opacity:0; transform:translateY(8px) scale(0.98); pointer-events:none;
  transition:opacity 180ms cubic-bezier(0.23,1,0.32,1), transform 180ms cubic-bezier(0.23,1,0.32,1);
}
.fd-panel.fd-acik{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.fd-panel[hidden]{ display:none; }
html[dir="rtl"] .fd-panel{ right:auto; left:24px; }

.fd-ust{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding-block:.625rem; padding-inline:1.1rem .5rem; /* 44px dokunma hedefi sığsın diye dikey boşluk kısıldı → başlık yüksekliği 63,4 → 64px (ölçüldü) */
  background:var(--metin); color:#fff; flex:none;
}
.fd-ust-baslik{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.fd-ust-baslik b{ font-size:.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-ust-baslik span{ display:flex; align-items:center; font-family:var(--mono); font-size:.625rem; letter-spacing:.04em; color:rgba(255,255,255,.6); text-transform:uppercase; }
.fd-ust-baslik .fd-js-canli{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* dar yerde ikincil satır kısalır, başlık asla */
.fd-canli-nokta{ width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; margin-inline-end:.4rem; flex:none; }

/* Başlık eylemleri: Yeni sohbet + Kapat — ikisi de 44px dokunma hedefi, masaüstünde de. */
.fd-ust-eylemler{ display:flex; align-items:center; gap:.125rem; flex:none; }
.fd-kapat,.fd-yeni{
  position:relative; flex:none; box-sizing:border-box; width:44px; height:44px; padding:10px;
  background:none; border:none; border-radius:var(--fd-r); color:rgba(255,255,255,.8); cursor:pointer;
  transition:background 160ms ease-out, color 160ms ease-out;
}
.fd-kapat:focus-visible,.fd-yeni:focus-visible{ outline:2px solid rgba(255,255,255,.5); outline-offset:1px; }
.fd-kapat svg,.fd-yeni svg{ display:block; width:100%; height:100%; }
.fd-yeni[hidden]{ display:none; }
.fd-yeni:disabled{ opacity:.4; cursor:default; }
@media (hover:hover){
  .fd-kapat:hover,.fd-yeni:hover:not(:disabled){ color:#fff; background:rgba(255,255,255,.12); }
}
/* Onay durumu: düğme dolgulu turuncuya döner, "Emin misiniz?" yazısı düğmenin ALTINDA küçük etiket olarak açılır
   (başlık satırının genişliğine dokunmaz → başlık hiçbir dilde/genişlikte kesilmez). Beyaz yazı taşıyan dolgu
   --marka-dolgu-yazili (4.7:1); --marka ham hâliyle 3.1:1 verir (tema.css notu). */
.fd-yeni.fd-yeni--emin{ background:var(--marka-dolgu-yazili); color:var(--marka-ustu,#fff); }
@media (hover:hover){
  .fd-yeni.fd-yeni--emin:hover:not(:disabled){ background:var(--marka-koyu); }
}
.fd-yeni-yazi{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:3;
  padding:.5rem .7rem; border-radius:var(--fd-r);
  background:var(--marka-dolgu-yazili); color:var(--marka-ustu,#fff);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.04em; line-height:1.2; white-space:nowrap;
  opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none;
  transition:opacity 140ms cubic-bezier(0.23,1,0.32,1), transform 140ms cubic-bezier(0.23,1,0.32,1), visibility 0s linear 140ms;
}
.fd-yeni--emin .fd-yeni-yazi{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; }
.fd-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── Gövde: mesaj dizisi ─────────────────────────────────────────── */
.fd-govde{ flex:1; display:flex; flex-direction:column; gap:14px; overflow-y:auto; padding:1.1rem; overscroll-behavior:contain; }
.fd-mesaj{ display:flex; flex-direction:column; gap:8px; max-width:86%; }
.fd-mesaj--o{ align-self:flex-start; }
.fd-mesaj--ben{ align-self:flex-end; align-items:flex-end; }

.fd-balon{
  font-size:.875rem; line-height:1.55;
  padding:.75rem .95rem; border-radius:var(--fd-r);
  background:var(--yuzey); color:var(--metin-govde); border:1px solid var(--cizgi);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.fd-mesaj--ben .fd-balon{ background:var(--metin); color:#fff; border-color:var(--metin); }
.fd-balon strong{ color:inherit; font-weight:700; }
.fd-balon a{ color:var(--marka-metin); text-decoration:underline; text-underline-offset:2px; }
.fd-mesaj--ben .fd-balon a{ color:#ffd9c4; }
.fd-balon.fd-hata{ border-color:var(--marka); }

.fd-yaziyor{ display:flex; align-items:center; gap:4px; padding:.85rem 1rem; width:fit-content; }
.fd-yaziyor i{ width:6px; height:6px; border-radius:50%; background:var(--metin-silik); display:block; animation:fd-nefes 1.1s ease-in-out infinite; }
.fd-yaziyor i:nth-child(2){ animation-delay:.15s } .fd-yaziyor i:nth-child(3){ animation-delay:.3s }
@keyframes fd-nefes{ 0%,60%,100%{ opacity:.35; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-2px) } }

/* ── Kartlar (ürün / 3B / AR / foto / whatsapp) ─────────────────── */
.fd-kart{
  display:flex; align-items:center; gap:.75rem; text-decoration:none;
  background:var(--zemin); border:1px solid var(--kenar); border-radius:var(--fd-r);
  padding:.6rem .75rem; transition:border-color 160ms ease-out, background 160ms ease-out;
  width:min(320px,100%);
}
.fd-kart:hover{ border-color:var(--marka); background:var(--marka-hale); }
.fd-kart:focus-visible{ outline:2px solid var(--marka-halka); outline-offset:2px; }
.fd-kart img{ width:44px; height:44px; object-fit:cover; border-radius:2px; background:var(--yuzey-2); flex:none; }
.fd-kart-ikon{ width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:2px; background:var(--yuzey-2); color:var(--marka-metin); }
.fd-kart-ikon svg{ width:20px; height:20px; }
.fd-kart-metin{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.fd-kart-metin b{ font-size:.8125rem; font-weight:600; color:var(--metin); line-height:1.35; }
.fd-kart-metin span{ font-family:var(--mono); font-size:.625rem; letter-spacing:.06em; color:var(--metin-etiket); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-kart-ok{ flex:none; width:16px; height:16px; color:var(--metin-silik); }
.fd-kart-ok svg{ width:100%; height:100%; }
.fd-kart:hover .fd-kart-ok{ color:var(--marka); }

/* Whatsapp kartı: en belirgin — iki satıra insin, kesilmesin. */
.fd-kart-whatsapp{ width:100%; padding:.75rem .9rem; border-color:#bfe8d2; background:#f2fbf6; }
.fd-kart-whatsapp:hover{ border-color:#1f9d55; background:#e7f7ef; }
.fd-kart-whatsapp .fd-kart-ikon{ background:#1f9d55; color:#fff; }
.fd-kart-whatsapp .fd-kart-metin b{ white-space:normal; overflow:visible; text-overflow:clip; color:#137a3e; }
.fd-kart-whatsapp .fd-kart-metin span{ color:#2f8a5c; }

/* ── Hazır soru çipleri ──────────────────────────────────────────── */
.fd-cipler{ display:flex; flex-wrap:wrap; gap:.5rem; }
.fd-cip{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.04em;
  background:none; border:1px solid var(--kenar); color:var(--metin-orta);
  border-radius:999px; padding:.5rem .85rem; cursor:pointer; transition:border-color 150ms, color 150ms, background 150ms;
}
.fd-cip:hover{ border-color:var(--marka); color:var(--marka-metin); background:var(--marka-hale); }
.fd-cip:focus-visible{ outline:2px solid var(--marka-halka); outline-offset:2px; }
.fd-cip:disabled{ opacity:.5; cursor:default; }

/* ── Giriş alanı + KVKK ──────────────────────────────────────────── */
.fd-alt{ border-top:1px solid var(--cizgi); padding:.85rem 1.1rem 1rem; flex:none; }
.fd-giris-satiri{ display:flex; align-items:flex-end; gap:.5rem; }
.fd-giris{
  flex:1; font-family:var(--sans, sans-serif); font-size:.875rem;
  border:1px solid var(--kenar); border-radius:var(--fd-r); padding:.7rem .9rem;
  background:var(--zemin); color:var(--metin); resize:none; max-height:6.5em; line-height:1.4;
}
.fd-giris:focus-visible{ outline:2px solid var(--marka-halka); outline-offset:1px; border-color:var(--marka); }
.fd-giris:disabled{ opacity:.6; }
.fd-gonder{
  flex:none; width:2.6rem; height:2.6rem; display:flex; align-items:center; justify-content:center;
  background:var(--marka); color:#fff; border:1px solid var(--marka); border-radius:var(--fd-r);
  cursor:pointer; transition:background 160ms ease-out;
}
.fd-gonder:hover:not(:disabled){ background:var(--marka-koyu); border-color:var(--marka-koyu); }
.fd-gonder:active:not(:disabled){ transform:scale(0.97); }
.fd-gonder:focus-visible{ outline:2px solid var(--marka-halka); outline-offset:2px; }
.fd-gonder:disabled{ opacity:.55; cursor:default; }
.fd-gonder svg{ width:18px; height:18px; }
.fd-kvkk{ font-family:var(--mono); font-size:.625rem; letter-spacing:.02em; color:var(--metin-silik); line-height:1.5; margin-top:.5rem; }
.fd-kvkk a{ color:inherit; }

/* ── Mobil: tam ekran panel ──────────────────────────────────────── */
@media (max-width:640px){
  .fd-panel{
    right:0; left:0; bottom:0; top:0; width:100%; max-width:none; height:100%; max-height:none;
    border-radius:0; border:none; transform:translateY(12px);
  }
  .fd-panel.fd-acik{ transform:translateY(0); }
  html[dir="rtl"] .fd-panel{ right:0; left:0; }
  .fd-fab{ right:16px; bottom:16px; }
  html[dir="rtl"] .fd-fab{ right:auto; left:16px; }
  .fd-mesaj{ max-width:94%; }
}

@media print{
  .fd-fab,.fd-panel{ display:none !important; }
}

@media (hover:none) and (pointer:coarse){
  .fd-kart:hover,.fd-cip:hover,.fd-fab:hover{ background:inherit; } /* dokunmatikte sahte hover üretme */
}

@media (prefers-reduced-motion: reduce){
  .fd-yaziyor i{ animation:none; opacity:.7; }
  .fd-fab,.fd-panel,.fd-kart,.fd-cip,.fd-gonder,.fd-kapat,.fd-yeni,.fd-yeni-yazi{ transition:none !important; }
}

/* ── Davet — robot katmanı ────────────────────────────────────────────
   Robot (js/asistan-robot.js kurar), düğmenin (.fd-fab) GÖRSEL İKİZİ olan ayrı bir sabit katmandır: aynı konum, 60px daire,
   2px kenar, görsel 2px içeride, yeşil nokta. Düğmenin bir üst katında (9999) durur ve tıklamayı geçirir: tık ve klavye
   odağı hep düğmede kalır. Konum JS'ten değil bu kurallardan gelir (düğmeyle aynı sayılar: 24px; ≤640px'te 16px; Arapçada
   sol) — düğmenin kuralı değişirse BURASI da değişmeli (sınama: tasks/maskot/olc_davet.py r_ustuste, r_boyut_degisimi).
   Renk yalnız tema jetonları (+ düğmedeki #fff kenar ve #22c55e nokta, ikiz için aynen); yeni renk/font/gölge yok.
   Kaynak görünüm: tasks/maskot/hareket-deneme/index.html (.robot, .kirp, .maskot, .poz-kat). */
body[data-asistan="kapali"] .fd-robot{ display:none !important; }
.fd-robot{
  position:fixed; right:24px; bottom:24px; z-index:9999;
  width:60px; height:60px; box-sizing:border-box;
  pointer-events:none; user-select:none; -webkit-user-select:none;
}
.fd-robot[hidden]{ display:none; }
.fd-robot[data-durum="gizli"]{ visibility:hidden; }
html[dir="rtl"] .fd-robot{ right:auto; left:24px; }
@media (max-width:640px){
  .fd-robot{ right:16px; bottom:16px; }
  html[dir="rtl"] .fd-robot{ right:auto; left:16px; }
}
/* Arapçada katman aynalanır (düğmenin görseli de aynalı): robot soldan girer, nokta sola geçer, el noktanın karşısında kalır.
   Motorun yatay sayıları bu kabın İÇİNDE işler, bu yüzden işaret dönüşü için ayrı bir mantık gerekmez. */
.fd-robot-ayna{ position:absolute; inset:0; }
html[dir="rtl"] .fd-robot-ayna{ transform:scaleX(-1); }
/* Gövde: motorun dönüşümünün hedefi (alttan dönme/ezilme ekseni). Daire + kenar düğmeyle aynı. */
.fd-robot-govde{
  position:absolute; inset:0; box-sizing:border-box; border-radius:50%;
  background:var(--marka); border:2px solid var(--marka-ustu,#fff);
  transform-origin:50% 100%; will-change:transform;
}
/* Kırpma kabı sabit kalır (daire, kenardan 2px içeride); baş dönüşümü içindeki .fd-robot-poz'a uygulanır. */
.fd-robot-kirp{ position:absolute; inset:2px; border-radius:50%; overflow:hidden; isolation:isolate; }
.fd-robot-poz{ position:relative; width:100%; height:100%; transform-origin:50% 50%; will-change:transform; }
/* Beş kare üst üste, hepsi opak ve hep çizili (önceden çözülmüş): kare değişimi yalnız hangisinin üstte (fd-robot-ust)
   olduğunu değiştirir → boş kare / titreme olmaz. */
.fd-robot-poz img{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; z-index:0; user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
}
.fd-robot-poz img.fd-robot-ust{ z-index:1; }
.fd-robot .fd-nokta{
  position:absolute; top:2px; right:2px; width:10px; height:10px;
  background:#22c55e; border:2px solid #fff; border-radius:50%;
}
/* Düğme robotun yüzü olunca: zemin ve kenar saydam (altta ikinci bir turuncu halka/çift kenar görünmesin), balon ikonu ve
   kendi noktası gizli. Üstüne gelince kayma ve basınca küçülme YOK (ikiz yerinde kalır, üst üste binme bozulmaz).
   Odak halkası düğmede görünür kalır (halka dairenin dışında, robot katmanı onu örtmez). */
.fd-fab--robotlu{ background:transparent; border-color:transparent; transition:none; }
.fd-fab--robotlu svg,
.fd-fab--robotlu .fd-nokta{ visibility:hidden; }
.fd-fab--robotlu:hover{ background:transparent; transform:none; }
.fd-fab--robotlu:active{ transform:none; }
@media print{
  .fd-robot{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .fd-robot, .fd-robot *, .fd-fab--robotlu{ transition:none !important; animation:none !important; }
}

/* ── Davet — söz baloncuğu ────────────────────────────────────────────
   js/asistan-davet.js kurar: düğmenin (.fd-fab) yanında, alt kenarla hizalı küçük söz kutusu. İçinde iki düğme: sözün kendisi
   (tıklayınca sohbet penceresi açılır) ve × (kapatır; 30 gün davet yok). Görünüş ve hareket Barış'ın seçtiği deneme sayfasındaki
   baloncuktan (tasks/maskot/hareket-deneme/index.html: .bubble, .kapat, pop/kapa/kelime) alındı. Yeni renk/font/gölge YOK: yalnız
   tema jetonları (koyu temada jetonlar kendiliğinden döner); köşe ve kenar panelle aynı aile (--fd-r, --fd-r-buyuk, 2px --cizgi-kuvvetli).
   Süreler aşağıdaki --fd-davet-* özel nitelikleri. Yön CSS'ten gelir: Arapçada düğmenin sağında, kuyruk ters, × sol uçta.
   Katman: pencere 9997 · düğme ve baloncuk 9998 · robot 9999 (robot düğmeyle aynı yerde, baloncuk yanında: çakışmaz). */
body[data-asistan="kapali"] .fd-davet,
body[data-asistan="kapali"] .fd-davet-durum{ display:none !important; }
.fd-davet{
  --fd-davet-acilis:440ms; --fd-davet-kapanis:170ms; --fd-davet-kelime:340ms; --fd-davet-kelime-adim:70ms; --fd-davet-kelime-gecikme:200ms;
  --fd-davet-gecis:160ms;   /* düğmelerin hover rengi geçişi (panelin düğmeleriyle aynı) */
  --fd-davet-dugme:60px;    /* .fd-fab genişliği */
  --fd-davet-kenar:24px;    /* .fd-fab'ın köşeden uzaklığı (≤640px'te 16px) */
  --fd-davet-bosluk:12px;   /* düğme ile baloncuk arası */
  --fd-davet-alt:10px;      /* baloncuk alt kenarı, düğme alt kenarından bu kadar yukarıda (kuyruk düğmenin ortasına bakar) */
  --fd-davet-pay:16px;      /* baloncuğun öbür yandaki ekran payı */
  --fd-davet-yon:1;         /* +1: düğmenin solunda (kuyruk sağda) · −1: Arapça (düğmenin sağında) */
  position:fixed; z-index:9998; box-sizing:border-box;
  right:calc(var(--fd-davet-kenar) + var(--fd-davet-dugme) + var(--fd-davet-bosluk)); bottom:calc(var(--fd-davet-kenar) + var(--fd-davet-alt));
  width:max-content; max-width:min(260px, calc(100vw - var(--fd-davet-kenar) - var(--fd-davet-dugme) - var(--fd-davet-bosluk) - var(--fd-davet-pay)));
  background:var(--zemin); color:var(--metin-govde); border:2px solid var(--cizgi-kuvvetli); border-radius:var(--fd-r-buyuk);
  font-family:var(--sans, -apple-system, sans-serif); transform-origin:100% 80%;
}
html[dir="rtl"] .fd-davet{ --fd-davet-yon:-1; right:auto; left:calc(var(--fd-davet-kenar) + var(--fd-davet-dugme) + var(--fd-davet-bosluk)); transform-origin:0 80%; }
@media (max-width:640px){ .fd-davet{ --fd-davet-kenar:16px; } }
.fd-davet[data-d="gizli"]{ display:none; }
/* Kuyruk: baloncuğun düğmeye bakan kenarında, 45° döndürülmüş kare (iki kenarı çizgili) */
.fd-davet::after{
  content:""; position:absolute; right:-8px; bottom:19px; width:13px; height:13px; box-sizing:border-box;
  background:var(--zemin); border-top:2px solid var(--cizgi-kuvvetli); border-right:2px solid var(--cizgi-kuvvetli);
  border-top-right-radius:2px; transform:rotate(45deg);
}
html[dir="rtl"] .fd-davet::after{
  right:auto; left:-8px; border-right:0; border-left:2px solid var(--cizgi-kuvvetli); border-top-right-radius:0; border-top-left-radius:2px; transform:rotate(-45deg);
}
/* Sözün kendisi: baloncuğun bütün yüzeyi tıklanır (dolgu düğmenin içinde) */
.fd-davet-soz{
  display:block; width:100%; margin:0; padding-block:11px; padding-inline:13px 36px; border:0; border-radius:inherit; background:none;
  color:inherit; font:inherit; font-size:.875rem; line-height:1.5; text-align:start; text-wrap:pretty; overflow-wrap:anywhere; cursor:pointer;
  transition:background var(--fd-davet-gecis) ease-out;
}
.fd-davet-soz:focus-visible{ outline:2px solid var(--marka-metin); outline-offset:-4px; }
@media (hover:hover){ .fd-davet-soz:hover{ background:var(--yuzey); } }
.fd-davet-soz:active{ background:var(--yuzey-2); }
.fd-w{ display:inline-block; }
/* ×: görünür 28px (≥24), dokunma alanı 44px (::before taşar; z-index:1 → kuyruğun (::after) hit alanını da örter). Etiketi 4 dilde veriden. */
.fd-davet-kapat{
  position:absolute; z-index:1; top:4px; inset-inline-end:4px; width:28px; height:28px; margin:0; padding:5px; border:0; border-radius:var(--fd-r);
  background:transparent; color:var(--metin-soluk); cursor:pointer;
  transition:background var(--fd-davet-gecis) ease-out, color var(--fd-davet-gecis) ease-out;
}
.fd-davet-kapat::before{ content:""; position:absolute; inset:-8px; }
.fd-davet-kapat svg{ display:block; width:100%; height:100%; }
.fd-davet-kapat:focus-visible{ outline:2px solid var(--marka-metin); outline-offset:1px; }
@media (hover:hover){ .fd-davet-kapat:hover{ background:var(--yuzey-2); color:var(--metin); } }
/* Ekran okuyucu bölgesi: görünmez, sayfa akışına ve kaydırmaya karışmaz */
.fd-davet-durum{ position:fixed; top:0; left:0; }
/* Durumlar: acik = açılış animasyonu (+ kelime kelime) · durgun = animasyonsuz (hareket azaltma / üst sınır) · kapali = kapanış, sonra görünmez */
.fd-davet[data-d="acik"]{ animation:fd-davet-pop var(--fd-davet-acilis) cubic-bezier(0.2,0.8,0.3,1) both; }
.fd-davet[data-d="kapali"]{ animation:fd-davet-kapa var(--fd-davet-kapanis) cubic-bezier(0.4,0,1,1) forwards; pointer-events:none; }
.fd-davet--kelime[data-d="acik"] .fd-w{
  animation:fd-davet-kelime var(--fd-davet-kelime) cubic-bezier(0.2,0.9,0.3,1.25) both;
  animation-delay:calc(var(--i) * var(--fd-davet-kelime-adim) + var(--fd-davet-kelime-gecikme));
}
@keyframes fd-davet-pop{
  0%{ opacity:0; transform:translateX(calc(12px * var(--fd-davet-yon))) scale(0.4); }
  45%{ opacity:1; transform:translateX(calc(-3px * var(--fd-davet-yon))) scale(1.07); }
  72%{ transform:translateX(0) scale(0.97); }
  100%{ opacity:1; transform:none; }
}
@keyframes fd-davet-kapa{ to{ opacity:0; visibility:hidden; } }
@keyframes fd-davet-kelime{ from{ opacity:0; transform:translateY(6px) scale(0.9); } to{ opacity:1; transform:none; } }
@media print{
  .fd-davet, .fd-davet-durum{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){ /* animasyon ve geçiş yok; kapanış anında */
  .fd-davet, .fd-davet *{ animation:none !important; transition:none !important; }
  .fd-davet[data-d="kapali"]{ display:none; }
}