/* =========================
       [DESIGN TOKENS / ТҮС АТАУЛАРЫ]
       ========================= */
:root{
    --ei-bg-soft: #f5f8fb;
    --ei-header: #ffffff;
    --ei-text: #1f2937;
    --ei-muted: #6b7280;
    --ei-accent: #2f63b5;
    --ei-darkbar: #0d1117;
    --ei-badge: #eef2ff;
}

/* =========================
   [GLOBAL / ЖАЛПЫ СТИЛЬДЕР]
   ========================= */
body{ background: var(--ei-bg-soft); color: var(--ei-text); }
.img-cover{ object-fit: cover; width:100%; height:100%; display:block; }
.ei-card{ background:#fff; border-radius:.75rem; overflow:hidden; box-shadow:0 6px 24px rgba(15,23,42,.06); }
.hover-card{ transition: transform .25s ease, box-shadow .25s ease; }
.hover-card:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(15,23,42,.10); }
/* Overlay-лер кликті бөгемесін */
.ei-hero-overlay, .pl-overlay, .sp-overlay{ pointer-events:none; }

/* =========================
   [MEDIA WRAPPERS / СУРЕТ БИІКТІКТЕРІ]  (ratio қолданбаймыз)
   ========================= */
.ei-media-xl{ height: 530px; }     /* сол жақ үлкен */
.ei-media-lg{ height: 320px; }     /* оң жақ үлкен */
.ei-media-sm{ height: 180px; }     /* оң жақ кіші карточкалар */
@media (max-width: 1199.98px){
    .ei-media-xl{ height: 420px; }
    .ei-media-lg{ height: 300px; }
}
@media (max-width: 991.98px){
    .ei-media-xl{ height: 360px; }
    .ei-media-lg{ height: 280px; }
    .ei-media-sm{ height: 200px; }
}
@media (max-width: 575.98px){
    .ei-media-xl{ height: 300px; }
    .ei-media-lg{ height: 240px; }
    .ei-media-sm{ height: 180px; }
}

/* =========================
   [OVERLAYS / ЖАБУ ЖАБЫНЫ]
   ========================= */
