/* ==========================================================================
   C@T — 🧑‍💼 Ket · iş asistanı
   --------------------------------------------------------------------------
   Kimlik KORUNUR: lacivert zemin, altın vurgu, beyaz metin. Ket C@T'ın
   içinde yaşayan bir karakterdir; ayrı bir görsel dil kurmaz.

   ⚠ MOBİLDE ALT MENÜYÜ VE FORMLARI KAPATMAZ (kurucu şartnamesi md.2).
     Konum alt menünün ÜSTÜNDEN başlar ve telefonun güvenli alanına
     (safe-area) uyar; yoksa Ket tam da kullanıcının basmak istediği
     düğmenin üstünde otururdu.
   ========================================================================== */

.ket {
  position: fixed;
  right: 14px;
  /* Alt menü yüksekliği + güvenli alan + boşluk. Değişkenler yoksa
     makul bir yedek kullanılır. */
  /* ⚠ ÇAKIŞMA (9 Eyl 2026, dar telefonda ölçüldü): Ket ile "Hızlı ekle"
     (.fab, 56 px, aynı köşe) üst üste biniyordu; elementFromPoint FAB'ın
     merkezinde Ket resmini döndürüyordu — hızlı ekle telefonda ERİŞİLEMEZDİ.
     Ket bir kademe yukarı alınır: FAB yüksekliği (56) + 16 px boşluk. */
  bottom: calc(var(--tabbar-h, 62px) + var(--safe-b, 0px) + 14px + 72px);
  z-index: 60;                 /* .tabbar (45) üstünde, kipler altında */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;        /* boşluklar tıklamayı geçirir */
}
.ket > * { pointer-events: auto; }

/* Masaüstünde alt menü yok; köşeye iner. */
@media (min-width: 981px) {
  /* Masaüstünde FAB 26/26'da; Ket onun üstünde (26 + 56 + 16). */
  .ket { right: 22px; bottom: 98px; }
}

/* --- Karakter ------------------------------------------------------------ */
/* 🎯 KURUCU BİLDİRDİ (7 Eyl 2026): "bu çok amatör bir uygulama gibi duruyor".
 *
 * ⚠ SORUN KARAKTER DEĞİL, SUNUMUYDU. Yüzen düğme 84×84'tü, 2px altın
 *   çerçevesi ve arkasında ışık halesi vardı. O ölçü ve o vurgu bir ÜRÜN
 *   KONTROLÜ değil, ekrana yapıştırılmış bir ÇIKARTMA gibi okunuyordu.
 *   Yerleşik ürünlerde yüzen yardım düğmesi 56 pikseldir ve sakin durur;
 *   dikkat çekmesi gereken şey kullanıcının İŞİDİR, yardım düğmesi değil.
 *
 * ⚠ KARAKTER KALDIRILMADI. Ket asistanın yüzüdür ve kurucunun kendi çizgi
 *   karakteridir; panelin İÇİNDE tam boy durmayı sürdürür — orada bir
 *   karakterin yeri vardır, çünkü orada konuşuluyor. Değişen yalnız
 *   HER EKRANDA duran tetik düğmesi.
 *
 * ⚠ DOKUNMA HEDEFİ KÜÇÜLMEDİ: 56px, md.21'in 44px alt sınırının üstünde.
 *   Saha personeli telefonda kullanıyor; erişilebilirlik pazarlık konusu
 *   değil.
 */
