/* ============================================================================
   ERES-THEME: BİLGİ MERKEZİ (KNOWLEDGE BASE) SKIN (0.35.0) — TAM REPLACE.
   Yüzey: müşteri (client area) bilgi merkezi — /knowledge-base (index/search/
   category/article). Tasarım hedefi (TEK DOĞRULUK):
   modules/eres_crm/docs/mockup/eres-crm-musteri-v2.html → EKRAN 2/3/4.

   Palet + fontlar Giriş V2 ile ortak (Plus Jakarta Sans başlık, Inter gövde,
   JetBrains Mono eyebrow/etiket — YEREL, eres-crm-fonts.css). Okuma sayfası:
   INDEX'te KOYU marka hero + AYDINLIK paper üstünde 2'li kategori kartları;
   İÇ sayfalarda (makale/kategori/arama) hero AYDINLIK araç çubuğuna iner.

   Mekanizma: core tema view'larına SIFIR dokunuş. Tek CSS + `app_customers_head`
   (link) + iki HTML-enjeksiyon hook'u: `after_kb_groups_customers_area` (index
   CTA kutusu) ve `after_single_knowledge_base_article_customers_area` (makale
   yardım kartı). Hook YALNIZ Knowledge_base denetleyicisinde basar. Kill-switch:
   eres_crm_kb_skin_enabled=0 → link+enjeksiyon basılmaz, stok bilgi merkezi
   döner. Fontlar YEREL; dış istek YOK.

   SAYFA AYRIMI (:has, 2023+ evrensel — desteklemeyen tarayıcıda zarif düşüş):
   • INDEX  = :has(ul[role=list].tw-divide-y)   (yalnız kategori indeksi)
   • MAKALE = :has(.kb-article-content)
   • KATEGORİ/ARAMA = :has(.articles_list) ∧ değil makale ∧ değil index
   ========================================================================== */