.ei-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%); }
.ei-hero-title{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.ei-mini-title{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); font-size:1rem; font-weight:700; }
.ei-thumb-badge{
    position:absolute;
    top:.75rem;
    left:.75rem;
    background:#ffffffcc;
    color:#111827;
    padding:.25rem .5rem;
    border-radius:.5rem;
    font-weight:600;
    font-size:.8rem;
}
.ei-time{ color:#e2e8f0; font-size:.9rem; }
.text-truncate-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.text-truncate-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* =========================
   [TOP TICKER / ЖОҒАРЫ ЖОЛАҚ]
   ========================= */
.ei-ticker{ background: var(--ei-darkbar); color:#cbd5e1; font-size:.9rem; }
.ei-ticker a{ color:#cbd5e1; text-decoration:none; }
.ei-ticker a:hover{ color:#fff; }

/* =========================
   [HEADER / ХЕДЕР]
   ========================= */
.ei-header{ background: var(--ei-header); }
.ei-flag-badge{ font-size:.85rem; background:#eef2f7; border-radius:12px; padding:.25rem .5rem; }
.ei-social a{ color:#64748b; }
.ei-social a:hover{ color:#111827; }

/* Лого әрқашан орталықта */
.ei-header-grid{
    display:grid;
    grid-template-columns: 1fr auto 1fr;  /* сол – 1fr, ортасы – auto (лого), оң – 1fr */
    align-items:center;
    gap:.75rem;
}
.ei-left{ justify-self:start; }
.ei-center{ justify-self:center; }   /* дәл орталық */
.ei-right{ justify-self:end; }

.ei-logo{ height:66px; }
@media (max-width: 575.98px){
    .ei-logo{ height:52px; max-width:200px; }
}

/* =========================
   [NAV / МӘЗІР СЫЗЫҒЫ]
   ========================= */
.ei-nav{ background:#fff; border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7; }
.ei-nav .nav-link{
    color: #1e3a7c;
    font-weight:600;
    background: #f8f9fa;
    margin-right: 15px;
}
.ei-nav .nav-link:hover{
    color: var(--ei-accent);
    background: #dbecfb;
}

/* Мәзірдегі мәтінді тасымалдамау */
.ei-nav .nav-link{ white-space:nowrap; word-break:keep-all; overflow-wrap:normal; }
@media (max-width: 575.98px){
    .ei-nav .nav-link{ padding-left:.75rem; padding-right:.75rem; font-size:.92rem; }
    .ei-nav .nav{ -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
}

/* =========================
   [SHOWBIZ]
   ========================= */
.sb-title{ font-weight:800; }
.sb-all-link{ letter-spacing:.04em; color:#64748b; text-decoration:none; }
.sb-all-link:hover{ color:#0d6efd; }
.sb-media-lg{ height:360px; }
.sb-media-sm{ height:160px; }
.sb-card{ display:block; text-decoration:none; color:inherit; }
.sb-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:.5rem; }
.sb-item img{ border-radius:.5rem; }
.sb-item .sb-heading{ font-weight:800; line-height:1.2; }
.sb-item .sb-time{ color:#9aa5b1; font-size:.9rem; }
.sb-mini .sb-heading{ font-size:1rem; font-weight:800; }
.sb-mini .sb-time{ font-size:.85rem; }
.sb-item .sb-heading:hover{ color:#0d6efd; }
@media (max-width: 991.98px){
    .sb-media-lg{ height:300px; }
    .sb-media-sm{ height:180px; }
}
@media (max-width: 575.98px){
    .sb-media-lg{ height:240px; }
    .sb-media-sm{ height:160px; }
}

/* =========================
   [POLITICS]
   ========================= */
.pl-title{ font-weight:800; }
.pl-all{ color:#64748b; text-decoration:none; }
.pl-all:hover{ color:#0d6efd; }
.pl-media-lg{ height:360px; }
@media (max-width: 991.98px){ .pl-media-lg{ height:300px; } }
@media (max-width: 575.98px){ .pl-media-lg{ height:220px; } }
.pl-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:.5rem; }
.pl-card{ position:relative; border-radius:.75rem; overflow:hidden; }
.pl-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%); }
.pl-headline{ color:#fff; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.pl-time{ color:#e2e8f0; font-size:.9rem; }
.pl-list-item{ padding:1rem 0; border-bottom:1px solid #eef2f7; }
.pl-list-item:last-child{ border-bottom:0; }
.pl-list-title{ font-weight:800; line-height:1.25; }
.pl-list-title:hover{ color:#0d6efd; }
.pl-controls .btn{ width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }

/* =========================
   [SPORT]
   ========================= */
.sp-title{ font-weight:800; }
.sp-all{ color:#64748b; text-decoration:none; }
.sp-all:hover{ color:#0d6efd; }
.sp-h-top{ height:280px; }
.sp-h-bot{ height:240px; }
@media (max-width: 991.98px){
    .sp-h-top{ height:240px; }
    .sp-h-bot{ height:220px; }
}
@media (max-width: 575.98px){
    .sp-h-top, .sp-h-bot{ height:200px; }
}
.sp-card{ position:relative; border-radius:.75rem; overflow:hidden; }
.sp-img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.68) 100%); }
.sp-title-over{ color:#fff; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.sp-time{ color:#e2e8f0; font-size:.9rem; }
.sp-mosaic{ display:grid; grid-template-columns:2fr 1fr; gap:0; height:100%; }
.sp-mosaic > div{ position:relative; }
.sp-card:hover .sp-title-over{ color:#e8f0ff; }
.sp-controls .btn{ width:32px;height:32px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; }

/* === MOBILE CONTROLS (Politics + Sport) === */
.pl-controls .btn,
.sp-controls .btn{
    width:36px; height:36px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
}

/* Мобайлда тақырып жанында әрдайым көрінсін */
@media (max-width: 575.98px){
    .pl-title, .sp-title{ font-size:1.15rem; }
    .pl-controls, .sp-controls{ gap:.35rem; }
    .pl-list-item{ padding:.85rem 0; }      /* саясаттағы тізім жолдарын ықшамдау */
    .sp-h-top, .sp-h-bot{ height:200px; }    /* спорт плиткаларының биіктігі */
}

/* ---- [SECTION: SOCIETY / ҚОҒАМ — КАРУСЕЛЬСІЗ] ---- */
.cg-title{ font-weight:800; }
.cg-all{ color:#64748b; text-decoration:none; }
.cg-all:hover{ color:#0d6efd; }

/* Биіктіктер (ratio қолданбаймыз) */
.cg-media-main{ height: 320px; }   /* оң жақтағы үлкен сурет */
.cg-media-mini{ height: 190px; }   /* төменгі 4 карточка */
@media (max-width: 991.98px){
    .cg-media-main{ height: 260px; }
}
@media (max-width: 575.98px){
    .cg-media-main{ height: 220px; }
    .cg-media-mini{ height: 160px; }
}

.cg-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:.5rem; }
.cg-card{ position:relative; border-radius:.75rem; overflow:hidden; }
.cg-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.68) 100%); pointer-events:none; }
.cg-headline{ font-weight:800; line-height:1.2; }
.cg-time{ color:#94a3b8; font-size:.9rem; }

.cg-mini-title{ color:#fff; font-weight:400; font-size:1rem; }
.cg-mini-time{ color:#e2e8f0; font-size:.85rem; }
.cg-card:hover .cg-mini-title{ color:#e8f0ff; }

/* [SECTION: WORLD / ӘЛЕМ ЖАҢАЛЫҚТАРЫ — КАРУСЕЛЬСІЗ] */

.wn-title{ font-weight:800; }
.wn-all{ color:#64748b; text-decoration:none; }
.wn-all:hover{ color:#0d6efd; }

/* Биіктіктер (ratio қолданбаймыз) */
.wn-media-sm{ height: 160px; }  /* сол жақтағы кіші карточкалар */
.wn-media-lg{ height: 340px; }  /* оң жақтағы үлкен карточка */
@media (max-width: 1199.98px){
    .wn-media-lg{ height: 320px; }
}
@media (max-width: 991.98px){
    .wn-media-sm{ height: 180px; }
    .wn-media-lg{ height: 300px; }
}
@media (max-width: 575.98px){
    .wn-media-sm{ height: 170px; }
    .wn-media-lg{ height: 240px; }
}

/* Карточка негізгі көріністері */
.wn-card{ position:relative; border-radius:.75rem; overflow:hidden; }
.wn-img{ width:100%; height:100%; object-fit:cover; display:block; }
.wn-overlay{ position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.70) 100%);
    pointer-events:none;
}
.wn-title-over{ color:#fff; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.wn-time{ color:#e2e8f0; font-size:.85rem; }

/* Кіші карточка тақырып өлшемі */
.wn-mini-title{ color:#fff; font-weight:800; font-size:1rem; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.wn-card:hover .wn-mini-title, .wn-card:hover .wn-title-over{ color:#e8f0ff; }

/* Тақырып жанындағы декоратив түймелер (UI ғана) */
.wn-controls .btn{
    width:32px; height:32px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
}

/* ---- [SECTION: EXPERT OPINIONS / САРАПШЫ ПІКІРІ — КАРУСЕЛЬ] ---- */

.ex-title{ font-weight:800; }
.ex-all{ color:#64748b; text-decoration:none; }
.ex-all:hover{ color:#0d6efd; }

/* Карточка өлшемдері (ratio қолданбаймыз) */
.ex-media{
    height:210px;                      /* сіздегі мән қандай болса сол */
    border-radius:.75rem;
    overflow:hidden;                   /* енді тек сурет шеттерін қияды */
}
@media (max-width: 1199.98px){ .ex-media{ height: 200px; } }
@media (max-width: 991.98px){  .ex-media{ height: 190px; } }
@media (max-width: 575.98px){  .ex-media{ height: 180px; } }

.ex-card{
    position: relative;
    border-radius:.75rem;
    overflow: visible;                 /* аватарды қырқамаймыз */
    background:#fff;
    box-shadow:0 6px 20px rgba(15,23,42,.06);
    margin-top:2.75rem;                /* аватарға үстінен орын */
    transition:transform .25s ease, box-shadow .25s ease;
}
.ex-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,23,42,.10); }

.ex-img{ width:100%; height:100%; object-fit:cover; display:block; }
.ex-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.70) 100%);
    border-radius:.75rem;
    pointer-events:none;
}

/* Аватар + автор аты */
.ex-avatar-wrap{
    position:absolute; left:50%; top:-36px; transform:translateX(-50%);
    text-align:center; z-index:3;
}
.ex-avatar{
    width:76px; height:76px; border-radius:50%;
    border:4px solid #fff; object-fit:cover;
    box-shadow:0 6px 14px rgba(0,0,0,.18);
    display:block; margin:0 auto;
}
.ex-author{
    margin-top:.5rem; font-weight:700; color:#0f172a;
    background:#ffffffcc; backdrop-filter:saturate(180%) blur(4px);
    padding:.15rem .5rem; border-radius:999px; font-size:.9rem;
    box-shadow:0 2px 8px rgba(15,23,42,.06);
}

/* Тақырып оверлейі */
.ex-headline{ color:#fff; font-weight:800; line-height:1.25;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.ex-time{ color:#e2e8f0; font-size:.85rem; }

/* Басқару батырмалары — барлық өлшемде көрінеді */
.ex-controls{ gap:.35rem; }
.ex-controls .btn{
    width:36px; height:36px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
}

/* [FOOTER / KZNEWS] */
.ft-wrap{ background:#1e1e1e; color:#e5e7eb; }
.ft-muted{ color:#9ca3af; }
.ft-link{ color:#e5e7eb; text-decoration:none; }
.ft-link:hover{ color:#ffffff; text-decoration:underline; }

/* [FT: секция тақырыптары] */
.ft-title{ font-weight:800; letter-spacing:.02em; }

/* [FT: соц-икондар] */
.ft-social a{
    width:36px; height:36px; border-radius:.5rem;
    display:inline-flex; align-items:center; justify-content:center;
    background:#2a2a2a; border:1px solid #343434;
    transition:background .2s ease,border-color .2s ease, transform .15s ease;
}
.ft-social a:hover{ background:#343434; border-color:#4b4b4b; transform:translateY(-1px); }
.ft-social img, .ft-social svg{ width:16px; height:16px; }

/* [FT: «жүктеу» батырмалары] */
.ft-store img{ height:44px; width:auto; }

/* [FT: баған аралық бөлгіш (мобайл вид)] */
@media (max-width: 575.98px){
    .ft-col-sep{ border-top:1px solid #2a2a2a; }
}

/* ARTICLE V2 — қосымша штрихтар */
.ar-title{ font-size:clamp(1.8rem, 2.6vw, 2.5rem); }
.ar-meta .btn{ width:34px;height:34px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; }
.ar-hero .ar-capchip{
    position:absolute; left:12px; bottom:12px;
    background:#ffffffcc; backdrop-filter:saturate(180%) blur(6px);
    border-radius:999px; padding:.25rem .6rem; font-size:.8rem; color:#111827;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}
/* Негізгі контентті тарылтып, оқылымдылықты арттырамыз */
.ar-content{ max-width:720px; margin-inline:auto; }
/* Dropcap */
.ar-dropcap::first-letter{
    float:left; font-size:3.2rem; line-height:.9; font-weight:800;
    padding:.2rem .5rem .2rem 0; color:#0f172a;
}
/* Key facts карточкасы — ұстамды стиль */
.card-soft{ background:#fff; border:1px solid #eef2f7; }

/* Pullquote бұрыштары (сендегі ei-q-ға негізделген) */
.ei-q{
    font-style:italic;
}
.ei-q::before, .ei-q::after{
    content:""; position:absolute; width:34px; height:34px; border:2px solid var(--ei-accent); opacity:.25;
}
.ei-q::before{ top:-8px; left:-8px; border-right:none; border-bottom:none; border-top-left-radius:6px; }
.ei-q::after{ bottom:-8px; right:-8px; border-left:none; border-top:none; border-bottom-right-radius:6px; }

/* === Society minis fix === */
.cg-card{ position:relative; overflow:hidden }
.cg-media-mini, .cg-media-main{ position:relative }

.cg-img{ width:100%; height:100%; object-fit:cover; display:block }

/* Қараңғылау градиент, ТӨМЕН z-index */
.cg-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.55) 100%);
    z-index:1; pointer-events:none;
}

/* Мәтін — ЖОҒАРЫ қабатта */
.cg-text{ position:absolute; left:0; right:0; bottom:0; padding:1rem; z-index:2 }

/* Контрастты күшейту */
.cg-mini-title{ color:#fff; font-weight:700; line-height:1.25 }
.cg-mini-time{ color:rgba(255,255,255,.9) }
.cg-mini-time i{ opacity:.9 }

/* Қажет болса оқылымдылық үшін жеңіл көлеңке */
.cg-mini-title, .cg-mini-time{
    text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 1px rgba(0,0,0,.35);
}

/* stretched-link дұрыс жұмыс істеуі үшін */
.cg-card .stretched-link{ position:static }

/* RELATED (rn-*) */
.rn-card{
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rn-card:hover{
    transform:translateY(-2px);
}
.rn-media{ aspect-ratio: 364/220; background:#f3f5f8 }
.rn-title{ font-weight:400; line-height:1.25 }
.rn-time{ color:#6b7280 }          /* қалауыңша muted түске ауыстыра аласың */
.rn-time i{ opacity:.8; font-size:.5rem }

/* 2 жолға дейін қиып тастау */
.text-truncate-2{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* 1) Dropcap — бірінші абзацқа автомат */
.article-content > p:first-of-type::first-letter{
    float:left; font-size:3.2rem; line-height:.9; font-weight:800;
    padding:.2rem .5rem .2rem 0; color:#0f172a;
}

/* 2) Pullquote — CKEditor-дің жай <blockquote> тегін сәндейміз */
.article-content blockquote{
    position:relative; font-style:italic; margin:1.25rem 0; padding:1rem 1.25rem;
    background:#fff; border:1px solid #eef2f7; border-radius:.75rem;
}
.article-content blockquote::before,
.article-content blockquote::after{
    content:""; position:absolute; width:34px; height:34px; border:2px solid var(--ei-accent); opacity:.25;
}
.article-content blockquote::before{ top:-3px; left:-3px; border-right:none; border-bottom:none; border-top-left-radius:15px; }
.article-content blockquote::after{ bottom:-3px; right:-3px; border-left:none; border-top:none; border-bottom-right-radius:15px; }

/* 3) Кәдімгі суреттер — әдемі, қауіпсіз */
.article-content img{
    max-width:100%; height:auto; border-radius:.75rem; display:block;
    box-shadow:0 4px 16px rgba(15,23,42,.06);
    margin:1rem 0;
}

/* 4) Figure/figcaption (егер CKEditor шығара алса) */
.article-content figure{ margin:1.25rem 0 }
.article-content figcaption{ color:var(--ei-muted); font-size:.9rem; margin-top:.5rem }

/* 5) Кестелер, тізімдер үшін ұсақ штрихтар */
.article-content table{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:1rem }
.article-content table th, .article-content table td{ border:1px solid #e5e7eb; padding:.5rem .75rem }
.article-content ul, .article-content ol{ padding-left:1.2rem }

/* AUTHOR PAGE (au-*) — минималды */
.author-header{ background:#fff; border:1px solid #eef2f7; }
.author-avatar img{ border-radius:50%; object-fit:cover; box-shadow:0 6px 18px rgba(16,24,40,.08) }
.author-bio{ color:var(--ei-text); max-width:820px }

.au-card{
    background:#fff; border:1px solid #eef2f7; border-radius:12px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.au-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(16,24,40,.08);
    border-color:#e7ebf0;
}
.au-media{ position:relative; aspect-ratio: 420/260; background:#f3f5f8 }
.au-badge{
    position:absolute; left:.75rem; top:.75rem;
    background:#ffffffcc; color:#111827; padding:.25rem .5rem; border-radius:.5rem;
    font-weight:600; font-size:.8rem;
}
.au-title{ font-weight:600; line-height:1.25 }
.au-time{ color:#6b7280 }
.au-time i{ opacity:.9 }

/* 2 жолға дейін қиып тастау */
.text-truncate-2{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* CATEGORY PAGE (ct-*) */
.ct-header{ background:#fff; border:1px solid #eef2f7; }
.ct-icon-wrap{
    width:44px; height:44px; border-radius:12px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#f3f5f8; color:#0d6efd; font-size:1.1rem;
}

.ct-card{
    background:#fff; border:1px solid #eef2f7; border-radius:12px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ct-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(16,24,40,.08);
    border-color:#e7ebf0;
}
.ct-media{ position:relative; aspect-ratio: 420/260; background:#f3f5f8 }
.ct-badge{
    position:absolute; left:.75rem; top:.75rem;
    background:#ffffffcc; color:#111827; padding:.25rem .5rem; border-radius:.5rem;
    font-weight:600; font-size:.8rem;
}
.ct-title{ font-weight:600; line-height:1.25 }
.ct-time{ color:#6b7280 }
.ct-time i{ opacity:.9 }

/* 2 жолға дейін қиып тастау */
.text-truncate-2{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Tag v2 — minimal unique */
.tg2-hero{
    background: linear-gradient(180deg, #ffffff, #f7f9fc);
    border:1px solid #eef2f7;
}

.tg2-chip{
    background:#111827; color:#fff; border-radius:999px;
    padding:.4rem .7rem; font-weight:700; letter-spacing:.02em; font-size:.9rem;
}

.tg2-item{
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tg2-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16,24,40,.08);
    border-color:#e7ebf0!important;
}

.tg2-thumb{ width:220px; aspect-ratio: 220/140; background:#f3f5f8; }
@media (max-width: 575.98px){
    .tg2-thumb{ width:140px; aspect-ratio: 140/90; }
}

.tg2-title{ font-weight:600; line-height:1.25; }
.tg2-meta{ --gap: .5rem; }

.tg2-badge{
    background:#eef2ff; color:#111827; border:1px solid #e0e7ff;
    padding:.15rem .5rem; border-radius:.5rem; font-weight:600; font-size:.8rem;
}
.tg2-tag{
    background:#f5f5f5; color:#111827; border:1px solid #eee;
    padding:.1rem .45rem; border-radius:.5rem; font-size:.8rem;
}

.tg2-excerpt{ line-height:1.45; }

/* 2 жолға дейін қиып тастау */
.text-truncate-2{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.tab-content{ overflow-y:scroll; max-height:530px; }
.tab-content::-webkit-scrollbar{ width:8px }
.tab-content::-webkit-scrollbar-thumb{ background-color:var(--ei-accent); border-radius:12px }
.tab-content::-webkit-scrollbar-track{ background-color:#f1f1f1; border-radius:10px }

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #598ad3!important;
}

/* Offcanvas-ты кеңейтеміз (скринге ұқсас) */
.offcanvas-wide{ --bs-offcanvas-width: min(100vw, 900px); }
@media (max-width: 575.98px){ .offcanvas-wide{ --bs-offcanvas-width: 100vw; } }

/* Сілтемелер стилі */
.off-list .off-link{
    display:inline-block; padding:.25rem 0; color:#0f172a; text-decoration:none;
}
.off-list .off-link:hover{ color:#0d6efd; text-decoration:underline; }

/* Контакт блок */
.off-contacts .off-link{ color:#0f172a; text-decoration:none }
.off-contacts .off-link:hover{ color:#0d6efd; text-decoration:underline }