.ket__tetik {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
  min-width: 56px;
  min-height: 56px;
}
.ket__tetik:focus-visible {
  outline: 3px solid var(--gold, #e5b84b);
  outline-offset: 4px;
}

.ket__karakter {
  position: relative;
  width: 56px;
  height: 56px;
  display: block;
  transition: transform .22s ease, opacity .22s ease;
}
/* 🖼 Kurucunun çizgi karakteri — dairesel, SAKİN çerçeveli. */
.ket__resim {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  /* ⚠ İNCE VE SÖNÜK KENARLIK. Kalın altın halka, düğmeyi sayfadaki her
     şeyden daha önemli gösteriyordu. Altın bu üründe VURGU rengidir; her
     yerde kullanılınca vurgu olmaktan çıkar. */
  border: 1px solid rgba(229, 184, 75, .38);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  background: #243049;      /* görsel gelene kadar boşluk parlamasın */
  user-select: none;
}
/* ⚠ IŞIK HALESİ YALNIZ ETKİN DURUMDA. Sürekli yanan bir hale, "burada
   bir şey oluyor" der ve hiçbir şey olmadığında yalan söyler. Ket
   düşünürken/konuşurken görünür (bkz. .ket--etkin). */
.ket__hale {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(229, 184, 75, .30), rgba(229, 184, 75, 0) 72%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
/* ⚠ DURUM SINIFLARI İNGİLİZCEDİR (assistant/state.js · DURUMLAR):
   thinking / speaking / listening. İlk yazımda Türkçe yazmıştım
   (.ket--dusun) ve hale HİÇ görünmeyecekti — CSS sessizce eşleşmez,
   hata vermez. Kaynağa bakarak doğrulandı. */
.ket__tetik:hover .ket__hale,
.ket__tetik:focus-visible .ket__hale,
.ket--listening .ket__hale,
.ket--thinking .ket__hale,
.ket--speaking .ket__hale { opacity: 1; }
.ket__karakter--cizim .ket__svg,
.ket__karakter--cizim { border-radius: 50%; overflow: hidden; }
.ket__tetik:hover .ket__karakter,
.ket__tetik:focus-visible .ket__karakter { transform: translateY(-3px) scale(1.04); }
.ket__tetik:active .ket__karakter { transform: scale(.97); }

.ket__svg { position: relative; z-index: 1; width: 56px; height: 56px;
  border-radius: 50%; display: block; }

/* Çizim yüklenemezse: harf rozeti. Ket yok olmaz, yazılı yardım sürer. */
.ket__karakter--yedek {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e5b84b, #b8923d);
  color: #0b111d;
  font: 800 26px/1 system-ui, sans-serif;
}

/* --- Yaşam belirtileri --------------------------------------------------- */
/* ⚠ GÖZ KIRPMA VE DUDAK HAREKETİ ARTIK YOK. Kurucu kendi çizgi karakter
   GÖRSELİNİ verdi; bir raster görselin parçaları ayrı ayrı oynatılamaz.
   Bu bir takas: elle çizilen karakterin mimikleri gitti, kurucunun
   gerçek karakteri geldi. Kalan hareketler görselin TAMAMINA uygulanır
   ve "yaşıyor" hissini bunlar taşır. */

/* Nefes: karakter çok hafif inip kalkar. Fark edilmemeli, hissedilmeli. */
.ket__resim, .ket__svg { animation: ket-nefes 4.8s ease-in-out infinite; }
@keyframes ket-nefes {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1.6px) scale(1.012); }
}

/* Yardıma hazır olduğunu gösteren ince altın ışık. */
.ket__hale { animation: ket-hale 3.6s ease-in-out infinite; }
@keyframes ket-hale {
  0%, 100% { opacity: .55; transform: scale(.95); }
  50%      { opacity: 1; transform: scale(1.06); }
}

/* Konuşurken hafif sallanma + ışık hızlanır: sesin görsel karşılığı. */
.ket--speaking .ket__resim, .ket--speaking .ket__svg {
  animation: ket-konus .9s ease-in-out infinite;
}
@keyframes ket-konus {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-2px) rotate(-1.2deg); }
  70%      { transform: translateY(-1px) rotate(1.2deg); }
}
.ket--speaking .ket__hale { animation-duration: 1.1s; }

/* Dinlerken: ışık hızlı ve tam — mikrofonun açık olduğu görünür olmalı. */
.ket--listening .ket__hale { animation-duration: 1.2s; opacity: 1; }
.ket--listening .ket__resim { border-color: rgba(52, 211, 153, .9); }

/* Düşünürken sakin bekleme: ışık yavaşlar. */
.ket--thinking .ket__hale { animation-duration: 2.4s; }

