/* ── BLOG DETAY renk düzeltme — bu projede compiled Tailwind dark: = OS-media (site temasına DEĞİL).
             Cool-gray kutuları SİTE temasına (html.dark / html:not(.dark)) bağlıyoruz, attribute selector + !important. ── */
        /* ═══ AI SOHBET / ROZET BİLEŞENLERİ · 17.08.2026 ═══
           Paylaşılan blog-expert bileşeni varsayılan olarak mor/magenta taşıyor (t-42 mirası).
           Hizmet sayfalarında (service/show) zaten scoped override ile t-50 paletine çevriliyordu;
           blog yazı sayfasında bu override YOKTU → sayfada tek tük mor noktalar kalıyordu (ölçüldü: 3 öğe). */
        .blog-detail-root .be-dot{ background:var(--marka) !important; }
        .blog-detail-root .gem{ background-image:linear-gradient(115deg,#1C6790,#2C9DDD) !important; }
        .blog-detail-root [class*="from-purple"],
        .blog-detail-root [class*="via-purple"],
        .blog-detail-root [class*="to-purple"]{
          background-image:linear-gradient(to right, rgba(28,103,144,.30), rgba(44,157,221,.18)) !important; }

        /* SİTE DARK → t-50 marka mavisi (17.08.2026: t-42'den devralınan magenta-koyu tonlar değiştirildi) */
        html.dark .blog-detail-root{ background:var(--page-bg) !important; }
        html.dark .blog-detail-root [class~="dark:bg-gray-900"]{ background:#081E30 !important; }
        html.dark .blog-detail-root [class~="dark:bg-gray-800"]{ background:var(--glass-bg) !important; -webkit-backdrop-filter:var(--glass-blur) !important; backdrop-filter:var(--glass-blur) !important; border-radius:var(--glass-radius) !important; box-shadow:var(--glass-shadow) !important; }
        html.dark .blog-detail-root [class~="dark:bg-gray-700"]{ background:#103050 !important; }
        html.dark .blog-detail-root [class~="dark:hover:bg-gray-700"]:hover{ background:#143A5C !important; }
        html.dark .blog-detail-root [class~="dark:hover:bg-gray-600"]:hover{ background:#1A4468 !important; }
        /* 🌑 DARK: TÜM kart kenarları YOK — tek kaynak. var(--glass-border) kullanan her kart
           (TOC inline, İletişim, SSS, bölgesel çip, prev/next, yorumlar) AYNI ANDA borderless olur
           → tutarlılık + light'ın temiz görünümüne eşit. Hover efekti (gsnk) korunur. */
        html.dark .blog-detail-root{ --glass-border:transparent !important; }
        /* ☀️ LIGHT: kart kenarlarını da çok hafiflet — "gereksiz koyu border" gitsin (dark'taki temiz görünüme eşle) */
        html:not(.dark) .blog-detail-root{ --glass-border:rgba(15,23,42,.05) !important; }

        /* 🔻 İÇERİK ALTINI FOOTER DİYAGONALİYLE PARALEL + KÖŞELER RADIUS (footer --corner ile aynı).
           shape() desteklenirse köşeler yuvarlak; yoksa fallback düz-diyagonal. clip-path paint-clip → sticky bozulmaz. */
        .blog-detail-root{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--slant,72px)), 0 100%); }
        @supports (clip-path: shape(from 0 0, line to 1px 1px, close)){
            .blog-detail-root{
                clip-path:shape(
                    from 0% 0%,
                    line to 100% 0%,
                    line to 100% calc(100% - var(--slant,72px) - var(--corner,28px)),
                    curve to calc(100% - var(--corner,28px)) calc(100% - var(--slant,72px)) with 100% calc(100% - var(--slant,72px)),
                    line to var(--corner,28px) 100%,
                    curve to 0% calc(100% - var(--corner,28px)) with 0% 100%,
                    close
                );
            }
        }
        html.dark .blog-detail-root [class~="dark:border-gray-700"]{ border-color:transparent !important; }
        html.dark .blog-detail-root [class~="dark:border-gray-600"]{ border-color:transparent !important; }
        /* iç bölücü çizgiler de (header border-bottom vb.) kaybolsun → tam temiz */
        html.dark .blog-detail-root .border-gray-100,
        html.dark .blog-detail-root [class~="dark:border-gray-700"]{ border-color:transparent !important; }
        /* 🔒 gsnk kartlar: app.blade global glass bloğu (sonra yüklenir, !important) border:var(--glass-border)
           veriyordu → ID-özgül + !important ile kesin şeffaf (FAQ + howto + ilgili + alt-ilgili) */
        html.dark .content-body .brp-card,
        html.dark #diger-yazilar .tb-rel-card,
        html.dark #sik-sorulan-sorular .gsnk,
        html.dark #sik-sorulan-sorular [class~="dark:bg-gray-800"],
        html.dark #nasil-yapilir .howto-step-card{ border-color:transparent !important; }
        /* 🚫 HOVER'da da SOLID kenar YOK — sadece gsnk dönen gradient kalsın. app.blade hover
           (ID'li + !important) kuralını .blog-detail-root + mod-prefix ile özgüllükte geç (iki mod). */
        html.dark .blog-detail-root #sik-sorulan-sorular [class~="dark:bg-gray-800"]:hover,
        html.dark .blog-detail-root #nasil-yapilir .howto-step-card:hover,
        html.dark .blog-detail-root #nasil-yapilir .howto-step.group:hover .howto-step-card,
        html.dark .blog-detail-root #diger-yazilar .tb-rel-card:hover,
        html.dark .blog-detail-root .content-body .brp-card:hover,
        html.dark .blog-detail-root a.gsnk:hover,
        html:not(.dark) .blog-detail-root #sik-sorulan-sorular [class~="dark:bg-gray-800"]:hover,
        html:not(.dark) .blog-detail-root #nasil-yapilir .howto-step-card:hover,
        html:not(.dark) .blog-detail-root #nasil-yapilir .howto-step.group:hover .howto-step-card,
        html:not(.dark) .blog-detail-root #diger-yazilar .tb-rel-card:hover,
        html:not(.dark) .blog-detail-root .content-body .brp-card:hover,
        html:not(.dark) .blog-detail-root a.gsnk:hover{ border-color:transparent !important; box-shadow:none !important; }
        /* SİTE LIGHT → krem/beyaz (OS dark olsa bile OS-media dark: variant'ını EZ) */
        /* SİTE LIGHT → SOĞUK GRİ (v3 palet; eski krem #f6f0e6/#f3e9dd kaldırıldı) */
        html:not(.dark) .blog-detail-root{ background:var(--bg,#eef2f7) !important; }
        html:not(.dark) .blog-detail-root [class~="dark:bg-gray-900"]{ background:var(--bg,#eef2f7) !important; }
        /* KARTLAR (bg-white dark:bg-gray-800) = nav rail glass — TIPATIP homepage (iki mod) */
        .blog-detail-root [class~="dark:bg-gray-800"]{ background:var(--glass-bg) !important; -webkit-backdrop-filter:var(--glass-blur) !important; backdrop-filter:var(--glass-blur) !important; border-radius:var(--glass-radius) !important; box-shadow:var(--glass-shadow) !important; }
        /* iç mini kartlar (gray-100 / dark:gray-700) = slate dolgu (kart içi kontrast) */
        html:not(.dark) .blog-detail-root [class~="dark:bg-gray-700"]{ background:#e8edf3 !important; }
        html:not(.dark) .blog-detail-root [class~="dark:hover:bg-gray-700"]:hover{ background:#dde4ec !important; }
        html:not(.dark) .blog-detail-root .bg-gray-100{ background:#e8edf3 !important; }
        html:not(.dark) .blog-detail-root .bg-gray-200,
        html:not(.dark) .blog-detail-root .hover\:bg-gray-200:hover{ background:#dde4ec !important; }
        /* kart kenarları = glass border (iki mod) */
        .blog-detail-root [class~="border-gray-200"],
        .blog-detail-root [class~="dark:border-gray-700"]{ border-color:var(--glass-border) !important; }
        .blog-detail-root .border-gray-200{ border-color:var(--glass-border) !important; }
        html:not(.dark) .blog-detail-root .border-gray-100{ border-color:#efe6d9 !important; }
        .heading-anchor {
            margin-left: 0.5rem;
            opacity: 0;
            color: #2C9DDD;
            font-weight: 400;
            text-decoration: none;
            transition: opacity 0.2s ease;
        }

        .heading-anchor:focus-visible {
            outline: 2px solid rgba(37, 99, 235, 0.6);
            outline-offset: 4px;
            opacity: 1;
        }

        h2:hover .heading-anchor,
        h3:hover .heading-anchor,
        h4:hover .heading-anchor,
        h5:hover .heading-anchor,
        h6:hover .heading-anchor {
            opacity: 1;
        }

        /* Rotating Text Animation - Havalı Efekt */
        .rotating-text {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .rotating-text .text-item {
            position: absolute;
            left: 0;
            width: 100%;
            opacity: 0;
            transform: translateY(30px);
            filter: blur(4px);
            transition: all 0.5s ease-out;
        }

        .rotating-text .text-item.active {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        .rotating-text .text-item.exit {
            opacity: 0;
            transform: translateY(-30px);
            filter: blur(4px);
        }

        /* Rotating Icon Animation */
        .rotating-icon {
            position: relative;
        }

        .rotating-icon .icon-item {
            position: absolute;
            opacity: 0;
            transform: scale(0.5) rotate(-180deg);
            transition: all 0.5s ease-out;
        }

        .rotating-icon .icon-item.active {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .rotating-icon .icon-item.exit {
            opacity: 0;
            transform: scale(0.5) rotate(180deg);
        }

        /* Gradient Text & Icon Animation - Pro Style */
        .gradient-text-pro,
        .gradient-icon {
            background: linear-gradient(90deg, #1e40af, #1C6790, #1e40af);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient-pro 8s ease-in-out infinite;
        }

        .dark .gradient-text-pro,
        .dark .gradient-icon {
            background: linear-gradient(90deg, #2C9DDD, #9AD2EE, #2C9DDD);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient-pro 8s ease-in-out infinite;
        }

        @keyframes gradient-pro {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        @keyframes fadeInOut {
            0% { opacity: 0; transform: translateY(-10px); }
            10% { opacity: 1; transform: translateY(0); }
            90% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(10px); }
        }

        /* Hareketli Gradient Background */
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .animate-gradient {
            animation: gradient 8s ease infinite;
        }

        /* Shimmer Efekti */
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .animate-shimmer {
            animation: shimmer 3s ease-in-out infinite;
        }

        /* Yavaş Bounce */
        @keyframes bounce-slow {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .animate-bounce-slow {
            animation: bounce-slow 2s ease-in-out infinite;
        }

        html.dark .heading-anchor {
            color: #2C9DDD;
        }

        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        [x-cloak] {
            display: none !important;
        }

        /* Table dark mode styles */
        .prose table {
            margin: 2rem 0;
        }

        .prose th {
            padding: 0.75rem;
            text-align: left;
            font-weight: 600;
            color: #0B2740;
            background-color: #f6f0e6;
            border-bottom: 1px solid #d1d5db;
        }

        .prose td {
            padding: 0.75rem;
            color: #143A5C;
            border-bottom: 1px solid #e7ddd0;
        }

        html.dark .prose th {
            color: #ffffff;
            background-color: #143A5C;
            border-bottom-color: #4b5563;
        }

        html.dark .prose td {
            color: #d1d5db;
            border-bottom-color: #4b5563;
        }

        /* ============ BLOG İÇERİK BİLEŞENLERİ (hibrit · t-42 magenta · dark+light) ============ */
        .content-body .blog-tldr{ background:#faf3e7; border:1px solid #e7ddd0; border-left:4px solid var(--accent,#1C6790); border-radius:1rem; padding:1.1rem 1.4rem; margin:1.75rem 0; }
        html.dark .content-body .blog-tldr{ background:#0B2740; border-color:#143A5C; }
        .content-body .blog-tldr-title{ display:flex; align-items:center; gap:.5rem; font-weight:700; margin:0 0 .6rem; color:#0D2B44; font-size:1.05rem; }
        html.dark .content-body .blog-tldr-title{ color:#fff; }
        .content-body .blog-tldr-title i, .content-body .blog-tldr i{ color:var(--accent,#1C6790); }
        .content-body .blog-tldr ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
        .content-body .blog-tldr li{ position:relative; padding-left:1.5rem; margin:.4rem 0; }
        .content-body .blog-tldr li::before{ content:""; position:absolute; left:.25rem; top:.62em; width:.5rem; height:.5rem; border-radius:99px; background:var(--accent,#1C6790); }

        .content-body .blog-callout{ display:flex; gap:.75rem; align-items:flex-start; padding:.9rem 1.1rem; border-radius:.85rem; margin:1.5rem 0; background:#f0fdfa; border:1px solid #9AD2EE; }
        html.dark .content-body .blog-callout{ background:rgba(45,212,191,.08); border-color:rgba(45,212,191,.28); }
        .content-body .blog-callout > i{ color:#2C9DDD; margin-top:.18rem; font-size:1.05rem; flex-shrink:0; }
        html.dark .content-body .blog-callout > i{ color:#2C9DDD; }
        .content-body .blog-callout.warn{ background:#fffbeb; border-color:#fde68a; }
        html.dark .content-body .blog-callout.warn{ background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.28); }
        .content-body .blog-callout.warn > i{ color:#b45309; }
        html.dark .content-body .blog-callout.warn > i{ color:#fbbf24; }
        .content-body .blog-callout p{ margin:0 !important; }

        .content-body .blog-takeaway{ background:linear-gradient(120deg,#1C6790,#2C9DDD); color:#fff; border-radius:1rem; padding:1.1rem 1.4rem; margin:1.75rem 0; }
        .content-body .blog-takeaway *{ color:#fff !important; }
        .content-body .blog-takeaway-title{ display:flex; align-items:center; gap:.5rem; font-weight:700; margin:0 0 .4rem; }

        .content-body .blog-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:1.75rem 0; }
        @media (max-width:640px){ .content-body .blog-stats{ grid-template-columns:1fr; } }
        .content-body .blog-stat{ text-align:center; padding:1rem; border-radius:.85rem; background:#faf3e7; border:1px solid #e7ddd0; }
        html.dark .content-body .blog-stat{ background:#0B2740; border-color:#143A5C; }
        .content-body .blog-stat i{ color:var(--accent,#1C6790); font-size:1.25rem; }
        .content-body .blog-stat .num{ display:block; font-size:1.55rem; font-weight:800; margin-top:.3rem; color:#0D2B44; }
        html.dark .content-body .blog-stat .num{ color:#fff; }
        .content-body .blog-stat .lbl{ display:block; font-size:.72rem; color:#64748b; }

        /* genel zenginleştirme */
        .content-body ul li::marker{ color:var(--accent,#1C6790); }
        .content-body table thead th{ background:rgba(28,103,144,.08); }
        html.dark .content-body table thead th{ background:rgba(226,95,168,.13); }
        /* adım listesi (opt-in: <ol class="blog-steps">) */
        .content-body ol.blog-steps{ list-style:none !important; counter-reset:bstep; padding-left:0 !important; }
        .content-body ol.blog-steps > li{ counter-increment:bstep; position:relative; padding-left:2.6rem; margin:.7rem 0; }
        .content-body ol.blog-steps > li::before{ content:counter(bstep); position:absolute; left:0; top:.05em; width:1.7rem; height:1.7rem; border-radius:99px; background:var(--accent,#1C6790); color:#fff; font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center; }
        /* gövde-içi ikonlu liste vurgusu */
        .content-body .blog-iconlist{ list-style:none !important; padding-left:0 !important; }
        .content-body .blog-iconlist > li{ position:relative; padding-left:1.8rem; margin:.5rem 0; }
        .content-body .blog-iconlist > li > i:first-child{ position:absolute; left:0; top:.28em; color:var(--accent,#1C6790); }

        /* İçerik-içi HİZMET reklam kartı · premium banner · 4 RENK VARYANTI (hepsinde telefon + WhatsApp) */
        .content-body .blog-svc-ad{ position:relative; margin:2.1rem 0; border-radius:1.25rem; overflow:hidden; box-shadow:0 18px 44px -18px rgba(0,0,0,.45); isolation:isolate; }
        .content-body .blog-svc-ad::after{ content:""; position:absolute; inset:0; background:radial-gradient(130% 150% at 100% 0%, rgba(255,255,255,.20), transparent 55%); pointer-events:none; z-index:0; }
        .content-body .bsa-deco{ position:absolute; right:-.5rem; bottom:-1.6rem; font-size:8.5rem; line-height:1; color:rgba(255,255,255,.12); transform:rotate(-14deg); pointer-events:none; z-index:0; }
        .content-body .bsa-inner{ position:relative; z-index:1; display:flex; gap:1.1rem; align-items:flex-start; padding:1.5rem 1.7rem; }
        .content-body .bsa-badge{ flex:0 0 auto; width:3.1rem; height:3.1rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 8px 20px -8px rgba(0,0,0,.4); }
        .content-body .bsa-content{ flex:1; min-width:0; }
        .content-body .bsa-eyebrow{ display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; opacity:.92; margin-bottom:.45rem; }
        .content-body .bsa-dot{ width:.45rem; height:.45rem; border-radius:99px; background:#fff; box-shadow:0 0 9px rgba(255,255,255,.85); }
        .content-body .bsa-title{ display:block; font-size:1.4rem; font-weight:800; line-height:1.18; margin:0 0 .4rem; color:#fff; }
        .content-body .bsa-text{ display:block; font-size:.92rem; line-height:1.55; color:#fff; opacity:.9; margin-bottom:1.05rem; max-width:44rem; }
        .content-body .bsa-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
        .content-body .bsa-btn{ display:flex; flex:1 1 0; min-width:9rem; align-items:center; justify-content:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:.7rem; font-size:.89rem; font-weight:700; text-decoration:none !important; transition:transform .15s, box-shadow .15s; }
        .content-body .bsa-btn:hover{ box-shadow:0 10px 22px -10px rgba(0,0,0,.45); filter:brightness(.97); }
        .content-body .bsa-btn-primary{ background:#fff; color:#081E30; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }
        .content-body .bsa-btn-wa{ background:#25d366; color:#fff; }
        .content-body .bsa-btn-ghost{ background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.42); }
        /* 4 renk varyantı — alta indikçe farklı renk, körelme/dikkat-kaçması yok */
        .content-body .blog-svc-ad-0{ background:linear-gradient(125deg,#1C6790 0%,#2C9DDD 45%,#a0357f 100%); }
        .content-body .blog-svc-ad-1{ background:linear-gradient(125deg,#1C6790 0%,#1C6790 48%,#2C9DDD 100%); }
        .content-body .blog-svc-ad-2{ background:linear-gradient(125deg,#0e7490 0%,#2C9DDD 45%,#9e1972 100%); }
        .content-body .blog-svc-ad-3{ background:linear-gradient(125deg,#be123c 0%,#db2777 45%,#2C9DDD 100%); }
        @media (max-width:640px){
          .content-body .bsa-inner{ padding:1.25rem; gap:.85rem; }
          .content-body .bsa-badge{ width:2.6rem; height:2.6rem; font-size:1.05rem; }
          .content-body .bsa-title{ font-size:1.18rem; }
          .content-body .bsa-deco{ font-size:6rem; opacity:.1; }
          .content-body .bsa-btn{ font-size:.84rem; padding:.55rem .9rem; }
        }
        /* ===== Yazı-içi HİZMET reklam kartı · MOBİL TAŞMA KALKANI (bsa + bsi) =====
           Kart tam-genişlik, yatay taşma yok; dekoratif watermark ikon mobilde gizli;
           bsa butonları tam-genişlik dikey yığılır (rahat tıklanır). */
        @media (max-width:640px){
          .content-body .blog-svc-ad,
          .content-body .blog-svc-img{ max-width:100%; overflow:hidden; }
          .content-body .bsa-deco,
          .content-body .blog-svc-img .bsi-deco{ display:none !important; }
          .content-body .bsa-actions{ flex-direction:column; }
          .content-body .bsa-btn{ flex:1 1 100%; min-width:0; width:100%; }
        }

        /* ===== İçerik-içi GÖRSELLİ hizmet kartı (SPLIT · jüri kazananı · bsi-) ===== */
/* =========================================================================
   SigortanaBak · Blog içi HİZMET REKLAM kartı — SPLIT (yan-yana görselli)
   Önek: bsi-  (banner bsa- ile çakışmaz)
   Modifier: .blog-svc-img-0/-1/-2/-3  → panel/aksan rengi
   Dark = varsayılan, light de okunur. ASIL tasarım görselli; görselsiz fallback var.
   ========================================================================= */

/* --- kart kabuğu (split: solda görsel, sağda panel) --- */
.content-body .blog-svc-img{
  position:relative;
  display:grid;
  grid-template-columns:1.45fr 1fr;   /* solda görsel daha geniş */
  align-items:stretch;
  margin:2.1rem 0;
  border-radius:1.25rem;
  overflow:hidden;
  isolation:isolate;
  background:#ffffff;
  border:1px solid var(--bsi-edge,#d5e6f2);
  box-shadow:0 18px 44px -20px rgba(15,23,42,.30);
  transition:box-shadow .25s ease;
}
html.dark .content-body .blog-svc-img{
  background:#0d111c;
  border-color:var(--bsi-edge-d,rgba(226,95,168,.34));
  box-shadow:0 22px 54px -22px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.02);
}
/* hover: zıplama YOK — sadece hafif gölge */
.content-body .blog-svc-img:hover{
  box-shadow:0 26px 60px -22px rgba(15,23,42,.42);
}
html.dark .content-body .blog-svc-img:hover{
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85), 0 0 26px -6px var(--bsi-glow,rgba(181,55,154,.40));
}

/* üst renkli aksan şeridi — reklam olduğunu net belli eder */
.content-body .blog-svc-img::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px; z-index:4;
  background:var(--bsi-grad,linear-gradient(90deg,#1C6790,#2C9DDD,#a0357f));
  pointer-events:none;
}

/* --- SOL: görsel alanı --- */
.content-body .blog-svc-img .bsi-media{
  position:relative;
  display:flex; align-items:center; justify-content:center;   /* görsel ORTADA */
  min-height:13.5rem;
  padding:1.4rem;                                              /* sol=sağ EŞİT boşluk */
  overflow:hidden;
  background:var(--bsi-grad,linear-gradient(125deg,#1C6790,#2C9DDD,#a0357f));
  text-decoration:none !important;
}
.content-body .blog-svc-img .bsi-img{
  position:relative;
  max-width:100%; max-height:100%; width:auto; height:auto;   /* tam orantılı, kırpmasız, merkezde */
  object-fit:contain;
  display:block;
  z-index:1;
}
html.dark .content-body .blog-svc-img .bsi-img{ filter:saturate(1.02) brightness(.94); }

/* görselsiz zarif fallback (img kırık/yoksa altta kalan dev watermark) */
.content-body .blog-svc-img .bsi-media-fallback{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  font-size:5.5rem; color:rgba(255,255,255,.22);
}
/* img yüklenemezse alt:"" + bu kuralla görsel görünmez olur, fallback ortaya çıkar */
.content-body .blog-svc-img .bsi-img[src=""],
.content-body .blog-svc-img .bsi-img:not([src]){ display:none; }

/* görsel→panel yumuşak geçiş: panel rengiyle eşleşen scrim (sağ kenarda kaynaşma) */
.content-body .blog-svc-img .bsi-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 52%, var(--bsi-scrim-mid,rgba(28,103,144,.42)) 82%, var(--bsi-scrim-end,#2C9DDD) 100%),
    linear-gradient(0deg, rgba(0,0,0,.18), transparent 42%);
}
html.dark .content-body .blog-svc-img .bsi-scrim{
  background:
    linear-gradient(90deg, transparent 46%, var(--bsi-scrim-mid,rgba(28,103,144,.55)) 80%, var(--bsi-scrim-end,#2C9DDD) 100%),
    linear-gradient(0deg, rgba(0,0,0,.34), transparent 46%);
}

/* --- SAĞ: renkli gradyan panel --- */
.content-body .blog-svc-img .bsi-panel{
  position:relative;
  display:flex; align-items:center;
  padding:1.55rem 1.7rem;
  background:var(--bsi-grad,linear-gradient(125deg,#1C6790 0%,#2C9DDD 45%,#a0357f 100%));
  overflow:hidden;
  z-index:3;
}
/* panelde hafif parıltı */
.content-body .blog-svc-img .bsi-panel::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 130% at 100% 0%, rgba(255,255,255,.18), transparent 55%);
}
/* dekoratif soluk watermark (sağ panelde) */
.content-body .blog-svc-img .bsi-deco{
  position:absolute; right:-.7rem; bottom:-1.5rem; z-index:0;
  font-size:7.5rem; line-height:1; color:rgba(255,255,255,.13);
  transform:rotate(-12deg); pointer-events:none;
}
.content-body .blog-svc-img .bsi-panel-in{ position:relative; z-index:1; width:100%; }

/* cam-efektli köşe rozeti */
.content-body .blog-svc-img .bsi-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.9rem; height:2.9rem; margin-bottom:.85rem;
  border-radius:.85rem; font-size:1.15rem; color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.4);
}

/* eyebrow — reklam etiketi */
.content-body .blog-svc-img .bsi-eyebrow{
  display:flex; align-items:center; gap:.45rem;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; opacity:.94; margin-bottom:.5rem;
}
.content-body .blog-svc-img .bsi-dot{
  width:.45rem; height:.45rem; border-radius:99px; background:#fff;
  box-shadow:0 0 9px rgba(255,255,255,.9);
  animation:bsiPulse 2.4s ease-in-out infinite;
}
@keyframes bsiPulse{ 0%,100%{opacity:.55; transform:scale(.85);} 50%{opacity:1; transform:scale(1.15);} }

.content-body .blog-svc-img .bsi-title{
  display:block; font-size:1.3rem; font-weight:800; line-height:1.2;
  margin:0 0 .4rem; color:#fff;
}
.content-body .blog-svc-img .bsi-text{
  display:block; font-size:.9rem; line-height:1.55; color:#fff; opacity:.9;
  margin-bottom:1.05rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* butonlar */
.content-body .blog-svc-img .bsi-actions{ display:flex; flex-direction:column; gap:.5rem; }
.content-body .blog-svc-img .bsi-btn{
  display:flex; width:100%; align-items:center; justify-content:center; gap:.5rem;
  padding:.62rem 1.05rem; border-radius:.7rem;
  font-size:.86rem; font-weight:700; text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.content-body .blog-svc-img .bsi-btn:hover{
  box-shadow:0 10px 22px -10px rgba(0,0,0,.5);
  filter:brightness(.97);
}
.content-body .blog-svc-img .bsi-btn-primary{ background:#fff; color:#081E30; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }
.content-body .blog-svc-img .bsi-btn-wa{ background:#25d366; color:#fff; }
.content-body .blog-svc-img .bsi-btn-ghost{ background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.45); }
.content-body .blog-svc-img .bsi-btn-ghost:hover{ background:rgba(255,255,255,.26); }

/* =========================================================================
   4 RENK VARYANTI (banner gradyanlarıyla birebir uyumlu)
   Her varyant: --bsi-grad (panel+şerit), --bsi-scrim-* (geçiş), --bsi-edge (light kenar),
                --bsi-edge-d (dark kenar), --bsi-glow (dark hover ışıması)
   ========================================================================= */

/* 0 · MAGENTA-MOR (marka ana) */
.content-body .blog-svc-img-0{
  --bsi-grad:linear-gradient(125deg,#1C6790 0%,#2C9DDD 45%,#a0357f 100%);
  --bsi-scrim-mid:rgba(28,103,144,.45); --bsi-scrim-end:#2C9DDD;
  --bsi-edge:#c9e0f2; --bsi-edge-d:rgba(226,95,168,.36); --bsi-glow:rgba(181,55,154,.45);
}
/* 1 · INDIGO-MOR */
.content-body .blog-svc-img-1{
  --bsi-grad:linear-gradient(125deg,#1C6790 0%,#1C6790 48%,#2C9DDD 100%);
  --bsi-scrim-mid:rgba(26,84,116,.45); --bsi-scrim-end:#1C6790;
  --bsi-edge:#CBDEEC; --bsi-edge-d:rgba(44,157,221,.38); --bsi-glow:rgba(28,103,144,.45);
}
/* 2 · TEAL-MAVİ */
.content-body .blog-svc-img-2{
  --bsi-grad:linear-gradient(125deg,#0e7490 0%,#2C9DDD 45%,#9e1972 100%);
  --bsi-scrim-mid:rgba(14,116,144,.45); --bsi-scrim-end:#2C9DDD;
  --bsi-edge:#bfe6ee; --bsi-edge-d:rgba(34,211,238,.34); --bsi-glow:rgba(8,145,178,.45);
}
/* 3 · GÜL-MAGENTA */
.content-body .blog-svc-img-3{
  --bsi-grad:linear-gradient(125deg,#be123c 0%,#db2777 45%,#2C9DDD 100%);
  --bsi-scrim-mid:rgba(190,18,60,.45); --bsi-scrim-end:#db2777;
  --bsi-edge:#f3c9d6; --bsi-edge-d:rgba(244,114,182,.36); --bsi-glow:rgba(219,39,119,.45);
}

/* =========================================================================
   RESPONSIVE — mobilde dikey yığ (görsel üstte, panel altta), taşma yok
   ========================================================================= */
@media (max-width:768px){
  .content-body .blog-svc-img{ grid-template-columns:1fr; }
  .content-body .blog-svc-img .bsi-media{ width:100%; height:auto; aspect-ratio:16/9; }
  /* dikeyde geçiş: scrim alttan panele kaynasın */
  .content-body .blog-svc-img .bsi-scrim{
    background:
      linear-gradient(180deg, transparent 50%, var(--bsi-scrim-mid,rgba(28,103,144,.5)) 84%, var(--bsi-scrim-end,#2C9DDD) 100%),
      linear-gradient(0deg, rgba(0,0,0,.20), transparent 40%);
  }
  html.dark .content-body .blog-svc-img .bsi-scrim{
    background:
      linear-gradient(180deg, transparent 44%, var(--bsi-scrim-mid,rgba(28,103,144,.6)) 82%, var(--bsi-scrim-end,#2C9DDD) 100%),
      linear-gradient(0deg, rgba(0,0,0,.34), transparent 44%);
  }
  .content-body .blog-svc-img .bsi-panel{ padding:1.35rem 1.4rem; }
  .content-body .blog-svc-img .bsi-title{ font-size:1.18rem; }
  /* mobilde 3 buton alt alta yerine 2 satır: telefon tam genişlik, WhatsApp + Hizmeti yan yana */
  .content-body .blog-svc-img .bsi-actions{ flex-direction:row; flex-wrap:wrap; gap:.5rem; }
  .content-body .blog-svc-img .bsi-btn-primary{ flex:1 1 100%; }
  .content-body .blog-svc-img .bsi-btn-wa,
  .content-body .blog-svc-img .bsi-btn-ghost{ flex:1 1 calc(50% - .3rem); min-width:0; gap:.35rem; padding-left:.55rem; padding-right:.55rem; font-size:.8rem; white-space:nowrap; }
}
@media (max-width:480px){
  .content-body .blog-svc-img .bsi-actions{ gap:.45rem; }
  .content-body .blog-svc-img .bsi-btn{ justify-content:center; }
}

/* erişilebilirlik: hareket azaltma */
@media (prefers-reduced-motion:reduce){
  .content-body .blog-svc-img,
  .content-body .blog-svc-img .bsi-img,
  .content-body .blog-svc-img .bsi-btn,
  .content-body .blog-svc-img .bsi-dot{ transition:none !important; animation:none !important; }
}

        /* ŞEFFAF illüstrasyon (hizmet anagörselleri PNG, ~%50 şeffaf) → full-cover yerine SAHNE + contain */
        .content-body .blog-svc-img .bsi-media{
          background:radial-gradient(120% 110% at 38% 32%, color-mix(in srgb, var(--bsi-scrim-end,#2C9DDD) 16%, #ffffff), #E6F4FB);
        }
        html.dark .content-body .blog-svc-img .bsi-media{
          background:radial-gradient(120% 110% at 38% 32%, color-mix(in srgb, var(--bsi-scrim-end,#2C9DDD) 28%, #0A2438), #061422);
        }
        .content-body .blog-svc-img .bsi-img{
          object-fit:contain;
          filter:drop-shadow(0 12px 22px rgba(0,0,0,.28));
        }
        html.dark .content-body .blog-svc-img .bsi-img{ filter:drop-shadow(0 14px 26px rgba(0,0,0,.5)); }
        /* sahne→panel yumuşak geçiş: yalnız sağ kenarda hafif (illüstrasyonu boğmaz) */
        .content-body .blog-svc-img .bsi-scrim{
          background:linear-gradient(90deg, transparent 62%, color-mix(in srgb, var(--bsi-scrim-end,#2C9DDD) 50%, transparent) 100%);
        }
        html.dark .content-body .blog-svc-img .bsi-scrim{
          background:linear-gradient(90deg, transparent 58%, color-mix(in srgb, var(--bsi-scrim-end,#2C9DDD) 62%, transparent) 100%);
        }
        /* watermark fallback YALNIZ görsel gerçekten yoksa (onerror → .bsi-noimg) */
        .content-body .blog-svc-img .bsi-media-fallback{ display:none; }
        .content-body .blog-svc-img .bsi-media.bsi-noimg .bsi-media-fallback{ display:flex; }
        .content-body .blog-svc-img .bsi-media.bsi-noimg{ background:var(--bsi-grad,linear-gradient(125deg,#1C6790,#2C9DDD,#a0357f)); }
        .content-body .blog-svc-img .bsi-media.bsi-noimg .bsi-img{ display:none; }
        @supports not (color:color-mix(in srgb,#000,#fff)){
          .content-body .blog-svc-img .bsi-media{ background:#E6F4FB; }
          html.dark .content-body .blog-svc-img .bsi-media{ background:#0A2438; }
          .content-body .blog-svc-img .bsi-scrim{ background:linear-gradient(90deg,transparent 62%, rgba(28,103,144,.4) 100%); }
        }
        @media (max-width:768px){ .content-body .blog-svc-img .bsi-media{ padding:1rem; min-height:auto; aspect-ratio:16/9; } }

        /* Görsel altı caption gizle (kullanıcı: görsel yanına yazı yok) */
        .content-body .blog-inline-image figcaption{ display:none !important; }
        /* Ken Burns (yavaş zoom) + lightbox imleci — inline görseller */
        .content-body .blog-inline-image{ overflow:hidden; border-radius:.75rem; }
        .content-body .blog-inline-image img{ cursor:zoom-in; animation:tbKenBurns 26s ease-in-out infinite alternate; transform-origin:center center; will-change:transform; }
        @keyframes tbKenBurns{ from{ transform:scale(1.001); } to{ transform:scale(1.09); } }
        @media (prefers-reduced-motion: reduce){ .content-body .blog-inline-image img{ animation:none; } }
        /* Lightbox GALERİ (ileri-geri · sayaç · açıklama · belirgin kapat) */
        .tb-lb{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:4rem 1.2rem 4.5rem; background:rgba(6,4,12,.95); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); }
        .tb-lb-stage{ margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:94vw; max-height:84vh; cursor:zoom-out; }
        /* ixtif tarzı "Yazı devam ediyor" ayraç (her reklam öncesi) */
        .content-body .blog-ad-divider{ display:flex; align-items:center; gap:.9rem; margin:2.2rem 0 1.1rem; }
        .content-body .blog-ad-divider .bad-line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(28,103,144,.28), transparent); }
        html.dark .content-body .blog-ad-divider .bad-line{ background:linear-gradient(90deg, transparent, rgba(226,95,168,.32), transparent); }
        .content-body .blog-ad-divider .bad-label{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:600; letter-spacing:.04em; color:#9b7090; padding:.25rem .85rem; border-radius:99px; background:rgba(28,103,144,.07); white-space:nowrap; }
        html.dark .content-body .blog-ad-divider .bad-label{ color:#7FB8D8; background:rgba(226,95,168,.10); }
        .content-body .blog-ad-divider .bad-label i{ font-size:.6rem; opacity:.7; }

        /* Arada "Benzer Yazılar" kutusu — kutu kutu blog kartları */
        /* ===== Yazı-içi İlgili Yazılar · alttaki "Bunları da Beğenebilirsin" ile BÜTÜN (dış kutu yok, liquid-glass kart, alt-çizgili başlık) ===== */
        .content-body .blog-related-box{ margin:3rem 0; padding:0; background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
        /* Başlık: alttaki "Bunları da Beğenebilirsin" h2 ile birebir (büyük koyu başlık + gradient alt çizgi, dekoratif ikon yok) */
        .content-body .brp-head{ font-size:1.5rem; font-weight:700; margin:0 0 1.5rem; padding-bottom:0; display:block; color:#111827; position:relative; }
        html.dark .content-body .brp-head{ color:#fff; }
        .content-body .brp-head i{ display:none; }
        .content-body .brp-head::after{ content:""; display:block; position:static; margin-top:.75rem; width:4rem; height:4px; border-radius:99px; background:linear-gradient(90deg,#1C6790,#2C9DDD); }
        @media (min-width:768px){ .content-body .brp-head{ font-size:1.875rem; } }
        .content-body .brp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
        .content-body .brp-card{ display:flex; flex-direction:column; text-decoration:none !important; border-radius:.9rem; overflow:hidden; transition:box-shadow .25s ease, border-color .25s ease;
            background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.6); box-shadow:0 8px 28px -14px rgba(28,103,144,.22), inset 0 1px 0 rgba(255,255,255,.7); }
        html.dark .content-body .brp-card{ background:rgba(255,255,255,.05); border-color:transparent; box-shadow:0 10px 30px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
        .content-body .brp-card:hover{ box-shadow:0 16px 34px -14px rgba(28,103,144,.42); border-color:rgba(28,103,144,.4); }
        html.dark .content-body .brp-card:hover{ border-color:rgba(44,157,221,.5); }
        .content-body .brp-img{ display:block; width:100%; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:#E6F4FB; }
        html.dark .content-body .brp-img{ background-color:#103050; }
        .content-body .brp-img-ph{ display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:#fff; background:linear-gradient(135deg,#1C6790,#2C9DDD); }
        .content-body .brp-title{ padding:1.1rem 1.25rem 1.25rem; font-size:.95rem; font-weight:700; line-height:1.35; color:#1f2430; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
        html.dark .content-body .brp-title{ color:#eef0f6; }
        /* Mobil: 2 sütun · ÇİFT sayı (tek başına kalan kart YOK) → 3. kart gizlenir, 2×1 dengeli kalır */
        @media (max-width:640px){
          .content-body .brp-grid{ grid-template-columns:1fr 1fr; }
          .content-body .brp-grid > *:nth-child(n+3){ display:none; }
        }

        /* ===== Alttaki "Bunları da Beğenebilirsin" kartları · AYNI liquid-glass (bütünlük) ===== */
        #diger-yazilar .tb-rel-card{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.6); box-shadow:0 8px 28px -14px rgba(28,103,144,.22), inset 0 1px 0 rgba(255,255,255,.7); }
        html.dark #diger-yazilar .tb-rel-card{ background:rgba(255,255,255,.05); border-color:transparent; box-shadow:0 10px 30px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
        #diger-yazilar .tb-rel-card:hover{ box-shadow:0 16px 34px -14px rgba(28,103,144,.42); border-color:rgba(28,103,144,.4); }
        html.dark #diger-yazilar .tb-rel-card:hover{ border-color:rgba(44,157,221,.5); }

        /* ===== Reaksiyon barı: görüntülenme/favori satırı + üstteki divider çizgisi kaldırıldı ===== */
        .blog-reaction-wrap > div > .justify-between.mb-8{ display:none !important; }
        .blog-reaction-wrap > div{ border-top:0 !important; padding-top:0 !important; }

        /* ===== İlgili kart başlıkları: küçült + tam görünsün (kırpılmasın) ===== */
        #diger-yazilar .tb-rel-card h3{ font-size:.95rem !important; line-height:1.35 !important; -webkit-line-clamp:3 !important; }

        .tb-lb-stage img{ max-width:94vw; max-height:78vh; border-radius:.7rem; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.7); cursor:pointer; background:#061422; }
        .tb-lb-cap{ color:#e2eef6; font-size:.95rem; line-height:1.5; text-align:center; max-width:48rem; opacity:.92; font-style:normal; }
        /* belirgin yuvarlak butonlar */
        .tb-lb-close, .tb-lb-nav{ position:absolute; display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.13); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .15s ease, transform .15s ease, box-shadow .15s ease; }
        .tb-lb-close{ top:1.1rem; right:1.25rem; width:3rem; height:3rem; border-radius:99px; font-size:1.3rem; box-shadow:0 8px 22px -8px rgba(0,0,0,.6); }
        .tb-lb-close:hover{ background:rgba(244,63,94,.85); border-color:rgba(255,255,255,.5); transform:rotate(90deg); }
        .tb-lb-nav{ top:50%; transform:translateY(-50%); width:3.3rem; height:3.3rem; border-radius:99px; font-size:1.25rem; box-shadow:0 10px 26px -10px rgba(0,0,0,.6); }
        .tb-lb-nav:hover{ background:rgba(255,255,255,.26); }
        .tb-lb-prev{ left:1.25rem; } .tb-lb-next{ right:1.25rem; }
        .tb-lb-prev:hover{ transform:translateY(-50%) translateX(-3px); }
        .tb-lb-next:hover{ transform:translateY(-50%) translateX(3px); }
        .tb-lb-counter{ position:absolute; top:1.45rem; left:1.6rem; color:#fff; font-size:.82rem; font-weight:700; letter-spacing:.05em; padding:.35rem .8rem; border-radius:99px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }
        .tb-lb-counter .tb-lb-sep{ opacity:.6; margin:0 .15rem; }
        .tb-lb.is-single .tb-lb-nav, .tb-lb.is-single .tb-lb-counter{ display:none; }
        @media (max-width:640px){
          .tb-lb{ padding:3.2rem .5rem 3.8rem; }
          .tb-lb-nav{ width:2.7rem; height:2.7rem; font-size:1.05rem; } .tb-lb-prev{ left:.45rem; } .tb-lb-next{ right:.45rem; }
          .tb-lb-close{ width:2.7rem; height:2.7rem; font-size:1.15rem; top:.7rem; right:.7rem; }
          .tb-lb-counter{ top:.95rem; left:.9rem; }
          .tb-lb-stage img{ max-height:68vh; } .tb-lb-cap{ font-size:.88rem; }
        }
        /* Yorumlar accordion: bileşenin kendi mavi dış card'ını + tekrar eden başlığını nötrle (card içinde card olmasın) */
        .tb-review-acc > section{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; margin:0 !important; }
        .tb-review-acc > section > .flex.items-center.justify-between{ display:none !important; }

        /* ===== Font: gövdeyi sitedeki metin boyutuna çek + başlık hiyerarşisi (önemine göre büyük→daha büyük) ===== */
        .content-body{ font-size:1rem; line-height:1.75; }
        .content-body h2{ font-size:1.5rem; line-height:1.25; margin-top:2.2rem; margin-bottom:.85rem; }
        .content-body h3{ font-size:1.25rem; line-height:1.3; margin-top:1.8rem; margin-bottom:.6rem; }
        .content-body h4{ font-size:1.1rem; line-height:1.35; margin-top:1.5rem; margin-bottom:.45rem; }
        .content-body p, .content-body li{ font-size:1rem; line-height:1.75; }
        @media (min-width:768px){
            .content-body{ font-size:1.05rem; }
            .content-body p, .content-body li{ font-size:1.05rem; }
            .content-body h2{ font-size:1.8rem; }
            .content-body h3{ font-size:1.4rem; }
            .content-body h4{ font-size:1.2rem; }
        }

        /* ===== 🔹 BAŞLIK HİYERARŞİSİ — SADE: sadece kalın + renk (alt çizgi/bar/nokta YOK) ===== */
        .content-body h2{ font-weight:800; letter-spacing:-.015em; color:#0f2a3d; margin-top:2.6rem; }
        .dark .content-body h2{ color:#eef5fa; }
        .content-body h3{ font-weight:700; color:#12506e; margin-top:2rem; }
        .dark .content-body h3{ color:#9AD2EE; }
        .content-body h4{ font-weight:700; color:#1C6790; }
        .dark .content-body h4{ color:#bfe0f2; }

        /* ===== SSS: solgun eğik watermark ikon (reklamlardaki bsa-deco gibi) ===== */
        .content-body #sik-sorulan-sorular .faq-deco,
        #sik-sorulan-sorular .faq-deco{ position:absolute; right:-.4rem; bottom:-1.5rem; font-size:7rem; line-height:1; color:rgba(28,103,144,.06); transform:rotate(-14deg); pointer-events:none; z-index:0; }
        html.dark #sik-sorulan-sorular .faq-deco{ color:rgba(255,255,255,.045); }
        @media (max-width:640px){ #sik-sorulan-sorular .faq-deco{ font-size:5rem; bottom:-1rem; } }

        /* ===== How-To: yeni dikey timeline tasarımı + solgun eğik watermark ikon ===== */
        #nasil-yapilir .howto-timeline{ list-style:none; margin:0; padding:0; position:relative; }
        #nasil-yapilir .howto-timeline::before{ content:""; position:absolute; left:1.25rem; top:.6rem; bottom:.6rem; width:2px; background:linear-gradient(to bottom,#1C6790,rgba(28,103,144,.12)); }
        #nasil-yapilir .howto-step{ position:relative; padding-left:3.85rem; padding-bottom:1.5rem; }
        #nasil-yapilir .howto-step:last-child{ padding-bottom:0; }
        #nasil-yapilir .howto-step-num{ position:absolute; left:0; top:0; width:2.5rem; height:2.5rem; border-radius:99px; background:linear-gradient(135deg,#1C6790,#2C9DDD); color:#fff; font-weight:800; font-size:1.05rem; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -6px rgba(28,103,144,.6); z-index:1; transition:transform .3s ease; }
        /* Kullanıcı kuralı: kartlarda/içerikte zıplama yok → numara scale kaldırıldı (ışıltı yeterli) */
        #nasil-yapilir .howto-step-card{ position:relative; overflow:hidden; background:#fff; border:1px solid #d9ecf6; border-radius:1rem; padding:1.05rem 1.3rem 1.15rem; transition:border-color .3s ease; }
        html.dark #nasil-yapilir .howto-step-card{ background:#1f2937; border-color:transparent; }
        #nasil-yapilir .howto-step.group:hover .howto-step-card{ border-color:#2C9DDD; }
        html.dark #nasil-yapilir .howto-step.group:hover .howto-step-card{ border-color:#2C9DDD; }
        #nasil-yapilir .howto-step-title{ font-size:1.18rem; font-weight:800; color:#1f2430; margin:0 0 .4rem; line-height:1.3; display:flex; align-items:center; gap:.55rem; position:relative; z-index:1; }
        html.dark #nasil-yapilir .howto-step-title{ color:#fff; }
        #nasil-yapilir .howto-step-ico{ color:#1C6790; font-size:1.05rem; flex-shrink:0; }
        html.dark #nasil-yapilir .howto-step-ico{ color:#2C9DDD; }
        #nasil-yapilir .howto-step-text{ font-size:.97rem; line-height:1.65; color:#475569; position:relative; z-index:1; }
        html.dark #nasil-yapilir .howto-step-text{ color:#cbd5e1; }
        #nasil-yapilir .howto-deco{ position:absolute; right:-.3rem; bottom:-1.3rem; font-size:6rem; line-height:1; color:rgba(28,103,144,.06); transform:rotate(-14deg); pointer-events:none; z-index:0; }
        html.dark #nasil-yapilir .howto-deco{ color:rgba(255,255,255,.045); }
        @media (max-width:640px){ #nasil-yapilir .howto-deco{ font-size:4.5rem; } #nasil-yapilir .howto-step{ padding-left:3.35rem; } #nasil-yapilir .howto-step-num{ width:2.2rem; height:2.2rem; font-size:.95rem; } #nasil-yapilir .howto-timeline::before{ left:1.1rem; } }

        /* ===== Kullanıcı kuralı: blogda HİÇBİR kartta/hover'da gölge YOK (kart altı dahil) ===== */
        .content-body *, .content-body *:hover,
        .blog-related-box *,
        #sik-sorulan-sorular *, #sik-sorulan-sorular *:hover,
        #nasil-yapilir *, #nasil-yapilir *:hover,
        #diger-yazilar *, #diger-yazilar *:hover,
        .tb-review-acc *{ box-shadow:none !important; }
        .content-body .bsi-img{ filter:none !important; }

/* Ürünün sayfa içi sohbet kutusu (kp-bgm): kaynaktaki yazı içi sohbet kutusunun (be-wrap) yazısıyla — sayfanın yazı ailesi,
   başlık 14px / 600 (ürün varsayılanı system-ui 16px / 700 idi). Girdi 16px kalır (telefonda odakta yakınlaşma olmasın). */
.kp-bgm{--aile:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.kp-bgm .kp-bgm-baslik{font-size:14px;font-weight:600;line-height:1.25}