@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --ei-primary:#1d489c; --ei-secondary:#0f3e82;
    --ei-bg:#f4f6fb; --ei-card:#ffffff; --ei-muted:#5b6b7b;

    /* Глобал радиустар */
    --ei-radius:10px; --ei-radius-sm:5px;
    --bs-border-radius:10px; --bs-border-radius-sm:4px; --bs-border-radius-lg:10px;
}

/* БЕКГРАУНД */
html,body {
    font-family: Inter, serif !important;
    background: var(--ei-bg);
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1;
    color: #000000;
    font-size: 18px;
    font-weight: 400;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
    background: #EAEEF5;
}

/* ======= HEADER / NAV ======= */
.ei-topbar{background:var(--ei-secondary); color:#e9efff}
.ei-topbar a{color:#e9efff; text-decoration:none}

.ei-nav{
    background:#fff; position:sticky; top:0; z-index:1030;
    box-shadow:0 .35rem 1rem rgba(16,24,40,.06)
}
.ei-nav .nav-link{color:#19314d; font-weight:500}
.ei-nav .nav-link.active{color:var(--ei-primary);}
.btn-theme{border-radius:999px}

/* ======= UTIL ======= */
.ei-card{ background:var(--ei-card); }
.ei-card-sm{border-radius:var(--ei-radius-sm)}
.hover-card{transition:transform .18s ease, box-shadow .18s ease}
.hover-card:hover{transform:translateY(-2px); box-shadow:0 .75rem 1.25rem rgba(0,0,0,.08)}
.ratio-cover img{object-fit:cover}
.text-clamp-2{-webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden}
.text-clamp-3{-webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden}
.eyebrow{letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; color:var(--ei-primary); font-weight:700}

/* ======= HERO ======= */
.hero .badge-cat{
    background:var(--bs-white);
    color:var(--ei-secondary);
    border-radius:var(--ei-radius-sm);
    padding:.35rem .7rem;
    font-size:1rem;
    font-weight:700
}
.hero .hero-title{
    color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35)
}
.hero-overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgb(0 0 0 / 30%) 20%, rgb(0 0 0 / 68%) 86%);
    border-radius:0
}

/* Desktop HERO image fit */
.img-cover{height:70vh; object-fit:cover; object-position:center;}
@media (max-width:1199.98px){ .img-cover{height:48vh} }

/* Carousel indicators */
#heroCarousel .carousel-indicators [data-bs-target]{
    width:15px; height:15px; border-radius:50%;
    background-color:var(--ei-primary);
    border:0; margin:0 6px
}
.carousel-indicators{ right:0!important; bottom:unset!important; left:unset!important; justify-content:end!important; }
#heroCarousel .carousel-indicators .active{background:#fff}

/* ======= THUMB/LIST ======= */
.thumb-90{width:90px; height:60px; border-radius:0; object-fit:cover}
.list-clean a{text-decoration:none; color:inherit}

/* ======= БАННЕР ======= */
img.banner{ border-radius:10px; max-width:100%; margin-bottom:1rem; }

/* ======= САЙДБАР ======= */
.sidebar-sticky{
    position:-webkit-sticky; position:sticky;
    top:5vh; align-self:flex-start;
}
@media (max-width:991.98px){
    .sidebar-sticky{ position:static; top:auto; }
}

