/* =====================================================================
   MİKROLİNK ASİSTAN — sohbet asistanı stilleri
   ---------------------------------------------------------------------
   includes/chatbot-widget.php yükler; davranış assets/js/chatbot.js'te.
   * Bütün sınıflar "mkbot-" önekli; tema stillerine dokunmaz. Renkler
     style.css'teki --mk-* değişkenlerinden gelir (yoksa yedek değerler).
   * Katmanlar (z-index):
       başlatma düğmesi   990 → üst bandın (1000) ve mobil menünün (1001) altında
       yüzen panel        995 → üst bandın altında: dil menüsü ve Çözümler
                                mega menüsü her zaman panelin ÜSTÜNDE açılır
       tam ekran panel  99991 → çerez kartının (99990) üstünde; sertifika
                                penceresi (99995) ve çerez tercih panelinin
                                (100000) altında
   * Yerleşim JS'te (chatbot.js → yerlesim()):
       - Yüzen panel düğmenin üstündedir. Çerez kartı görünürken düğme ve
         panel kartla yatayda çakışıyorsa kartın ÜSTÜNE kaldırılır
         (html.mkbot-kart-dugme / html.mkbot-kart-panel, --mkbot-kart-ust).
       - Dar (≤520px) / alçak (≤560px) ekranda ya da kartın üstünde panele
         yeterli yer kalmıyorsa panel tam ekran olur (.mkbot--tam).
       - Panel açıkken "yukarı çık" düğmesi gizlenir (html.mkbot-acik).
   ===================================================================== */
