/* ==========================================================================
   FOOTER — public sayt va ilova paneli uchun YAGONA uslub

   NEGA ALOHIDA FAYL VA NEGA TAILWIND EMAS: footer ilgari IKKI MARTA
   yozilgan edi — `base_public.html` da `site.css` klasslari bilan,
   `base_shell.html` da esa Tailwind utilitalari bilan. Ikkalasi vaqt
   o'tib bir-biridan ajralib ketdi: public nusxadagi «Bo'limlar» ustunining
   uchala havolasi ham kirish sahifasiga ketardi, ilova nusxasida esa
   testlar katalogiga. Bu — navbar bilan bo'lgan xatoning aynan o'zi
   (qarang: `navbar.css` sarlavhasi), shuning uchun yechim ham o'sha:
   bitta partial (`partials/_footer.html`) + bitta CSS.

   QOIDALAR (navbar.css bilan bir xil):
     · Tailwind YO'Q — public sahifalar Tailwind'ni umuman yuklamaydi;
     · `app.css` o'zgaruvchilari YO'Q — public sahifalar uni yuklamaydi,
       `site.css` esa RGB uchlik emas, hex saqlaydi (`rgb(var(--brand))`
       u yerda jimgina axlatga aylanadi);
     · ranglar TO'G'RIDAN-TO'G'RI yozilgan. Footer ikkala mavzuda ham
       bir xil — quyuq navy; shuning uchun `[data-theme]` varianti shart
       emas va qo'shilmagan.
   ========================================================================== */

