/* ==========================================================================
   HUJJAT SAHIFASI — maqola / me'yoriy hujjat / metodika materialining
   to'liq sahifasi uchun umumiy ko'rinish.

   Ro'yxatdagi kartochka bilan bir tilda gapiradi (kartochka.css): rangli
   tasma, dumaloq tugmalar, muqova lavhasi. Sahifa rangi `--fc` orqali
   beriladi — bo'lim rangi ro'yxatdagi bilan bir xil bo'lishi uchun.

   DIQQAT: klass nomlari `hs-` bilan boshlanadi. Avvalgi shablonlar `dd-`
   prefiksini ishlatardi va u base.html dagi navbar dropdown klasslari
   (`.dd-head`, `.dd-list`, ...) bilan to'qnashib, sarlavhani buzib
   ko'rsatardi. Yangi prefiks o'sha to'qnashuvni yopadi.

   `.aside-*` nomlari ataylab saqlangan: `includes/pdf_koz.html` o'z
   tugmasiga `aside-btn primary` klassini o'zi yozadi.
   ========================================================================== */

/* Rang juftliklari — kartochka.css dagi bilan bir xil. `--fcd` to'q juft:
   ustiga oq matn tushadigan tugma va yorliqlar shundan bo'yaladi. */
/* Standart rang — `.rang-*` dan oldin turadi (pastdagi izohga qarang). */
.hs { --fc: var(--accent); --fcd: var(--accent); }

.rang-1 { --fc: var(--c1); --fcd: var(--c1-deep); }
.rang-2 { --fc: var(--c2); --fcd: var(--c2-deep); }
.rang-3 { --fc: var(--c3); --fcd: var(--c3-deep); }
.rang-4 { --fc: var(--c4); --fcd: var(--c4-deep); }
.rang-5 { --fc: var(--c5); --fcd: var(--c5-deep); }
.rang-6 { --fc: var(--c6); --fcd: var(--c6-deep); }

.hs {
    max-width: 1180px; margin: 0 auto;
    padding: clamp(1.4rem, 3.2vw, 2.6rem) var(--gutter) 4rem;
}

/* --------------------------------------------------------------------------
   SARLAVHA TASMASI
   -------------------------------------------------------------------------- */

.hs-bosh {
    position: relative;
    overflow: hidden;
    margin: 0 0 clamp(1.6rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3.4vw, 2.6rem) clamp(1.4rem, 3.6vw, 2.8rem);
    border-radius: 26px;
    background: var(--paper-soft);
    background:
        radial-gradient(120% 130% at 90% 10%,
                        color-mix(in srgb, var(--fc) 18%, transparent) 0%,
                        transparent 60%),
        linear-gradient(135deg,
                        color-mix(in srgb, var(--fc) 14%, #fff) 0%,
                        color-mix(in srgb, var(--fc) 4%, #fff) 55%,
                        #fff 100%);
    border: 1.5px solid color-mix(in srgb, var(--fc) 20%, var(--paper-line));
    box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--fc) 70%, #10243D);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.4rem 1.8rem;
    align-items: start;
}
.hs-bosh::after {
    content: '';
    position: absolute; right: -60px; bottom: -110px;
    width: 220px; height: 220px; border-radius: 50%;
    background: color-mix(in srgb, var(--fc) 14%, transparent);
    pointer-events: none;
}

/* muqova / lavha */
.hs-muqova {
    position: relative; z-index: 1;
    width: clamp(78px, 9vw, 104px);
    aspect-ratio: 5 / 7;
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--fc) 16%, #fff);
    box-shadow: 0 16px 28px -16px rgba(16, 36, 61, 0.6);
}
.hs-muqova img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-muqova::after {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
    background: linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0));
}
.hs-lavha {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.4rem; text-align: center; color: #fff;
    background: linear-gradient(150deg,
                var(--fc) 0%,
                var(--fcd, var(--fc)) 52%,
                color-mix(in srgb, var(--fcd, var(--fc)) 60%, #123252) 100%);
}
.hs-lavha::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(180deg,
                rgba(255,255,255,0.16) 0 1px, transparent 1px 10px);
    opacity: 0.5;
}
.hs-lavha i {
    position: relative; font-size: 1.8rem;
    filter: drop-shadow(0 2px 4px rgba(10, 25, 45, 0.35));
}
.hs-lavha b {
    position: relative;
    font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1.15; word-break: break-word;
}

.hs-bosh-matn { position: relative; z-index: 1; min-width: 0; }

.hs-crumbs {
    display: inline-flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.34rem 0.85rem; margin: 0 0 0.9rem;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--fc) 22%, var(--paper-line));
    border-radius: 999px;
    font-size: 0.76rem; font-weight: 600; color: var(--ink-soft);
}
.hs-crumbs a { color: var(--fc); transition: opacity 0.2s ease; }
.hs-crumbs a:hover { opacity: 0.7; }
.hs-crumbs i { font-size: 0.48rem; color: var(--ink-mute); }
.hs-crumbs .here { color: var(--ink); }