:root {
    --mkbot-sag: 24px;                 /* düğmenin sağ boşluğu */
    --mkbot-alt: 24px;                 /* düğmenin alt boşluğu (chatbot.js yerlesim() ile aynı) */
    --mkbot-boy: 60px;                 /* düğme çapı */
    --mkbot-ust-pay: 95px;             /* panelin üstünde bırakılan pay: üst bant 75px + 20px */
    /* Düğmenin ve yüzen panelin alt kenarı (çerez kartı görünürken JS sınıflarıyla yükselir) */
    --mkbot-baslat-alt: var(--mkbot-alt);
    --mkbot-panel-alt: calc(var(--mkbot-baslat-alt) + var(--mkbot-boy) + 12px);
}
/* Çerez kartı düğmenin altına denk geliyor (mobil alt şerit): düğme kartın üstüne çıkar */
html.mkbot-kart-dugme { --mkbot-baslat-alt: calc(var(--mkbot-kart-ust, 0px) + 12px); }
/* Çerez kartı yüzen panelin altına denk geliyor (521–831px): panel kartın üst kenarının üstünde başlar */
html.mkbot-kart-panel {
    --mkbot-panel-alt: max(calc(var(--mkbot-baslat-alt) + var(--mkbot-boy) + 12px), calc(var(--mkbot-kart-ust, 0px) + 12px));
}
.mkbot {
    --mkbot-ana: var(--mk-primary, #971937);
    --mkbot-ana-koyu: var(--mk-primary-700, #7a142c);
    --mkbot-ana-acik: var(--mk-primary-050, #fbf2f4);
    --mkbot-yazi: var(--mk-text, #1a1a1a);
    --mkbot-yazi-2: var(--mk-text-2, #3f3f46);
    --mkbot-soluk: var(--mk-muted, #5a5a63);
    --mkbot-cizgi: var(--mk-border, #e6e6ea);
    --mkbot-cizgi-koyu: #d4d4da;
    --mkbot-zemin: var(--mk-bg-soft, #f7f7f9);
    font-family: inherit;
}
.mkbot *, .mkbot *::before, .mkbot *::after { box-sizing: border-box; }
.mkbot [hidden] { display: none !important; }
.mkbot svg { display: block; flex-shrink: 0; width: 20px; height: 20px; }
.mkbot svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mkbot button, .mkbot a { font-family: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; }

/* ---------- Başlatma düğmesi ---------- */
.mkbot-baslat {
    position: fixed; right: var(--mkbot-sag); bottom: var(--mkbot-baslat-alt); z-index: 990;
    width: var(--mkbot-boy); height: var(--mkbot-boy); margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--mkbot-ana); color: #fff;
    box-shadow: 0 10px 28px rgba(151, 25, 55, .35), 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, bottom .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.mkbot-baslat:hover { background: var(--mkbot-ana-koyu); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(151, 25, 55, .42), 0 2px 6px rgba(0, 0, 0, .12); }
.mkbot-baslat:focus { outline: none; }
.mkbot-baslat:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mkbot-ana), 0 10px 28px rgba(151, 25, 55, .35); }
.mkbot .mkbot-baslat:focus-visible { border-radius: 50%; }   /* site: button:focus-visible{border-radius:4px} ezmesin */
.mkbot .mkbot-baslat svg { width: 28px; height: 28px; }
.mkbot .mkbot-baslat svg path { stroke-width: 1.9; }
.mkbot-baslat .mkbot-ic-kapat { display: none; }
.mkbot--acik .mkbot-baslat .mkbot-ic-ac { display: none; }
.mkbot--acik .mkbot-baslat .mkbot-ic-kapat { display: block; }

/* ---------- Panel ---------- */
.mkbot-panel {
    position: fixed; right: var(--mkbot-sag); bottom: var(--mkbot-panel-alt); z-index: 995;
    width: 384px; max-width: calc(100vw - 32px);
    height: min(620px, calc(100vh - var(--mkbot-panel-alt) - var(--mkbot-ust-pay)));   /* üst bandın altında kalır */
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; color: var(--mkbot-yazi);
    border: 1px solid var(--mkbot-cizgi); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .22), 0 4px 14px rgba(16, 24, 40, .08);
    font-size: 15px; line-height: 1.5; text-align: left;
    opacity: 0; transform: translateY(14px) scale(.98); transform-origin: 100% 100%;
    transition: opacity .2s ease, transform .2s ease;
}
@supports (height: 100dvh) {
    .mkbot-panel { height: min(620px, calc(100dvh - var(--mkbot-panel-alt) - var(--mkbot-ust-pay))); }
}
.mkbot--acik .mkbot-panel { opacity: 1; transform: none; }
.mkbot-panel:focus { outline: none; }

.mkbot-ust {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    padding: 12px 8px 12px 16px;
    background: linear-gradient(135deg, var(--mkbot-ana) 0%, var(--mkbot-ana-koyu) 100%); color: #fff;
}
.mkbot-avatar {
    width: 40px; height: 40px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.mkbot-avatar img { display: block; width: 36px; height: 36px; }
.mkbot-ust-metin { flex: 1; min-width: 0; }
.mkbot .mkbot-baslik { margin: 0; padding: 0; font-size: 16px; font-weight: 800; line-height: 1.25; color: #fff; }
.mkbot .mkbot-altbaslik {
    margin: 2px 0 0; padding: 0; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkbot-ust-btn {
    width: 44px; height: 44px; margin: 0; padding: 0; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: #fff; border: 0; border-radius: 12px; cursor: pointer;
    transition: background-color .15s ease;
}
.mkbot-ust-btn:hover { background: rgba(255, 255, 255, .16); }
.mkbot-ust-btn:focus { outline: none; }
.mkbot-ust-btn:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.mkbot .mkbot-ust-btn:focus-visible { border-radius: 12px; }

/* ---------- Mesaj akışı ---------- */
.mkbot-akis {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 16px 20px; background: var(--mkbot-zemin);
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.mkbot-log { display: flex; flex-direction: column; gap: 12px; }
.mkbot-msj { display: flex; align-items: flex-start; gap: 8px; animation: mkbot-gir .3s ease both; }
.mkbot-msj-avatar {
    width: 28px; height: 28px; flex-shrink: 0; margin-top: 2px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--mkbot-cizgi); border-radius: 9px;
}
.mkbot-msj-avatar img { display: block; width: 24px; height: 24px; }
.mkbot .mkbot-balon {
    margin: 0; max-width: calc(100% - 36px); padding: 10px 14px;
    background: #fff; border: 1px solid var(--mkbot-cizgi); border-radius: 4px 16px 16px 16px;
    font-size: 14.5px; line-height: 1.55; color: var(--mkbot-yazi); overflow-wrap: anywhere;
}
.mkbot-balon-konu { display: block; margin-bottom: 2px; font-weight: 800; }
.mkbot-metin, .mkbot .mkbot-kart-metin { white-space: pre-line; }
.mkbot-msj--kullanici { justify-content: flex-end; }
.mkbot .mkbot-msj--kullanici .mkbot-balon {
    max-width: 85%; background: var(--mkbot-ana); border-color: var(--mkbot-ana); color: #fff;
    border-radius: 16px 4px 16px 16px; font-weight: 600;
}
.mkbot-kart {
    flex: 1; min-width: 0; padding: 12px 15px;
    background: #fff; border: 1px solid var(--mkbot-cizgi); border-left: 3px solid var(--mkbot-ana);
    border-radius: 4px 14px 14px 14px;
}
.mkbot .mkbot-kart-baslik { margin: 0 0 4px; padding: 0; font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--mkbot-ana); }
.mkbot .mkbot-kart-metin { margin: 0; padding: 0; font-size: 14.5px; line-height: 1.6; color: var(--mkbot-yazi-2); overflow-wrap: anywhere; }

.mkbot-yaziyor { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.mkbot-noktalar {
    display: inline-flex; gap: 5px; padding: 13px 15px;
    background: #fff; border: 1px solid var(--mkbot-cizgi); border-radius: 4px 16px 16px 16px;
}
.mkbot-noktalar i { width: 7px; height: 7px; border-radius: 50%; background: var(--mkbot-ana); opacity: .35; animation: mkbot-nokta 1.2s infinite ease-in-out; }
.mkbot-noktalar i:nth-child(2) { animation-delay: .15s; }
.mkbot-noktalar i:nth-child(3) { animation-delay: .3s; }

/* ---------- Seçenekler ---------- */
.mkbot-secenekler { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0 36px; animation: mkbot-gir .3s ease both; }
.mkbot .mkbot-sec {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px 8px 8px;
    background: #fff; color: var(--mkbot-yazi); border: 1px solid var(--mkbot-cizgi-koyu); border-radius: 12px;
    font-size: 14.5px; font-weight: 600; line-height: 1.35; text-align: left; text-decoration: none;
    cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.mkbot .mkbot-sec:hover { border-color: var(--mkbot-ana); background: var(--mkbot-ana-acik); color: var(--mkbot-yazi); text-decoration: none; transform: translateX(2px); }
.mkbot .mkbot-sec:focus { outline: none; }
.mkbot .mkbot-sec:focus-visible { outline: 2px solid var(--mkbot-ana); outline-offset: 2px; }
.mkbot-sec-ic {
    width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--mkbot-ana-acik); color: var(--mkbot-ana); border-radius: 8px;
}
.mkbot .mkbot-sec-ic svg { width: 18px; height: 18px; }
.mkbot-sec-metin { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mkbot-sec-son { color: var(--mkbot-ana); }
.mkbot .mkbot-sec-son svg { width: 16px; height: 16px; }

.mkbot-gezinti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mkbot .mkbot-gez {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 8px 15px 8px 12px;
    background: transparent; color: var(--mkbot-soluk); border: 1px solid var(--mkbot-cizgi-koyu); border-radius: 999px;
    font-size: 13.5px; font-weight: 700; line-height: 1.2; cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.mkbot .mkbot-gez svg { width: 16px; height: 16px; }
.mkbot .mkbot-gez:hover { color: var(--mkbot-ana); border-color: var(--mkbot-ana); background: #fff; }
.mkbot .mkbot-gez:focus { outline: none; }
.mkbot .mkbot-gez:focus-visible { outline: 2px solid var(--mkbot-ana); outline-offset: 2px; }

.mkbot-gizli {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@keyframes mkbot-gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mkbot-nokta { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* ---------- Diğer sabit öğelerle çakışmayı önleme ---------- */
/* "Yukarı çık" düğmesi asistan düğmesinin üstüne taşınır (asistan hazır olunca; JS yoksa yerinde kalır).
   Düğme çerez kartının üstüne kalktığında o da birlikte kalkar. */
html.mkbot-hazir .scroll-top { right: calc(var(--mkbot-sag) + (var(--mkbot-boy) - 48px) / 2); bottom: calc(var(--mkbot-baslat-alt) + var(--mkbot-boy) + 12px); }
/* Panel açıkken "yukarı çık" düğmesi panelin köşesinde kalmasın (z-index 999 > panel 995) */
html.mkbot-acik .scroll-top { opacity: 0; visibility: hidden; pointer-events: none; }
/* Masaüstünde footer-bottom'daki 64px sağ boşluk (style.css) logoyu düğmeden zaten uzak tutar. */

/* ---------- Tablet / telefon ---------- */
@media (max-width: 768px) {
    :root {
        --mkbot-sag: max(16px, env(safe-area-inset-right));
        --mkbot-alt: max(16px, env(safe-area-inset-bottom));
        --mkbot-boy: 56px;
    }
    html.mkbot-hazir .scroll-top { right: calc(var(--mkbot-sag) + 6px); bottom: calc(var(--mkbot-baslat-alt) + var(--mkbot-boy) + 12px); }
    /* Sayfa sonundaki Mikrolink logosu sağdaki düğme sütununun (asistan + yukarı çık) altında kalmasın */
    html.mkbot-hazir .footer-bottom { padding-right: calc(var(--mkbot-sag) + var(--mkbot-boy) - 12px); }
}
/* ---------- Tam ekran panel ----------
   .mkbot--tam sınıfını chatbot.js verir: ekran ≤520px geniş ya da ≤560px yüksekse
   veya çerez kartının üstünde panele yeterli yükseklik kalmıyorsa. */
.mkbot--tam .mkbot-panel {
    top: 0; right: 0; bottom: 0; left: 0; z-index: 99991; width: auto; max-width: none; height: auto;
    border: 0; border-radius: 0; transform: translateY(24px);
}
.mkbot--tam.mkbot--acik .mkbot-panel { transform: none; }
.mkbot--tam .mkbot-ust {
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
}
.mkbot--tam .mkbot-akis {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
html.mkbot-kilit, html.mkbot-kilit body { overflow: hidden !important; }

/* ---------- Azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce) {
    .mkbot-baslat, .mkbot-panel, .mkbot .mkbot-sec, .mkbot .mkbot-gez, .mkbot-ust-btn { transition: none; }
    .mkbot-panel, .mkbot--tam .mkbot-panel, .mkbot-baslat:hover, .mkbot .mkbot-sec:hover { transform: none; }
    .mkbot-msj, .mkbot-secenekler { animation: none; }
    .mkbot-noktalar i { animation: none; opacity: .55; }
    .mkbot-akis { scroll-behavior: auto; }
}
@media print {
    .mkbot { display: none !important; }
}