/* ======= CONTENT / ARTICLE ======= */
figure{ margin:1.5rem 0; }
figcaption{ font-size:.85rem; color:#6c757d; }

/* Негізгі типография */
.article-content{ max-width:72ch; }
.article-content p{
    font-size:1.0625rem; /* ~17px */
    line-height:1.8;
    margin-bottom:1rem;
    color:#222;
    text-align:justify;
    hyphens:auto; -webkit-hyphens:auto;
    word-wrap:break-word;
}
.article-content h2,.article-content h3,.article-content h4{
    scroll-margin-top:90px;
    margin-top:1.6rem; margin-bottom:.6rem;
}
.article-content ul, .article-content ol{ padding-left:1.25rem; margin-bottom:1rem; }
.article-content li{ margin-bottom:.35rem; }

/* Сілтемелер */
.article-content a{
    text-decoration:underline;
    text-decoration-thickness:.08em;
    text-underline-offset:.18em;
}
.article-content a:hover{ text-decoration-thickness:.14em; }

.article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* Кестелер */
.article-content table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.article-content th, .article-content td{
    border:1px solid rgba(0,0,0,.08); padding:.6rem;
}

/* Код/преформат */
.article-content pre, .article-content code{
    background:#f6f8fa; border-radius:8px; padding:.25rem .5rem;
}
.article-content pre{ padding:.85rem; overflow:auto; }

/* Лид/аннотация */
.article-description{
    background-color:#f3f7fc;
    padding:1rem; margin-bottom:1rem; font-weight:700;
}

/* === ЕЛЕКШЕ БЛОКДЫҢ НЕГІЗІ === */
.article-content blockquote{
    position: relative;
    margin: 1.25rem 0;
    padding: 1rem 1rem 1rem 1.25rem;
    background: #f7faff;                 /* өте ашық көк фон */
    border: 1px solid #e7efff;           /* жұмсақ шекара */
    border-radius: 12px;
    font-style: italic;
}

/* Соңы артық бос орын қалмасын */
.article-content blockquote > :last-child{ margin-bottom: 0 }

/* === БҰРЫШТЫК «L-shape» СЫЗЫҚТАР === */
.article-content blockquote::before,
.article-content blockquote::after{
    content: "";
    position: absolute;
    width: 28px;                          /* сызық ұзындығы */
    height: 28px;
    pointer-events: none;
}

/* Сол жақ жоғары бұрыш */
.article-content blockquote::before{
    top: -1px; left: -1px;
    border-top: 3px solid #1f6fff;        /* көк түс */
    border-left: 3px solid #1f6fff;
    border-top-left-radius: 8px;
}

/* Оң жақ төменгі бұрыш */
.article-content blockquote::after{
    right: -1px; bottom: -1px;
    border-right: 3px solid #1f6fff;
    border-bottom: 3px solid #1f6fff;
    border-bottom-right-radius: 8px;
}

/* Қосымша: тырнақша белгісін астарға қою (өте жеңіл эффект) */
.article-content blockquote .q{
    position: relative;
    display: block;
    padding-left: 0.25rem;
}
.article-content blockquote .q::before{
    content: "“";
    position: absolute;
    left: -0.4rem; top: -0.6rem;
    font-size: 2.5rem; line-height: 1;
    opacity: .10;
}

/* Dark mode үйлесімділігі */
@media (prefers-color-scheme: dark){
    .article-content blockquote{
        background: #0f1524;
        border-color: #1e2a45;
        color: #dee7ff;
    }
    .article-content blockquote::before,
    .article-content blockquote::after{
        /* бірдей контрасттағы көк */
        border-color: #4d79ff;
    }
}


/* Тегтер badge hover */
.badge.bg-body.text-body.border:hover{ background:rgba(25,49,77,.06); }

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

/* Кнопкалар */
.btn-outline-primary{ color:var(--ei-primary); }
.btn-outline-primary:hover{ background-color:var(--ei-primary); color:var(--bs-white); }

/* Nav pills active */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    color:var(--bs-nav-pills-link-active-color);
    background-color:var(--ei-primary);
}

/* ======= DARK THEME OVERRIDES ======= */
html[data-bs-theme="dark"]{
    --ei-bg:#0e1520;
    --ei-card:#111a27;
    --ei-muted:#8fa1b4;
}
html[data-bs-theme="dark"] .ei-nav{
    background:#0f1927; box-shadow:0 .35rem 1rem rgba(0,0,0,.45)
}
html[data-bs-theme="dark"] .ei-nav .nav-link{color:#d6e2f0}
html[data-bs-theme="dark"] .ei-nav .nav-link.active{color:#9bb8ff;}
html[data-bs-theme="dark"] .ei-card{border-color:rgba(255,255,255,.08); box-shadow:none}
html[data-bs-theme="dark"] .ei-topbar{background:#0b1020}
html[data-bs-theme="dark"] .badge-cat{background:rgba(62,106,201,.95)}

/* Инпут/батырма контраст */
html[data-bs-theme="dark"] .form-control{
    background:#0e1520; border-color:#243244; color:#d9e3ef
}
html[data-bs-theme="dark"] .form-control::placeholder{color:#8ca0b5}
html[data-bs-theme="dark"] .btn-outline-primary{color:#9bb8ff; border-color:#3759a8}
html[data-bs-theme="dark"] .btn-outline-primary:hover{background:#1a2a52}

/* Контент түстері (dark) */
html[data-bs-theme="dark"] .article-content p{ color:#d6e2f0; }
html[data-bs-theme="dark"] .article-content a{ color:#9bb8ff; }
html[data-bs-theme="dark"] .article-content a:hover{ color:#c4d3ff; }
html[data-bs-theme="dark"] figcaption{ color:#9eb0c1; }
html[data-bs-theme="dark"] .article-content th, html[data-bs-theme="dark"] .article-content td{
    border-color:rgba(255,255,255,.08);
}
html[data-bs-theme="dark"] .article-content pre,
html[data-bs-theme="dark"] .article-content code{
    background:#0f1927; color:#d6e2f0;
}
html[data-bs-theme="dark"] .article-content blockquote{
    background:#0f1927; box-shadow:none; color:#d6e2f0;
}

/* Dark hero overlay сәл қоюлау */
html[data-bs-theme="dark"] .hero-overlay{
    background:linear-gradient(180deg,rgba(0,0,0,.0) 20%, rgba(0,0,0,.72) 86%);
}

/* Sidebar scrollbar (dark) */
html[data-bs-theme="dark"] .tab-content::-webkit-scrollbar-track{ background:#0e1520; }
html[data-bs-theme="dark"] .tab-content::-webkit-scrollbar-thumb{ background:#3759a8; }

/* ======= ACCESSIBILITY & REDUCED MOTION ======= */
:focus-visible{outline:2px solid var(--ei-primary); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .hover-card{transition:none} }

/* ======= MOBILE FINE TUNING ======= */
@media (max-width:575.98px){
    .hero .display-6{font-size:1.35rem}
    .thumb-90{width:72px;height:72px}
}