/* Jurnal sahifasi — 2-ko'rinish (sd_jurnal.tpl) */
.sj { max-width: var(--k-eni, 1400px); margin: 0 auto; padding: 18px 24px 48px; color: var(--k-matn); }
.sj [hidden] { display: none !important; }
.sj-yol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .9rem; color: var(--k-xira); margin-bottom: 22px; }
.sj-yol a { color: var(--k-xira); }
.sj-yol span[aria-current] { color: var(--k-matn); font-weight: 500; text-transform: uppercase; }
.sj-yol .fa { font-size: .8rem; opacity: .7; }

/* yuqori blok */
.sj-bosh { display: grid; grid-template-columns: 220px minmax(0, 1fr) 330px; gap: 34px; align-items: start; padding-bottom: 30px; border-bottom: 1px solid var(--k-chiziq); }
.sj-muqova { border-radius: 8px; overflow: hidden; box-shadow: 0 12px 28px -14px rgba(10,35,71,.45); background: var(--k-kok-och); aspect-ratio: 220 / 290; display: flex; align-items: center; justify-content: center; }
.sj-muqova img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sj-muqova .fa { font-size: 3rem; color: var(--k-kok); }
.sj-malumot h1 { margin: 0 0 14px; font-size: clamp(1.6rem, 2.6vw, 2.35rem); line-height: 1.15; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--k-navy); text-wrap: balance; }
.sj-ost { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 1.05rem; color: var(--k-xira); }
.sj-ochiq { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid #9BD8A9; border-radius: 999px; background: #EFFAF1; color: #1E7B34; font-size: .88rem; font-weight: 500; }
.sj-faktlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 34px; font-size: 1rem; color: var(--k-xira); }
.sj-faktlar li { display: flex; align-items: center; gap: 10px; }
.sj-faktlar .fa { width: 18px; text-align: center; color: #8A96AD; }
.sj-faktlar b { color: var(--k-matn); font-weight: 700; }
.sj-faktlar a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sj-tarmoq { margin: 18px 0 0; display: flex; gap: 8px; }
.sj-tarmoq a { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
.sj-tg { background: #2AABEE; }

.sj-karta { background: #fff; border-radius: 14px; box-shadow: var(--k-soya); padding: 20px 22px; }
.sj-karta__bosh { display: flex; gap: 14px; align-items: center; }
.sj-karta__ikon { flex: 0 0 52px; height: 52px; border-radius: 10px; background: var(--k-kok-och); color: var(--k-kok); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.sj-karta__bosh small { display: block; font-size: .95rem; color: var(--k-matn); }
.sj-karta__bosh b { display: block; font-size: 1.45rem; font-weight: 800; color: var(--k-kok); }
.sj-karta__izoh { margin: 14px 0 12px; padding-bottom: 14px; border-bottom: 1px solid var(--k-chiziq); font-size: .9rem; color: var(--k-xira); }
.sj-karta__q { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 1.02rem; color: var(--k-kok); }
.sj-ik { flex: 0 0 34px; height: 34px; border-radius: 8px; background: #2AABEE; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sj-ik--yashil { background: #25C064; }

/* bo'limlar qatori */
.sj-tablar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--k-chiziq); margin-bottom: 30px; }
.sj-tablar a { display: inline-flex; align-items: center; gap: 8px; padding: 16px 16px 14px; color: var(--k-xira); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; }
.sj-tablar a:hover { color: var(--k-kok); }
.sj-tablar a.faol { color: var(--k-kok); border-bottom-color: var(--k-kok); font-weight: 600; }
.sj-tablar a .fa { color: #8A96AD; }
.sj-tablar a.faol .fa { color: var(--k-kok); }
.sj-tablar .sj-yubor { margin-left: auto; align-self: center; padding: 11px 22px; border: 0; border-radius: 8px; background: var(--k-kok); color: #fff; font-weight: 600; }
.sj-tablar .sj-yubor .fa { color: #fff; }
.sj-tablar .sj-yubor:hover { background: var(--k-kok-2); color: #fff; }

/* tana */
.sj-tana { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
.sj-haqida { background: #F1F4F9; border-radius: 12px; padding: 26px 28px 22px; margin-bottom: 34px; }
.sj-haqida h2 { margin: 0 0 18px; font-size: 1.45rem; font-weight: 700; text-transform: uppercase; color: var(--k-matn); }
.sj-haqida__matn { max-height: 13.5em; overflow: hidden; position: relative; line-height: 1.6; font-size: 1.02rem; }
.sj-haqida__matn.uzun::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3em; background: linear-gradient(rgba(241,244,249,0), #F1F4F9); }
.sj-haqida__matn p { margin: 0 0 .8em; }
.sj-batafsil { display: inline-block; margin-top: 10px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.sj-yil { display: flex; align-items: center; gap: 14px; margin: 26px 0 16px; }
.sj-yil h3 { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--k-matn); }
.sj-yil__chiziq { flex: 1; height: 1px; background: var(--k-chiziq); }
.sj-yil small { color: var(--k-xira); font-size: .85rem; }
.sj-panjara { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.sj-son { display: flex; flex-direction: column; border: 1px solid var(--k-chiziq); background: #fff; text-align: center; text-decoration: none; color: var(--k-matn); transition: box-shadow .2s, transform .2s; }
.sj-son:hover { text-decoration: none; box-shadow: var(--k-soya); transform: translateY(-2px); }
.sj-son__rasm { aspect-ratio: 210 / 220; overflow: hidden; background: var(--k-kok-och); display: flex; align-items: center; justify-content: center; }
.sj-son__rasm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sj-son b { display: block; padding: 12px 10px 2px; font-size: .92rem; font-weight: 600; }
.sj-son small { display: block; padding: 0 10px; font-size: .8rem; color: var(--k-xira); }
.sj-son em { display: block; padding: 4px 10px 12px; font-style: normal; font-size: .8rem; color: var(--k-kok); }
.sj-bosh-xabar { color: var(--k-xira); }

.sj-sahifa { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.sj-sahifa button { min-width: 40px; height: 40px; padding: 0 12px; border: 0; background: none; border-radius: 8px; color: var(--k-matn); font: inherit; cursor: pointer; }
.sj-sahifa button.faol { background: var(--k-kok-och2); color: var(--k-kok); font-weight: 700; }
.sj-sahifa button:disabled { color: #A9B3C6; cursor: default; }

/* yon panel */
.sj-yon section { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--k-chiziq); }
.sj-yon h3 { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 2px solid #7FCB8E; font-size: 1.08rem; font-weight: 600; color: var(--k-matn); }
.sj-teglar { display: flex; flex-wrap: wrap; gap: 8px; }
.sj-teglar span { padding: 7px 12px; background: #F1F4F9; border-radius: 4px; font-size: .92rem; }
.sj-azolar { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sj-azolar li { display: flex; gap: 12px; align-items: center; }
.sj-azolar img, .sj-harf { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; }
.sj-harf { display: inline-flex; align-items: center; justify-content: center; background: var(--k-kok-och); color: var(--k-kok); font-weight: 700; }
.sj-azolar b { display: block; font-size: .95rem; }
.sj-azolar small { display: block; color: var(--k-xira); font-size: .82rem; }
.sj-aloqa h3 { border-bottom-color: #8FA9D6; }
.sj-aloqa p { margin: 0 0 12px; line-height: 1.5; }
.sj-aloqa p span { color: var(--k-xira); }
.sj-aloqa a { word-break: break-all; }

@media (max-width: 1100px) {
    .sj-bosh { grid-template-columns: 180px minmax(0, 1fr); }
    .sj-karta { grid-column: 1 / -1; }
    .sj-tana { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
    .sj { padding: 14px 16px 36px; }
    .sj-bosh { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .sj-muqova { max-width: 200px; }
    .sj-faktlar { grid-template-columns: minmax(0, 1fr); }
    .sj-tablar { flex-wrap: nowrap; overflow-x: auto; }
    .sj-tablar a { white-space: nowrap; }
    .sj-tablar .sj-yubor { margin-left: 8px; }
    .sj-panjara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Tablar: sahifa ichida almashadigan panellar */
.sj-panel[hidden] { display: none !important; }
.sj-p-sar { margin: 0 0 22px; font-size: 1.5rem; font-weight: 700; color: var(--k-navy); }
.sj-azo-tur { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.sj-azo { display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: #fff; border: 1px solid var(--k-chiziq); border-radius: 12px; }
.sj-azo img, .sj-harf--katta { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 72px; }
.sj-harf--katta { display: inline-flex; align-items: center; justify-content: center; background: var(--k-kok-och); color: var(--k-kok); font-weight: 700; font-size: 1.3rem; }
.sj-azo b { display: block; font-size: 1rem; line-height: 1.3; }
.sj-azo small { display: block; margin-top: 4px; color: var(--k-matn); font-size: .88rem; line-height: 1.4; }
.sj-azo em { display: block; margin-top: 6px; font-style: normal; color: var(--k-xira); font-size: .82rem; line-height: 1.4; }
#sj-p-maqolalar, #sj-p-qollanma, #sj-p-etika { min-width: 0; }