@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{ --brand:#8b1d3b; --ink:#1d1d1f; --muted:#6c727f; --line:#e9ecef; --card:#fff; --r:12px; --bnav-h:60px; }
html,body{ font-family: "Inter", sans-serif; background:#f5f7fa; color:var(--ink) }
a{text-decoration:none}

/* ============ BOXED аймақ (1200px) ============ */
.page-wrap{ max-width:1200px; margin-inline:auto; background:#fff; box-shadow:0 0 0 1px #dfe3e8 }
@media (min-width:992px){ .page-wrap{ border-radius:10px } }

/* Header */
.topbar{ border-bottom:1px solid var(--line); background:#fff; position:relative; }
.logo{ font-weight:800; color:var(--brand); letter-spacing:.5px; font-size:28px; line-height:1 }
.soc .btn{ --bs-btn-padding-y:.35rem; --bs-btn-padding-x:.45rem; border:1px solid var(--line); color:#7b7f88; background:#fff; border-radius:50rem }
.lang-btn{ border:1px solid var(--line); background:#fff; color:#4b4f57; border-radius:8px; padding:.45rem .65rem; font-weight:600 }

/* --- HERO slider --- */
.hero { padding-top:1rem; border-bottom:1px solid var(--line) }
.hero .carousel { border-radius: 8px; overflow: hidden; touch-action: pan-y; }
.hero .ratio > img { object-fit: cover; }
.hero .hero-grad{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); pointer-events:none; }
.hero .hero-caption{ position:absolute; inset-inline:0; bottom:0; text-align:center; color:#fff; padding:1rem 1rem 1.15rem }
@media (min-width:768px){ .hero .hero-caption{ padding:1.5rem 1.75rem 2rem } }
.hero .hero-title{ font-weight:800; font-size:18px; line-height:1.25; margin:0 0 .35rem }
.hero .meta{ font-size:12px; color:#e5e7eb }
@media (min-width:768px){ .hero .hero-title{ font-size:clamp(20px, 1vw + 18px, 28px) } }
.hero .carousel-indicators{ margin:0; gap:.5rem; bottom:.5rem; align-items:center; z-index:4; }
.hero .carousel-indicators [data-bs-target]{ width:8px; height:8px; border-radius:50%; background:#d5d8de; opacity:1; border:0; position:relative; }
.hero .carousel-indicators [data-bs-target]::after{ content:""; position:absolute; inset:-8px; }
.hero .carousel-indicators .active{ background:var(--brand); }
.nav-btn:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
.hero .carousel-indicators [data-bs-target]:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; box-shadow:none; }
.carousel-control-prev,.carousel-control-next{ z-index:5; } /* стрелкалар үстінде */
@media (prefers-reduced-motion: reduce){ .carousel, .carousel *{ transition:none !important; animation:none !important; } }

/* Аналитика */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:1.25rem 0 .75rem}
.section-head .section-title{margin:0}
.section-head .more-link{font-weight:600;font-size:14px;color:#6b7280}
.section-head .more-link:hover{color:var(--brand)}
.analytic-card{border-radius:12px; overflow:hidden; background:#000; position:relative}
.analytic-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.analytic-card .overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15) 10%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.75) 100%); pointer-events:none}
.analytic-card .caption{position:absolute; left:0; right:0; bottom:0; padding:.85rem .9rem 1rem; color:#fff}
.analytic-card .title{font-weight:800; font-size:18px; line-height:1.25; margin:0 0 .35rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.analytic-card .meta{font-size:12px; color:#e5e7eb}
.analytic-card:hover .thumb img{ transform:scale(1.05) }
@media (min-width:768px){ .analytic-card .title{ font-size:clamp(18px, 1vw + 16px, 22px) } }

/* Саясат */
.pol-feature{border-radius:12px; overflow:hidden; background:#fff}
.pol-feature .title{ margin:.75rem 0 .25rem; font-weight:800; font-size:20px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.pol-feature .meta{font-size:12px; color:#6b7280}
.pol-list .pol-item{padding:.75rem 0; border-bottom:1px solid var(--line)}
.pol-list .pol-item:last-child{border-bottom:0}
.pol-list .pol-title{ font-weight:700; font-size:16px; line-height:1.3; margin:0 0 .35rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.pol-list .meta{font-size:12px; color:#6b7280}
.pol-list .mini{ width:120px; height:80px; border-radius:8px; object-fit:cover; flex:0 0 120px }
@media (min-width:992px){ .pol-col-left{ border-right:1px solid var(--line) } }

/* Қоғам */
.soc-head{display:flex;align-items:center;justify-content:space-between;margin:1.25rem 0 .75rem}
.soc-head .section-title{margin:0}
.soc-head .more-link{font-weight:600;font-size:14px;color:#6b7280}
.soc-head .more-link:hover{color:var(--brand)}
.soc-feature{position:relative;border-radius:14px;overflow:hidden;background:#000}
.soc-feature .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.soc-feature .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 10%,rgba(0,0,0,.6) 80%)}
.soc-feature .cap{position:absolute;left:0;right:0;bottom:0;color:#fff;padding:1rem 1rem 1.2rem}
.soc-feature .title{font-weight:800;font-size:20px;line-height:1.25;margin:0 0 .35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.soc-feature .meta{font-size:12px;color:#e5e7eb}
.soc-feature:hover .thumb img{transform:scale(1.04)}
.soc-mini{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;gap:.85rem}
.soc-mini .mini-img{width:120px;height:84px;flex:0 0 120px;border-radius:10px;object-fit:cover}
.soc-mini .mini-title{font-weight:700;font-size:16px;line-height:1.3;margin:0 0 .35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.soc-mini .meta{font-size:12px;color:#6b7280}
@media (min-width:768px){ .soc-mini .mini-img{width:136px;height:92px;flex-basis:136px} }

/* Карточка базасы */
.section-title{ font-weight:800; font-size:16px; border-left:4px solid var(--brand); padding-left:.6rem; margin:1.25rem 0 .75rem }
@media (min-width:768px){ .section-title{ font-size:18px } }
.news-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.news-thumb{ width:100%; height:170px; object-fit:cover }
.news-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); transition:.2s }

/* Sidebar widgets */
.widget{ background:#fff; border:1px solid var(--line); border-radius:var(--r) }
.widget .title{ font-weight:700; font-size:14px; color:#4b4f57 }
.mini-list li{ display:flex; gap:.75rem; padding:.65rem 0; border-bottom:1px dashed var(--line) }
.mini-list li:last-child{ border-bottom:0 }
.mini-thumb{ width:64px; height:64px; border-radius:8px; object-fit:cover }
.mini-title{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.25 }
.scroll-box{ max-height:420px; overflow:auto }
@media (min-width:1200px){ .scroll-box{ max-height:480px } }

/* ==== Sticky sidebar ==== */
@media (min-width:992px){
    .sidebar-sticky{ position:sticky; top:0; padding-top:1rem; }
}

/* ==== Bottom nav ==== */
@media (max-width: 767.98px){ body{ padding-bottom: var(--bnav-h); } }
.bottom-nav{ position:fixed; left:0; right:0; bottom:0; height:var(--bnav-h); background:#fff; border-top:1px solid var(--line); z-index:1100; padding-bottom:env(safe-area-inset-bottom) }
.bottom-nav .inner{ max-width:1200px; margin:0 auto }
.nav-slot{ flex:1; text-align:center }
.nav-slot .nav-btn{ width:100%; padding:.6rem 0; color:#9aa0a6; background:transparent; border:0 }
.nav-slot .nav-btn.active{ color:var(--brand) }
.nav-slot .btn-close-slot{ display:none }
.nav-slot.is-active .btn-open-slot{ display:none }
.nav-slot.is-active .btn-close-slot{ display:inline-block }
@media (min-width:768px){ .bottom-nav{ display:none } }

/* Offcanvas */
.offcanvas.malim-menu{max-width:100%; border-top-left-radius:12px; border-bottom-left-radius:12px}
.malim-menu .lang-pill{border:1px solid var(--line); background:#fff; color:#4b4f57; border-radius:999px; padding:.35rem .7rem; font-weight:700; font-size:14px}
.malim-menu .icon-btn{border:1px solid var(--line); background:#fff; color:#8b1d3b; border-radius:999px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center}
.malim-menu .divider{border-top:1px solid var(--line)}
.malim-menu .cat-link{display:block; font-size:14px; color:#8b1d3b; padding:.25rem 0}
.malim-menu .foot-link{color:#6b7280; font-size:14px}
.malim-menu .social-round{width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #c6c9cf;color:#8b1d3b;background:#fff}
.malim-menu .subs-input .form-control{border-color:#cfd4da}
.malim-menu .subs-input .btn{border-color:#cfd4da}
.malim-menu .editor-phone a{color:#8b1d3b; font-weight:700; text-decoration:none}

/* ============ FULL-WIDTH аймақ (Бейне және ары қарай) ============ */
.wide-zone{ margin-top:1rem; }
.wide-zone .section-block{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.wide-zone .container-xxl{ padding-left:1rem; padding-right:1rem }

/* Dark video tokens */
:root{
    --v-bg:#0e0f13;
    --v-card:#15171c;
    --v-line:rgba(255,255,255,.08);
    --v-ink:#e8eaef;
    --v-muted:#a3a8b3;
    --v-brand:#8b1d3b;
}

/* Full-bleed section */
.v-section{ background: radial-gradient(1200px 600px at 20% -10%, rgba(139,29,59,.25), transparent),
radial-gradient(900px 500px at 100% 0, rgba(139,29,59,.10), transparent),
var(--v-bg);
    color:var(--v-ink); padding-block: 32px; border-top: 1px solid var(--v-line); }
.v-section .container-xxl{ padding-inline: 1rem; }

/* Head */
.v-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: .75rem; }
.v-title{ display:flex; align-items:center; gap:.6rem; margin:0; font-weight:800; letter-spacing:.2px; }
.v-dot{ width:35px; height:35px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--v-brand); color:#fff; box-shadow:0 0 0 6px rgba(139,29,59,.25); }
.v-more{ color:var(--v-muted); font-weight:600; font-size:14px; }
.v-more:hover{ color:#fff; }

/* Head controls */
.v-ctrl{ display:flex; gap:.5rem; }
.v-btn{
    width:38px; height:38px; border-radius:10px; border:1px solid var(--v-line);
    background:transparent; color:var(--v-ink); display:inline-flex; align-items:center; justify-content:center;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.v-btn:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); transform: translateY(-1px); }
.v-btn:focus-visible{ outline:2px solid var(--v-brand); outline-offset:2px; }

/* Card */
.v-card{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
    border:1px solid var(--v-line); border-radius:14px; overflow:hidden; }
.v-thumb{ position:relative; }
.v-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.v-thumb .v-grad{ position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
.v-play{
    position:absolute; inset:auto; left:50%; top:50%; translate:-50% -50%;
    width:54px; height:54px; border-radius:999px; background:rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center; color:#fff;
    backdrop-filter: blur(3px);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.v-card:hover .v-thumb img{ transform: scale(1.035); }

.v-body{ padding:.8rem .9rem 1rem; }
.v-h{ margin:0 0 .25rem; font-weight:800; font-size:clamp(15px, .5vw + 14px, 18px); line-height:1.28; color:#fff; }
.v-meta{ font-size:12px; color:var(--v-muted); }

/* Carousel tweaks (dark) */
.v-carousel .carousel-item{ transition: transform .6s ease; }
@media (prefers-reduced-motion: reduce){
    .v-carousel .carousel-item{ transition: none !important; }
}

.sec-head{display:flex;align-items:center;justify-content:space-between;margin:1.25rem 0 .75rem}
.sec-head .sec-title{margin:0;font-weight:800;font-size:18px;border-left:4px solid var(--brand);padding-left:.6rem}
@media (min-width:768px){ .sec-head .sec-title{font-size:20px} }
.sec-head .more-link{font-weight:600;font-size:14px;color:#6b7280}
.sec-head .more-link:hover{color:var(--brand)}

/* -------- CULTURE (сол баған) -------- */
.culture-col .feature{position:relative;border-radius:14px;overflow:hidden;background:#000}
.culture-col .feature .thumb{position:relative}
.culture-col .feature .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.culture-col .feature .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.7) 85%)}
.culture-col .feature .cap{position:absolute;left:0;right:0;bottom:0;color:#fff;padding:1rem 1rem 1.2rem}
.culture-col .feature .title{margin:0;font-weight:800;line-height:1.25;font-size:clamp(18px,1vw + 16px,24px);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.culture-col .feature:hover .thumb img{transform:scale(1.04)}

.culture-col .mini{display:flex;gap:.85rem;align-items:flex-start;border:1px solid var(--line);
    border-radius:12px;background:#fff;padding:.6rem .7rem;transition:box-shadow .2s ease, transform .2s ease}
.culture-col .mini:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);transform:translateY(-2px)}
.culture-col .mini .img{width:120px;height:84px;flex:0 0 120px;border-radius:10px;object-fit:cover}
.culture-col .mini .t{margin:.15rem 0 .25rem;font-weight:700;line-height:1.28;font-size:16px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.culture-col .meta{font-size:12px;color:#6b7280}

/* Роу тең биіктікте созылу үшін */
#culture-interview .row{align-items:stretch}

.interview-card{
    position:relative;
    min-height: clamp(330px, 48vh, 560px);
    border-radius:14px; overflow:hidden; background:#0f1115;
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.15);
}
@media (min-width: 1200px) {
    .interview-card{
        min-height: clamp(660px, 48vh, 560px);
    }
}
.interview-card .media{position:absolute; inset:0; z-index:1}
.interview-card .media img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02)}
.interview-card .media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.78) 100%);
}

.interview-card .content{
    position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
    justify-content:flex-end; padding:clamp(.9rem, 2.5vw, 1.4rem);
}
.interview-card .title{
    color:#fff; font-weight:900; line-height:1.12; margin:0;
    font-size: clamp(20px, 1.1vw + 18px, 30px);
    transition: transform .35s ease, opacity .35s ease;
}
.interview-card .lead{
    color:#e5e7eb; font-size:15px; line-height:1.5; margin-top:.6rem; max-width:70ch;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    transform:translateY(18px); opacity:0; transition: transform .45s ease, opacity .45s ease;
}
.interview-card .meta{color:#cbd5e1; font-size:12px; margin-top:.5rem; opacity:.9}

/* Hover эффекттері */
.interview-card:hover .lead{transform:translateY(0); opacity:1}
.interview-card:hover .title{transform:translateY(-6px)}

/* === SPORT DARK THEME === */
.sport-dark{ background: #0e1116; }
.sport-dark .sport-title{
    color:#fff; font-weight:900; letter-spacing:.2px;
    font-size:clamp(18px,1.1vw + 18px,24px);
    display:flex; align-items:center; gap:.6rem;
    margin:0;
}
.sport-dark .sport-title .dot{
    width:10px;height:10px;border-radius:50%; background:var(--brand,#8b1d3b);
    box-shadow:0 0 0 4px rgba(139,29,59,.15);
    display:inline-block;
}
.sport-dark .ctrl{
    width:36px;height:36px;border-radius:8px; border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.02); color:#e5e7eb;
    display:inline-flex; align-items:center; justify-content:center;
}
.sport-dark .ctrl:hover{ background:rgba(255,255,255,.06); color:#fff }

/* Cards */
.sport-card{
    background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.00) 100%);
    border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden;
    padding: .65rem .65rem 0;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sport-card .thumb img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }
.sport-card .title{
    display:block; color:#f3f4f6; font-weight:800; line-height:1.25;
    margin:.7rem .25rem .25rem; font-size:16px;
}
.sport-card .meta{
    color:#aeb3bd; font-size:12px; margin:0 .25rem .75rem;
}
.sport-card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* Indicators — қысқа сызықша */
.sport-indicators{
    position: static; margin-top: .75rem; gap:.4rem;
}
.sport-indicators [data-bs-target]{
    width:22px; height:3px; border-radius:2px; background:rgba(255,255,255,.18); border:0; opacity:1;
}
.sport-indicators .active{ background:#fff }

/* Floating controls on mobile */
.ctrl-float{
    position:absolute;
    right:.5rem;
    /*bottom:.5rem; */
    top: -45px;
    display:flex;
    gap:.4rem;
}

/* Accessibility focus */
.sport-dark .ctrl:focus-visible,
.sport-indicators [data-bs-target]:focus-visible{
    outline:2px solid var(--brand,#8b1d3b); outline-offset:2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
    .carousel, .carousel *{ transition:none !important; animation:none !important; }
}

/* ========== PREMIUM FOOTER ========== */
.site-footer{
    background: radial-gradient(1200px 400px at 20% -5%, rgb(139 29 59), #000000) #fff;
}
.footer-logo{
    font-weight: 900;
    letter-spacing:.5px;
    color: #fff;
    font-size: clamp(28px, 1.2vw + 24px, 36px);
    line-height:1;
}
.ft-hr{ border-color: #edf0f3; opacity:1 }

.ft-title{font-weight:800;font-size:14px;color: #f8f9fa;margin-bottom:.6rem}
.ft-list li + li{ margin-top:.35rem }
.ft-list a{
    color: rgb(207 217 231 / 61%);
    text-decoration:none;
}
.ft-list a:hover{ color:var(--brand) }

.ft-input{ border-color:#d7dce1 }
.ft-btn{
    background: var(--brand); color:#fff; border:0; border-radius:8px; padding:.45rem .8rem;
}
.ft-btn:hover{ filter:brightness(.95) }

/* футерге ғана жүрсін */
.site-footer .soc{
    width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid #d8dbe0; color:var(--brand); background:#fff;
}
.site-footer .soc:hover{ background:#fafbff; border-color:#cfd4da }

.store-badge{ display:inline-block; line-height:0; border-radius:10px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.12) }
.store-badge:hover{ transform: translateY(-2px); transition: transform .2s ease }
.ft-mini{ color:#6b7280; text-decoration:none }
.ft-mini:hover{ color:var(--brand) }

@media (max-width: 575.98px){
    .ft-list{ column-count:1 }
}
@media (min-width: 576px) and (max-width: 991.98px){
    .ft-list{ column-count:1 }
}

@media (max-width: 575.98px){
    .lang-btn{ padding:.35rem .6rem; font-size:.875rem }
}

/* Header соц — бөлек namespace */
.topbar .header-soc{ gap:.5rem }
.topbar .header-soc .soc-btn{
    width:34px;height:34px;border:1px solid var(--brand);
    color:var(--brand);background:#fff;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    transition:.15s ease;
}
.topbar .header-soc .soc-btn:hover{
    border-color:var(--brand); color:var(--brand); transform:translateY(-1px);
}
@media (min-width:1200px){
    .topbar .header-soc .soc-btn{ width:36px;height:36px }
    .topbar .header-soc{ gap:.6rem }
}

/* topnav link-тері */
.topbar .topnav .cat-main a{
    color:#4b4f57; font-weight:700; text-decoration:none;
}
.topbar .topnav .cat-main a:hover{ color:var(--brand) }

/* «иконка батырмасы» — меню/іздеу/үш нүкте */
.topbar .icon-btn{
    width:36px;height:36px;border:1px solid var(--line);
    background:#fff;color:#7b7f88;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    transition:.15s ease;
}
.topbar .icon-btn:hover{ border-color:var(--brand); color:var(--brand); }

/* Dropdown үстінде ашылсын */
.topnav .dropdown-menu{ z-index: 1066; }
#moreDropWrap.d-none{ display:none !important; }

/* === DESKTOP feed (последние новости) === */
.feed-widget{ border:1px solid var(--line); border-radius:12px; background:#fff; }
.feed-head .title{ font-weight:400; font-size:16px; color: #a13434; }
.feed-head .feed-underline{
    display:block; height:2px; width:100px; background: #c4c4d0; border-radius:2px; margin:8px 0 6px;
}

/* скролл аймағы */
.feed-scroll{ max-height: 520px; overflow:auto; }
@media (min-width:1200px){ .feed-scroll{ max-height: 600px; } }

/* пункт көрінісі: уақыт | мини-превью | тақырып */
.feed-list .feed-item{
    display:grid;
    grid-template-columns: 56px 96px 1fr; /* time | thumb | title */
    gap:12px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid var(--line);
}
.feed-list .feed-item:last-child{ border-bottom:0 }

/* уақыт бағаны */
.feed-time{
    font-variant-numeric: tabular-nums;
    font-weight:400;
    color:#8b1d3b;
    display:block;
    width:56px;
}

/* тақырып */
.feed-title{
    display:block; color:#111; line-height:1.28; font-weight:600;
    text-decoration:none;
}
.feed-title:hover{ color:var(--brand) }

/* сурет болмаса: автоматты екі баған */
.feed-item :where(.feed-thumb){ /* бар болса ғана орын алады */ }
.feed-item:not(:has(.feed-thumb)){
    grid-template-columns: 56px 1fr;
}

/* ұсақ, бірақ әдемі скролл (вебкит) */
.feed-scroll::-webkit-scrollbar{ width:10px }
.feed-scroll::-webkit-scrollbar-track{ background:#f3f4f6; border-left:1px solid #eef1f4 }
.feed-scroll::-webkit-scrollbar-thumb{ background:#c8ccd3; border-radius:8px }
.feed-scroll::-webkit-scrollbar-thumb:hover{ background:#b3b8c0 }

figure {
    margin: 1.5rem 0;
}
figcaption {
    font-size: 0.85rem;
    color: #6c757d;
}

.article-content p {
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 150%;
    font-weight: 500;
    color: #1A1A1A;
    margin-top: 30px;
    text-align: left;
}


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

.article-description {
    background-color: #f3f7fc;
    padding: 1rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.article-content blockquote {
    border: none;
    background: #F8F8F8;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 35px;
    font-weight: 700;
}
blockquote {
    margin: 0 0 1rem;
    font-size: 20px;
    line-height: 110%;
    letter-spacing: 0.02em;
    color: #1A1A1A;
    position: relative;
    padding-top: 25px;
    text-align: center;
}
blockquote:before {
    width: 72px;
    height: 30px;
    position: absolute;
    transform: translateX(-50%);
    padding: 0 14px;
}

.article-content blockquote:before {
    content: url(../img/icon/blockq.svg);
    background: none;
    top: -3px;
    left: 16px;
}

.feed-scroll::-webkit-scrollbar {
    width: 5px
}

.feed-scroll::-webkit-scrollbar-thumb {
    background-color: #970909;
    border-radius: 12px
}

.feed-scroll::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px
}

/* SINGLE */
.article-head .article-title{font-weight:900; line-height:1.15; font-size:clamp(22px,1.2vw + 20px,34px); margin:0}
.article-cover img{object-fit:cover}

/* Тегтер */
.tag-pill{
    display:inline-block; padding:.35rem .6rem; border:1px solid var(--line);
    border-radius:999px; font-weight:600; color:#4b4f57; background:#fff;
}
.tag-pill:hover{ color:var(--brand); border-color:var(--brand) }

/* Автор боксы */
.author-box{ background:#f8fafc; border:1px solid var(--line) }

/* Prev/Next */
.pn-link{ background:#fff; border-color:var(--line) !important; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease }
.pn-link:hover{ transform:translateY(-2px); border-color:#cfd4da !important; box-shadow:0 8px 24px rgba(0,0,0,.06) }

/* Breadcrumb стили жұмсақ болсын */
.breadcrumb .breadcrumb-item + .breadcrumb-item::before{ color:#adb5bd }
.breadcrumb a{ color:#6b7280 }
.breadcrumb a:hover{ color:var(--brand) }

/* RELATED */
/* === SIMILAR (Ұқсас мақалалар) === */
.similar-sec .sim-card{
    border:0; background:transparent; border-radius:14px; overflow:visible;
    transition: transform .18s ease, box-shadow .18s ease;
}
.similar-sec .sim-thumb{
    border-radius:16px; overflow:hidden; position:relative;
    box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}
.similar-sec .sim-thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .35s ease;
}
.similar-sec .sim-card:hover{ transform:translateY(-3px) }
.similar-sec .sim-card:hover .sim-thumb img{ transform:scale(1.035) }

.similar-sec .sim-title{
    margin:.6rem 0 .25rem; font-weight:600; line-height:1.28;
    font-size: clamp(16px, .6vw + 14px, 16px);
    color:#111;
    display:-webkit-box; overflow:hidden;
}
.similar-sec .sim-meta{ font-size:12px; color:#6b7280 }

/* Fastnews controls (Толығырақ орнына) */
#fastnews .fast-ctrl{
    display:flex; gap:.5rem;
}
#fastnews .fast-ctrl .ctrl-btn{
    width:38px; height:38px; border-radius:10px;
    border:1px solid var(--line); background:#fff; color:var(--brand);
    display:inline-flex; align-items:center; justify-content:center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#fastnews .fast-ctrl .ctrl-btn:hover{
    transform:translateY(-1px);
    border-color:#cfd4da; box-shadow:0 10px 22px rgba(0,0,0,.08);
}
#fastnews .fast-ctrl .ctrl-btn:focus-visible{
    outline:2px solid var(--brand); outline-offset:2px;
}

/* Карусель ішіндегі аралық бұзылмасын */
#fastnews .carousel .carousel-item{ transition: transform .6s ease; }
@media (prefers-reduced-motion: reduce){
    #fastnews .carousel .carousel-item{ transition:none !important; }
}

:root{ --et-brand:#8b1d3b; --et-ink:#fff; --et-muted:#f3f4f6; --et-shadow:0 14px 40px rgba(0,0,0,.22); }

.editor-toast{
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9999;
    max-width: 480px;
    background: var(--et-brand);
    color: var(--et-ink);
    border-radius: 14px;
    box-shadow: var(--et-shadow);
    padding: 14px 14px 14px 14px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}

/* Контент */
.editor-toast .et-body{ display:flex; align-items:center; gap:14px; }
.editor-toast .et-thumb{
    width: 104px; height: 72px; border-radius: 10px; flex: 0 0 104px;
    background: linear-gradient(135deg,#d6d9dd,#bfc3c9);  /* плейсхолдер */
}
.editor-toast .et-text{ min-width: 0; }
.editor-toast .et-tag{
    font-weight: 700; font-size: 15px; letter-spacing:.2px; margin-bottom: 4px;
}
.editor-toast .et-title{
    color:#fff; display:block; line-height:1.28; font-weight:700; text-decoration:none;
    font-size: 18px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.editor-toast .et-title:hover{ text-decoration:underline; }

/* Close button */
.editor-toast .et-close{
    position:absolute; top:10px; right:10px;
    width:32px; height:32px; border-radius:999px;
    background:#ffffff1a; color:#fff; border:1px solid #ffffff33;
    display:inline-flex; align-items:center; justify-content:center;
    transition: transform .15s ease, background .15s ease, border-color .15s;
}
.editor-toast .et-close:hover{ transform:translateY(-1px); background:#ffffff26; border-color:#ffffff55; }
.editor-toast .et-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Көрсету күйі */
.editor-toast.show{ opacity:1; transform: translateY(0); pointer-events:auto; }

/* ====== Мобайл: астыңнан шығады ====== */
@media (max-width: 767.98px){
    .editor-toast{
        left: 12px; right: 12px; bottom: 12px;
        max-width: none; padding: 14px; border-radius: 16px;
        transform: translateY(120%); /* бастапқы “астында” */
    }
    .editor-toast.show{
        animation: etSlideUp .45s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes etSlideUp{
        from{ transform: translateY(120%); opacity:0; }
        to  { transform: translateY(0);    opacity:1; }
    }
}

/* ====== Десктоп: сол жақта, жеңіл сырғыма ====== */
@media (min-width: 768px){
    .editor-toast{ transform: translateY(10px); }
    .editor-toast.show{
        animation: etFadeInLeft .38s ease-out both;
    }
    @keyframes etFadeInLeft{
        from{ transform: translate(-8px, 12px); opacity:0; }
        to  { transform: translate(0,0);        opacity:1; }
    }
}

/* Picture ішін ratio-ға дұрыс жайғастыру */
.article-cover picture,
.article-cover img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}