.hs-yorliqlar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.45rem; margin: 0 0 0.8rem;
}
.hs-tag {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.8rem; border-radius: 999px;
    background: var(--fcd, var(--fc)); color: #fff;
    font-size: 0.72rem; font-weight: 700;
    box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--fc) 90%, #10243D);
}
.hs-info {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.75rem; border-radius: 999px;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--fc) 20%, var(--paper-line));
    font-size: 0.74rem; font-weight: 600; color: var(--ink-soft);
}

.hs-sarlavha {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    font-weight: 700; line-height: 1.16;
    letter-spacing: -0.015em;
    margin: 0 0 0.9rem; color: var(--ink);
}

.hs-tavsif {
    position: relative;
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 1.1rem;
    border-radius: 0 14px 14px 0;
    border-left: 5px solid var(--fc);
    background: color-mix(in srgb, var(--fc) 11%, #fff);
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.6; color: var(--ink-soft);
    max-width: 68ch;
}

.hs-organ { font-size: 0.86rem; color: var(--ink-mute); margin: 0.9rem 0 0; }
.hs-organ b { color: var(--ink); font-weight: 700; }

@media (max-width: 560px) {
    .hs-bosh { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   TO'R — matn + yon ustun (avvalgidek)
   -------------------------------------------------------------------------- */

.hs-tor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(1.5rem, 3vw, 2.8rem);
    align-items: start;
}
@media (max-width: 920px) {
    .hs-tor { grid-template-columns: 1fr; }
    .hs-yon { order: 2; position: static; }
}

/* --------------------------------------------------------------------------
   MATN
   -------------------------------------------------------------------------- */

.hs-matn {
    padding: clamp(1.3rem, 2.6vw, 2.2rem);
    background: #fff;
    border: 1.5px solid var(--paper-line);
    border-radius: 22px;
    box-shadow: 0 14px 30px -28px rgba(16, 36, 61, 0.8);
    font-size: 1rem; line-height: 1.75; color: var(--ink);
}
.hs-matn h2, .hs-matn h3, .hs-matn h4 {
    font-family: var(--display);
    font-weight: 600; line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 1.9rem 0 0.7rem;
}
.hs-matn > :first-child { margin-top: 0; }
.hs-matn h2 { font-size: 1.45rem; }
.hs-matn h3 { font-size: 1.2rem; color: var(--fc); }
.hs-matn h4 { font-size: 1.05rem; }
.hs-matn p { margin: 0 0 1.1rem; }
.hs-matn ul, .hs-matn ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.hs-matn li { margin-bottom: 0.45rem; line-height: 1.65; }
.hs-matn li::marker { color: var(--fc); font-weight: 700; }
.hs-matn strong { color: var(--ink); font-weight: 700; }
.hs-matn em { color: var(--fc); font-style: normal; font-weight: 600; }
.hs-matn blockquote {
    margin: 1.4rem 0;
    padding: 1rem 1.3rem;
    background: color-mix(in srgb, var(--fc) 9%, #fff);
    border-left: 5px solid var(--fc);
    border-radius: 0 14px 14px 0;
    color: var(--ink-soft);
}
.hs-matn a { color: var(--fc); font-weight: 600; border-bottom: 2px solid color-mix(in srgb, var(--fc) 49%, #fff); }
.hs-matn a:hover { border-bottom-color: var(--fc); }
.hs-matn img { max-width: 100%; height: auto; border-radius: 14px; }
.hs-matn table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; }
.hs-matn th, .hs-matn td {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--paper-line);
    text-align: left;
}
.hs-matn th { background: color-mix(in srgb, var(--fc) 14%, #fff); font-weight: 700; }

/* --------------------------------------------------------------------------
   YON USTUN
   -------------------------------------------------------------------------- */

.hs-yon { position: sticky; top: 92px; }

.aside-card {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--fc) 18%, var(--paper-line));
    border-radius: 20px;
    padding: 1.3rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: 0 14px 30px -28px rgba(16, 36, 61, 0.8);
}
.aside-card h4 {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--display);
    font-size: 0.95rem; font-weight: 600;
    color: var(--ink);
    margin: 0 0 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1.5px dashed color-mix(in srgb, var(--fc) 25%, var(--paper-line));
}
.aside-card h4 i { color: var(--fc); font-size: 0.85rem; }

.aside-info { display: flex; flex-direction: column; gap: 0.8rem; }
.aside-row { display: flex; flex-direction: column; gap: 0.1rem; }
.aside-row .k {
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--fc) 55%, var(--ink-mute));
}
.aside-row .v { font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.35; }

