/* ============================================================ aktobenasledie.kz — мұра тізілімі эстетикасы ============================================================ */ :root{ --paper:#F4F0E8; --paper-2:#EBE5D8; --ink:#221D16; --ink-soft:#6A6052; --terr:#B4471F; /* қыш / терракота */ --terr-d:#943714; --steppe:#2C4A3E; /* дала көкжасылы */ --sand:#C7A36A; /* құм */ --line:#D9D0BF; --line-soft:#E4DCCD; --white:#FCFAF5; --sand-text:#8a6a2e; /* sand түсінің мәтінге қауіпсіз, қоюырақ нұсқасы (ашық фонда оқылым үшін) */ --surface-dark:#221D16; /* footer, статистика секциясы сияқты — темаға тәуелсіз, әрдайым қараңғы беттер */ --surface-dark-text:#FCFAF5; /* сол беттердегі мәтін — темаға тәуелсіз, әрдайым ашық */ --shadow:0 1px 2px rgba(34,29,22,.05),0 8px 30px -16px rgba(34,29,22,.22); --r:5px; --maxw:1180px; --gut:clamp(20px,5vw,56px); --serif:"Noto Serif",Georgia,"Times New Roman",serif; --sans:"Golos Text",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } /* ============================================================ Қараңғы нұсқа (dark mode) — сол айнымалылар қайта анықталады, сондықтан оларды қолданатын барлық компонент (карточка, dropdown, мәзір, кесте) автоматты түрде бейімделеді, жеке-жеке түзетусіз. Акцент түстер (--terr/--steppe/--sand) сайттың өз "қараңғы статистика" секциясында бұрыннан қолданылған жарық нұсқалармен бірдей — дәйектілік үшін. ============================================================ */ html[data-theme="dark"]{ --paper:#1B1712; --paper-2:#241F17; --ink:#F1EBE1; --ink-soft:#B7AC9A; --terr:#E0784C; --terr-d:#EC9370; --steppe:#6FA38C; --sand:#D8B87F; --line:#3B342A; --line-soft:#332D23; --white:#241F17; --sand-text:#D8B87F; --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 30px -16px rgba(0,0,0,.65); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;letter-spacing:-.01em} p{margin:0 0 1em} :focus-visible{outline:2.5px solid var(--terr);outline-offset:3px;border-radius:2px} .container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} /* ---- Eyebrow / kicker (мұрағаттық моно-белгі) ---- */ .kicker{ font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--terr);margin:0 0 14px; display:inline-flex;align-items:center;gap:10px; } .kicker::before{content:"";width:24px;height:1px;background:var(--terr);display:inline-block} .kicker--light{color:var(--sand)} .kicker--light::before{background:var(--sand)} .section{padding-block:clamp(48px,8vw,104px)} .section-title{font-size:clamp(26px,3.6vw,40px)} .section-title--light{color:var(--surface-dark-text)} .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600; font-size:15px;padding:13px 24px;border-radius:var(--r);border:1.5px solid transparent; cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease; } .btn--sm{padding:9px 18px;font-size:14px} .btn--primary{background:var(--terr);color:#fff} .btn--primary:hover{background:var(--terr-d);transform:translateY(-1px)} .btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent} .btn--ghost:hover{background:var(--ink);color:var(--paper)} .hero .btn--ghost{color:var(--surface-dark-text);border-color:rgba(255,255,255,.55)} .hero .btn--ghost:hover{background:var(--surface-dark-text);color:var(--surface-dark)} .link-arrow{font-weight:600;color:var(--terr);font-size:15px;white-space:nowrap} .link-arrow:hover{color:var(--terr-d)} .link-muted{color:var(--ink-soft);font-size:14px} .link-muted:hover{color:var(--terr)} .muted{color:var(--ink-soft)} /* ---- Demo banner ---- */ .demo-banner{ background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:11.5px; letter-spacing:.04em;text-align:center;padding:7px 16px; } /* ---- Header ---- */ .site-header{position:sticky;top:0;z-index:50;background:rgba(244,240,232,.9); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} html[data-theme="dark"] .site-header{background:rgba(27,23,18,.9)} .header-topbar{background:var(--paper-2);border-bottom:1px solid var(--line-soft)} .header-topbar-inner{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-height:38px;flex-wrap:wrap;row-gap:6px;padding-block:6px} .oldsite-link{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-soft); padding-bottom:1px;border-bottom:1px dashed var(--line)} .oldsite-link:hover{color:var(--terr);border-bottom-color:var(--terr)} .header-inner{display:flex;align-items:center;gap:24px;height:68px} .brand{display:flex;align-items:center;gap:11px;color:var(--ink);margin-right:auto} .brand-mark{color:var(--terr);display:grid;place-items:center} .brand-logo{height:34px;width:auto;display:block;flex:none} .brand-text{font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:-.01em} .main-nav{display:flex;align-items:center} .mobile-nav-scroll{display:flex;align-items:center;gap:28px} .mobile-nav-bottom{display:none} .oldsite-link--mobile{display:none} .main-nav a{font-size:15px;font-weight:500;color:var(--ink-soft);padding:4px 0;position:relative} .main-nav a:hover{color:var(--ink)} .main-nav a.active{color:var(--ink)} .main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--terr)} /* ---- Мәзірдегі ашылмалы бөлім (Тарих) —
/, JS-сіз ---- */ .nav-drop{position:relative} .nav-drop summary{font-size:15px;font-weight:500;color:var(--ink-soft);padding:4px 0;cursor:pointer; list-style:none;display:flex;align-items:center;gap:5px} .nav-drop summary::-webkit-details-marker{display:none} .nav-drop-caret{flex:none;transition:transform .18s ease} .nav-drop[open] .nav-drop-caret{transform:rotate(180deg)} .nav-drop summary:hover{color:var(--ink)} .nav-drop.active summary{color:var(--ink)} .nav-drop.active summary::before{content:"";position:absolute;left:0;right:14px;bottom:-6px;height:2px;background:var(--terr)} .nav-drop-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:280px; background:var(--white);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow); padding:8px;display:flex;flex-direction:column;gap:2px} .nav-drop-menu a{display:block;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--ink-soft);white-space:normal;line-height:1.4} .nav-drop-menu a:hover{background:var(--paper-2);color:var(--ink)} /* ---- Тіл ауыстырғыш — Globe иконкасы арқылы ашылатын dropdown ---- */ .lang-drop{position:relative;display:flex;align-items:center} .lang-drop summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none; color:var(--ink-soft);padding:4px 2px;transition:color .15s} .lang-drop summary::-webkit-details-marker{display:none} .lang-drop summary:hover,.lang-drop[open] summary{color:var(--ink)} .lang-drop-globe{flex:none} .lang-drop-current{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft)} .header-topbar .lang-drop-globe,.header-topbar .social-icon svg{width:17px;height:17px} .header-topbar .social-icons{gap:14px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .lang-drop-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:150px; background:var(--white);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow); padding:6px;display:flex;flex-direction:column;gap:2px} .lang-drop-opt{display:block;padding:8px 11px;border-radius:6px;font-family:var(--sans); font-size:14px;color:var(--ink-soft)} .lang-drop-opt:hover{background:var(--paper-2);color:var(--ink)} .lang-drop-opt.is-current{color:var(--ink);font-weight:600} /* ---- Жіңішке вертикаль бөлгіш ---- */ .header-divider{width:1px;height:22px;background:var(--line)} /* ---- Қараңғы/ашық режим ауыстырғышы ---- */ .theme-toggle{display:flex;align-items:center;justify-content:center;background:none;border:0; cursor:pointer;color:var(--ink-soft);padding:4px;transition:color .15s} .theme-toggle:hover{color:var(--terr)} .theme-icon{display:none} html:not([data-theme="dark"]) .theme-icon--moon{display:block} html[data-theme="dark"] .theme-icon--sun{display:block} .theme-toggle--mobile{display:none} /* ---- Әлеуметтік желі иконкалары — монохромды қыш түс ---- */ .social-icons{display:flex;align-items:center;gap:18px} .social-icon{display:flex;color:var(--terr)} .social-icon:hover{color:var(--terr-d)} .social-icon svg{display:block} .social-icons--mobile,.lang-drop--mobile{display:none} .lang-drop summary:focus-visible, .lang-drop-opt:focus-visible, .social-icon:focus-visible{outline:2px solid var(--terr);outline-offset:2px;border-radius:4px} .lang-switch--mobile{display:none} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px; background:none;border:1px solid var(--line);border-radius:var(--r);cursor:pointer} .nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);margin-inline:auto;transition:.2s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---- Hero ---- */ .hero{position:relative;color:var(--surface-dark-text);overflow:hidden;background:var(--steppe)} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg .ph{width:100%;height:100%} .hero-img{width:100%;height:100%;object-fit:cover;object-position:center 42%} .hero-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(18,26,22,.82) 0%,rgba(18,26,22,.55) 42%,rgba(18,26,22,.22) 100%), linear-gradient(180deg,rgba(18,26,22,.15),rgba(18,26,22,.6))} .hero-inner{position:relative;z-index:1;padding-block:clamp(70px,12vw,130px);max-width:860px} /* Жоғарғы шағын мәтін — мекеменің толық атауы */ .hero-kicker{ font-family:var(--sans); font-size:clamp(14px,1.3vw,16px);font-weight:500;line-height:1.5; letter-spacing:0;text-transform:none;color:var(--sand); max-width:700px;margin:0 0 18px; } .hero-kicker::before{background:var(--sand)} .hero-kicker-break{display:none} @media (min-width:901px){ .hero-kicker-break{display:revert} } /* Негізгі тақырып. Бір экранға сыюы үшін өлшемі ықшамдалған әрі жол саны азайту үшін баған кеңірек. */ .hero-title{ font-family:var(--serif);font-weight:600; font-size:clamp(28px,3vw,46px);line-height:1.15;letter-spacing:-0.02em; color:#fff;max-width:820px;margin:0 0 18px; } /* Сипаттама */ .hero-lead{ font-family:var(--sans);font-weight:400; font-size:clamp(16px,1.3vw,18px);line-height:1.6; color:rgba(255,255,255,.85);max-width:600px;margin:0 0 28px; } .hero-actions{display:flex;gap:14px;flex-wrap:wrap} .hero-actions .btn{ font-family:var(--sans);font-weight:600; font-size:clamp(15px,1.1vw,16px);letter-spacing:0;text-transform:none; border-radius:7px;min-height:48px;padding-inline:26px; } /* Hero — планшет */ @media (max-width:900px){ .hero-title{font-size:clamp(26px,4vw,34px)} } /* Hero — мобильді */ @media (max-width:640px){ .hero-inner{padding-block:clamp(100px,18vw,140px)} .hero-kicker{font-size:13.5px;max-width:100%} .hero-title{font-size:clamp(24px,7vw,30px);letter-spacing:-0.015em} .hero-lead{font-size:15.5px;max-width:100%} .hero-actions{flex-direction:column} .hero-actions .btn{width:100%;justify-content:center} } /* ---- Two column ---- */ .two-col{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,5vw,72px)} .two-col-side .section-title{margin-top:8px} .lead-text{font-size:clamp(19px,2.4vw,24px);font-family:var(--serif);line-height:1.45;color:var(--ink);margin-bottom:24px} /* ---- Directions ---- */ /* ---- Сандық көрсеткіштер (инфографика) ---- */ .section--stats{background:var(--paper-2);border-block:1px solid var(--line)} .stats-head{margin-bottom:34px} .stats-asof{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .stat-bar{display:flex;height:18px;border-radius:100px;overflow:hidden;background:var(--line);margin-bottom:18px} .stat-bar-seg{height:100%;min-width:5px} .stat-bar-seg.seg--terr{background:var(--terr)} .stat-bar-seg.seg--steppe{background:var(--steppe)} .stat-bar-seg.seg--sand{background:var(--sand)} .stat-bar-total{display:flex;align-items:baseline;gap:14px;margin-bottom:42px;flex-wrap:wrap} .stat-bar-total-num{font-family:var(--serif);font-size:clamp(34px,5vw,52px);line-height:1;color:var(--ink)} .stat-bar-total-label{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .stat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .stat-tile{background:var(--white);padding:28px 26px 30px;display:flex;flex-direction:column;gap:10px;position:relative} .stat-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px} .stat-tile.tile--terr::before{background:var(--terr)} .stat-tile.tile--steppe::before{background:var(--steppe)} .stat-tile.tile--sand::before{background:var(--sand)} .stat-tile-top{display:flex;align-items:baseline;gap:12px} .stat-tile-num{font-family:var(--serif);font-size:clamp(40px,5vw,58px);line-height:1} .stat-tile.tile--terr .stat-tile-num{color:var(--terr)} .stat-tile.tile--steppe .stat-tile-num{color:var(--steppe)} .stat-tile.tile--sand .stat-tile-num{color:var(--sand-text)} .stat-tile-pct{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink-soft)} .stat-tile-label{font-size:14.5px;color:var(--ink-soft);line-height:1.45} @media (max-width:860px){.stat-tiles{grid-template-columns:1fr}} /* Инфографиканың қою нұсқасы (аймақ мұрасы орнында) */ .section--stats-dark{background:var(--surface-dark);color:var(--surface-dark-text);border-color:rgba(255,255,255,.1)} .section--stats-dark .stats-asof{color:rgba(244,240,232,.55)} .section--stats-dark .stat-bar{background:rgba(255,255,255,.13)} .section--stats-dark .stat-bar-total-num{color:var(--surface-dark-text)} .section--stats-dark .stat-bar-total-label{color:rgba(244,240,232,.55)} .section--stats-dark .stat-tiles{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)} .section--stats-dark .stat-tile{background:#2a2317} .section--stats-dark .stat-tile-label{color:rgba(244,240,232,.62)} .section--stats-dark .stat-tile-pct{color:rgba(244,240,232,.5)} .section--stats-dark .stat-tile.tile--terr .stat-tile-num{color:#e0784c} .section--stats-dark .stat-tile.tile--steppe .stat-tile-num{color:#6fa38c} .section--stats-dark .stat-tile.tile--sand .stat-tile-num{color:#d8b87f} /* ---- Біз не істейміз (2/3) + Қызмет бағыттары (1/3, тік тізім) — біріктірілген секция ---- */ .section--combined{padding-block:clamp(40px,6vw,80px)} .combined-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(32px,5vw,68px);align-items:start} .combined-about .section-title{margin-top:8px} .combined-dirs{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,40px)} .dirs-list{display:flex;flex-direction:column;margin-top:20px} .dir-item{display:flex;gap:14px;padding-block:16px;border-top:1px solid var(--line)} .dir-item:first-child{border-top:0;padding-top:0} .dir-num{flex:none;padding-top:2px;font-family:var(--mono);font-size:12.5px;color:var(--terr);letter-spacing:.08em} .dir-title{font-size:15.5px;margin:0 0 4px} .dir-text{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.5} @media (max-width:640px){ .combined-grid{grid-template-columns:1fr;gap:32px} .combined-dirs{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:28px} } /* ---- Region (dark) ---- */ .section--region{background:var(--ink);color:var(--white)} .region-lead{font-size:clamp(17px,2.2vw,20px);color:rgba(255,255,255,.82);max-width:620px;margin-bottom:40px} .stats{display:flex;gap:clamp(28px,6vw,72px);flex-wrap:wrap} .stat{display:flex;flex-direction:column;gap:6px} .stat-num{font-family:var(--serif);font-size:clamp(40px,6vw,64px);line-height:1;color:var(--sand)} .stat-label{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)} /* ---- Monument grid + cards ---- */ .mon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} /* Карта режимінде карточкалар толық жасырылуы үшін (display:grid әдепкі [hidden]-ды жеңбейтіндей) */ .mon-grid[hidden],.catalog-map[hidden],.map-legend[hidden]{display:none !important} .mon-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line); border-radius:var(--r);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease} .mon-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .mon-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)} .mon-card-media .ph{width:100%;height:100%;transition:transform .4s ease} .mon-card:hover .mon-card-media .ph{transform:scale(1.04)} .mon-card-status{position:absolute;bottom:12px;left:12px;background:var(--white)!important; box-shadow:0 2px 8px rgba(0,0,0,.25)} .mon-card-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:7px;flex:1} .mon-card-code{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;color:var(--terr)} .mon-card-title{font-size:21px;line-height:1.2} .mon-card-loc{font-size:14.5px;color:var(--ink-soft);margin:0} .mon-card-meta{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft); margin-top:auto;padding-top:12px;display:flex;gap:8px;text-transform:uppercase} .mon-card-meta .dot{color:var(--line)} /* ---- Badges ---- */ .badge{display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.05em; padding:4px 10px;border-radius:100px;background:var(--paper-2);color:var(--ink-soft); border:1px solid var(--line);white-space:nowrap} .badge--terr{background:rgba(180,71,31,.12);color:var(--terr);border-color:rgba(180,71,31,.3)} .badge--steppe{background:rgba(44,74,62,.12);color:var(--steppe);border-color:rgba(44,74,62,.3)} .badge--sand{background:rgba(199,163,106,.18);color:var(--sand-text);border-color:rgba(199,163,106,.45)} /* ---- News ---- */ .news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .news-grid--list{grid-template-columns:1fr} .news-card{display:grid;grid-template-columns:280px 1fr;background:var(--white); border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .18s ease} .news-grid:not(.news-grid--list) .news-card{grid-template-columns:1fr;grid-template-rows:auto 1fr} .news-card:hover{box-shadow:var(--shadow)} .news-card-media{aspect-ratio:16/9;background:var(--paper-2)} .news-card-media .ph{width:100%;height:100%} .news-card-body{padding:24px 26px;display:flex;flex-direction:column;gap:9px} .news-date{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--terr)} .news-card-title{font-size:22px;line-height:1.25} .news-card-excerpt{font-size:15px;color:var(--ink-soft);margin:0} /* ---- Басты бет: Жаңалықтар (2/3) + Жиі қаралғандар (1/3) ---- */ .section--hub{padding-block:clamp(36px,5.5vw,72px)} .hub-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(32px,5vw,64px);align-items:start} .hub-heading{margin-bottom:20px} .news-list{display:flex;flex-direction:column;margin-top:8px} .news-row{display:flex;align-items:center;gap:16px;padding-block:16px;border-top:1px solid var(--line)} .news-row:first-child{border-top:0;padding-top:0} .news-row-thumb{flex:none;width:64px;height:64px;border-radius:var(--r);overflow:hidden;background:var(--paper-2)} .news-row-thumb img,.news-row-thumb .ph{width:100%;height:100%;object-fit:cover;display:block} .news-row-body{display:flex;flex-direction:column;gap:4px;min-width:0} .news-row-date{font-family:var(--sans);font-size:12px;letter-spacing:.05em;color:var(--terr)} .news-row-title{font-size:16px;line-height:1.35;color:var(--ink); overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .news-more-btn{margin-top:22px} /* Уақыт кезеңі — ықшам dropdown/аккордеон */ .trend-dropdown{position:relative;display:inline-block;margin-bottom:20px} .trend-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;min-width:150px;max-width:170px;height:38px;padding:0 12px; font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink); background:var(--paper-2);border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:border-color .15s} .trend-dd-btn:hover{border-color:var(--ink-soft)} .trend-dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trend-dd-chevron{flex:none;color:var(--ink-soft);transition:transform .18s ease} .trend-dropdown.is-open .trend-dd-chevron{transform:rotate(180deg)} .trend-dd-list{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:170px; margin:0;padding:6px;list-style:none; background:var(--white);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow)} .trend-dd-list[hidden]{display:none} .trend-dd-opt{display:block;padding:8px 11px;border-radius:6px;font-family:var(--sans); font-size:13.5px;color:var(--ink-soft);white-space:nowrap} .trend-dd-opt:hover{background:var(--paper-2);color:var(--ink)} .trend-dd-opt.is-active{background:var(--ink);color:var(--paper)} .trend-list{display:flex;flex-direction:column} .trend-item{display:flex;align-items:center;gap:12px;padding-block:16px;border-top:1px solid var(--line)} .trend-item:first-child{border-top:0;padding-top:0} .trend-rank{flex:none;font-family:var(--mono);font-size:13px;color:var(--terr);letter-spacing:.05em} .trend-thumb{flex:none;width:52px;height:52px;border-radius:var(--r);overflow:hidden;background:var(--paper-2)} .trend-thumb img,.trend-thumb .ph{width:100%;height:100%;object-fit:cover;display:block} .trend-body{display:flex;flex-direction:column;gap:6px;min-width:0} .trend-title{font-size:14.5px;line-height:1.3;color:var(--ink);font-weight:600; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .trend-meta{align-self:flex-start;font-size:10.5px} @media (max-width:640px){ .hub-grid{grid-template-columns:1fr;gap:36px} } /* ---- Page head ---- */ .page-head{padding-top:clamp(40px,7vw,80px);padding-bottom:8px;border-bottom:1px solid var(--line)} .page-title{font-size:clamp(30px,4.5vw,52px);margin:6px 0 0} .page-title--org{font-size:clamp(22px,2.6vw,32px);line-height:1.3;max-width:900px} .about-lead-wrap{max-width:760px} .history-article-wrap{max-width:760px} .history-gallery{margin-bottom:32px} /* ---- Мекеме туралы: қызмет бағыттары (көлденең карточкалар) ---- */ .section--about-dirs{background:var(--paper-2);border-block:1px solid var(--line)} .about-dirs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:28px} .about-dir-card{background:var(--paper-2);padding:26px 24px 30px} .about-dir-num{font-family:var(--mono);font-size:13px;color:var(--terr);letter-spacing:.1em} .about-dir-title{font-size:19px;margin:12px 0 8px} .about-dir-text{font-size:14.5px;color:var(--ink-soft);margin:0;line-height:1.6} @media (max-width:860px){.about-dirs-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.about-dirs-grid{grid-template-columns:1fr}} /* ---- Мекеме туралы: байланыс (мәзірден алынған соң осында біріктірілген) ---- */ .about-contact-layout{margin-top:28px} .about-est{margin-top:24px} .about-est-year{display:block;font-family:var(--serif);font-size:clamp(46px,7vw,74px);line-height:1;color:var(--terr)} .about-est-label{display:block;margin-top:10px;font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)} /* About бетінде бөлімдер аралығын тарылту (контент аз) */ body[data-section="about"] .section{padding-block:clamp(34px,4.5vw,56px)} body[data-section="about"] .page-head{padding-bottom:clamp(24px,3.5vw,40px)} .page-lead{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:640px;margin:16px 0 28px} /* ---- Catalog ---- */ .section--catalog{padding-top:clamp(22px,3vw,38px)} .filters{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-top:0} .filters-acc summary{list-style:none;cursor:default} .filters-acc summary::-webkit-details-marker{display:none} .filters-acc-head{display:none;align-items:center;justify-content:space-between} .filters-acc-chevron{flex:none;color:var(--ink-soft);transition:transform .18s ease} .filters-acc[open] .filters-acc-chevron{transform:rotate(180deg)} .field{width:100%;font-family:var(--sans);font-size:15px;padding:11px 13px;background:var(--paper); border:1px solid var(--line);border-radius:var(--r);color:var(--ink)} .field:focus{outline:none;border-color:var(--terr);background:var(--white)} .filters-search{margin-bottom:16px} .filters-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .filter-field{display:flex;flex-direction:column;gap:7px} .filter-label{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)} .filters-actions{display:flex;align-items:center;gap:18px;margin-top:18px} .catalog-bar{display:flex;justify-content:space-between;align-items:center;margin:28px 0 24px;flex-wrap:wrap;gap:14px} .result-count{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--ink-soft)} .result-count strong{color:var(--ink)} .view-toggle{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .view-toggle button{font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase; padding:8px 16px;background:var(--white);border:none;cursor:pointer;color:var(--ink-soft)} .view-toggle button.active{background:var(--ink);color:var(--paper)} .catalog-grid{margin-top:4px} .map-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:14px; font-family:var(--sans);font-size:12.5px;color:var(--ink-soft)} .map-legend-title{text-transform:uppercase;letter-spacing:.04em;font-weight:600} .map-legend-item{display:inline-flex;align-items:center;gap:6px} .map-legend-item i{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25);flex:0 0 auto} .catalog-map{height:560px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} /* Картадағы шағын ескерткіш карточкасы (маркер popup) */ .map-card-popup .leaflet-popup-content-wrapper{border-radius:12px;padding:0;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.22)} .map-card-popup .leaflet-popup-content{margin:0;width:auto !important} .map-card{position:relative;display:flex;align-items:stretch;gap:0;text-decoration:none;color:var(--ink);width:236px} .map-card:hover{text-decoration:none} .map-card-img{flex:0 0 84px;width:84px;align-self:stretch;background-size:cover;background-position:center;background-color:var(--paper2)} .map-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:10px 12px} .map-card-name{font-family:var(--serif,serif);font-weight:700;font-size:14.5px;line-height:1.25;color:var(--ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .map-card-cat{font-size:11.5px;color:var(--steppe,#6A6052)} .map-card-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--steppe,#6A6052);margin-top:1px} .map-card-status i{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .map-card::after{content:"→";position:absolute;right:8px;bottom:6px;color:var(--terr);font-weight:700;opacity:.7} .empty-state{text-align:center;padding:64px 20px;border:1px dashed var(--line);border-radius:var(--r);background:var(--white)} .empty-state h3{font-size:24px;margin-bottom:8px} .empty-state p{color:var(--ink-soft);margin-bottom:20px} /* ---- Monument page ---- */ .monument{padding-top:clamp(28px,5vw,52px)} .breadcrumb{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--ink-soft); display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} .breadcrumb a:hover{color:var(--terr)} .breadcrumb .current{color:var(--ink)} .mon-head-code{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--terr);text-transform:uppercase} .mon-head-title{font-size:clamp(30px,5vw,54px);margin:12px 0 8px} .mon-head-loc{font-size:18px;color:var(--ink-soft);margin-bottom:18px} .badges{display:flex;gap:9px;flex-wrap:wrap} .mon-hero{margin:36px 0 8px} .mon-hero .ph{width:100%;aspect-ratio:16/9;border-radius:var(--r)} .mon-layout{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,5vw,64px);padding-top:48px;align-items:start} .mon-block{margin-bottom:48px} .block-title{font-size:24px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--line)} .mon-summary{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ink);margin-bottom:18px} .mon-content p{color:var(--ink)} .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .gallery-item{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)} .gallery-item .ph{aspect-ratio:4/3;width:100%} .video-embed .ph,.mon-map,.catalog-map{border-radius:var(--r)} .video-embed .ph{aspect-ratio:16/9;width:100%;border:1px solid var(--line)} .audio-player{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line); border-radius:var(--r);padding:16px 20px} .audio-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--terr);color:#fff; font-size:15px;cursor:pointer;flex:none} .audio-track{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden} .audio-bar{display:block;width:32%;height:100%;background:var(--terr)} .audio-time{font-family:var(--mono);font-size:13px;color:var(--ink-soft)} .note{font-size:13px;color:var(--ink-soft);margin-top:10px} .mon-map{height:380px;border:1px solid var(--line);overflow:hidden;background:var(--paper-2)} /* Leaflet өз элементтеріне жоғары z-index береді (400–1000) — sticky header-ді (z-index:50) баспас үшін карта ішіндегі қабаттарды одан төмен ұстаймыз. */ .mon-map,.catalog-map{position:relative;z-index:0} .leaflet-pane,.leaflet-top,.leaflet-bottom{z-index:1 !important} .leaflet-control{z-index:2 !important} .map-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px; font-family:var(--sans);font-size:13px;color:var(--ink-soft);flex-wrap:wrap} /* Бағыт салу — карта қосымшасын таңдау мәзірі */ .route-picker{position:relative} .route-btn{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--terr)} .route-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--white); border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(34,29,22,.14); padding:6px;z-index:20} .route-menu[hidden]{display:none} .route-opt{display:block;padding:10px 12px;border-radius:7px;color:var(--ink);text-decoration:none; font-family:var(--sans);font-size:14px;white-space:nowrap} .route-opt:hover{background:var(--paper-2)} .route-opt--native{font-weight:600;border-bottom:1px solid var(--line);border-radius:7px 7px 0 0;margin-bottom:2px} @media (max-width:480px){ .route-picker{position:static} .route-menu{left:0;right:0;min-width:0} } .info-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:sticky;top:90px} .info-list{margin:0} .info-list>div{padding:13px 0;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:3px} .info-list>div:last-of-type{border-bottom:none} .info-list dt{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)} .info-list dd{margin:0;font-size:15.5px} .info-list .mono{font-family:var(--sans)} .info-list--lg>div{padding:16px 0} .back-link{display:inline-block;margin-top:18px} .section--related{background:var(--paper-2);border-top:1px solid var(--line)} /* ---- Legal ---- */ .doc-group{margin-bottom:44px} .doc-group-title{font-size:24px;margin-bottom:18px;color:var(--steppe)} .doc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .doc-row{display:flex;align-items:center;gap:18px;padding:18px 4px;border-bottom:1px solid var(--line)} .doc-icon{color:var(--terr);flex:none} .doc-info{flex:1;display:flex;flex-direction:column;gap:3px} .doc-title{font-size:16.5px;font-weight:500} .doc-date{font-family:var(--sans);font-size:12px;color:var(--ink-soft)} .doc-link{font-size:14px;font-weight:600;color:var(--terr);white-space:nowrap;display:flex;align-items:center;gap:8px} /* ---- Article ---- */ .article{padding-top:clamp(28px,5vw,52px);max-width:820px} .article-head{margin-bottom:24px} .article-title{font-size:clamp(28px,4.5vw,46px);margin-top:10px} .article-cover .ph{width:100%;aspect-ratio:16/9;border-radius:var(--r);margin-bottom:32px} .article-body{font-size:18px;line-height:1.7;color:var(--ink);margin-bottom:28px} /* ---- Contact ---- */ .contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start} .contact-info .mon-map{margin-top:24px} .form-row{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .form-row span{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)} .contact-form textarea{resize:vertical} .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .alert{padding:14px 18px;border-radius:var(--r);margin-bottom:20px;font-size:15px} .alert--ok{background:rgba(44,74,62,.1);color:var(--steppe);border:1px solid rgba(44,74,62,.3)} .alert--err{background:rgba(180,71,31,.1);color:var(--terr);border:1px solid rgba(180,71,31,.3)} /* ---- Error ---- */ .error-page{text-align:center;padding-block:clamp(60px,12vw,140px)} .error-code{font-family:var(--mono);font-size:15px;letter-spacing:.3em;color:var(--terr)} .error-page .page-title{margin:10px 0 8px} .error-page .page-lead{margin-inline:auto} /* ---- Publications ---- */ .pub-list{display:flex;flex-direction:column;gap:26px} .pub-card{display:grid;grid-template-columns:180px 1fr;gap:28px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;align-items:start} .pub-cover{display:block;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:var(--shadow)} .pub-cover img{width:100%;display:block} .pub-body{display:flex;flex-direction:column;gap:9px} .pub-title{font-size:22px;line-height:1.28} .pub-title a:hover{color:var(--terr)} .pub-authors{font-size:14.5px;color:var(--ink-soft);margin:0;line-height:1.5} .pub-meta{font-family:var(--sans);font-size:12px;color:var(--ink-soft);margin:0} .pub-desc{font-size:15px;color:var(--ink);margin:4px 0 8px;line-height:1.6; word-break:normal;overflow-wrap:normal;hyphens:none} .pub-card .btn{align-self:flex-start} .pub-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px} /* Сипаттама барлық экранда «Толығырақ» батырмасымен ашылады */ .pub-more{display:inline-flex} .pub-card .pub-details{display:none} .pub-card.is-expanded .pub-details{display:block;margin-top:6px} .pub-card.is-expanded .pub-authors{margin-bottom:6px} @media (max-width:620px){ .pub-card{grid-template-columns:110px 1fr;gap:18px;padding:18px} .pub-title{font-size:19px} } /* ---- Кітап оқырман (бет-суреттер) ---- */ .reader{display:flex;flex-direction:column;background:var(--surface-dark)} .reader-topbar{background:var(--paper-2);border-bottom:1px solid var(--line)} .reader-topbar-inner{display:flex;align-items:center;gap:16px;padding-block:12px} .reader-back{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--terr);white-space:nowrap} .reader-back:hover{color:var(--terr-d)} .reader-book-title{font-family:var(--serif);font-size:16px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .reader-tools{display:flex;gap:8px;flex-shrink:0} .reader-stage{position:relative;background:#1f1b14;height:clamp(460px,74vh,1000px);display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;user-select:none;-webkit-user-select:none;touch-action:pan-y} .reader-pages{display:flex;gap:8px;align-items:safe center;justify-content:safe center;width:100%;height:100%;margin:auto} .reader-img{max-height:calc(100% * var(--zoom,1));max-width:calc(100% * var(--zoom,1));width:auto;height:auto;object-fit:contain;display:block;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff;-webkit-user-drag:none;user-drag:none} .reader--spread .reader-img{max-width:calc((50% - 4px) * var(--zoom,1))} .reader-loading{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;color:rgba(255,255,255,.7);font-family:var(--sans);font-size:13px;letter-spacing:.06em;padding:0 20px;pointer-events:none} .reader-arrow{position:absolute;top:0;bottom:0;width:13%;min-width:54px;border:0;cursor:pointer;background:transparent;color:#fff;font-size:40px;line-height:1;opacity:0;transition:opacity .15s;z-index:4} .reader-arrow--prev{left:0} .reader-arrow--next{right:0} .reader-stage:hover .reader-arrow{opacity:.5} .reader-arrow:hover{opacity:1;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent)} .reader-arrow--next:hover{background:linear-gradient(270deg,rgba(0,0,0,.28),transparent)} .reader-toolbar{position:sticky;bottom:0;z-index:10;background:var(--surface-dark);color:var(--surface-dark-text);padding:11px 16px} .reader-toolbar-inner{display:flex;align-items:center;justify-content:center;gap:10px} .reader-btn{min-width:42px;height:42px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--surface-dark-text);border-radius:9px;font-size:17px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center} .reader-btn:hover{background:rgba(255,255,255,.15)} .reader-btn--mode.is-on{background:var(--terr);border-color:var(--terr)} .reader-sep{width:1px;height:26px;background:rgba(255,255,255,.18);margin:0 6px;flex-shrink:0} .reader-pageinfo{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:rgba(244,240,232,.82)} .reader-pageinput{width:64px;padding:9px 6px;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:7px;color:var(--surface-dark-text);font-family:var(--mono);font-size:14px} .reader.is-full{height:100vh} .reader.is-full .reader-topbar{display:none} .reader.is-full .reader-stage{height:auto;flex:1} .reader.is-full .reader-toolbar{position:absolute;left:0;right:0;bottom:0;transition:opacity .25s ease, transform .25s ease} .reader.is-full:not(.ui-visible) .reader-toolbar{opacity:0;transform:translateY(115%);pointer-events:none} .reader.is-full:not(.ui-visible){cursor:none} @media (max-width:768px){ #rSpread{display:none} .reader-arrow{display:none} .reader-book-title{font-size:14px} .reader-stage{align-items:flex-start;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:none;height:clamp(420px,68vh,900px)} .reader-img,.reader--spread .reader-img{max-width:calc(100% * var(--zoom,1));width:auto;max-height:none;height:auto} /* Зумделген кезде сурет таситын кеңістік алсын */ .reader-pages{min-width:100%;min-height:100%} /* Панельді ықшамдап, бір қатарға сыйдырамыз */ .reader-toolbar{padding:8px 10px} .reader-toolbar-inner{gap:6px;flex-wrap:nowrap} .reader-btn{min-width:40px;width:40px;height:40px;font-size:18px;border-radius:8px} .reader-sep{margin:0 2px} .reader-pageinfo{gap:4px;font-size:12px} .reader-pageinput{width:42px;padding:8px 2px;font-size:13px} .reader-of,#rTotal{font-size:12px} } @media (max-width: 380px){ .reader-btn{min-width:36px;width:36px;height:36px;font-size:16px} .reader-pageinput{width:38px} .reader-toolbar-inner{gap:4px} } /* ---- Footer ---- */ .site-footer{background:var(--surface-dark);color:var(--surface-dark-text);padding-top:clamp(48px,7vw,80px);margin-top:0} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px} .brand--footer{color:var(--surface-dark-text);margin-bottom:16px} .brand--footer .brand-mark{color:var(--sand)} .brand--footer .brand-logo{height:30px} .footer-org{font-size:14px;color:rgba(244,240,232,.65);margin-bottom:10px;line-height:1.5} .footer-text{font-size:14px;color:rgba(244,240,232,.55);margin:0;max-width:320px} .footer-head{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--sand);margin-bottom:16px;font-weight:500} .footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .footer-list a{font-size:14.5px;color:rgba(244,240,232,.78)} .footer-list a:hover{color:var(--surface-dark-text)} .footer-contact{margin-top:16px;font-style:normal;font-size:14px;color:rgba(244,240,232,.78);line-height:1.8;max-width:300px} .footer-contact a{color:rgba(244,240,232,.78)} .footer-contact a:hover{color:var(--surface-dark-text)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; padding-block:22px;border-top:1px solid rgba(244,240,232,.14); font-family:var(--sans);font-size:12px;color:rgba(244,240,232,.5);letter-spacing:.03em} /* ============================================================ Responsive ============================================================ */ @media (max-width:1000px){ .mon-grid{grid-template-columns:repeat(2,1fr)} .mon-layout{grid-template-columns:1fr} /* Мобильде факт-блок (мәртебе/мерзім/орналасу) мұқабаның астына көтеріледі */ .mon-layout .mon-aside{order:-1} .mon-layout .mon-content{order:0} .mon-aside{margin-bottom:8px} .info-card{position:static} .footer-grid{grid-template-columns:1fr 1fr} .footer-about{grid-column:1/-1} } @media (max-width:860px){ .filters-row{grid-template-columns:repeat(2,1fr)} .contact-layout{grid-template-columns:1fr} .news-card{grid-template-columns:1fr;grid-template-rows:auto 1fr} .two-col{grid-template-columns:1fr;gap:20px} } @media (max-width:900px){ body{font-size:16px} /* backdrop-filter мобильде fixed мәзірге контейнер блок жасайды — өшіреміз */ .site-header{background:var(--white);backdrop-filter:none} .nav-toggle{display:flex;position:relative;z-index:46} /* Логотип пен X мәзірдің үстінде қалуы керек */ .brand{position:relative;z-index:46} .header-topbar{display:none} .main-nav{position:fixed;inset:0;background:var(--white);display:flex;flex-direction:column; padding-top:88px;transform:translateX(100%);transition:transform .28s ease;z-index:45} .main-nav.open{transform:translateX(0)} /* Ортаңғы бөлік — тек осы аймақ айналдырылады, жоғарғы/төменгі бөлік қозғалмайды */ .mobile-nav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column; align-items:flex-start;gap:6px;padding:0 32px 24px} .main-nav a{font-size:25px;font-family:var(--serif);color:var(--ink);padding:11px 0;text-align:left} .main-nav a.oldsite-link--mobile{display:block;font-size:15px;font-family:var(--sans);color:var(--ink-soft); padding-top:6px;margin-top:8px;border-top:1px solid var(--line)} .main-nav a.active{color:var(--terr)} .main-nav a.active::after{display:none} .nav-drop{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch} .nav-drop summary{font-size:25px;font-family:var(--serif);color:var(--ink);padding:11px 0;gap:8px;justify-content:flex-start} .nav-drop-caret{width:16px;height:16px} .nav-drop.active summary::before{display:none} .nav-drop.active summary{color:var(--terr)} /* Ашық күй — бірден көрінетін визуалды акцент: түс + белгінің астындағы сызық (өзгеріссіз сақталды) */ .nav-drop[open] summary{color:var(--terr)} .nav-drop[open] .nav-drop-label{border-bottom:2px solid var(--terr);padding-bottom:1px} /* Ішкі тармақтар — негізгі мәзірден аздап оңға жылжытылған, кішірек, қою сұр түс */ .nav-drop-menu{position:static;box-shadow:none;border:0;background:none;padding:0 0 8px; align-items:stretch;align-self:stretch;min-width:0} .nav-drop-menu a{font-size:21px;font-family:var(--sans);text-align:left;color:var(--ink-soft); padding:4px 0 4px 20px;line-height:1.22} .nav-drop-menu a:hover{color:var(--ink)} /* Төменгі бөлік — тұрақты бекітілген (тіл/тема ауыстырғыш + әлеуметтік желілер бір қатарда) */ .mobile-nav-bottom{flex:none;display:flex;flex-direction:column;align-items:center; border-top:1px solid var(--line);padding:18px 32px calc(22px + env(safe-area-inset-bottom))} .mobile-bottom-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap} .lang-drop--mobile{display:flex;margin-bottom:0} .lang-drop--mobile summary{font-size:16px;padding:8px 4px} .lang-drop--mobile .lang-drop-menu{left:50%;right:auto;transform:translateX(-50%);bottom:calc(100% + 8px);top:auto} .lang-drop--mobile .lang-drop-opt{font-size:16px;text-align:center} .theme-toggle--mobile{display:flex} .social-icons--mobile{display:flex;margin-top:0;gap:16px} .social-icons--mobile .social-icon svg{width:20px;height:20px} } @media (max-width:560px){ .mon-grid,.news-grid{grid-template-columns:1fr} .filters-row{grid-template-columns:1fr} .filters-acc-head{display:flex;cursor:pointer;padding:2px 0 4px} .filters-acc-title{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)} .filters-acc:not([open]) .filters-search, .filters-acc:not([open]) .filters-row, .filters-acc:not([open]) .filters-actions{display:none} .filters-acc[open] .filters-search{margin-top:16px} .gallery{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .doc-row{flex-wrap:wrap} .doc-link{width:100%;padding-left:40px} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* Ескерткіш жүктелген медиасы (әкімші панелінен) */ .mon-card-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .mon-card:hover .mon-card-img{transform:scale(1.04)} .mon-hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);display:block} .gallery-item img{aspect-ratio:4/3;width:100%;height:100%;object-fit:cover;display:block} .audio-file{margin:10px 0} .audio-file audio{display:none} .audio-title{font-weight:600;margin:0 0 4px} /* Басылым сипаттамасының абзацтары */ .pub-desc p{margin:0 0 8px} .pub-desc p:last-child{margin-bottom:0} /* Галерея — карусель */ .gallery-carousel{position:relative} .gallery-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:4px;-webkit-overflow-scrolling:touch} .gallery-track::-webkit-scrollbar{height:6px} .gallery-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px} .gallery-carousel .gallery-item{flex:0 0 clamp(220px,42%,300px);scroll-snap-align:start;margin:0} .gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.1)} .gal-prev{left:-8px}.gal-next{right:-8px} .gal-nav:hover{background:var(--paper-2)} @media(max-width:640px){.gal-nav{display:none}} /* Видео ендірмесі */ .video-embed iframe,.video-embed video{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);display:block;background:#000} /* Мәртебесі жоқ белгісі */ .badge--muted{background:var(--paper-2);color:var(--ink)} /* Аудиогид тіл белгісі */ .audio-lang{display:inline-block;background:var(--paper-2);color:var(--ink);font-size:12px;font-weight:600;padding:2px 8px;border-radius:100px;margin-right:4px} /* === Ескерткіш сипаттамасы (бай мәтін) === */ .mon-richtext{line-height:1.85;color:var(--ink)} .mon-richtext p{margin:0 0 1em} .mon-richtext h2{font-family:var(--serif);font-size:1.5rem;margin:1.6em 0 .5em;color:var(--ink)} .mon-richtext h3{font-family:var(--serif);font-size:1.2rem;margin:1.3em 0 .4em;color:var(--ink)} .mon-richtext ul,.mon-richtext ol{margin:0 0 1em 1.4em;padding:0} .mon-richtext li{margin:.3em 0} .mon-richtext blockquote{border-left:3px solid var(--sand);margin:1.2em 0;padding:.4em 1.2em;color:var(--steppe);font-style:italic} .mon-richtext a{color:var(--terr);text-decoration:underline} .mon-richtext strong{font-weight:700} .mon-richtext img{max-width:100%;height:auto;border-radius:var(--r);margin:1.2em 0;display:block} .mon-richtext table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:.96em} .mon-richtext th,.mon-richtext td{border:1px solid var(--sand);padding:.55em .8em;text-align:left;vertical-align:top} .mon-richtext th{background:rgba(0,0,0,.03);font-weight:700} .mon-richtext table caption{caption-side:top;font-size:.9em;color:var(--steppe);margin-bottom:.4em} @media (max-width:640px){ .mon-richtext table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap} } /* === Аударылмаған тіл ескертуі === */ .mon-untranslated{max-width:640px;margin:48px auto 64px;text-align:center;padding:36px 28px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)} .mon-untranslated h1{font-family:var(--serif);font-size:clamp(22px,3vw,28px);margin:0 0 12px;color:var(--ink)} .mon-untranslated-msg{color:var(--steppe);font-size:17px;margin:0 0 20px} .mon-untranslated-langs{margin:0 0 24px;color:var(--ink)} .mon-untranslated-langs .btn{margin:0 4px} /* Сипаттамадағы суреттер */ .mon-richtext img{max-width:100%;height:auto;border-radius:8px;margin:10px 0} /* Жаңалықтың жүктелген мұқаба суреті */ .news-card-media img{width:100%;height:100%;object-fit:cover;display:block} .article-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);margin-bottom:32px;display:block} /* Минималды аудио ойнатқыш (файл атауы/жүйелік меню жоқ — тек play/pause + тайминг) */ .audio-player{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:100px;padding:8px 16px} .audio-play{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--terr);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} .audio-play:hover{filter:brightness(.95)} .audio-seek{flex:1;height:4px;accent-color:var(--terr);cursor:pointer} .audio-time{flex:0 0 auto;font-size:12.5px;color:var(--steppe);font-variant-numeric:tabular-nums;white-space:nowrap} /* Галерея сурет батырмасы (бұрын , енді lightbox ашатын