/* Gösterirken: altın kenar belirginleşir. */
.ket--pointing .ket__resim { border-color: rgba(229, 184, 75, 1); }

/* Başarıda kısa onay zıplaması. */
.ket--success .ket__resim, .ket--success .ket__svg {
  animation: ket-onay .66s ease-in-out 1;
}
@keyframes ket-onay {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-7px) scale(1.05); }
  70%      { transform: translateY(0) scale(.99); }
}

/* Uyarı ve hatada SAKİN bir işaret — panik yok, yalnız renk değişir. */
.ket--warning .ket__resim { border-color: rgba(229, 184, 75, 1); }
.ket--error .ket__resim { border-color: rgba(248, 113, 113, .9); }
.ket--warning .ket__hale, .ket--error .ket__hale { animation: none; opacity: 1; }

/* Küçültülmüş: kaybolmaz, küçülür (md.4). */
.ket--kucuk .ket__karakter { width: 52px; height: 52px; }
.ket--kucuk .ket__resim, .ket--kucuk .ket__svg { width: 52px; height: 52px; }
.ket--kucuk .ket__tetik { min-width: 52px; min-height: 52px; }
.ket--kucuk .ket-balon { display: none; }

/* ⚠ HAREKET AZALTMA (md.21): baş dönmesi ya da dikkat dağınıklığı olan
   kullanıcı için Ket durur — ama YOK OLMAZ, yardım etmeye devam eder. */
@media (prefers-reduced-motion: reduce) {
  .ket__resim, .ket__svg, .ket__hale { animation: none; }
  .ket__karakter { transition: none; }
}

