@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root{--muted:#9aa0a6;--ink:#111;--soft:#f5f6f7}
body{font-family: 'Montserrat', sans-serif}
a{text-decoration:none;}
a:hover{text-decoration-line: underline}
.category{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.story-card .title{font-size:1.05rem; line-height:1.25; color:var(--ink)}
.story-card .title:hover{opacity:.85}
.byline{font-size:.75rem; color:var(--muted); font-weight:600}
.brand{font-family:"Playfair Display", serif; font-weight:700; letter-spacing:2px}
.brand span{border:3px solid #000; padding:.25rem .5rem; line-height:1; display:inline-block}
.rubric{font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600}
.headline{font-family:"Playfair Display", serif}
.link-underline:hover{text-decoration:underline}
.card-article .card-title{font-size:1.05rem}
.byline{font-size:.75rem; text-transform:uppercase; letter-spacing:.12em}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.6))}
.hero .headline{font-size:clamp(1.5rem, 3vw + .5rem, 2.5rem)}
.divider{height:1px;background:rgba(0,0,0,.06)}

/* ===== Read More overlay cards ===== */
.overlay-card .overlay-gradient{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 95%);
    z-index: 1;
}
.overlay-card .overlay-content{
    position:absolute; left:0; right:0; bottom:0;
    z-index: 2;
}
.overlay-card img{
    transition: transform .4s ease;
    display:block;
}
.overlay-card:hover img{
    transform: scale(1.04);
}

/* Ұзын тақырыптарды әдемі қысу */
.line-clamp-2{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Bootstrap 5.3 object-fit утилитасы жоқ болса, fallback */
.object-fit-cover{ object-fit: cover; }


/* Mobile hero overlay (ақпаратты оқылатын ету) */
.hero-overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.75) 95%);
    z-index:0;
}
/* Ұсақ типо түзетулер */
.kicker{ letter-spacing:.08em; text-transform:uppercase; font-weight:600; font-size:.8rem; }


/* Article page extras */
.carousel-caption { text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.lead { font-size: 1.1rem; }
blockquote { border-color:#000; }


/* Left column cards */
.story-card img{border-radius:.35rem}
.story-card + .story-card{margin-top:1.5rem}

/* Center hero */
.hero-card img{width:100%; height:640px; object-fit:cover; border-radius:.35rem}
@media (max-width: 992px){.hero-card img{height:420px}}
.hero-card .title{font-size:2rem; line-height:1.15}
@media (min-width: 1200px){.hero-card .title{font-size:2.1rem}}

/* Right rail list */
.rail-item{padding:1rem 0}
.rail-item + .rail-item{border-top:1px solid rgba(0,0,0,.06)}
.rail-thumb{width:70px; height:70px; object-fit:cover; border-radius:.35rem}

/* Small utilities to echo the look */
.kicker{font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.12em}
.sticky-topbar{font-size:.9rem}
.footer-link{color:#adb5bd; text-decoration:none}
.footer-link:hover{text-decoration:underline; color:#fff}
.list-bullets li{margin:.25rem 0}
.readtime{font-size:.75rem; color:var(--muted)}
.img-cover{object-fit:cover; object-position:center}

.logo {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 5px;
}

/* Минимал CSS — тек UX үшін */
.main-menu > li { display: inline-block; }

.main-menu a, .more-btn{
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: #000; padding: .5rem .75rem; display: inline-block;
    border: 0; background: transparent; cursor: pointer;
}
.main-menu a:hover, .main-menu a:focus { text-decoration: underline; outline: none; }

/* "Тағы" ұяшығы */
.main-menu .more { position: relative; }
.main-menu .more-btn:focus { outline: 2px solid #e5e7eb; border-radius: 6px; }

/* Dropdown (CSS-only: hover & focus-within) */
.main-menu .dropdown{
    position: absolute; top: 100%; left: 0;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: .25rem; min-width: 240px; display: none; z-index: 50;
    max-height: 60vh; overflow: auto;
}
.main-menu .dropdown li { display: block; }
.main-menu .dropdown a { display: block; padding: .5rem .75rem; border-radius: 6px; }
.main-menu .dropdown a:hover { background: #f6f6f6; text-decoration: none; }

/* Ашылу триггерлері: hover және пернетақта фокусы */
.main-menu .more:hover .dropdown,
.main-menu .more:focus-within .dropdown { display: block; }

/* Кіші экрандарда dropdown позициясын ыңғайлау */
@media (max-width: 576px){
    .main-menu .dropdown{
        position: fixed; left: .75rem; right: .75rem; top: auto; bottom: .75rem;
        max-height: 50vh;
    }
}

.offcanvas-backdrop {
    opacity: 0.9;
}
.article-title {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}
.article-meta {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.author {
    font-size: 0.8rem;
    color: #000;
    text-align: center;
    font-weight: bold;
}
.right-news small {
    font-size: 0.75rem;
    color: #666;
}
.right-news img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

@media (max-width: 576px) {
    .logo {
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: 60px;
    }
}

/* БАЗА: логотип өлшемі */
.header-main .logo img{
    height:130px;
    transition:height .25s ease, transform .25s ease;
    display:block;
    margin:0 auto;
}

/* STICKY: жабысып тұрғанда 2 есе кішірейтеміз */
.header-main.is-stuck .logo img{
    height:65px; /* 130px -> 65px */
}

/* Sticky кезінде жоғары-төмен padding азайту */
.header-main.is-stuck{
    padding-top:.25rem !important;
    padding-bottom:.25rem !important;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

/* МОБИЛЬДІ: жалпы жинақы көрініс */
@media (max-width: 576px){
    .header-main .logo img{
        height:35px;
    }
    .header-main.is-stuck .logo img{
        height:56px;
    }
    .header-main{
        padding-top:.5rem !important;
        padding-bottom:.5rem !important;
    }
    .header-main.is-stuck{
        padding-top:.25rem !important;
        padding-bottom:.25rem !important;
    }
}

/* Карусельдегі төменгі градиент-оверлей */
.overlay-gradient-carusel,
.overlay-gradient-carousel{ /* екі нұсқаны да қолдаймыз */
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1rem;
    z-index: 2;
}

/* Градиент фоны (төменгі 50–60% аймақты жабады) */
.overlay-gradient-carusel::before,
.overlay-gradient-carousel::before{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.35) 35%,
        rgba(0,0,0,.7) 70%,
        rgba(0,0,0,.9) 100%
    );
    z-index: -1; /* мәтіннің артында */
}

/* Мәтін түстері */
.overlay-gradient-carusel .title,
.overlay-gradient-carousel .title{
    color: #fff !important;           /* text-dark-ты басып кету үшін */
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

.overlay-gradient-carusel .kicker,
.overlay-gradient-carousel .kicker{
    color: rgba(255,255,255,.9);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

.overlay-gradient-carusel .byline,
.overlay-gradient-carousel .byline{
    color: rgba(255,255,255,.85);
}

/* Ұсақ адаптив: ұзынырақ тақырыптар үшін */
@media (max-width: 576px){
    .overlay-gradient-carusel, .overlay-gradient-carousel{ padding: .75rem; }
    .overlay-gradient-carusel .title, .overlay-gradient-carousel .title{
        font-size: clamp(1rem, 2.8vw, 1.25rem);
        line-height: 1.25;
    }
}