/* ═══ YILAN BORDER (hover'da dönen ışıltı kenar) — index ile aynı, marka magenta ═══ */
@property --bdeg{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.gsnk{ position:relative; }
.gsnk::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; z-index:6; filter:drop-shadow(0 0 5px var(--magenta-soft,#2C9DDD));
  background:conic-gradient(from var(--bdeg), transparent 0deg, var(--magenta-soft,#2C9DDD) 48deg, var(--magenta,#1C6790) 88deg, transparent 150deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0; transition:opacity .35s ease; }
.gsnk:hover::after{ opacity:1; animation:bspin 5s linear infinite; }
@keyframes bspin{ to{ --bdeg:360deg; } }
@media(prefers-reduced-motion:reduce){ .gsnk:hover::after{ animation:none; } }
            @media (min-width:1024px){
                /* YENİ DÜZEN: chatbot + İçindekiler AKAR; İletişim HEP ALTTA SABİT (iletişime geçmek her an elde). */
                .blog-side-sticky{ position:sticky; top:6rem; align-self:start; }
                /* CHATBOT + İLETİŞİM birlikte SABİT; İçindekiler akar. EŞİT BOŞLUK kuralı:
                   header(66px)→chatbot ile chatbot→iletişim boşlukları AYNI (16px).
                   top = header(66) + 16 = 82px; kartlar arası flex gap = 16px.
                   chatbot kartının kendi my-6 (24px) margin'i grup içinde sıfırlanır (yoksa eşitlik bozulur). */
                /* 🔴 TEK İÇ SCROLL KURALI (3 iç içe scroll SORUNU çözümü — 2026-07-18):
                   ESKİDEN: grup KENDİ scroll'u (overflow-y:auto) + chatbot mesaj alanı (54vh) + sayfa
                   → 3 iç içe scroll birbirine giriyordu (çift scrollbar, kaydırma karışıyordu).
                   ŞİMDİ: grup viewport'a sığar; köprü + iletişim SABİT boy; CHATBOT kalan alana göre
                   KISALIR ve TEK iç scroll onun MESAJ ALANIDIR (.be-msgs). Kalan: sayfa scroll + tek chat scroll. */
                /* Normal ekranlarda flex her şeyi sığdırır → grup scrollbar'ı ÇIKMAZ (tek scroll = chat).
                   ÇOK KISA ekranlarda (be-msgs min 120'ye inince taşarsa) grup son çare scroll eder AMA
                   overscroll-behavior:auto ile sayfaya ZİNCİRLENİR (eskisi 'contain' idi → sayfa kaymıyordu). */
                .blog-contact-sticky{ position:sticky; top:82px; align-self:start; display:flex; flex-direction:column; gap:16px; max-height:calc(100vh - 98px); overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:auto; }
                .blog-contact-sticky .be-card{ margin-top:0 !important; margin-bottom:0 !important; }
                /* köprü + iletişim kartı = sabit boy (ezilmez, kırpılmaz) */
                .blog-contact-sticky > *{ flex:0 0 auto; min-width:0; }
                /* chatbot YUVASI (sınıfsız wrapper → .blog-chat-slot) kalan alanı kaplar, gerekince kısalır AMA
                   min-height:340 ile ASLA kullanılamaz seviyeye (input kırpılacak kadar) inmez. Çok kısa ekranda
                   bu yüzden grup taşar → grup scroll'u (overscroll:auto ile sayfaya zincirli) devreye girer,
                   chatbot bütün (header+mesaj+input) kalır, input her zaman yazılabilir. */
                .blog-contact-sticky > .blog-chat-slot{ flex:1 1 auto; min-height:280px; display:flex; }
                .blog-chat-slot > .be-card{ flex:1 1 auto; min-width:0; max-width:100%; min-height:0; display:flex; }
                .blog-chat-slot > .be-card > div{ flex:1 1 auto; min-width:0; max-width:100%; min-height:0; display:flex; flex-direction:column; }
                /* TEK scroll = mesaj alanı; sabit 54vh cap + inline min-height:200 KALDIRILDI (kalan alanı doldurur, gerekince 120'ye kadar kısalır) */
                .blog-contact-sticky .be-msgs{ flex:1 1 auto; min-height:120px !important; max-height:none !important; }
            }
            /* 🏷️ TOC sıkılaştırma SADECE t-42 sidebar'ında (paylaşılan toc bileşenine DOKUNMADAN) */
            .blog-aside-sticky .toc-link{ align-items:flex-start; gap:.5rem; padding:.3rem .55rem; }
            .blog-aside-sticky .toc-text{ font-size:.8125rem; line-height:1.4; }
            .blog-aside-sticky .toc-dot{ margin-top:.42rem; }
            /* 🖥️ KOD BLOĞU KONTRAST FIX: prose <pre> zemini HER İKİ TEMADA koyu.
               Light modda prose 'pre code' metin rengi koyu kalıyordu → koyu-üstüne-koyu (okunmaz).
               Kod bloğunu her zaman koyu zemin + AÇIK metin yap (dark modda zaten doğruydu, bozulmaz). */
            /* Blog gövdesi + SSS/nasıl-yapılır gibi TÜM prose alanları (chatbot .be-card=not-prose HARİÇ). */
            .blog-detail-root .prose pre{ background:#0f172a !important; color:#e6e9f0 !important; border:1px solid rgba(148,163,184,.16); }
            .blog-detail-root .prose pre code{ color:#e6e9f0 !important; background:transparent !important; }
            /* Satır-içi <code>: light modda açık zemin + koyu(magenta) metin; dark modda açık metin. */
            .blog-detail-root .prose :not(pre) > code{ color:#1C6790; background:rgba(28,103,144,.08); }
            .dark .blog-detail-root .prose :not(pre) > code{ color:#9AD2EE; background:rgba(83,181,236,.14); }