body.customers{
  --kb-primary:#4a5df9; --kb-deep:#3243e0; --kb-soft:#eef0ff; --kb-signal:#2fd6c3;
  --kb-ink:#0d1024; --kb-ink2:#161a38; --kb-paper:#f5f6fb; --kb-surface:#ffffff;
  --kb-line:#e6e9f5; --kb-line-strong:#d7dbef; --kb-text:#22263d; --kb-muted:#6b7191;
  --kb-faint:#9aa0bf; --kb-body-ink:#3c4160;
  --kb-grad:linear-gradient(90deg,#4a5df9,#2fd6c3);
  --kb-disp:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --kb-fbody:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --kb-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---- GÖVDE: aydınlık okuma zemini ---- */
body.customers{
  min-height:100vh; margin:0; color:var(--kb-text); font-family:var(--kb-fbody);
  -webkit-font-smoothing:antialiased; background:var(--kb-paper);}
body.customers #wrapper, body.customers #content{background:transparent !important;}
body.customers ::selection{background:rgba(74,93,249,.2);}

/* ---- TOPBAR (mockup .eres-topbar): sticky + saydam blur + 1180 kabuk + 68px ---- */
body.customers .navbar-default.header{
  position:sticky; top:0; margin:0;
  background:rgba(255,255,255,.84) !important; backdrop-filter:blur(10px) saturate(1.4);
  border:0 !important; border-bottom:1px solid var(--kb-line) !important;
  box-shadow:0 1px 20px -14px rgba(20,22,40,.5);}
/* kabuk: .eres-topbar__in{display:flex;justify-content:space-between;height:68px}
   (boyut kısıtı aşağıdaki KABUK kuralından gelir — burada yalnız yerleşim) */
body.customers .navbar-default.header>.container{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; min-height:68px;}

/* ============================================================================
   GENİŞLİK BİRLİĞİ (0.40.1, mockup .eres-shell{max-width:1180;padding:0 24px}):
   dört bölge TEK ölçüde — topbar içi / hero+subheader içi / içerik (catwrap
   dahil) / footer içi.
   KAPSAYICI NÖTRLEME: markup'ı kovalamak yerine bu bölgelerdeki TÜM Bootstrap
   kalıntıları (container, row, col ve offset sınıfları) !important ile sıfırlanır;
   ardından TEK genişlik kısıtı (kabuk) yeniden kurulur. Bootstrap .container
   SABİT width basar (750/970/1170 — max-width değil): viewport'a göre değişen
   "~800 ortalanmış blok" ölçümlerinin kaynağı buydu.
   ========================================================================== */
/* 1) NÖTRLEME — bölge içindeki her Bootstrap sarmalayıcı sıfır */
body.customers .navbar-default.header :is(.container,.container-fluid,.row,[class*="col-"],[class*="offset-"]),
body.customers .kb-search-jumbotron :is(.container,.container-fluid,.row,[class*="col-"],[class*="offset-"]),
body.customers footer.footer :is(.container,.container-fluid,.row,[class*="col-"],[class*="offset-"]),
body.customers #content>.container,
body.customers #content>.container>.row,
body.customers #content>.container>.row>[class*="col-"]{
  width:auto !important; max-width:none !important; margin:0 !important;
  padding:0 !important; float:none !important;}
/* 2) TEK GENİŞLİK KISITI — kabuk (dört bölgenin taşıyıcısı) */
body.customers .navbar-default.header>.container,
body.customers .kb-search .container,
body.customers #content>.container,
body.customers footer.footer .container{
  width:auto !important; max-width:1180px !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:24px !important; padding-right:24px !important;}
/* 3) nötrlemenin sildiği bölge-içi boşluklar geri */
body.customers footer.footer{padding-left:0 !important; padding-right:0 !important;}
body.customers footer.footer>.container{padding-top:22px !important; padding-bottom:22px !important;}
/* index hero içi mockup gibi dar kalır (.eres-hero__in{max-width:730}) */
body.customers .kb-search .text-center{max-width:730px; margin:0 auto;}
body.customers .navbar-default.header .navbar-header{float:none; display:flex; align-items:center; margin:0;}
body.customers .navbar-default.header .navbar-collapse{float:none; padding:0; border:0; box-shadow:none;}
body.customers .navbar-default .navbar-nav.navbar-right{
  float:none; margin:0; display:flex; align-items:center; gap:6px;}
body.customers .navbar-default .navbar-nav>li{float:none; display:flex; align-items:center;}
body.customers .navbar-brand.logo{padding:0; margin:0; height:auto; display:inline-flex; align-items:center;}
body.customers .navbar-brand.logo img{max-height:30px; width:auto;}

/* "Bilgi Merkezi" = çıplak bağlantı (.eres-navlink) + aktif gradient alt çizgi */
body.customers .navbar-default .navbar-nav>li>a{
  position:relative; padding:6px 8px; line-height:1.3; color:var(--kb-muted); font-family:var(--kb-fbody);
  font-weight:600; font-size:14px; background:transparent; transition:color .15s ease;}
body.customers .navbar-default .navbar-nav>li>a:hover,
body.customers .navbar-default .navbar-nav>li>a:focus{color:var(--kb-text); background:transparent;}
body.customers .navbar-default .navbar-nav>li.customers-nav-item-knowledge-base.active>a{color:var(--kb-text);}
body.customers .navbar-default .navbar-nav>li.customers-nav-item-knowledge-base.active>a::after{
  content:""; position:absolute; left:8px; right:8px; bottom:2px; height:2.5px;
  border-radius:2px; background:var(--kb-grad);}

/* "Giriş" = birincil düğme (.eres-btn--primary): düz indigo, 42px, radius 12 */
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login{margin-left:4px;}
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a,
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a:active,
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a:hover,
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a:focus{
  height:42px; display:inline-flex; align-items:center; gap:7px; padding:0 18px;
  background:var(--kb-primary) !important; color:#fff !important; border-radius:12px !important;
  font-weight:600; box-shadow:0 12px 24px -12px rgba(74,93,249,.65);}
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a:hover{background:var(--kb-deep) !important;}
body.customers .navbar-toggle .icon-bar{background:var(--kb-muted) !important;}
body.customers .navbar-toggle{border-color:var(--kb-line);}
@media (max-width:768px){
  body.customers .navbar-default .navbar-nav.navbar-right{width:100%; justify-content:flex-start; gap:8px; padding:6px 0 10px;}
}

/* ============================================================================
   ARAMA HERO (jumbotron) — VARSAYILAN KOYU (INDEX)
   ========================================================================== */
body.customers .jumbotron.kb-search-jumbotron{
  margin:0; border-radius:0; color:#fff; position:relative; overflow:hidden;
  padding:0; border-bottom:1px solid rgba(255,255,255,.06);
  background-color:var(--kb-ink);
  background-image:
    radial-gradient(circle at 14% -20%, rgba(74,93,249,.42), transparent 46%),
    radial-gradient(circle at 86% 130%, rgba(47,214,195,.20), transparent 48%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:auto, auto, 24px 24px;}
body.customers .kb-search{padding:66px 0 118px;}
body.customers .kb-search-heading{
  color:#f4f5fb !important; font-family:var(--kb-disp); font-weight:800;
  font-size:clamp(28px,4vw,42px); letter-spacing:-.03em; line-height:1.14; margin:0 0 12px;}
/* Eyebrow (mono, teal) — çekirdek view'da yok, ::before ile eklenir */
body.customers .kb-search-heading::before{
  content:"Bilgi Merkezi"; display:block; font-family:var(--kb-mono);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--kb-signal); margin-bottom:14px;}
/* Alt açıklama — ::before ile forma eklenir */
body.customers .kb-search .text-center > form::before{
  content:"Sık sorulan sorular, rehberler ve panel kullanımına dair her şey burada.";
  display:block; color:#b9bedb; font-size:16px; margin:-2px auto 28px; max-width:540px; line-height:1.6;}
/* arama kutusu — beyaz yuvarlak pill + gradient Ara */
body.customers .kb-search .input-group{border-radius:15px; box-shadow:0 24px 55px -22px rgba(5,8,32,.6); overflow:hidden;}
body.customers .kb-search-input.form-control{
  height:auto; padding:16px 18px 16px 48px; font-size:15.5px; color:var(--kb-text);
  border:1px solid transparent; border-radius:15px 0 0 15px; background:#fff; box-shadow:none;}
body.customers .kb-search-input.form-control:focus{
  outline:none; box-shadow:inset 0 0 0 2px rgba(74,93,249,.35);}
body.customers .kb-search-input.form-control::placeholder{color:var(--kb-faint);}
body.customers .kb-search-icon{color:var(--kb-faint) !important; left:17px; top:17px; font-size:16px;}
body.customers .kb-search-button.btn-primary{
  padding:16px 28px; font-family:var(--kb-disp); font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--kb-primary),var(--kb-deep)) !important;
  border:none !important; border-radius:0 15px 15px 0 !important;}
body.customers .kb-search-button.btn-primary:hover,
body.customers .kb-search-button.btn-primary:focus{color:#fff; filter:brightness(.93);}

/* ---- INDEX ARAMA — TEK-PARÇA pill + canlı sonuç + POPÜLER chips (JS enhancement,
   mockup .eres-sbox/.eres-sbar/.eres-sres/.eres-kbd/.eres-chips birebir). JS
   düşerse çekirdek input-group (yukarıdaki pill CSS) fallback kalır. ---- */
body.customers .eres-sbox{position:relative; text-align:left; max-width:620px; margin:0 auto;}
body.customers .eres-sbar{
  display:flex; align-items:center; gap:10px; padding:6px 6px 6px 18px;
  background:#fff; border-radius:15px; box-shadow:0 24px 50px -18px rgba(5,8,32,.55);}
body.customers .eres-sbar .sic{color:var(--kb-faint); flex:none; display:grid; font-size:18px;}
body.customers .eres-sbar input{
  flex:1; min-width:0; height:50px; padding:0; border:none; outline:none; background:none;
  box-shadow:none; font-family:var(--kb-fbody); font-size:15.5px; font-weight:500; color:var(--kb-text);}
body.customers .eres-sbar input:focus{box-shadow:none; background:none;}
body.customers .eres-sbar input::placeholder{color:var(--kb-faint);}
body.customers .eres-kbd{
  flex:none; padding:4px 9px; border:1px solid var(--kb-line-strong); border-radius:7px;
  background:#f7f8fd; font-family:var(--kb-mono); font-size:11.5px; font-weight:600; color:var(--kb-faint);}
body.customers .eres-sbar .eres-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:50px; padding:0 22px; border-radius:12px; border:1px solid transparent;
  font-family:var(--kb-fbody); font-size:14px; font-weight:600; cursor:pointer; transition:.18s;}
body.customers .eres-sbar .eres-btn--primary{
  background:var(--kb-primary) !important; color:#fff !important;
  box-shadow:0 12px 24px -12px rgba(74,93,249,.65);}
body.customers .eres-sbar .eres-btn--primary:hover{background:var(--kb-deep) !important;}
/* canlı sonuç paneli */
body.customers .eres-sres{
  position:absolute; z-index:40; top:calc(100% + 8px); left:0; right:0; display:none;
  max-height:330px; overflow:auto; padding:8px; background:#fff; border:1px solid var(--kb-line);
  border-radius:14px; box-shadow:0 26px 50px -18px rgba(9,12,40,.4); text-align:left;}
body.customers .eres-sres.open{display:block;}
body.customers .eres-sres__item{
  display:flex; gap:12px; align-items:flex-start; width:100%; padding:11px 12px; border:none;
  border-radius:10px; background:none; text-align:left; text-decoration:none; color:inherit; cursor:pointer;}
body.customers .eres-sres__item:hover{background:#f4f5fd;}
body.customers .eres-sres__item .bic{flex:none; margin-top:2px; color:var(--kb-primary); display:grid; font-size:15px;}
body.customers .eres-sres__t{font-family:var(--kb-fbody); font-size:14px; font-weight:600; color:var(--kb-text);}
body.customers .eres-sres__c{
  display:block; margin-top:3px; font-family:var(--kb-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--kb-faint);}
body.customers .eres-sres__empty{padding:16px 12px; text-align:center; font-size:13.5px; color:var(--kb-muted);}
/* POPÜLER chips (koyu hero üstünde) */
body.customers .eres-chips{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin:16px auto 0; max-width:620px;}
body.customers .eres-chips .lbl{
  font-family:var(--kb-mono); font-size:10.5px; font-weight:600; letter-spacing:.2em; color:#8a90b8;}
body.customers .eres-chip{
  padding:7px 14px; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:rgba(255,255,255,.06); color:#dfe2f4; font-family:var(--kb-fbody); font-size:13px;
  font-weight:500; cursor:pointer; transition:.15s;}
body.customers .eres-chip:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4);}

/* ---- MİNİ ARAMA (0.40.0, mockup .eres-minis BİREBİR): iç sayfa subheader
   pill'i — 1px çerçeve, #f8f9fe zemin, 36px input + 36px "Ara" (radius 9). ---- */
body.customers .eres-minis{width:min(340px,42%); margin:0; max-width:none; flex:none;}
body.customers .eres-minis .eres-sbar{
  padding:4px 4px 4px 14px; border:1px solid var(--kb-line-strong);
  border-radius:12px; background:#f8f9fe; box-shadow:none;}
body.customers .eres-minis .eres-sbar .sic{font-size:14px;}
body.customers .eres-minis .eres-sbar input{height:36px; font-size:14px;}
body.customers .eres-minis .eres-btn{height:36px; padding:0 14px; border-radius:9px; font-size:13px;}

/* ============================================================================
   İÇ SAYFALAR (makale + kategori/arama): hero → AYDINLIK ARAÇ ÇUBUĞU
   (index'te KOYU kalır; index :has(ul[role=list]) → aşağıdaki hiçbiri onu tutmaz)
   ========================================================================== */
body.customers:has(.kb-article-content) .jumbotron.kb-search-jumbotron,
body.customers:has(.articles_list) .jumbotron.kb-search-jumbotron{
  background-color:#fff; background-image:none; color:var(--kb-text);
  border-bottom:1px solid var(--kb-line);}
body.customers:has(.kb-article-content) .kb-search,
body.customers:has(.articles_list) .kb-search{padding:0;}
/* band = mockup .eres-subhead__in: solda breadcrumb (JS taşır), sağda mini arama */
body.customers:has(.kb-article-content) .kb-search .text-center,
body.customers:has(.articles_list) .kb-search .text-center{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  text-align:left; max-width:none; margin:0; padding:15px 0;}
/* "Size nasıl yardımcı olabiliriz?" YALNIZ ana sayfa hero'suna ait → iç sayfada yok */
body.customers:has(.kb-article-content) .kb-search-heading,
body.customers:has(.articles_list) .kb-search-heading{display:none;}
body.customers:has(.kb-article-content) .kb-search .text-center > form::before,
body.customers:has(.articles_list) .kb-search .text-center > form::before{display:none;}
body.customers:has(.kb-article-content) .kb-search form,
body.customers:has(.articles_list) .kb-search form{margin:0 0 0 auto; flex:0 1 auto;}
body.customers:has(.kb-article-content) .input-group,
body.customers:has(.articles_list) .input-group{box-shadow:none; width:100%;}
body.customers:has(.kb-article-content) .kb-search-input.form-control,
body.customers:has(.articles_list) .kb-search-input.form-control{
  padding:9px 14px 9px 38px; font-size:13.5px; background:#f6f7fb;
  border:1px solid var(--kb-line-strong); border-radius:10px 0 0 10px; box-shadow:none;}
body.customers:has(.kb-article-content) .kb-search-input.form-control:focus,
body.customers:has(.articles_list) .kb-search-input.form-control:focus{
  background:#fff; border-color:var(--kb-primary); box-shadow:0 0 0 3px rgba(74,93,249,.16); outline:none;}
body.customers:has(.kb-article-content) .kb-search-icon,
body.customers:has(.articles_list) .kb-search-icon{top:10px; left:12px; font-size:14px; color:var(--kb-faint) !important;}
body.customers:has(.kb-article-content) .kb-search-button.btn-primary,
body.customers:has(.articles_list) .kb-search-button.btn-primary{
  padding:9px 18px; font-size:13px; border-radius:0 10px 10px 0 !important;}
@media (max-width:768px){
  body.customers:has(.kb-article-content) .kb-search .text-center,
  body.customers:has(.articles_list) .kb-search .text-center{flex-direction:column; align-items:stretch; gap:10px;}
  body.customers:has(.kb-article-content) .kb-search form,
  body.customers:has(.articles_list) .kb-search form{flex:1 1 auto; margin:0;}
  body.customers .eres-minis{width:100%;}
}

/* ============================================================================
   INDEX — kategori kartları paper üstünde 2'li ızgara (dış panel şeffaf)
   ========================================================================== */
/* içerik container hero kenarına biner (mockup .eres-catwrap{margin-top:-72px}) */
body.customers:has(ul[role=list].tw-divide-y) #content > .container:last-child{
  position:relative; z-index:2; margin-top:-72px !important;}
/* dış panel_s şeffaflaşır → kartlar doğrudan zeminde yüzer */
body.customers:has(ul[role=list].tw-divide-y) .panel_s{
  background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible;}
/* 0.40.3: panel-body de şeffaf — çekirdek tailwind .panel-body{bg:beyaz} paper
   zemini kapatıyordu; kartlar zaten kendi beyaz zeminli (yalnız padding:0 yetmez). */
body.customers:has(ul[role=list].tw-divide-y) .panel_s .panel-body{padding:0; background:transparent;}
/* 2'li ızgara */
body.customers ul[role=list].tw-divide-y{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:0; padding:0; list-style:none;}
body.customers ul[role=list].tw-divide-y > li{
  position:relative; overflow:hidden; margin:0; border:1px solid var(--kb-line) !important;
  background:#fff; border-radius:16px !important; padding:22px 46px 22px 82px !important;
  box-shadow:0 10px 26px -18px rgba(17,20,58,.18);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
/* üst indigo→teal aksan (hover'da açılır) */
body.customers ul[role=list].tw-divide-y > li::after{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--kb-grad);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
body.customers ul[role=list].tw-divide-y > li:hover{
  transform:translateY(-3px); border-color:#dfe3fb;
  box-shadow:0 22px 40px -18px rgba(43,55,150,.28);}
body.customers ul[role=list].tw-divide-y > li:hover::after{transform:scaleX(1);}
/* sol ikon rozeti (kategoriye göre) — varsayılan kitap */
body.customers ul[role=list].tw-divide-y > li::before{
  content:"\f02d"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:22px; top:22px; width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff;
  background:linear-gradient(135deg,var(--kb-primary),#38c9d6);
  box-shadow:0 10px 20px -10px rgba(74,93,249,.7);}
body.customers ul[role=list].tw-divide-y > li:has(a[href$="/baslarken"])::before{content:"\f135";}
body.customers ul[role=list].tw-divide-y > li:has(a[href$="/faturalar-odemeler"])::before{content:"\f543";}
body.customers ul[role=list].tw-divide-y > li:has(a[href$="/destek-talepleri"])::before{content:"\f1cd";}
body.customers ul[role=list].tw-divide-y > li:has(a[href$="/projeler-dosyalar-sozlesmeler"])::before{content:"\f07b";}
body.customers ul[role=list].tw-divide-y > li:has(a[href$="/hesap-guvenlik"])::before{content:"\f505";}
/* hover ok işareti */
body.customers ul[role=list].tw-divide-y > li > .tw-flex::after{
  content:"\f061"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:14px;
  position:absolute; right:20px; top:50%; transform:translate(6px,-50%); color:var(--kb-primary);
  opacity:0; transition:opacity .2s ease, transform .2s ease;}
body.customers ul[role=list].tw-divide-y > li:hover > .tw-flex::after{opacity:1; transform:translate(0,-50%);}
body.customers ul[role=list].tw-divide-y > li .tw-flex{display:block;}
body.customers ul[role=list].tw-divide-y > li h3{
  margin:0; font-family:var(--kb-disp); font-size:16.5px; font-weight:700; letter-spacing:-.01em;}
body.customers ul[role=list].tw-divide-y > li h3 a{color:var(--kb-text) !important; text-decoration:none;}
body.customers ul[role=list].tw-divide-y > li h3 a:hover{color:var(--kb-deep) !important;}
body.customers ul[role=list].tw-divide-y > li h3 .badge{
  background:var(--kb-soft) !important; color:var(--kb-primary) !important;
  font-family:var(--kb-mono); font-weight:600; font-size:11px; border-radius:999px;
  padding:3px 9px; vertical-align:2px; margin-left:6px;}
body.customers ul[role=list].tw-divide-y > li p{
  color:var(--kb-muted) !important; font-size:14px; margin:6px 0 0; line-height:1.55;}
/* 0.40.5: TÜM KART tıklanabilir (mockup: kutu=link). Kartta tek link (başlık) var →
   başlık linkini "stretched link" ile kartın tamamına yay; li zaten position:relative. */
body.customers ul[role=list].tw-divide-y > li{cursor:pointer;}
body.customers ul[role=list].tw-divide-y > li h3 a::after{
  content:""; position:absolute; inset:0; z-index:1;}
/* rozet/ok üstte kalsın ama tıklama linke gitsin (dekoratif, pointer-events yok) */
body.customers ul[role=list].tw-divide-y > li h3 .badge,
body.customers ul[role=list].tw-divide-y > li > .tw-flex::after{z-index:2;}

/* INDEX CTA kutusu (hook enjekte — panel-body sonunda) */
body.customers .eres-kb-cta{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
  margin:22px 0 6px; padding:22px 26px; background:#fff;
  border:1px dashed var(--kb-line-strong); border-radius:16px;}
body.customers .eres-kb-cta h3{margin:0 0 4px; font-family:var(--kb-disp); font-size:16.5px; font-weight:700; color:var(--kb-text);}
body.customers .eres-kb-cta p{margin:0; color:var(--kb-muted); font-size:14px;}
body.customers .eres-kb-cta .eres-kb-btn{
  display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 22px; border-radius:12px;
  background:var(--kb-primary); color:#fff !important; font-family:var(--kb-disp); font-weight:700;
  font-size:14px; text-decoration:none; box-shadow:0 12px 24px -12px rgba(74,93,249,.65);
  transition:background .15s ease, transform .15s ease;}
body.customers .eres-kb-cta .eres-kb-btn:hover{background:var(--kb-deep); transform:translateY(-1px);}
body.customers .eres-kb-cta .eres-kb-btn::before{content:"\f590"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:13px;}

/* ---- Kart (panel_s) — İÇ sayfalarda beyaz okuma kartı ---- */
body.customers .panel_s{
  background:var(--kb-surface); border:none; border-radius:18px;
  /* 0.40.7: mockup .eres-auth kartıyla aynı yumuşak gölge (--eres-shadow); eski
     0 30px 70px -34px/.5 abartılıydı — mockup'ta neredeyse gölge yoktu. */
  box-shadow:0 18px 40px -18px rgba(17,20,58,.22), 0 0 0 1px var(--kb-line);}
body.customers .panel_s .panel-body{padding:10px 6px;}
body.customers .panel_s .no-margin{color:var(--kb-muted); font-size:14px; padding:26px; text-align:center;}
/* İÇ sayfa container üst nefes */
body.customers:has(.kb-article-content) #content > .container:last-child,
body.customers:has(.articles_list):not(:has(ul[role=list])) #content > .container:last-child{padding-top:28px !important;}

/* ============================================================================
   KATEGORİ / ARAMA — makale satırları tek kart içinde
   ========================================================================== */
/* ---- ARAMA sayfası (0.40.3): dış beyaz panel kalkar → sonuç listesi kendi
   beyaz kartında (kategori sayfasıyla aynı dil). Çekirdek .panel_s/.panel-body
   beyaz zemini paper üstünde tek dev blok yapıyordu. ---- */
body.customers:has(.articles_list):not(:has(.kb-article-content)):not(:has(.eres-kbcat-nav)) .panel_s{
  background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible;}
body.customers:has(.articles_list):not(:has(.kb-article-content)):not(:has(.eres-kbcat-nav)) .panel_s .panel-body{
  background:transparent; padding:0;}
body.customers:has(.articles_list):not(:has(.kb-article-content)):not(:has(.eres-kbcat-nav)) .kb-search-results{
  padding:0 2px 12px; margin:0;}
body.customers:has(.articles_list):not(:has(.kb-article-content)):not(:has(.eres-kbcat-nav)) .panel-body > .col-md-12:not(.kb-search-results){
  background:#fff; border:1px solid var(--kb-line); border-radius:16px; overflow:hidden; padding:0;}
body.customers .articles_list{list-style:none;}
body.customers .articles_list > li{
  position:relative; padding:18px 20px !important; border:none !important;
  border-radius:12px; transition:background .15s ease;}
body.customers .articles_list > li:hover{background:#fafbff;}
/* 0.40.6: satır arası fazla boşluğun GERÇEK kaynağı = çekirdek `tw-space-y-5`
   utility'si (ul'de `> * + *{margin-top:1.25rem}`). Bizim satırlarımız zaten
   border-top ayraç + simetrik 20px padding ile ayrılıyor → o margin gereksiz ve
   ayracı bir önceki satırdan 20px uzağa itiyordu (asimetrik boşluk). TEK kaynakta
   nötrle → kategori + arama + makale ilgili-liste hepsinde düzelir. */
body.customers .articles_list > li + li{border-top:1px solid var(--kb-line) !important; border-radius:0; margin-top:0 !important;}
body.customers .articles_list h4{margin:0 0 4px;}
body.customers .articles_list h4 a{
  font-family:var(--kb-disp); font-size:16px; font-weight:700; letter-spacing:-.01em;
  color:var(--kb-text) !important; text-decoration:none;}
body.customers .articles_list h4 a:hover{color:var(--kb-deep) !important;}
/* 0.40.5: makale satırının TAMAMI tıklanabilir (tek link=başlık → stretched link;
   li position:relative). Meta/ok dekoratif, tıklama linke gider. */
body.customers .articles_list > li{cursor:pointer;}
body.customers .articles_list > li h4 a::after{
  content:""; position:absolute; inset:0; z-index:1;}
body.customers .articles_list .tw-text-neutral-500,
body.customers .articles_list li > .tw-text-sm{color:var(--kb-muted) !important; font-size:14px; line-height:1.55;}
body.customers .kb-search-results h2{
  font-family:var(--kb-disp); font-weight:800; font-size:20px; color:var(--kb-text); margin:6px 0 4px;}

/* ============================================================================
   MAKALE SAYFASI — tek editoryal sütun
   ========================================================================== */
body.customers .section-knowledge-base .row{display:flex; flex-direction:column; align-items:center; margin:0;}
body.customers .section-knowledge-base .row > [class*=col-md-]{float:none; width:100%; max-width:800px; padding:0;}
body.customers .section-knowledge-base .panel_s{position:relative; overflow:hidden; border-radius:18px;}
body.customers .section-knowledge-base .panel_s::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--kb-grad); z-index:2;}
body.customers .section-knowledge-base .panel_s .panel-body{padding:38px 42px 26px;}
body.customers .section-knowledge-base .kb-article-content{max-width:none;}

/* Başlık */
body.customers .kb-article-single-heading{
  font-family:var(--kb-disp); font-size:clamp(22px,2.6vw,30px) !important; font-weight:800 !important;
  letter-spacing:-.025em; line-height:1.2; color:var(--kb-ink) !important;
  margin:6px 0 16px !important; padding-bottom:18px; border-bottom:1px solid var(--kb-line);}

/* Gövde tipografisi */
body.customers .kb-article-content, body.customers .tc-content{
  font-size:15.5px; line-height:1.75; color:var(--kb-body-ink);}
/* lead = ilk paragraf büyük */
body.customers .kb-article-content > p:first-child{font-size:16.5px; line-height:1.7; color:var(--kb-body-ink); margin:0 0 22px;}
body.customers .kb-article-content p{margin:0 0 15px;}
body.customers .kb-article-content h2{font-family:var(--kb-disp); font-size:19px; font-weight:700; color:var(--kb-ink); margin:26px 0 14px; letter-spacing:-.01em;}
body.customers .kb-article-content h3{font-family:var(--kb-disp); font-size:16.5px; font-weight:700; color:var(--kb-ink); margin:24px 0 10px;}
body.customers .kb-article-content h4{font-family:var(--kb-disp); font-size:15px; font-weight:700; color:var(--kb-ink); margin:20px 0 8px;}
body.customers .kb-article-content ul,
body.customers .kb-article-content ol{margin:0 0 18px; padding-left:2px; list-style:none; counter-reset:kbstep;}
body.customers .kb-article-content ul li,
body.customers .kb-article-content ol li{position:relative; padding-left:36px; margin-bottom:13px; line-height:1.65;}
/* sıralı liste: indigo numara rozeti */
body.customers .kb-article-content ol li::before{
  counter-increment:kbstep; content:counter(kbstep);
  position:absolute; left:0; top:-1px; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--kb-primary),#35c3d4); color:#fff;
  font-family:var(--kb-mono); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px -6px rgba(74,93,249,.55);}
/* sırasız liste: indigo nokta */
body.customers .kb-article-content ul li::before{
  content:""; position:absolute; left:9px; top:10px; width:7px; height:7px; border-radius:50%;
  background:var(--kb-grad);}
body.customers .kb-article-content a{color:var(--kb-deep); text-decoration:none;}
body.customers .kb-article-content a:hover{color:var(--kb-primary); text-decoration:underline;}
body.customers .kb-article-content strong{color:var(--kb-ink); font-weight:600;}
/* callout (blockquote) → indigo bilgi kutusu */
body.customers .kb-article-content blockquote{
  display:flex; gap:12px; margin:24px 0 6px; padding:16px 18px; border:1px solid #e0e4ff;
  background:#f1f3ff; border-radius:13px; color:var(--kb-body-ink); font-size:14.5px; line-height:1.6;}
body.customers .kb-article-content blockquote::before{
  content:"\f05a"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--kb-primary); font-size:16px; flex:none;}
body.customers .kb-article-content blockquote p{margin:0;}

/* İçerik durum çipleri — makale gövdesinde <span class="kb-chip kb-chip--*"> */
body.customers .kb-chip{
  display:inline-block; padding:1px 10px 2px; border-radius:20px; font-size:12.5px;
  font-weight:700; line-height:1.5; border:1px solid transparent; vertical-align:1px;}
body.customers .kb-chip--ok{background:#effaf4; color:#15794f; border-color:rgba(23,166,115,.3);}
body.customers .kb-chip--warn{background:#fdf6ec; color:#9a6420; border-color:rgba(232,150,58,.32);}
body.customers .kb-chip--err{background:#fdf1f1; color:#b3383d; border-color:rgba(226,73,79,.32);}
body.customers .kb-chip--info{background:var(--kb-soft); color:var(--kb-deep); border-color:rgba(74,93,249,.25);}

/* Geri bildirim bölümü */
body.customers .section-knowledge-base .panel_s .panel-body > h4{
  text-align:center; color:var(--kb-ink) !important; font-family:var(--kb-disp);
  font-weight:700; font-size:15.5px; margin-top:30px !important; padding-top:24px;
  border-top:1px solid var(--kb-line);}
body.customers .section-knowledge-base .answer_response{text-align:center;}
body.customers .section-knowledge-base .article_useful_buttons{
  display:flex; justify-content:center; gap:10px; width:100%; margin-bottom:4px;}
body.customers .article_useful_buttons .btn{
  border-radius:999px !important; font-family:var(--kb-disp); font-weight:600; font-size:14px;
  padding:10px 22px; border:1px solid var(--kb-line-strong); box-shadow:none;}
body.customers .article_useful_buttons .btn-success{
  background:#fff !important; color:var(--kb-text) !important; border-color:var(--kb-line-strong) !important;}
body.customers .article_useful_buttons .btn-success:hover{background:#effaf4 !important; color:var(--kb-success,#15794f) !important; border-color:#8fd9bd !important;}
body.customers .article_useful_buttons .btn-danger{
  background:#fff !important; color:var(--kb-text) !important; border-color:var(--kb-line-strong) !important; margin-left:0;}
body.customers .article_useful_buttons .btn-danger:hover{background:#fdf1f1 !important; color:#b3383d !important; border-color:#f0b3b6 !important;}

/* İlişkili makaleler: altta 2'li kart ızgarası */
body.customers .section-knowledge-base .kb-related-heading{
  margin:26px 0 12px !important; font-family:var(--kb-mono); font-size:11px !important; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--kb-faint) !important;}
body.customers .section-knowledge-base ul.articles_list{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; padding:0;}
body.customers .section-knowledge-base ul.articles_list > li{
  margin:0; padding:18px !important; border:1px solid var(--kb-line) !important; border-radius:14px;
  background:#fff; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
body.customers .section-knowledge-base ul.articles_list > li:hover{
  transform:translateY(-2px); border-color:#dfe3fb !important; box-shadow:0 16px 30px -16px rgba(43,55,150,.25);}
body.customers .section-knowledge-base ul.articles_list > li + li{border-top:1px solid var(--kb-line) !important;}
body.customers .section-knowledge-base .articles_list h4{margin:0 0 6px;}
body.customers .section-knowledge-base .articles_list h4 a{font-family:var(--kb-disp); font-weight:700; font-size:14.5px;}
body.customers .section-knowledge-base .articles_list li > div{
  font-size:13px; line-height:1.55; color:var(--kb-muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* Makale YARDIM KARTI (hook enjekte — col-md-8 sonunda, makalenin altında) */
body.customers .eres-kb-help{
  position:relative; overflow:hidden; max-width:800px; margin:20px auto 0; padding:24px 26px;
  background:var(--kb-ink); border-radius:18px; color:#fff;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
body.customers .eres-kb-help::after{
  content:""; position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(60px);
  background:#4a5df9; top:-90px; right:-70px; opacity:.5; pointer-events:none;}
body.customers .eres-kb-help > *{position:relative; z-index:1;}
body.customers .eres-kb-help .ekb-ic{
  flex:none; width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.08);
  display:grid; place-items:center; color:var(--kb-signal); font-size:20px;}
body.customers .eres-kb-help .ekb-ic::before{content:"\f590"; font-family:"Font Awesome 6 Free"; font-weight:900;}
body.customers .eres-kb-help .ekb-tx{flex:1; min-width:180px;}
body.customers .eres-kb-help h4{margin:0 0 4px; font-family:var(--kb-disp); font-weight:700; font-size:16px; color:#fff;}
body.customers .eres-kb-help p{margin:0; color:#b9bedb; font-size:13.5px; line-height:1.55;}
body.customers .eres-kb-help .eres-kb-btn{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:12px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:#fff !important;
  font-family:var(--kb-disp); font-weight:700; font-size:14px; text-decoration:none; transition:background .15s ease;}
body.customers .eres-kb-help .eres-kb-btn:hover{background:rgba(255,255,255,.18);}

@media (max-width:768px){
  body.customers ul[role=list].tw-divide-y{grid-template-columns:1fr;}
  body.customers .section-knowledge-base ul.articles_list{grid-template-columns:1fr;}
  body.customers .section-knowledge-base .panel_s .panel-body{padding:24px 20px 18px;}
  body.customers .kb-search{padding:44px 0 84px;}
  body.customers:has(ul[role=list].tw-divide-y) #content > .container:last-child{margin-top:-58px !important;}
  body.customers .eres-kb-cta, body.customers .eres-kb-help{flex-direction:column; align-items:flex-start;}
}

/* ---- BREADCRUMB / footer ---- */
body.customers .breadcrumb{background:transparent; padding:8px 10px; margin-top:6px;}
body.customers .breadcrumb>li>a, body.customers .breadcrumb a{color:var(--kb-deep);}
body.customers .breadcrumb>.active{color:var(--kb-muted);}
/* FOOTER (mockup .eres-footer): paper zemin + iki uçlu (© solda · ERES CRM sağda)
   0.40.3: beyaz zemin kalktı → paper görünür (çekirdek footer{bg:#f1f5f9} da bu
   !important + yüksek özgüllük kuralıyla nötrlenir; core'a dokunulmadı). */
body.customers footer.footer{
  background:transparent !important; border-top:1px solid var(--kb-line) !important;
  color:var(--kb-muted); margin-top:34px; height:auto !important;}
body.customers footer.footer .row{display:block; margin:0;}
body.customers footer.footer .col-md-12.text-center{
  float:none; width:100%;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; text-align:left;}
body.customers footer.footer .copyright-footer{color:var(--kb-muted); font-size:13px;}
body.customers footer.footer a{color:var(--kb-deep);}
/* sağ uç watermark (mockup .wm) — çekirdek footer'da yok, ::after ile eklenir */
body.customers footer.footer .col-md-12.text-center::after{
  content:"ERES CRM"; order:9; margin-left:auto;
  font-family:var(--kb-mono); font-size:10.5px; font-weight:600; letter-spacing:.32em; color:var(--kb-faint);}

/* ============================================================================
   KATEGORİ V2 (0.38.0) — breadcrumb + sol "Kategoriler" menüsü + kategori başlığı
   (hook enjekte: .eres-kbcat-crumbs / .eres-kbcat-nav / .eres-kbcat-head).
   Ayrım: :has(.eres-kbcat-nav) → YALNIZ kategori sayfası (index/arama tutmaz).
   Dış panel şeffaf; makale listesi sağ altta beyaz karta iner.
   ========================================================================== */
/* 0.40.0: TEK DEV BEYAZ PANEL PARÇALANDI — panel_s VE panel-body şeffaf (beyazı
   basan panel-body'ydi); zemin paper; grid 250px+1fr gap 28 (mockup .eres-catpage). */
body.customers:has(.eres-kbcat-nav) .panel_s{
  background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible;}
body.customers:has(.eres-kbcat-nav) .panel_s .panel-body{
  background:transparent; border-radius:0; box-shadow:none;
  padding:0; display:grid; align-items:start;
  grid-template-columns:250px minmax(0,1fr);
  grid-template-areas:"crumb crumb" "nav head" "nav list";
  column-gap:28px; row-gap:18px;}
/* breadcrumb JS ile subheader bandına taşınınca crumb satırı düşer */
body.customers:has(.eres-kbcat-nav) .panel_s .panel-body.eres-crumb-moved{
  grid-template-areas:"nav head" "nav list";}
body.customers:has(.eres-kbcat-nav) #content > .container:last-child{
  padding-top:34px !important; padding-bottom:70px !important;}
/* makale listesi KENDİ beyaz kartında (mockup .eres-arts: gölgesiz, tam-bleed satırlar) */
body.customers:has(.eres-kbcat-nav) .panel-body > .col-md-12{
  grid-area:list; width:100%; margin:0; padding:0 !important; float:none;
  overflow:hidden; background:#fff; border:1px solid var(--kb-line);
  border-radius:16px; box-shadow:none;}

/* breadcrumb (mockup .eres-crumbs: gövde fontu 13/600, ayraç "/") */
body.customers .eres-kbcat-crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0;
  font-family:var(--kb-fbody); font-size:13px; font-weight:600; color:var(--kb-muted);}
body.customers .eres-kbcat-crumbs a{color:var(--kb-muted); text-decoration:none; font-weight:600;}
body.customers .eres-kbcat-crumbs a:hover{color:var(--kb-primary);}
body.customers .eres-kbcat-crumbs .sep{color:var(--kb-faint); font-weight:400;}
body.customers .eres-kbcat-crumbs .cur{
  color:var(--kb-text); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52ch;}
body.customers .eres-kbcat-crumbs--hid{display:none;}
body.customers:has(.eres-kbcat-nav) .panel-body > .eres-kbcat-crumbs{grid-area:crumb; padding:2px 2px 0;}

/* sol menü (mockup .eres-sidenav/.eres-snav: öğeler TRANSPARAN, yalnız aktif beyaz kart) */
body.customers .eres-kbcat-nav{grid-area:nav; align-self:start; position:sticky; top:92px;}
body.customers .eres-kbcat-nav__t{
  margin:0 0 6px; padding-left:11px; font-family:var(--kb-mono); font-size:10.5px;
  font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--kb-faint);}
body.customers .eres-kbcat-nav ul{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
body.customers .eres-kbcat-nav__i a{
  position:relative; display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px;
  border:1px solid transparent; border-radius:11px; background:none;
  color:var(--kb-muted); text-decoration:none; font-family:var(--kb-fbody);
  font-size:13.5px; font-weight:600; text-align:left; transition:.15s;}
body.customers .eres-kbcat-nav__i a i{width:17px; text-align:center; font-size:14px; flex:none; color:var(--kb-faint); transition:color .15s ease;}
body.customers .eres-kbcat-nav__i a .nm{flex:1; min-width:0;}
body.customers .eres-kbcat-nav__i a .ct{
  margin-left:auto; font-family:var(--kb-mono); font-size:11px; font-weight:600;
  color:var(--kb-faint); background:none; border-radius:0; padding:0;}
body.customers .eres-kbcat-nav__i a:hover{background:#fff; color:var(--kb-text); border-color:var(--kb-line);}
body.customers .eres-kbcat-nav__i a:hover i{color:var(--kb-primary);}
body.customers .eres-kbcat-nav__i.is-active a{
  background:#fff; color:var(--kb-primary); border-color:#dfe3fb;
  box-shadow:0 8px 18px -12px rgba(43,55,150,.25);}
body.customers .eres-kbcat-nav__i.is-active a::before{
  content:""; position:absolute; left:-1px; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--kb-grad);}
body.customers .eres-kbcat-nav__i.is-active a i{color:var(--kb-primary);}

/* kategori başlığı (mockup .eres-cathead) */
body.customers .eres-kbcat-head{grid-area:head; display:flex; align-items:center; gap:16px; padding:0;}
body.customers .eres-kbcat-head__ic{
  flex:none; width:52px; height:52px; border-radius:15px; display:grid; place-items:center; color:#fff; font-size:20px;
  background:linear-gradient(135deg,var(--kb-primary),#38c9d6); box-shadow:0 12px 24px -12px rgba(74,93,249,.7);}
body.customers .eres-kbcat-head__tx h1{
  margin:0; font-family:var(--kb-disp); font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--kb-ink);}
body.customers .eres-kbcat-head__tx h1 .cnt{
  font-family:var(--kb-mono); font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--kb-primary);
  background:var(--kb-soft); border-radius:999px; padding:3px 10px; vertical-align:3px; margin-left:6px;}
body.customers .eres-kbcat-head__tx p{margin:3px 0 0; color:var(--kb-muted); font-size:14.5px; line-height:1.55;}

/* makale satırları (mockup .eres-art: 20px 24px, divider, hover + ok; JS satırı
   .eres-kbart-b gövde + .eres-kbart-m dikey mono meta + .eres-kbart-go ok yapar) */
body.customers:has(.eres-kbcat-nav) .articles_list{list-style:none; margin:0; padding:0;}
body.customers:has(.eres-kbcat-nav) .articles_list > li{
  padding:20px 24px !important; border:none !important; border-radius:0;
  transition:background .15s ease;}
body.customers:has(.eres-kbcat-nav) .articles_list > li + li{border-top:1px solid var(--kb-line) !important;}
body.customers:has(.eres-kbcat-nav) .articles_list > li:hover{background:#fafbff;}
body.customers .articles_list > li:has(.eres-kbart-b){display:flex; align-items:center; gap:18px;}
body.customers .eres-kbart-b{flex:1; min-width:0;}
body.customers .eres-kbart-b .sm\:tw-flex{display:block;} /* çekirdek başlık/tarih satırı — tarih meta bloğuna taşındı */
body.customers .eres-kbart-m{
  flex:none; display:grid; gap:5px; justify-items:end; text-align:right;
  font-family:var(--kb-mono); font-size:11.5px; font-weight:500; color:var(--kb-faint);}
body.customers .eres-kbart-m span{display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
body.customers .eres-kbart-m i{font-size:12px;}
body.customers .eres-kbart-go{flex:none; display:grid; color:var(--kb-faint); opacity:0; transform:translateX(-4px); transition:.15s;}
body.customers:has(.eres-kbcat-nav) .articles_list > li:hover .eres-kbart-go{opacity:1; transform:none; color:var(--kb-primary);}

@media (max-width:860px){
  body.customers:has(.eres-kbcat-nav) .panel_s .panel-body{
    grid-template-columns:1fr; grid-template-areas:"crumb" "head" "list" "nav";}
  body.customers:has(.eres-kbcat-nav) .panel_s .panel-body.eres-crumb-moved{
    grid-template-areas:"head" "list" "nav";}
  body.customers:has(.eres-kbcat-nav) #content > .container:last-child{padding-top:22px !important; padding-bottom:48px !important;}
  body.customers .eres-kbcat-nav{position:static; margin-top:6px;}
  body.customers .eres-kbcat-nav__t{padding-left:2px;}
  body.customers .eres-kbcat-nav ul{display:flex; flex-wrap:wrap; gap:8px;}
  body.customers .eres-kbcat-nav__i a{padding:8px 12px;}
  body.customers .eres-kbart-m{display:none;} /* dar ekranda meta gizlenir (mockup mobil sadeleşmesi) */
}

/* ============================================================================
   MAKALE V2 (0.38.0) — sağ ray (içindekiler + yardım kartı) + kategori etiketi/meta
   (hook enjekte: .eres-kb-artmeta / .eres-kb-rail > .eres-kb-toc + .eres-kb-help).
   Ayrım: :has(.eres-kb-rail). Tek-sütun editoryal düzen → iki-sütuna (makale+ray).
   ========================================================================== */
body.customers .section-knowledge-base .row:has(.eres-kb-rail){display:block; max-width:1120px; margin:0 auto;}
body.customers .section-knowledge-base .row:has(.eres-kb-rail) > [class*=col-md-]{
  width:100%; max-width:none; float:none; padding:0;}
body.customers .section-knowledge-base .row:has(.eres-kb-rail) > .col-md-4{margin-top:10px;}
/* makale sütunu (col-md-8 / ilişkilisiz col-md-12): meta üstte, makale solda, ray sağda */
body.customers .section-knowledge-base .row:has(.eres-kb-rail) > .col-md-8,
body.customers .section-knowledge-base .row:has(.eres-kb-rail) > .col-md-12{
  display:grid; align-items:start; column-gap:28px; row-gap:14px;
  grid-template-columns:minmax(0,1fr) 312px;
  grid-template-areas:"meta rail" "main rail";}
body.customers .section-knowledge-base .row:has(.eres-kb-rail) > .col-md-8 > .panel_s,
body.customers .section-knowledge-base .row:has(.eres-kb-rail) > .col-md-12 > .panel_s{grid-area:main; margin:0; max-width:none;}
body.customers .eres-kb-artmeta{grid-area:meta; display:flex; flex-direction:column; gap:7px; padding:2px 2px 0;}
body.customers .eres-kb-rail{grid-area:rail; position:sticky; top:16px; align-self:start; display:flex; flex-direction:column; gap:16px;}

/* kategori etiketi + meta satırı */
body.customers .eres-kb-artmeta__cat{
  font-family:var(--kb-mono); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--kb-primary);}
body.customers .eres-kb-artmeta__dt{font-family:var(--kb-mono); font-size:12px; color:var(--kb-muted); letter-spacing:.02em;}

/* içindekiler (TOC) kartı */
body.customers .eres-kb-toc{
  background:#fff; border:1px solid var(--kb-line); border-radius:16px; padding:16px 18px;
  box-shadow:0 16px 34px -22px rgba(20,22,45,.35);}
body.customers .eres-kb-toc__t{
  font-family:var(--kb-mono); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--kb-faint); margin-bottom:12px;}
body.customers .eres-kb-toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
body.customers .eres-kb-toc li a{
  display:block; padding:6px 11px; border-radius:8px; border-left:2px solid transparent;
  color:var(--kb-muted); text-decoration:none; font-size:13.5px; line-height:1.45;
  transition:background .15s ease, color .15s ease, border-color .15s ease;}
body.customers .eres-kb-toc li a:hover{background:var(--kb-soft); color:var(--kb-deep); border-left-color:var(--kb-primary);}

/* ray içindeki yardım kartı: dikey, tam-genişlik (yatay satır düzenini ezer) */
body.customers .eres-kb-rail .eres-kb-help{
  max-width:none; margin:0; flex-direction:column; align-items:flex-start; gap:14px; padding:22px;}
body.customers .eres-kb-rail .eres-kb-help .ekb-tx{min-width:0;}
body.customers .eres-kb-rail .eres-kb-help .eres-kb-btn{width:100%; justify-content:center;}

@media (max-width:860px){
  body.customers .section-knowledge-base .row:has(.eres-kb-rail){max-width:800px;}
  body.customers .section-knowledge-base .row:has(.eres-kb-rail) > .col-md-8,
  body.customers .section-knowledge-base .row:has(.eres-kb-rail) > .col-md-12{
    grid-template-columns:1fr; grid-template-areas:"meta" "main" "rail";}
  body.customers .eres-kb-rail{position:static;}
}

@media (prefers-reduced-motion:reduce){ body.customers *{transition:none !important;} }