.aside-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.1rem; }
.aside-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.85rem; font-weight: 700;
    background: color-mix(in srgb, var(--fc) 14%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--fc) 41%, #fff);
    color: color-mix(in srgb, var(--fc) 80%, #10243D);
    transition: transform 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.aside-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--fc) 23%, #fff); }
.aside-btn.primary {
    background: var(--fcd, var(--fc)); color: #fff;
    border-color: var(--fcd, var(--fc));
    box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--fc) 90%, #10243D);
}
.aside-btn.primary:hover { background: color-mix(in srgb, var(--fcd, var(--fc)) 88%, #10243D); }
.aside-btn i { font-size: 0.82rem; }

.related-list { display: flex; flex-direction: column; gap: 0.55rem; }
.related-item {
    display: block;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    border: 1.5px solid var(--paper-line-soft);
    background: color-mix(in srgb, var(--fc) 7%, #fff);
    color: var(--ink);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.related-item:hover {
    transform: translateX(4px);
    border-color: color-mix(in srgb, var(--fc) 53%, #fff);
    background: color-mix(in srgb, var(--fc) 15%, #fff);
}
.related-item .t {
    font-family: var(--display);
    font-size: 0.92rem; font-weight: 600; line-height: 1.3;
    margin: 0 0 0.25rem;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.related-item .m {
    font-size: 0.72rem; font-weight: 600;
    color: color-mix(in srgb, var(--fc) 55%, var(--ink-mute));
    margin: 0;
}

/* --------------------------------------------------------------------------
   CHIQISH ANIMATSIYASI
   -------------------------------------------------------------------------- */

@keyframes hs-kir { to { opacity: 1; transform: translateY(0); } }
.hs-kir {
    opacity: 0; transform: translateY(14px);
    animation: hs-kir 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hs-kir.k1 { animation-delay: 0.04s; }
.hs-kir.k2 { animation-delay: 0.13s; }
.hs-kir.k3 { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
    .hs-kir { animation: none; opacity: 1; transform: none; }
    .aside-btn:hover, .related-item:hover { transform: none; }
}