/* ============================================================
   responsive.css
   home.css da allaqachon bor breakpointlar:
     1100px → coverflow kichrayadi
     768px  → top-bar-contacts yashirin, coverflow kichrayadi
     480px  → top-bar, navbar-brand, coverflow kichrayadi
   Quyida FAQAT home.css da YO'Q qismlar yozilgan.
============================================================ */

/* ============================================================
   SECTION PADDING
============================================================ */
@media (max-width: 768px) {
    .home-section      { padding: 44px 0 !important; }
    .tizimlar-section  { padding: 38px 0 !important; }
    .rektor-section    { padding: 38px 0 !important; }
    .stats-section     { padding: 44px 0 !important; }
    .welcome-section   { padding: 44px 0 !important; }
    .xavola-section    { padding: 38px 0 !important; }
}
@media (max-width: 480px) {
    .home-section      { padding: 32px 0 !important; }
    .container         { padding-left: 14px; padding-right: 14px; }
}

/* ============================================================
   TOP BAR — home.css 768px da faqat contacts yashiradi,
   qolgan layout bu yerda
============================================================ */
@media (max-width: 768px) {
    .top-bar .container {
        flex-direction: column;
        gap: 6px;
        padding: 6px 16px;
        text-align: center;
    }
    .top-bar-langs   { justify-content: center; }
    .top-bar-socials { justify-content: center; }
}