/* --- Konuşma balonu ------------------------------------------------------ */
.ket-balon {
  max-width: min(320px, calc(100vw - 40px));
  background: #0f1626;
  border: 1px solid rgba(229, 184, 75, .40);
  border-radius: 16px 16px 4px 16px;
  padding: 12px 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  animation: ket-balon-gir .2s ease;
}
@keyframes ket-balon-gir { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ket-balon { animation: none; } }
.ket-balon__metin { margin: 0; font-size: 14px; line-height: 1.5; color: #e9edf6; }

/* --- Yardım paneli ------------------------------------------------------- */
.ket-panel {
  width: min(320px, calc(100vw - 28px));
  max-height: min(66vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* panel kaydırması sayfayı kaydırmasın */
  background: #0f1626;
  border: 1px solid rgba(229, 184, 75, .30);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .55);
  padding: 14px;
}
.ket-panel__bas { display: flex; align-items: center; gap: 10px; }
.ket-panel__ad { font-weight: 800; font-size: 15px; color: #e9edf6; flex: 1; }
.ket-panel__x {
  border: 0; background: none; color: #93a1bb; cursor: pointer;
  font-size: 16px; min-width: 44px; min-height: 44px; border-radius: 10px;
}
.ket-panel__x:hover { background: rgba(255, 255, 255, .06); }
/* Ket'in yapay olduğu kullanıcıdan GİZLENMEZ. */
.ket-panel__kimlik { margin: 2px 0 10px; font-size: 11.5px; color: #93a1bb; line-height: 1.45; }
.ket-panel__navi-baglam { margin: 0 0 8px; font-size: 12px; color: #aab6cc; line-height: 1.45; }   /* 🧭 FAZ 6 */
/* 🧭 FAZ 11 — "📍 Bu ekranda": Mini şeridin rehberi panelin içinde (tek yüzey). ⚠ '.ket-rehber' guide.js vurgu katmanıdır — ad çakışması canlı v370'te görüldü */
.ket-navi-rehber { margin: 0 0 10px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.03); }
.ket-navi-rehber:empty { display: none; }
.ket-navi-rehber__baslik { margin: 0 0 4px; font-size: 14px; color: #e8edf7; }
.ket-navi-rehber__metin { margin: 0 0 6px; font-size: 13px; color: #c7d0e2; line-height: 1.5; }
.ket-navi-rehber__varis { margin: 0 0 6px; font-size: 12px; color: #aab6cc; }
.ket-navi-rehber__eylemler, .ket-navi-rehber__baglantilar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.ket-navi-rehber__dugme { font-size: 12px; padding: 4px 8px; }
.ket-navi-rehber__durum { display: block; font-size: 12px; color: #aab6cc; }
.ket-navi-rehber__kilavuz { font-size: 12px; margin-top: 6px; color: #c7d0e2; }
.ket-navi-rehber__kilavuz ol { margin: 6px 0 0 18px; padding: 0; }
.ket-navi-rehber [hidden] { display: none; }
.ket-panel__baglam { margin: 0 0 8px; font-size: 13px; color: #c7d0e2; line-height: 1.5; }
.ket-panel__soru { margin: 4px 0 10px; font-size: 14px; color: #e9edf6; line-height: 1.5; }

.ket-panel__secenek {
  display: block; width: 100%; text-align: left;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px; color: #e9edf6;
  padding: 11px 13px; margin-bottom: 7px;
  font: inherit; font-size: 14px; cursor: pointer;
  min-height: 44px;               /* 👆 md.21 */
}
.ket-panel__secenek:hover { background: rgba(229, 184, 75, .12); border-color: rgba(229, 184, 75, .4); }
.ket-panel__secenek:focus-visible { outline: 2px solid var(--gold, #e5b84b); outline-offset: 2px; }
.ket-panel__secenek--birincil { background: rgba(229, 184, 75, .16); border-color: rgba(229, 184, 75, .5); }

.ket-panel__kontroller { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.ket-panel__kontrol {
  flex: 1 1 auto; background: none; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; color: #93a1bb; padding: 9px 8px; font: inherit;
  font-size: 12px; cursor: pointer; min-height: 44px;
}
.ket-panel__kontrol:hover { color: #e9edf6; border-color: rgba(229, 184, 75, .4); }

/* --- Rehber katmanı ------------------------------------------------------ */
/* ⚠ TIKLAMAYI GEÇİRİR (md.9): "şuraya basın" deyip basılmasını
   engellemek yardım değil kilittir. */
.ket-rehber {
  position: fixed; inset: 0; z-index: 55;
  pointer-events: none;
}
.ket-rehber__delik {
  position: absolute; border-radius: 14px;
  /* Karartma, devasa bir gölge ile deliğin DIŞINI kaplar. */
  box-shadow: 0 0 0 9999px rgba(4, 8, 18, .52),
              0 0 0 2px var(--gold, #e5b84b),
              0 0 26px rgba(229, 184, 75, .55);
  transition: all .22s ease;
}
@media (prefers-reduced-motion: reduce) { .ket-rehber__delik { transition: none; } }

.ket-vurgu {
  position: relative;
  z-index: 56;                    /* karartmanın üstünde kalsın */
  border-radius: 12px;
}

/* 💬 Ket'e serbest soru kutusu. */
.ket-panel__soru-alan {
  width: 100%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #e9edf6;
  padding: 10px 12px;
  font: inherit; font-size: 14px;
  resize: vertical;
  min-height: 60px;
}
.ket-panel__soru-alan:focus-visible {
  outline: 2px solid var(--gold, #e5b84b); outline-offset: 2px;
}
.ket-panel__soru-satir { display: flex; gap: 6px; margin-top: 8px; }
.ket-panel__soru-satir .ket-panel__secenek { margin-bottom: 0; }

/* 🐢 HAFİF KİP — düşük performanslı cihaz (md.20).
   ⚠ Ket KAYBOLMAZ, yalnız DURUR: yardım etmeye devam eder, giden şey
     animasyondur. Bir yardımcının, yardım ettiği cihazı yavaşlatması
     kabul edilemez. */
.ket--hafif .ket__resim,
.ket--hafif .ket__svg,
.ket--hafif .ket__hale { animation: none !important; }
.ket--hafif .ket__karakter { transition: none; }
.ket--hafif .ket__hale { opacity: .7; }
.ket--hafif .ket-balon { animation: none; }