:root{ --navy:#132f57; --navy-deep:#0b1e3d; --navy-soft:#20477e; --accent:#1d6fb8; /* zamonaviy ko'k urg'u */ --accent-soft:#e8f1fa; --gold:#c8952f; --gold-soft:#e0b968; --ink:#17202e; --gray:#616b7a; --article-link-unread:#1a0dab; --article-link-read:#681da8; --line:#e5e9f0; --bg:#ffffff; --bg-alt:#f4f6fa; --bg-cool:#eef2f8; --maxw:1260px; --font-scale:1; } /* MAXSUS IMKONIYATLAR — rang sxemalari (accessibility.js data-theme orqali ga qo'yadi). Sayt butun palitrasi shu CSS o'zgaruvchilar orqali ishlagani uchun faqat ularni qayta belgilash bilan butun sayt qayta ranglanadi. */ :root[data-theme="contrast"]{ --navy:#000000; --navy-deep:#000000; --navy-soft:#1a1a1a; --accent:#ffff00; --accent-soft:#333300; --gold:#ffff00; --gold-soft:#ffff66; --ink:#ffffff; --gray:#dcdcdc; --article-link-unread:#ffff00; --article-link-read:#00ffff; --line:#444444; --bg:#000000; --bg-alt:#111111; --bg-cool:#111111; } :root[data-theme="blue-yellow"]{ --navy:#0b2a6b; --navy-deep:#04173f; --navy-soft:#123a8c; --accent:#ffd400; --accent-soft:#fff6cc; --gold:#ffd400; --gold-soft:#ffe873; --ink:#0b2a6b; --gray:#3b4a6b; --article-link-unread:#0b2a6b; --article-link-read:#5b2c83; --line:#c9d4e6; --bg:#ffffff; --bg-alt:#eaf0ff; --bg-cool:#dbe6ff; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;zoom:var(--font-scale)} body{ font-family:'Georgia','Times New Roman',serif; color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; position:relative; isolation:isolate; } /* Ommaviy sahifalardagi IIV emblemasi — kontent aylantirilganda joyida qoladigan, o'qishga xalaqit bermaydigan dekorativ suv belgisi. */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:url("../images/iiv-emblem.png"); background-repeat:no-repeat; background-position:center; background-size:clamp(280px,58vw,705px) auto; opacity:.045; } :root[data-theme="contrast"] body::before, :root[data-theme="blue-yellow"] body::before{display:none} @media print{body::before{display:none}} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} .sans{font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif} .visually-hidden{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important; margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important; white-space:nowrap!important;border:0!important; } /* ===== TOP BAR ===== */ .topbar{background:var(--navy-deep);color:#c9d4e6;font-size:12.5px} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px} .topbar .date{font-family:'Segoe UI',Arial,sans-serif;letter-spacing:.2px;display:flex;align-items:center;gap:10px} /* Valyuta kurslari — sana bilan bir qatorda, badge/ramkasiz oddiy matn (USD/EUR/RUB currency_rotator.js orqali navbat bilan almashadi, bir vaqtda bittasi ko'rinadi). */ .currency-rotator{ position:relative; display:inline-block; min-width:150px; height:1.2em; vertical-align:middle; color:var(--gold-soft); font-weight:600; font-size:12px; } .currency-item{ position:absolute; left:0;top:0; white-space:nowrap; opacity:0; transition:opacity .5s ease; } .currency-item.active{opacity:1} .topbar .tools{display:flex;align-items:center;gap:18px;font-family:'Segoe UI',Arial,sans-serif} .socials-top{display:flex;align-items:center;gap:12px;padding-right:14px;border-right:1px solid rgba(255,255,255,.15)} .socials-top a{color:#9fb0cc;display:flex;transition:.15s} .socials-top a:hover{color:#fff} .langs{display:flex;gap:2px} .langs button{ background:transparent;border:none;color:#9fb0cc;cursor:pointer; font-size:12px;padding:3px 7px;border-radius:3px;font-family:inherit;transition:.15s; } .langs button:hover{color:#fff} .langs button.active{background:var(--gold);color:var(--navy-deep);font-weight:600} .topbar .admin{color:#9fb0cc;display:flex;align-items:center;gap:5px;cursor:pointer} .topbar .admin:hover{color:#fff} /* MAXSUS IMKONIYATLAR paneli */ .a11y{position:relative} .a11y-toggle{ list-style:none;cursor:pointer;color:#9fb0cc;font-size:12px; padding:3px 7px;border-radius:3px;transition:.15s; } .a11y-toggle::-webkit-details-marker{display:none} .a11y-toggle::marker{content:""} .a11y-toggle:hover{color:#fff} .a11y[open] .a11y-toggle{color:#fff} .a11y-panel{ position:absolute;top:calc(100% + 10px);right:0;z-index:100; background:var(--bg);color:var(--ink);border:1px solid var(--line); border-radius:8px;box-shadow:0 12px 30px rgba(9,22,45,.3); padding:16px;min-width:220px;max-width:calc(100vw - 40px); } .a11y-group{margin-bottom:14px} .a11y-group:last-child{margin-bottom:0} .a11y-label{ display:block;font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.5px;color:var(--gray);margin-bottom:8px; } .a11y-row{display:flex;gap:8px} .a11y-theme, .a11y-font{ font-family:'Segoe UI',Arial,sans-serif;font-size:13px;font-weight:600; padding:7px 10px;border:1px solid var(--line);border-radius:6px; background:var(--bg);color:var(--navy);cursor:pointer;transition:.15s; } .a11y-theme:hover, .a11y-font:hover{background:var(--bg-alt)} .a11y-theme[data-theme="contrast"]{background:#000;color:#fff;border-color:#000} .a11y-theme[data-theme="blue-yellow"]{background:#0b2a6b;color:#ffd400;border-color:#0b2a6b} .a11y-font{min-width:38px;text-align:center} /* ===== MASTHEAD ===== */ .masthead{background:var(--navy);color:#fff;border-bottom:3px solid var(--gold)} .masthead .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 20px} .brand{display:flex;align-items:center;gap:16px} .brand > a{display:block;flex-shrink:0} .logo-img{ display:block; height:56px; width:auto; max-width:240px; object-fit:contain; flex-shrink:0; } .brand-txt{border-left:2px solid rgba(255,255,255,.25);padding-left:16px} .brand-txt .sub1{font-family:'Segoe UI',Arial,sans-serif;font-size:13px;letter-spacing:3px;color:var(--gold-soft);font-weight:600} .brand-txt .sub2{font-family:'Segoe UI',Arial,sans-serif;font-size:11.5px;color:#c9d4e6;margin-top:3px;max-width:230px;line-height:1.4} .search-btn{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer; display:grid;place-items:center;transition:.15s; } .search-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)} .search-form-top{display:flex;align-items:center;flex-shrink:0} .search-form-top input{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-right:none; color:#fff;font-family:'Segoe UI',Arial,sans-serif;font-size:14px; height:44px;width:190px;padding:0 16px;border-radius:22px 0 0 22px; } .search-form-top input::placeholder{color:#c9d4e6} .search-form-top input:focus{outline:none;background:rgba(255,255,255,.14)} .search-form-top button{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); color:#fff;width:44px;height:44px;border-radius:0 22px 22px 0;cursor:pointer; display:grid;place-items:center;transition:.15s;flex-shrink:0; } .search-form-top button:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)} /* ===== NAV ===== */ .nav{background:var(--navy-deep);position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(13,33,68,.25)} .nav .wrap{display:flex;align-items:center;justify-content:space-between} .nav ul{list-style:none;display:flex;font-family:'Segoe UI',Arial,sans-serif} .nav ul li a{ display:block;padding:14px 17px;color:#d6deec;font-size:14.5px;font-weight:500; letter-spacing:.2px;border-bottom:3px solid transparent;transition:.15s; } .nav ul li a:hover{color:#fff;background:var(--navy-soft)} .nav ul li a.on{color:#fff;border-bottom-color:var(--gold)} .burger{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:12px} /* Hududlar/Tahririyat dropdown paneli (header.html dagi .nav-dropdown-panel) och (oq) fonda ochiladi, lekin ".nav ul li a" (yuqoridagi qoida) undan ko'ra yuqori specifiklikka ega bo'lgani uchun havolalarga och rang (#d6deec) yuklab qo'ygan edi — natijada oq fon ustida och matn, o'qib bo'lmas holatga kelgan. Shu ikki qoida ".panel-all"ni (allaqachon to'g'ri --accent rangda) tegmasdan, qolgan havolalarni to'q --navy rangga qaytaradi.*/ .nav .nav-dropdown-panel a:not(.panel-all){color:var(--navy);background:none} .nav .nav-dropdown-panel a:not(.panel-all):hover{color:#fff;background:var(--navy)} /* ===== TICKER ===== */ .ticker{background:var(--bg-alt);border-bottom:1px solid var(--line);overflow:hidden} .ticker .wrap{display:flex;align-items:center;height:44px;gap:14px} .ticker .tag{ background:var(--gold);color:var(--navy-deep);font-family:'Segoe UI',Arial,sans-serif; font-size:12px;font-weight:700;padding:4px 11px;border-radius:3px;white-space:nowrap; text-transform:uppercase;letter-spacing:.5px;flex-shrink:0; } .ticker-track{overflow:hidden;white-space:nowrap;flex:1} .ticker-track span{ display:inline-block;font-family:'Segoe UI',Arial,sans-serif;font-size:14px;color:var(--gray); animation:scroll 32s linear infinite; } .ticker:hover .ticker-track span{animation-play-state:paused} .ticker-track b{color:var(--navy);margin:0 6px} .ticker-track a{color:inherit;transition:color .15s;cursor:pointer} .ticker-track a:hover{color:var(--gold);text-decoration:underline} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ===== DOLZARB TEGLAR ===== */ .topics{background:#fff;border-bottom:1px solid var(--line)} .topics .wrap{display:flex;align-items:center;gap:12px;height:52px;overflow-x:auto} .topics .lbl{font-family:'Segoe UI',Arial,sans-serif;font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;flex-shrink:0} .topics .chips{display:flex;gap:9px} .topics .chips a{ font-family:'Segoe UI',Arial,sans-serif;font-size:13.5px;font-weight:500;white-space:nowrap; background:var(--bg-cool);color:var(--navy);padding:7px 15px;border-radius:20px;transition:.15s; border:1px solid transparent; } .topics .chips a:hover{background:var(--accent);color:#fff} .topics .chips a.hot{background:#fdf0f0;color:#c0392b} .topics .chips a.hot::before{content:"● ";font-size:9px;vertical-align:middle} .topics .chips a.hot:hover{background:#c0392b;color:#fff} /* ENG KO'P O'QILGAN — bosh sahifa yuqorisidagi raqamli ro'yxat */ .most-read{background:#fff;border-bottom:1px solid var(--line);padding:12px 0 12px} .most-read .head{ font-family:'Segoe UI',Arial,sans-serif;font-size:18px;font-weight:700; color:var(--navy);text-transform:uppercase;letter-spacing:1px;margin-bottom:18px; display:flex;align-items:center;gap:10px; } .most-read .head::before{content:"";width:4px;height:22px;background:var(--gold);border-radius:2px} .most-read .mr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px} .mr-item{display:flex;flex-direction:column;gap:8px} .mr-item .n{ font-family:'Arial Black',sans-serif;font-size:20px;color:var(--gold); line-height:1.1;flex-shrink:0;width:22px; } .mr-item .mr-body{display:block;min-width:0} .mr-item .t{ display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;font-size:15px;font-weight:600;line-height:1.35; color:var(--article-link-unread);transition:color .15s; } .mr-item:visited .t,.mr-item.is-read .t{color:var(--article-link-read)} .mr-item:hover .t{color:var(--navy)} .mr-item .v{display:block;font-size:11.5px;color:var(--gray);margin-top:2px} /* Rasm + uning ustidagi raqam-badge */ .mr-item .mr-thumb{position:relative;width:100%;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:var(--line)} .mr-item .mr-thumb img{width:100%;height:100%;object-fit:cover;display:block} /* Rasm yo'q bo'lganda — logo kesilmasin, ichkariga sig'sin */ .mr-item .mr-thumb .mr-ph{object-fit:contain;padding:18px;opacity:.5;background:var(--line)} .mr-item .mr-thumb .n{position:absolute;left:0;bottom:0;width:auto;min-width:20px;height:20px;padding:0 5px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);color:#fff;font-size:12px;border-radius:0 6px 0 0} /* Rasm yo'q bo'lsa — raqam bo'sh maydon markazida katta ko'rinadi */ .mr-item .mr-thumb:not(:has(img)){display:flex;align-items:center;justify-content:center} .mr-item .mr-thumb:not(:has(img)) .n{position:static;background:transparent;color:var(--gray);font-size:22px;font-weight:700;border-radius:0;min-width:auto;height:auto;padding:0} /* "yangi" belgisi — oxirgi 7 kun ichida chop etilgan maqolalar uchun */ .fresh-badge{ display:inline-block;vertical-align:middle;margin-right:6px; font-family:'Segoe UI',Arial,sans-serif;font-size:9.5px;font-weight:700; text-transform:uppercase;letter-spacing:.4px;line-height:1; background:var(--gold);color:var(--navy);padding:3px 6px;border-radius:3px; } @media (max-width:1000px){ .most-read .mr-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:600px){ .most-read .mr-grid{grid-template-columns:repeat(1,1fr);gap:12px 16px} .mr-item .n{font-size:17px;width:18px} .mr-item .t{font-size:13.5px} } /* ===== LAYOUT ===== */ .main{padding:28px 0 40px} .grid{display:grid;grid-template-columns:1fr 340px;gap:34px} .section-title{ font-family:'Segoe UI',Arial,sans-serif;font-size:18px;font-weight:700; color:var(--navy);text-transform:uppercase;letter-spacing:1px; display:flex;align-items:center;gap:10px;margin:0 0 18px; } .section-title::before{content:"";width:4px;height:22px;background:var(--gold);border-radius:2px} .section-title > a{transition:color .15s} .section-title > a:hover,.section-title > a:focus{color:var(--accent)} .section-title.mt{margin-top:38px} .section-title .more{ margin-left:auto;font-size:13px;font-weight:600;color:var(--accent);text-transform:none; letter-spacing:0;display:flex;align-items:center;gap:4px;transition:.15s; } .section-title .more:hover{gap:8px} /* SO'NGGI YANGILIKLAR LENTA (vaqt bilan) */ .feed{border-top:2px solid var(--navy)} .feed-item{display:flex;align-items:flex-start;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer} .feed-item .time{font-family:'Segoe UI',Arial,sans-serif;font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap;padding-top:1px;min-width:48px} .feed-item .ft{flex:1} .feed-item .fcat{font-family:'Segoe UI',Arial,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gold);margin-bottom:3px} .feed-item h4{font-size:16px;line-height:1.35;font-weight:650;color:var(--article-link-unread);transition:.15s} .feed-item:visited h4,.feed-item.is-read h4{color:var(--article-link-read)} .feed-item:hover h4{color:var(--accent)} /* HERO */ .issue-hero{ display:block;margin-bottom:38px;border:1px solid var(--line);border-radius:8px; overflow:hidden;background:var(--bg); box-shadow:0 14px 34px color-mix(in srgb,var(--navy) 12%,transparent); transition:border-color .2s,box-shadow .2s,transform .2s; } .issue-hero:hover,.issue-hero:focus{ border-color:var(--accent);transform:translateY(-2px); box-shadow:0 18px 42px color-mix(in srgb,var(--navy) 18%,transparent); } .issue-hero:focus-visible{outline:3px solid var(--accent-soft);outline-offset:3px} .issue-hero-image{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--navy)} .issue-hero-image img{ width:100%;height:100%;object-fit:cover;transition:transform .55s ease; } .issue-hero:hover .issue-hero-image img{transform:scale(1.015)} .issue-hero-caption{ position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:center;gap:18px;padding:18px 20px 19px; color:var(--navy);font-family:'Segoe UI',Arial,sans-serif; background:linear-gradient(115deg,var(--bg) 35%,var(--accent-soft)); } .issue-hero-caption::before{ content:"";position:absolute;top:0;left:20px;width:64px;height:3px; border-radius:0 0 3px 3px;background:var(--gold); } .issue-hero-title{display:flex;min-width:0;flex-direction:column;gap:1px} .issue-hero-kicker{ color:var(--gray);font-size:11px;font-weight:700;letter-spacing:1.2px; line-height:1.4;text-transform:uppercase; } .issue-hero-caption strong{ color:var(--navy);font-size:25px;font-weight:750;letter-spacing:-.3px;line-height:1.2; } .issue-hero-meta{display:flex;align-items:center;gap:10px;white-space:nowrap} .issue-hero-date{ display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line); border-radius:999px;background:var(--bg);color:var(--gray);font-size:13px;font-weight:600; } .issue-hero-date svg{color:var(--gold)} .issue-hero-arrow{ display:grid;width:38px;height:38px;place-items:center;border-radius:50%; background:var(--gold);color:var(--navy-deep);font-size:20px;line-height:1; transition:transform .2s; } .issue-hero:hover .issue-hero-arrow{transform:translateX(3px)} .hero{display:block;position:relative;aspect-ratio:3/2;border-radius:8px;overflow:hidden;margin-bottom:38px;background:var(--navy)} .hero img{width:100%;height:100%;object-fit:cover;opacity:.92} .hero-body{ position:absolute;left:0;right:0;bottom:0;padding:30px 30px 26px; background:linear-gradient(transparent,rgba(9,22,45,.55) 35%,rgba(9,22,45,.95));color:#fff; } .hero .eyebrow{ font-family:'Segoe UI',Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:1px; text-transform:uppercase;color:var(--gold-soft);margin-bottom:10px;display:inline-block; } .hero h1{font-size:27px;line-height:1.2;font-weight:700;max-width:760px;margin-bottom:10px;color:#fff} .hero:visited h1{color:#fff} .hero .meta{font-family:'Segoe UI',Arial,sans-serif;font-size:13px;color:#c9d4e6} /* NEWS CARDS */ .cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch} .card{ display:flex;flex-direction:column;height:100%; border-bottom:1px solid var(--line);padding-bottom:18px;cursor:pointer; } .card .thumb{border-radius:6px;overflow:hidden;margin-bottom:12px;background:var(--bg-alt)} .card .thumb img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;transition:.4s} .card:hover .thumb img{transform:scale(1.04)} .card h3{font-size:19px;font-weight:700;line-height:1.3;margin:7px 0 8px;color:var(--article-link-unread);transition:.15s} .card:visited h3,.card.is-read h3{color:var(--article-link-read)} .card:hover h3{color:var(--navy)} .card .ex{ font-size:14.5px;color:var(--gray);line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* SIDEBAR */ .side-block{margin-bottom:32px} .paper{background:var(--navy);border-radius:8px;padding:22px;color:#fff;text-align:center} .paper .lbl{font-family:'Segoe UI',Arial,sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px} .paper .cover{border-radius:4px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35);margin-bottom:16px;display:block;cursor:pointer} .paper .cover img{width:100%;height:auto;display:block} .paper .issue{font-family:'Segoe UI',Arial,sans-serif;font-size:13px;color:#c9d4e6;margin-bottom:14px} .paper .btns{display:flex;gap:8px} .paper .btns a{ flex:1;font-family:'Segoe UI',Arial,sans-serif;font-size:13px;font-weight:600; padding:10px;border-radius:5px;transition:.15s; } .paper .btns .b1{background:var(--gold);color:var(--navy-deep)} .paper .btns .b1:hover{background:var(--gold-soft)} .paper .btns .b2{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)} .paper .btns .b2:hover{background:rgba(255,255,255,.2)} .paper-more{ display:block;margin-top:14px;font-family:'Segoe UI',Arial,sans-serif; font-size:12.5px;font-weight:600;color:var(--gold-soft);transition:.15s; } .paper-more:hover{color:var(--gold)} /* ===== ARXIV SAHIFASI (Gazeta sonlari / ilovalar / Qalqon) ===== */ .archive-page-heading{ margin-bottom:34px;padding:20px 22px;border-left:6px solid var(--gold);border-radius:8px; background:var(--navy);color:var(--bg);display:flex;align-items:center; justify-content:space-between;gap:18px;flex-wrap:wrap; } .archive-heading-copy{flex:1 1 230px} .archive-page-heading h1{ font-family:'Segoe UI',Arial,sans-serif;font-size:32px;line-height:1.15;font-weight:800; letter-spacing:.5px;text-transform:uppercase; } .archive-page-heading p{ margin-top:7px;color:var(--gold-soft);font-family:'Segoe UI',Arial,sans-serif;font-size:14px; } .archive-filter-widget{ display:flex;flex:0 1 auto;align-items:center;justify-content:flex-end;gap:8px; } .archive-filter-toggle{ width:38px;height:38px;padding:0 9px;display:flex;align-items:center;justify-content:center; flex-shrink:0;overflow:hidden;border:1px solid var(--gold);border-radius:19px; background:var(--gold);color:var(--navy-deep);cursor:pointer; font-family:'Segoe UI',Arial,sans-serif;font-size:13px;font-weight:700; transition:width .2s ease,border-radius .2s ease,background .15s ease; } .archive-filter-toggle:hover{background:var(--gold-soft);border-color:var(--gold-soft)} .archive-filter-toggle svg{flex:0 0 20px} .archive-filter-toggle span{ max-width:0;margin-left:0;opacity:0;overflow:hidden;white-space:nowrap; transition:max-width .2s ease,margin-left .2s ease,opacity .15s ease; } .archive-filter-widget.is-open .archive-filter-toggle{width:104px;border-radius:6px} .archive-filter-widget.is-open .archive-filter-toggle span{max-width:62px;margin-left:7px;opacity:1} .archive-filters{ display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0; padding:8px;background:var(--navy-soft);border:1px solid var(--navy-soft);border-radius:8px; opacity:0;transform:translateX(8px);transition:opacity .18s ease,transform .18s ease; } .archive-filters[hidden]{display:none} .archive-filter-widget.is-open .archive-filters{opacity:1;transform:none} .archive-filters label{display:grid;gap:3px;min-width:118px} .archive-filters label span{font-family:'Segoe UI',Arial,sans-serif;font-size:11.5px;font-weight:700;color:var(--gold-soft)} .archive-filters select{ min-height:34px;padding:6px 28px 6px 9px;background:var(--bg);color:var(--ink); border:1px solid var(--line);border-radius:6px;font-family:'Segoe UI',Arial,sans-serif;font-size:13px; } .archive-filters button,.archive-filters > a{ min-height:34px;padding:6px 13px;border-radius:6px;font-family:'Segoe UI',Arial,sans-serif; font-size:12.5px;font-weight:700;cursor:pointer; } .archive-filters button{border:1px solid var(--gold);background:var(--gold);color:var(--navy-deep)} .archive-filters button:hover{background:var(--gold-soft);border-color:var(--gold-soft)} .archive-filters > a{display:flex;align-items:center;border:1px solid var(--gold-soft);color:var(--bg)} .archive-filters > a:hover{background:var(--navy-deep);border-color:var(--navy-deep)} .archive-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:18px; } .archive-card{ background:#fff;border:1px solid var(--line);border-radius:8px; overflow:hidden;box-shadow:0 2px 10px rgba(9,22,45,.06); display:flex;flex-direction:column; } .archive-card .cover{background:var(--bg-alt);border-bottom:1px solid var(--line)} .archive-card .cover img{width:100%;height:auto;display:block} .archive-card .meta{padding:14px 14px 6px;text-align:center} .archive-card .meta .num{ font-family:'Segoe UI',Arial,sans-serif;font-weight:700;font-size:14.5px;color:var(--navy); } .archive-card .meta .date{ font-family:'Segoe UI',Arial,sans-serif;font-size:12.5px;color:var(--gray);margin-top:2px; } .archive-card .btns{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 16px} .archive-card .btns a{ flex:1;min-width:90px;text-align:center;font-family:'Segoe UI',Arial,sans-serif; font-size:12.5px;font-weight:600;padding:8px 6px;border-radius:5px;transition:.15s; } .archive-card .btns .b1{background:var(--navy);color:#fff} .archive-card .btns .b1:hover{background:var(--navy-soft)} .archive-card .btns .b2{background:var(--bg-alt);color:var(--navy);border:1px solid var(--line)} .archive-card .btns .b2:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)} @media (max-width:1000px){ .archive-grid{grid-template-columns:repeat(2,1fr)} .archive-page-heading{align-items:center} .archive-filter-widget{width:100%} .archive-filter-widget .archive-filters{width:auto;flex:0 1 auto} } @media (max-width:560px){ .archive-grid{grid-template-columns:1fr} .archive-page-heading{padding:16px;gap:14px} .archive-page-heading h1{font-size:26px} .archive-filter-widget{display:grid;grid-template-columns:1fr;justify-items:end} .archive-filter-widget .archive-filters{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px} .archive-filter-widget .archive-filters[hidden]{display:none} .archive-filters label{min-width:0} .archive-filters select{width:100%} .archive-filters button,.archive-filters > a{grid-column:1 / -1;justify-content:center} } .popular{background:var(--bg-alt);border-radius:8px;padding:22px} .popular .head{font-family:'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.6px;margin-bottom:16px} .pop-item{display:flex;align-items:center;gap:14px;height:88px;padding:13px 0;border-top:1px solid var(--line);cursor:pointer;overflow:hidden} .pop-item:first-of-type{border-top:none} .pop-item .num{font-family:'Arial Black',sans-serif;font-size:26px;color:var(--gold);line-height:1;flex-shrink:0;width:26px} .pop-item > div{min-width:0;width:100%} .pop-item p{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden; font-size:14.5px;font-weight:600;line-height:1.35;color:var(--article-link-unread);transition:.15s; } .pop-item:visited p,.pop-item.is-read p{color:var(--article-link-read)} .pop-item:hover p{color:var(--navy)} .pop-date{display:block;font-size:11.5px;color:var(--gray);margin-top:4px} .popular-more{ display:flex;align-items:center;justify-content:center;margin-top:16px;padding:10px 14px; border:1px solid var(--navy);border-radius:6px;color:var(--navy); font-family:'Segoe UI',Arial,sans-serif;font-size:13px;font-weight:700;transition:.15s; } .popular-more:hover,.popular-more:focus{background:var(--navy);color:var(--bg)} .hikmat{background:linear-gradient(135deg,var(--navy),var(--navy-soft));border-radius:8px;padding:26px 24px;color:#fff} .hikmat .q{font-size:16px;font-style:italic;line-height:1.6} .hikmat .q::before{content:"«";color:var(--gold-soft);font-size:24px} .hikmat .q::after{content:"»";color:var(--gold-soft);font-size:24px} .hikmat .src{font-family:'Segoe UI',Arial,sans-serif;font-size:12.5px;color:var(--gold-soft);margin-top:12px;text-align:right} /* KUN TARIXI — bir necha yozuv, avtomatik/qo'lda almashinuvchi */ .dih-item{display:none} .dih-item.active{display:block;animation:dihFade .4s ease} @keyframes dihFade{from{opacity:0}to{opacity:1}} .dih-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px} .dih-btn{background:none;border:1px solid rgba(255,255,255,.35);color:var(--gold-soft);width:22px;height:22px;line-height:1;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s} .dih-btn:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--navy)} .dih-dots{display:flex;align-items:center;gap:6px} .dih-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)} .dih-dot.active{background:var(--gold-soft)} /* REGIONS */ .regions{background:var(--bg-alt);border-radius:8px;padding:26px;margin-top:12px} .region-map-layout{display:grid;grid-template-columns:1fr;gap:14px} .region-map-panel{min-width:0} .uz-map-stage{ min-height:380px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line); border-radius:8px;padding:18px;color:var(--gray);font-family:'Segoe UI',Arial,sans-serif;font-size:13px; } .uz-map{display:block;width:100%;height:auto;max-height:520px} .uz-map-region path{ fill:var(--accent-soft);stroke:var(--accent);stroke-width:.8;stroke-opacity:.55;vector-effect:non-scaling-stroke; cursor:pointer;transition:fill .15s ease,stroke-width .15s ease; } .uz-map-region:hover path,.uz-map-region:focus path,.uz-map-region.is-active path{ fill:var(--accent);stroke:var(--navy);stroke-width:1.5;stroke-opacity:1; } .uz-map-region:focus{outline:none} .uz-map-water{fill:var(--bg-cool);stroke:var(--accent);stroke-width:1;pointer-events:none} .uz-map-status{ min-height:22px;margin-top:8px;text-align:center;color:var(--navy);font-family:'Segoe UI',Arial,sans-serif; font-size:13px;font-weight:600; } .reg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .region-map-list{grid-template-columns:repeat(5,1fr);gap:6px} .reg-grid.region-map-list a{padding:6px 8px;font-size:14px} .region-directory-heading{ display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px; font-family:'Segoe UI',Arial,sans-serif;color:var(--navy); } .region-directory-heading strong{font-size:17px} .region-directory-heading span{font-size:12px;color:var(--gray)} .regions--directory{padding:32px} .regions--directory .region-map-layout{gap:20px} .regions--directory .region-map-list{grid-template-columns:repeat(3,1fr);gap:10px} .regions--directory .reg-grid.region-map-list a{ display:flex;align-items:center;justify-content:space-between;text-align:left; padding:13px 16px;font-size:15px;font-weight:600;color:var(--navy); } .regions--directory .reg-grid.region-map-list a:hover, .regions--directory .reg-grid.region-map-list a:focus, .regions--directory .reg-grid.region-map-list a.is-active{color:var(--bg)} .regions--directory .reg-grid.region-map-list a::after{ content:"→";color:var(--accent);font-size:16px;transition:transform .15s ease; } .regions--directory .reg-grid.region-map-list a:hover::after, .regions--directory .reg-grid.region-map-list a:focus::after{color:var(--bg);transform:translateX(3px)} .reg-grid a{ font-family:'Segoe UI',Arial,sans-serif;font-size:13.5px;background:var(--bg);border:1px solid var(--line); padding:12px 14px;border-radius:6px;text-align:center;transition:.15s;color:var(--gray); } .reg-grid a:hover,.reg-grid a:focus,.reg-grid a.is-active{background:var(--navy);color:var(--bg);border-color:var(--navy)} /* VIDEO */ .vids{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:4px} .vid{cursor:pointer} .vid .frame{position:relative;border-radius:6px;overflow:hidden;margin-bottom:10px} .vid .frame img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block} .vid .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(9,22,45,.25);transition:.2s} .vid:hover .play{background:rgba(9,22,45,.45)} .vid .play span{width:52px;height:52px;background:rgba(255,255,255,.92);border-radius:50%;display:grid;place-items:center} .vid .play span::after{content:"";border-left:16px solid var(--navy);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px} .vid p{font-size:15px;line-height:1.35} .video-detail{max-width:960px;margin:0 auto} .video-detail-back{display:inline-block;margin-bottom:16px;color:var(--accent);font-family:'Segoe UI',Arial,sans-serif;font-size:13px;font-weight:700} .video-detail-back:hover{color:var(--navy)} .video-player{position:relative;width:100%;aspect-ratio:16/9;background:var(--navy-deep);border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(9,22,45,.18)} .video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video-detail h1{margin-top:20px;font-size:28px;line-height:1.3;color:var(--ink)} /* FOOTER */ footer{background:var(--navy-deep);color:#aebbd0;margin-top:20px;padding:44px 0 0} .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)} .f-logo{font-family:'Arial Black',sans-serif;font-size:32px;color:#fff;letter-spacing:1px;margin-bottom:12px} .f-logo .u{color:var(--gold-soft)} .f-about{font-size:13.5px;line-height:1.6;color:#8fa0bd;font-family:'Segoe UI',Arial,sans-serif} .f-col h4{font-family:'Segoe UI',Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:#fff;margin-bottom:14px} .f-col ul{list-style:none;font-family:'Segoe UI',Arial,sans-serif;font-size:13.5px} .f-col ul li{margin-bottom:9px} .f-col ul li a{color:#9fb0cc;transition:.15s} .f-col ul li a:hover{color:var(--gold-soft)} .socials{display:flex;gap:10px;margin-top:6px} .socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.15s;font-family:'Segoe UI',Arial,sans-serif;font-size:13px;color:#c9d4e6} .socials a:hover{background:var(--gold);color:var(--navy-deep)} .f-bottom{font-family:'Segoe UI',Arial,sans-serif;font-size:12.5px;color:#7285a3;padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} /* MOBILE MENU */ .mobile-menu{display:none;position:fixed;inset:0;background:var(--navy-deep);z-index:200;padding:24px} .mobile-menu.open{display:block} .mobile-menu .close{position:absolute;top:20px;right:20px;background:none;border:none;color:#fff;font-size:32px;cursor:pointer} .mobile-menu ul{list-style:none;margin-top:60px} .mobile-menu ul li a{display:block;color:#fff;font-family:'Segoe UI',Arial,sans-serif;font-size:20px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)} /* ===== RESPONSIVE ===== */ @media(max-width:980px){ .grid{grid-template-columns:1fr} .nav ul{display:none} .burger{display:block} .reg-grid{grid-template-columns:repeat(3,1fr)} .region-map-list{grid-template-columns:repeat(4,1fr)} .regions--directory .region-map-list{grid-template-columns:repeat(3,1fr)} .logo-img{height:46px} .hero img{height:100%} .hero h1{font-size:26px} } @media(max-width:620px){ .cards{grid-template-columns:1fr} .vids{grid-template-columns:1fr} .reg-grid{grid-template-columns:repeat(2,1fr)} .region-map-layout{gap:12px} .regions{padding:16px} .uz-map-stage{min-height:220px;padding:8px} .region-map-list{grid-template-columns:repeat(2,1fr)} .regions--directory{padding:18px} .regions--directory .region-map-list{grid-template-columns:repeat(2,1fr)} .regions--directory .reg-grid.region-map-list a{padding:11px 12px;font-size:14px} .f-grid{grid-template-columns:1fr;gap:28px} .socials-top{display:none} .topbar .tools{width:100%;justify-content:space-between;gap:8px} .langs button{padding:3px 5px} .a11y-toggle{font-size:11px;white-space:nowrap} .brand-txt{display:none} .logo-img{height:34px} .masthead .wrap{padding:10px 20px} .search-form-top input{width:96px;height:40px;padding:0 12px} .search-form-top button{width:40px;height:40px} .burger{padding:8px} .burger svg{width:24px;height:24px} .hero h1{font-size:22px} .issue-hero-caption{grid-template-columns:1fr;align-items:flex-start;gap:13px;padding:16px 15px} .issue-hero-caption::before{left:15px} .issue-hero-caption strong{font-size:22px} .issue-hero-meta{justify-content:space-between;width:100%} .issue-hero-date{font-size:12px} .topbar .date{display:none} } /* ===== ICHKI SAHIFALAR (maqola, ro'yxat, qidiruv) ===== */ .article-breadcrumb{ font-family:'Segoe UI',Arial,sans-serif;font-size:12.5px;color:var(--gray); margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px; } .article-breadcrumb a{color:var(--gray);transition:.15s} .article-breadcrumb a:hover{color:var(--accent)} .article-breadcrumb .sep{color:var(--line)} .article-cat{ font-family:'Segoe UI',Arial,sans-serif;font-size:11.5px;font-weight:700; letter-spacing:.6px;text-transform:uppercase;color:var(--gold); } .article-title{font-size:32px;line-height:1.25;margin:10px 0 14px} .article-meta{font-family:'Segoe UI',Arial,sans-serif;font-size:13px;color:var(--gray);margin-bottom:18px} .article-thumb{margin-bottom:20px;border-radius:8px;overflow:hidden;background:var(--bg-alt)} .article-thumb img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover} @media(max-width:620px){ .article-title{font-size:26px;line-height:1.23;margin-top:8px} } /* "Davom etib o'qing" — maqola oxiridagi kontekstga bog'liq havolalar */ .read-more-nav{ margin-top:28px;padding-top:20px;border-top:1px solid var(--line); } .rm-title{ font-family:'Segoe UI',Arial,sans-serif;font-size:12px;font-weight:700; letter-spacing:.6px;text-transform:uppercase;color:var(--navy);margin-bottom:12px; } .rm-chips{display:flex;flex-wrap:wrap;gap:8px} .rm-chip{ display:inline-block;padding:7px 14px;border-radius:20px; font-family:'Segoe UI',Arial,sans-serif;font-size:13px;font-weight:500; background:var(--bg-alt);color:var(--navy);border:1px solid var(--line); transition:.15s; } .rm-chip:hover{background:var(--navy);color:#fff;border-color:var(--navy)} .rm-chip-primary{background:var(--navy);color:#fff;border-color:var(--navy)} .rm-chip-primary:hover{background:var(--navy-soft);border-color:var(--navy-soft)} .rm-chip-tag{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft)} .rm-chip-tag:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)} /* RO'YXAT SAHIFALARI (bo'lim/hudud/qidiruv/muallif) — uch ustunli, home.html'dan mustaqil, ixchamroq karta maketi */ .list-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:stretch; } /* MUHIM: bu selektor ataylab ".card .thumb img"dan (specifiklik 0,0,2,1) ko'ra ANIQ YUQORIROQ specifiklikka ega (0,0,3,1) — ".list-grid .thumb img" bilan bir xil specifiklikda qolib, fayldagi tartibga bog'liq bo'lib qolmasligi uchun. Shu tufayli barcha rubrika/bo'lim/hudud/muallif/qidiruv ro'yxat sahifalarida rasm har doim 3:2 nisbatda, to'liq kesib (cover) chiqadi — qaysi tartibda yozilganidan qat'i nazar. */ .list-grid .card .thumb img{ width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; } .list-grid h3{font-size:16.5px;margin:6px 0 6px} .list-grid .ex{font-size:13.5px} /* .card-meta — home.html va ro'yxat sahifalarining barchasida bir xil ishlatiladigan umumiy meta-qator uslubi (rukn · sana · ko'rishlar). */ .card-meta{ font-family:'Segoe UI',Arial,sans-serif; font-size:12px; color:#9098a6; margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .card-meta .cat{ color:var(--gold); font-weight:700; letter-spacing:.4px; } .card-meta .meta-views{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; } @media (max-width:1000px){ .list-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:600px){ .list-grid{grid-template-columns:1fr} } .article-body{font-size:17px;line-height:1.75;color:var(--ink)} .article-body p{margin-bottom:16px} .article-body img{max-width:100%;border-radius:6px;margin:16px 0} .share-links{display:flex;flex-direction:column;gap:10px;font-family:'Segoe UI',Arial,sans-serif;font-size:13.5px} .share-links a, .share-links button{ background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 14px; color:var(--navy);word-break:break-all;transition:.15s;text-align:left; font:inherit;cursor:pointer; } .share-links a:hover, .share-links button:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .search-intro{text-align:center;margin-bottom:26px} .search-form{display:flex;gap:12px;max-width:640px;margin:0 auto} .search-form input{ flex:1;font-family:'Segoe UI',Arial,sans-serif;font-size:16px; padding:14px 18px;border:1px solid var(--line);border-radius:8px; } .search-form input:focus{outline:none;border-color:var(--accent)} .search-form button{ font-family:'Segoe UI',Arial,sans-serif;font-size:15px;font-weight:600; padding:14px 26px;border:none;border-radius:8px;background:var(--navy);color:#fff;cursor:pointer;transition:.15s; } .search-form button:hover{background:var(--gold);color:var(--navy-deep)} .search-count{ font-family:'Segoe UI',Arial,sans-serif;font-size:14px;color:var(--gray);margin-top:14px; } .empty-state{text-align:center;padding:60px 20px;color:var(--gray)} .empty-icon{ width:64px;height:64px;margin:0 auto 18px;border-radius:50%; background:var(--bg-alt);display:grid;place-items:center; font-size:26px;color:var(--gray); } .empty-state p{margin-bottom:6px} /* 404/500 — mavjud rang va spacing tizimiga mos xatolik sahifasi. */ .error-page{ min-height:420px;padding:72px 20px;text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center; } .error-code{ font-family:'Segoe UI',Arial,sans-serif;font-size:72px;line-height:1; font-weight:800;color:var(--gold);letter-spacing:3px; } .error-page h1{font-size:30px;margin:16px 0 10px;color:var(--navy)} .error-page p{max-width:620px;color:var(--gray);line-height:1.65} .error-home-link{ display:inline-flex;margin-top:24px;padding:12px 22px;border-radius:8px; background:var(--navy);color:#fff;font-family:'Segoe UI',Arial,sans-serif; font-size:14px;font-weight:700;transition:.15s; } .error-home-link:hover{background:var(--gold);color:var(--navy-deep)} .pagination{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:32px; font-family:'Segoe UI',Arial,sans-serif;font-size:14px; } .pagination .pg-num, .pagination .pg-btn{ display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:38px;padding:0 12px; border-radius:6px;border:1px solid var(--line); background:#fff;color:var(--navy);font-weight:600;transition:.15s; } .pagination .pg-num{padding:0} .pagination .pg-num:hover, .pagination .pg-btn:hover{background:var(--bg-alt)} .pagination .pg-num.active{background:var(--navy);color:#fff;border-color:var(--navy)} .pagination .pg-ellipsis{color:var(--gray);padding:0 4px} .vid-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* KONTRAST TEMA — topbar tuzatishlari. Topbar'dagi ba'zi ranglar CSS o'zgaruvchi emas, qattiq yozilgan (#c9d4e6, #9fb0cc, #d6deec). Shu sababli qora fonli "Maxsus imkoniyatlar" temasida ular o'zgarmay, o'qilmay qolardi. Quyida ularni majburan oq (valyutani sariq) rangga o'tkazamiz. */ :root[data-theme="contrast"] .topbar{color:#fff} :root[data-theme="contrast"] .socials-top a{color:#fff} :root[data-theme="contrast"] .langs button{color:#fff} :root[data-theme="contrast"] .topbar .admin{color:#fff} :root[data-theme="contrast"] .nav-dropdown > .nav-dropdown-summary{color:#fff} :root[data-theme="contrast"] .currency-rotator{color:#ffff00} /* KONTRAST TEMA — "Maxsus imkoniyatlar" paneli ichi. Tugmalar color:var(--navy) ishlatadi, kontrast temada esa --navy = #000 — qora panelda qora matn ko'rinmaydi. "Qora fon" va "Ko'k-sariq" tugmalari tema NAMUNASI bo'lgani uchun o'z rangini saqlashi kerak, shuning uchun ular :not() bilan chetlab o'tiladi (uchala tugmada ham data-theme atributi bor). */ :root[data-theme="contrast"] .a11y-theme:not([data-theme="contrast"]):not([data-theme="blue-yellow"]), :root[data-theme="contrast"] .a11y-font{color:#fff;border-color:#fff;background:#000} :root[data-theme="contrast"] .a11y-theme:not([data-theme="contrast"]):not([data-theme="blue-yellow"]):hover, :root[data-theme="contrast"] .a11y-font:hover{background:#333} :root[data-theme="contrast"] .a11y-label{color:#fff}