/* ============================================================
   NAVBAR
============================================================ */
@media (max-width: 992px) {
    .navbar-brand img { width: 44px !important; }
    .dropdown-menu.main-menu {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }
}
@media (max-width: 576px) {
    .navbar-brand span {
        max-width: 165px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
}

/* ============================================================
   SECTION HEADER
============================================================ */
@media (max-width: 576px) {
    .section-header              { margin-bottom: 20px; flex-wrap: wrap; gap: 6px; }
    .section-header h3           { font-size: 16px !important; white-space: normal; }
    .section-header .header-line { display: none; }
}

/* ============================================================
   NEWS / ELON CARDS
============================================================ */
@media (max-width: 768px) {
    .news-card img        { height: 155px; }
    .news-card-body h5    { font-size: 13px; }
    #yangiliklar .col-md-3,
    #elonlar .col-md-3    { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 400px) {
    #yangiliklar .col-md-3,
    #elonlar .col-md-3    { flex: 0 0 100%; max-width: 100%; }
    .news-card img        { height: 175px; }
}
@media (max-width: 480px) {
    .all-link { font-size: 13px; padding: 7px 16px; }
}

/* ============================================================
   TIZIMLAR CAROUSEL
============================================================ */
@media (max-width: 768px) {
    .tizim-carousel-wrapper     { margin: 0 34px; }
    .tizim-slide                { flex: 0 0 50% !important; }
    .tizim-card                 { padding: 18px 10px 14px; }
    .tizim-card .icon-box       { width: 52px; height: 52px; }
    .tizim-card .icon-box i     { font-size: 20px; }
    .tizim-card h6              { font-size: 12px; }
    .tizim-dots                 { margin-top: 14px; }
}
@media (max-width: 400px) {
    .tizim-carousel-wrapper { margin: 0 26px; }
    .tizim-nav              { width: 28px !important; height: 28px !important; font-size: 12px !important; }
}

/* ============================================================
   FAKULTETLAR
============================================================ */
@media (max-width: 768px) {
    .fakultet-card          { height: 175px; }
    .fakultet-card .overlay h6 { font-size: 13px; }
    #fakultetlar .col-md-4  { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 480px) {
    #fakultetlar .col-md-4  { flex: 0 0 100%; max-width: 100%; }
    .fakultet-card          { height: 190px; }
}

/* ============================================================
   STATISTIKA
============================================================ */
@media (max-width: 768px) {
    .stats-section h2    { font-size: 20px !important; margin-bottom: 28px; }
    .stat-item h1        { font-size: 28px !important; }
    .stat-item p         { font-size: 11px !important; }
    .stat-icon-box       { width: 50px !important; height: 50px !important; }
    .stat-icon-box i     { font-size: 20px !important; }
}
@media (max-width: 480px) {
    .stats-section h2    { font-size: 17px !important; }
    .stat-item           { padding: 10px 4px; }
    .stat-item h1        { font-size: 24px !important; }
}

/* ============================================================
   REKTOR QABULI
============================================================ */
@media (max-width: 992px) {
    .rektor-card .rektor-right { width: 220px !important; }
    .rektor-card .rektor-left  { padding: 30px 26px; }
    .rektor-card .rektor-left h3 { font-size: 20px !important; }
}
@media (max-width: 768px) {
    .rektor-card                   { flex-direction: column-reverse !important; }
    .rektor-card .rektor-right     { width: 100% !important; height: 230px !important; }
    .rektor-card .rektor-left      { padding: 22px 18px !important; }
    .rektor-card .rektor-left h3   { font-size: 17px !important; }
}
@media (max-width: 480px) {
    .rektor-card .rektor-right     { height: 190px !important; }
    .rektor-card .rektor-left      { padding: 16px 14px !important; }
    .btn-rektor                    { font-size: 13px !important; padding: 8px 18px !important; }
}

/* ============================================================
   BANNER
============================================================ */
@media (max-width: 768px) {
    .info-banner {
        flex-direction: column;
        text-align: center;
        padding: 18px 16px;
        gap: 14px;
    }
    .info-banner .banner-text h5 { font-size: 14px !important; }
    .info-banner .banner-link    { width: 100%; text-align: center; }
}

/* ============================================================
   FOYDALI XAVOLALAR
============================================================ */
@media (max-width: 768px) {
    .xavola-logo-card {
        min-width: 124px !important; max-width: 124px !important;
        height: 106px !important; padding: 12px 10px !important;
    }
    .xavola-logo-card img       { height: 34px !important; }
    .xavola-logo-card span      { font-size: 11px !important; }
    .xavola-scroll-outer::before,
    .xavola-scroll-outer::after { width: 32px; }
}
@media (max-width: 480px) {
    .xavola-logo-card {
        min-width: 106px !important; max-width: 106px !important;
        height: 94px !important;
    }
    .xavola-scroll-track        { gap: 8px; animation-duration: 17s; }
}

/* ============================================================
   WELCOME / TA'RIF
============================================================ */
@media (max-width: 768px) {
    .welcome-section h2         { font-size: 21px !important; }
    .welcome-section .subtitle  { font-size: 14px !important; margin-bottom: 28px; }
    .welcome-feature            { padding: 20px 16px; }
    .welcome-feature h5         { font-size: 14px !important; }
    .welcome-feature p          { font-size: 13px !important; }
}
@media (max-width: 480px) {
    .welcome-section h2         { font-size: 17px !important; }
    .welcome-section .col-md-4  { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================================
   FOOTER
============================================================ */
@media (max-width: 768px) {
    footer .col-md-3        { text-align: center; }
    footer .d-flex.gap-2    { justify-content: center; }
    footer img              { display: block; margin: 0 auto; }
    footer ul               { padding: 0; }
}
@media (max-width: 480px) {
    footer                  { padding: 28px 0 !important; }
    footer .col-md-3        { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================================
   TO-TOP BUTTON
============================================================ */
@media (max-width: 480px) {
    .to-top { width: 40px !important; height: 40px !important; right: 14px !important; bottom: 18px !important; }
}

/* ============================================================
   TOUCH — hover effektlarni o'chirish
============================================================ */
@media (hover: none) {
    .news-card:hover,
    .tizim-card:hover,
    .xavola-logo-card:hover,
    .welcome-feature:hover      { transform: none !important; box-shadow: none !important; }
    .fakultet-card:hover img    { transform: none !important; }
    .news-card-body .btn-news:hover { transform: none !important; }
}
/* ============================================================
   RESPONSIVE — yangilik/elon detail sahifalar
============================================================ */
@media (max-width: 768px) {
    .article-wrapper        { padding: 22px 18px; }
    .content-card           { padding: 22px 18px; }
    .article-title          { font-size: 18px !important; }
    .meta-bar               { gap: 12px; }
    .page-header h1         { font-size: 18px !important; }
}
@media (max-width: 480px) {
    .article-wrapper        { padding: 16px 13px; }
    .content-card           { padding: 16px 13px; }
    .article-title          { font-size: 16px !important; }
    .article-body,
    .article-content        { font-size: 14px !important; }
    .page-header            { padding: 28px 0 22px; }
    .page-header h1         { font-size: 16px !important; }
}

/* Sidebar mobilda pastga tushadi — to'liq kenglik */
@media (max-width: 991px) {
    .sidebar-card-img       { width: 76px; min-width: 76px; height: 68px; }
    .side-card-img          { width: 68px; height: 58px; }
}

/* ================================================================
   ████████╗██╗   ██╗███╗   ██╗    ██████╗ ███████╗     ██╗ ██╗
      ██╔══╝██║   ██║████╗  ██║    ██╔══██╗██╔════╝     ██║ ██║
      ██║   ██║   ██║██╔██╗ ██║    ██████╔╝█████╗       ██║ ██║
      ██║   ██║   ██║██║╚██╗██║    ██╔══██╗██╔══╝       ╚═╝ ╚═╝
      ██║   ╚██████╔╝██║ ╚████║    ██║  ██║███████╗     ██╗ ██╗
      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝    ╚═╝  ╚═╝╚══════╝     ╚═╝ ╚═╝
================================================================ */

/* CSS o'zgaruvchilar — kunduz */
:root {
    --dm-bg:       #ffffff;
    --dm-surface:  #f8f9fa;
    --dm-card:     #ffffff;
    --dm-border:   #e5efff;
    --dm-text:     #1a1a2e;
    --dm-muted:    #5f738c;
    --dm-blue:     #1566B7;
    --dm-blue-d:   #0d47a1;
    --dm-shadow:   rgba(21,102,183,0.15);
    --dm-toggle-icon: "☀️";
}

/* Tun — qo'lda .dark klassi body ga qo'shiladi */
body.dark {
    --dm-bg:       #0f1117;
    --dm-surface:  #141824;
    --dm-card:     #1a2035;
    --dm-border:   #243050;
    --dm-text:     #e2e8f8;
    --dm-muted:    #7a90b8;
    --dm-blue:     #4d9de0;
    --dm-blue-d:   #90caf9;
    --dm-shadow:   rgba(0,0,0,0.4);
    --dm-toggle-icon: "🌙";
    background: var(--dm-bg);
    color: var(--dm-text);
}

/* ---- TOP BAR ---- */
body.dark .top-bar {
    background: #080c16;
    border-bottom-color: rgba(255,255,255,0.05);
}

/* ---- NAVBAR ---- */
body.dark .navbar {
    background: #111827 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
body.dark .dropdown-menu {
    background: #1a2035 !important;
    border-top-color: #4d9de0 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}
body.dark .navbar .dropdown-menu h5 {
    color: #90caf9;
    border-bottom-color: #243050;
}
body.dark .navbar .dropdown-menu .dropdown-item { color: #c5d3ef; }
body.dark .navbar .dropdown-menu .dropdown-item:hover {
    background: #1e3050;
    color: #90caf9;
    padding-left: 20px;
}

/* ---- HERO / COVERFLOW ---- */
body.dark .section {
    background: linear-gradient(155deg, #0c1526 0%, #0f1a2c 55%, #0a1220 100%);
}
body.dark .section::before,
body.dark .section::after {
    background: radial-gradient(circle, rgba(77,157,224,0.08) 0%, transparent 70%);
}
body.dark .info h2      { color: #c5d8f5; }
body.dark .info-badge   { background: rgba(77,157,224,0.12); color: #90caf9; }
body.dark .nav-button   { background: rgba(26,32,53,0.9); color: #90caf9; }
body.dark .nav-button:hover { background: #1e88e5; color: #fff; }
body.dark .coverflow-item .cover { box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
body.dark .coverflow-item .reflection::after {
    background: linear-gradient(to bottom, rgba(15,17,23,0.3) 0%, rgba(15,17,23,1) 100%);
}
body.dark .dot { background: rgba(144,202,249,0.15); }
body.dark .dot.active { background: #4d9de0; }

/* ---- SECTION HEADER ---- */
body.dark .section-header h3 { color: #90caf9; }
body.dark .section-header .header-line {
    background: linear-gradient(90deg, #4d9de0, transparent);
}
body.dark .header-underline { background: #FFD54F; }

/* ---- NEWS / ELON CARDS ---- */
body.dark .home-section         { background: var(--dm-bg) !important; }
body.dark #elonlar              { background: var(--dm-surface) !important; }
body.dark .news-card            { background: var(--dm-card); border-color: var(--dm-border); }
body.dark .news-card:hover      { box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
body.dark .news-card-body h5    { color: #e2e8f8; }
body.dark .news-card-body p     { color: var(--dm-muted); }
body.dark .news-card-body .btn-news     { background: #1e6fb5; }
body.dark .news-card-body .btn-news:hover { background: #155ea0; }
body.dark .all-link             { color: #90caf9; border-color: #4d9de0; }
body.dark .all-link:hover       { background: #1e6fb5; color: #fff; border-color: #1e6fb5; }

/* ---- TIZIMLAR ---- */
body.dark .tizimlar-section {
    background: linear-gradient(135deg, #111827 0%, #0f172a 100%);
}
body.dark .tizim-card           { background: var(--dm-card); border-color: var(--dm-border); }
body.dark .tizim-card:hover     { box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
body.dark .tizim-card h6        { color: #c5d3ef; }
body.dark .tizim-nav            { background: #1e6fb5; }
body.dark .tizim-nav:disabled   { background: #243050; color: #4a5a7a; }
body.dark .tizim-dot            { background: #243050; }
body.dark .tizim-dot.active     { background: #4d9de0; }

/* ---- FAKULTETLAR ---- */
body.dark #fakultetlar          { background: var(--dm-bg); }
body.dark .fakultet-card .overlay {
    background: linear-gradient(to top, rgba(5,8,18,0.92) 0%, transparent 60%);
}

/* ---- STATISTIKA ---- */
body.dark .stats-section {
    background: linear-gradient(135deg, #090e1d 0%, #0c1628 60%, #0f1e38 100%);
}

/* ---- REKTOR ---- */
body.dark .rektor-section {
    background: linear-gradient(135deg, #0f1a2c 0%, #0d1525 100%);
}
body.dark .rektor-card          { background: var(--dm-card); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
body.dark .rektor-card .rektor-left .badge-label {
    background: rgba(77,157,224,0.12);
    color: #90caf9;
}
body.dark .rektor-card .rektor-left h3 { color: #90caf9; }
body.dark .rektor-card .rektor-left p  { color: var(--dm-muted); }
body.dark .btn-rektor           { background: #1e6fb5; }
body.dark .btn-rektor:hover     { background: #155ea0; }

/* ---- BANNER ---- */
body.dark .info-banner {
    background: linear-gradient(135deg, #090e1d 0%, #0c1830 100%);
    border: 1px solid var(--dm-border);
}

/* ---- FOYDALI XAVOLALAR ---- */
body.dark .xavola-section       { background: var(--dm-surface); }
body.dark .xavola-scroll-outer::before {
    background: linear-gradient(to right, var(--dm-surface), transparent);
}
body.dark .xavola-scroll-outer::after {
    background: linear-gradient(to left, var(--dm-surface), transparent);
}
body.dark .xavola-logo-card     { background: var(--dm-card); border-color: var(--dm-border); }
body.dark .xavola-logo-card:hover {
    border-color: #4d9de0;
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
body.dark .xavola-logo-card span { color: #c5d3ef; }
body.dark .xavola-fallback      { background: linear-gradient(135deg, #1e6fb5, #155ea0); }

/* ---- WELCOME ---- */
body.dark .welcome-section      { background: var(--dm-bg); }
body.dark .welcome-section h2   { color: #90caf9; }
body.dark .welcome-section .subtitle { color: var(--dm-muted); }
body.dark .welcome-badge        { background: rgba(77,157,224,0.12); color: #90caf9; }
body.dark .welcome-feature      { background: var(--dm-card); border-color: var(--dm-border); }
body.dark .welcome-feature:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
body.dark .welcome-feature h5   { color: #90caf9; }
body.dark .welcome-feature p    { color: var(--dm-muted); }

/* ---- FOOTER ---- */
body.dark footer { background: #080c16 !important; }
body.dark footer hr { border-color: rgba(255,255,255,0.07); }

/* ---- TO-TOP ---- */
/*body.dark .to-top { background: #1e3050; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }*/
.dark-toggle-topbar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background 0.25s, transform 0.2s;
}
.dark-toggle-topbar:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.1);
}
body.dark .dark-toggle-topbar {
    background: rgba(77, 157, 224, 0.2);
    border-color: rgba(77, 157, 224, 0.4);
    color: #90caf9;
}

@media (max-width: 480px) {
    .dark-toggle-topbar {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}
body.dark .to-top {
    background: #1e3050;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
body.dark .to-top:hover {
    background: #243a62;
}
/* ============================================================
   DARK MODE — PAGES (yangiliklar, elonlar, detail sahifalar)
============================================================ */

/* Page header — dark da to'qroq */
body.dark .page-header {
    background: linear-gradient(135deg, #060d1f 0%, #0c1830 100%);
}

/* Content card / article wrapper */
body.dark .content-card,
body.dark .article-wrapper {
    background: var(--dm-card);
    border-color: var(--dm-border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* Article text */
body.dark .article-body,
body.dark .article-content  { color: #cdd6f0; }
body.dark .article-title    { color: #90caf9; }
body.dark .article-divider,
body.dark .section-divider  { border-color: var(--dm-border); }

/* Meta bar */
body.dark .meta-bar         { border-bottom-color: var(--dm-border); }
body.dark .meta-item        { color: var(--dm-muted); }

/* Back button */
body.dark .back-btn {
    background: #1a2035;
    color: #90caf9;
    border-color: var(--dm-border);
}
body.dark .back-btn:hover {
    background: #1e6fb5;
    color: #fff;
    border-color: #1e6fb5;
}

/* News card (yangiliklar.html) */
body.dark .news-card        { background: var(--dm-card); border-color: var(--dm-border); }
body.dark .news-card:hover  { box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
body.dark .news-card-title  { color: #e2e8f8; }
body.dark .news-card-date   { color: #4d9de0; }
body.dark .batafsil-btn     { background: #1e6fb5; }
body.dark .batafsil-btn:hover { background: #155ea0; }

/* Elon card */
body.dark .elon-card        { background: var(--dm-card); border-color: var(--dm-border); }
body.dark .elon-card:hover  { box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
body.dark .elon-card-title  { color: #e2e8f8; }
body.dark .elon-card-date   { color: #4d9de0; }

/* Sidebar */
body.dark .sidebar-title    { color: #90caf9; border-bottom-color: #4d9de0; }
body.dark .sidebar-card     { background: var(--dm-card); border-color: var(--dm-border); }
body.dark .sidebar-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
body.dark .sidebar-card-title { color: #e2e8f8; }
body.dark .sidebar-card-meta  { color: var(--dm-muted); }

/* Side card (yangilik detail) */
body.dark .side-card        { background: var(--dm-card); border-color: var(--dm-border); }
body.dark .side-card:hover  { background: #1a2035; border-color: #4d9de0; }
body.dark .side-card-title  { color: #e2e8f8; }
body.dark .side-card-date,
body.dark .side-card-views  { color: var(--dm-muted); }

/* Pagination */
body.dark .pagination .page-link {
    background: var(--dm-card);
    border-color: var(--dm-border);
    color: #90caf9;
}
body.dark .pagination .page-link:hover {
    background: #1e6fb5;
    color: #fff;
    border-color: #1e6fb5;
}
body.dark .pagination .page-item.active .page-link {
    background: #1e6fb5;
    border-color: #1e6fb5;
    color: #fff;
}
body.dark .pagination .page-item.disabled .page-link { opacity: 0.3; }