.ftr {
  margin-top: auto;
  background: #0E2440;                 /* brand-deep dan bir daraja quyuqroq */
  color: rgba(255, 255, 255, .72);
  padding-top: 56px;
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}
.ftr a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .15s ease; }
.ftr a:hover { color: #fff; }

.ftr__inner {
  max-width: 1140px; margin: 0 auto; padding: 0 20px 44px;
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 40px;
}

/* --- brend ustuni ---
   Brend markup'i shu yerda takrorlanadi (`partials/_brand.html` Tailwind'ga
   tayanadi, public sahifalarda esa Tailwind yo'q) — navbar ham aynan shu
   sababdan o'z brendini chizadi. */
.ftr__mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.ftr__chip {
  display: grid; place-items: center; padding: 5px; border-radius: 11px;
  background: #fff; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.ftr__chip img { height: 34px; width: auto; display: block; }
.ftr__word {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: 1.16rem; color: #fff; white-space: nowrap;
}
.ftr__accent { color: #7FB3E0; }
.ftr__mark:hover .ftr__word { color: #fff; }

.ftr__brand p { margin: 12px 0 0; font-size: .92rem; color: rgba(255,255,255,.7); max-width: 320px; }
.ftr__muted { color: rgba(255,255,255,.5); font-size: .85rem; line-height: 1.55; }

/* --- havola ustunlari --- */
.ftr__col { display: flex; flex-direction: column; gap: 11px; }
.ftr__col h4 {
  margin: 0 0 3px; color: #fff; font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.ftr__col a { font-size: .92rem; }

/* Kontakt qatori: ikonka + matn bir chiziqda tursin */
.ftr__aloqa { display: inline-flex; align-items: center; gap: 9px; }
.ftr__aloqa svg { width: 16px; height: 16px; flex: none; opacity: .6; }
.ftr__aloqa:hover svg { opacity: 1; }
.ftr__tel { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* --- ijtimoiy tarmoq ikonkalari --------------------------------------------
   Rasmiy brend belgilari (inline SVG). NEGA INLINE: Lucide'da brend
   ikonkalari YO'Q (ular kutubxonadan olib tashlangan), CDN esa yetib
   kelmasligi mumkin — inline SVG hech narsaga bog'liq emas.
   Har biriga o'z brend rangi bilan hover beriladi: bu ikonkalarni
   «tanish» qiladi va qatorni jonlantiradi. */
.ftr__soc { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ftr__soc a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.ftr__soc a:hover { transform: translateY(-2px); color: #fff; }
.ftr__soc svg { width: 18px; height: 18px; fill: currentColor; }
.ftr__soc a[data-soc="telegram"]:hover  { background: #229ED9; }
.ftr__soc a[data-soc="youtube"]:hover   { background: #FF0000; }
.ftr__soc a[data-soc="instagram"]:hover { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }

/* ==========================================================================
   Ijtimoiy tarmoq / aloqa havolalari — footerdan TASHQARIDA ham (masalan
   «Aloqa» va «Biz haqimizda» sahifalarida).

   Nega shu faylda: bu fayl ikkala stekka ham (public sayt va ilova paneli)
   ulanadi, ya'ni bu yerda yozilgan komponent hamma joyda ishlaydi. Ranglar
   yana to'g'ridan-to'g'ri — sabab fayl boshida.
   ========================================================================== */
.soc-ico { display: inline-grid; place-items: center; flex: none; }
.soc-ico svg { width: 18px; height: 18px; display: block; }

/* Bitta qator: ikonka + matn (telefon, pochta) */
.soc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; text-decoration: none; font-size: .97rem;
}
.soc-row .soc-ico { opacity: .55; }
.soc-row:hover .soc-ico { opacity: 1; }

/* Brend chiplari: ikonka + nom, hover'da o'z rangiga bo'yaladi */
.soc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.soc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-size: .88rem; font-weight: 600; text-decoration: none;
  background: rgba(46, 117, 182, .10); color: #1F4E79;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.soc-chip:hover { color: #fff; transform: translateY(-1px); }
.soc-chip[data-soc="telegram"]:hover  { background: #229ED9; }
.soc-chip[data-soc="youtube"]:hover   { background: #FF0000; }
.soc-chip[data-soc="instagram"]:hover { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }

/* Asosiy tugma ichidagi ikonka matn bilan bir chiziqda tursin */
.soc-cta { display: inline-flex; align-items: center; gap: 9px; }

/* Qorong'i mavzuda chip foni va matni ko'rinarli bo'lsin */
:root[data-theme="dark"] .soc-chip { background: rgba(255,255,255,.10); color: #CFE1F2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .soc-chip { background: rgba(255,255,255,.10); color: #CFE1F2; }
}

/* --- pastki chiziq --- */
.ftr__bottom {
  max-width: 1140px; margin: 0 auto; padding: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: .84rem; color: rgba(255,255,255,.5);
}

@media (max-width: 900px) {
  .ftr__inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ftr__inner { grid-template-columns: 1fr; }
  .ftr__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ==========================================================================
   Ommaviy katalogdagi test qatori (`core/_ommaviy_test.html`)

   Bu fayl ikkala stekka ham ulanadi, shuning uchun shu yerda. Public
   sahifalarda Tailwind yo'q — ranglar to'g'ridan-to'g'ri.
   ========================================================================== */
.omm-test {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid rgba(17, 32, 58, .08);
}
.omm-test:last-child { border-bottom: 0; }
.omm-test__ust { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.omm-test__nom { font-weight: 600; color: #11203A; }
.omm-test__meta { font-size: .82rem; color: rgba(17, 32, 58, .5); font-variant-numeric: tabular-nums; }
.omm-test__btn { padding: 7px 14px; font-size: .85rem; flex: none; }

/* Qulflangan test — chaqiruv, lekin bosiq: ko'zni demo tugmasidan olmasin */
.omm-test__qulf {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: .84rem; color: rgba(17, 32, 58, .45); text-decoration: none;
  transition: color .15s ease;
}
.omm-test__qulf svg { width: 15px; height: 15px; }
.omm-test__qulf:hover { color: #1F4E79; }

:root[data-theme="dark"] .omm-test { border-bottom-color: rgba(255,255,255,.10); }
:root[data-theme="dark"] .omm-test__nom { color: #E8EEF6; }
:root[data-theme="dark"] .omm-test__meta,
:root[data-theme="dark"] .omm-test__qulf { color: rgba(232,238,246,.5); }
:root[data-theme="dark"] .omm-test__qulf:hover { color: #7FB3E0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .omm-test { border-bottom-color: rgba(255,255,255,.10); }
  :root:not([data-theme="light"]) .omm-test__nom { color: #E8EEF6; }
  :root:not([data-theme="light"]) .omm-test__meta,
  :root:not([data-theme="light"]) .omm-test__qulf { color: rgba(232,238,246,.5); }
}

/* --- Ommaviy sahifalardagi forma maydoni --------------------------------
   `.label` va `.field` FAQAT `app.css` da bor, public sahifalar esa uni
   yuklamaydi — o'sha klasslarni bu yerda ishlatib bo'lmaydi (maydon
   uslubsiz qolardi). Shuning uchun ommaviy formalar uchun alohida,
   hech narsaga bog'liq bo'lmagan juftlik. */
.omm-label {
  display: block; margin-bottom: 6px;
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: .87rem; color: #11203A;
}
.omm-input {
  display: block; width: 100%; padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid #D2DDE9; border-radius: 12px; background: #fff;
  font-family: inherit; font-size: .97rem; color: #11203A;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.omm-input::placeholder { color: rgba(17,32,58,.38); }
.omm-input:focus {
  outline: none; border-color: #2E75B6; box-shadow: 0 0 0 3px rgba(46,117,182,.18);
}
:root[data-theme="dark"] .omm-label { color: #E8EEF6; }
:root[data-theme="dark"] .omm-input {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #E8EEF6;
}
:root[data-theme="dark"] .omm-input::placeholder { color: rgba(232,238,246,.38); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .omm-label { color: #E8EEF6; }
  :root:not([data-theme="light"]) .omm-input {
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #E8EEF6;
  }
}