/* =========================================================
   goxost-landing.css
   Goxost.net ochiq bosh sahifasi uchun 0 dan yozilgan, mustaqil
   dizayn tizimi. Hech qanday Bootstrap yoki boshqa admin-panel CSS
   fayliga (styles.css, gx-utilities.css, insaf-variables.css) bog'liq
   emas — shu fayl o'zining rang/o'lcham token'larini o'zi belgilaydi.
   Faqat welcome.blade.php shu faylni yuklaydi.
   ========================================================= */

/* ---------- 1. RESET ---------- */
/* [hidden] atributi HAR DOIM ustun bo'lsin.

   Brauzerning o'z qoidasi `[hidden] { display: none }` — u atribut
   selektori, ya'ni ixtiyoriy klass qoidasidan (masalan
   `.ai-assistant__panel { display: flex }`) kuchsizroq. Natijada
   `hidden` qo'yilgan element baribir ko'rinib turadi va sahifani
   buzadi. Bu bir marta bo'lgan xato emas — `hidden` bilan boshqariladigan
   har bir panel, tab va bildirishnoma shu tuzoqqa tushadi. */
[hidden] {
  display: none !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

img, svg {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* ---------- 2. TOKENLAR ---------- */
:root {
  /* Brend rangi — goxost.net logotipidan aniq olingan */
  --gx-primary: #6c5ffc;
  --gx-primary-hover: #5847e0;
  --gx-primary-soft: rgba(108, 95, 252, .12);
  --gx-gradient: linear-gradient(135deg, #5847e0 0%, #6c5ffc 55%, #8b7cf8 100%);

  --gx-success: #22c55e;
  --gx-success-soft: rgba(34, 197, 94, .12);

  --gx-bg: #f7f6fb;
  --gx-surface: #ffffff;
  --gx-surface-hover: #f1eefb;
  --gx-border: #e8e5f2;
  --gx-border-strong: #d7d2ea;
  --gx-text: #17152b;
  --gx-text-muted: #64607a;
  --gx-text-faint: #9691ab;
  --gx-on-primary: #ffffff;

  --gx-shadow-sm: 0 2px 6px rgba(76, 29, 149, .07);
  --gx-shadow-md: 0 8px 24px rgba(76, 29, 149, .12);
  --gx-shadow-lg: 0 20px 48px rgba(76, 29, 149, .18);

  --gx-radius-sm: 10px;
  --gx-radius-md: 16px;
  --gx-radius-lg: 22px;
  --gx-radius-full: 999px;

  --gx-font-display: "Sora", "Inter", "Segoe UI", Arial, sans-serif;
  --gx-font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --gx-1: 4px;
  --gx-2: 8px;
  --gx-3: 12px;
  --gx-4: 16px;
  --gx-6: 24px;
  --gx-8: 32px;
  --gx-12: 48px;
  --gx-16: 64px;
  --gx-20: 80px;
  --gx-24: 96px;
  --gx-32: 128px;

  --gx-container-max: 1440px;
  --gx-header-h: 76px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gx-primary-soft: rgba(108, 95, 252, .22);
    --gx-bg: #100e1c;
    --gx-surface: #191725;
    --gx-surface-hover: #221f33;
    --gx-border: #2b2740;
    --gx-border-strong: #3a3555;
    --gx-text: #f3f1fa;
    --gx-text-muted: #a49fc0;
    --gx-text-faint: #7a7599;
    --gx-shadow-sm: 0 2px 6px rgba(0, 0, 0, .3);
    --gx-shadow-md: 0 8px 24px rgba(0, 0, 0, .4);
    --gx-shadow-lg: 0 20px 48px rgba(0, 0, 0, .5);
  }
}

body {
  font-family: var(--gx-font-body);
  background: var(--gx-bg);
  color: var(--gx-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. KONTEYNER ---------- */
.gx-wrap {
  width: 100%;
  max-width: var(--gx-container-max);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px)  { .gx-wrap { padding-inline: 32px; } }
@media (min-width: 1280px) { .gx-wrap { padding-inline: 40px; } }
@media (min-width: 1440px) { .gx-wrap { padding-inline: 64px; } }

/* ---------- 4. GRID ---------- */
.gx-grid {
  display: grid;
  gap: var(--gx-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .gx-grid--2, .gx-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gx-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .gx-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .gx-grid { gap: var(--gx-8); }
}

.gx-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gx-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .gx-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gx-16);
  }
}

/* ---------- 5. TIPOGRAFIYA ---------- */
.gx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gx-2);
  padding: 6px var(--gx-3);
  border-radius: var(--gx-radius-full);
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: var(--gx-4);
}

.gx-h1 {
  font-family: var(--gx-font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-size: clamp(30px, 4vw, 44px);
  max-width: 14ch;
}

.gx-h2 {
  font-family: var(--gx-font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 3vw, 32px);
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--gx-3);
}

.gx-lead {
  color: var(--gx-text-muted);
  font-size: 17px;
  line-height: 1.65;
  max-width: 46ch;
}

.gx-section-head {
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--gx-12);
  text-align: center;
}

/* Sarlavha va lead bloklarining O'ZI ham markazga tursin.

   .gx-h1 da max-width: 14ch, .gx-lead da 46ch bor — ya'ni ular
   konteynerdan tor. text-align: center faqat ichidagi matnni
   markazlashtiradi, blokning o'zi esa chap chetda qolib ketadi.
   Shuning uchun margin-inline: auto kerak. */
.gx-section-head .gx-h1,
.gx-section-head .gx-h2,
.gx-section-head .gx-lead {
  margin-inline: auto;
}

.gx-section {
  padding-block: var(--gx-12);
}

@media (min-width: 1024px) {
  .gx-section { padding-block: var(--gx-20); }
}

/* ---------- 6. TUGMALAR ---------- */
.gx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gx-2);
  padding: 13px 28px;
  border-radius: var(--gx-radius-full);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  border: 1.5px solid transparent;
}

.gx-btn:hover {
  transform: translateY(-1px);
}

.gx-btn--sm {
  padding: 9px 20px;
  font-size: 14px;
}

.gx-btn--primary {
  background: var(--gx-primary);
  color: var(--gx-on-primary);
  box-shadow: 0 10px 24px rgba(108, 95, 252, .3);
}

.gx-btn--primary:hover {
  background: var(--gx-primary-hover);
}

.gx-btn--outline {
  background: transparent;
  color: var(--gx-text);
  border-color: var(--gx-border-strong);
}

.gx-btn--outline:hover {
  border-color: var(--gx-primary);
  color: var(--gx-primary);
}

.gx-btn--ghost {
  background: transparent;
  color: var(--gx-text-muted);
}

.gx-btn--ghost:hover {
  color: var(--gx-primary);
}

.gx-btn--white {
  background: #fff;
  color: var(--gx-primary);
}

.gx-btn--white:hover {
  background: rgba(255, 255, 255, .9);
}

.gx-btn--block {
  width: 100%;
}

/* ---------- 7. HEADER ---------- */
.gx-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--gx-header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--gx-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gx-border);
}

.gx-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gx-8);
}

.gx-header__logo img {
  height: 30px;
  width: auto;
}

.gx-header__logo .gx-logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  .gx-header__logo .gx-logo-light { display: none; }
  .gx-header__logo .gx-logo-dark { display: block; }
}

.gx-nav {
  display: none;
  align-items: center;
  gap: var(--gx-6);
  margin-inline: auto;
}

.gx-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--gx-text-muted);
  transition: color .15s ease;
}

.gx-nav a:hover {
  color: var(--gx-primary);
}

.gx-header__actions {
  display: none;
  align-items: center;
  gap: var(--gx-3);
  margin-left: auto;
}

.gx-nav-toggle {
  margin-left: auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--gx-radius-sm);
}

.gx-nav-toggle:hover {
  background: var(--gx-surface-hover);
}

.gx-nav-toggle svg {
  width: 22px;
  height: 22px;
}

.gx-nav-toggle .gx-icon-close { display: none; }
.gx-nav-toggle.is-open .gx-icon-open { display: none; }
.gx-nav-toggle.is-open .gx-icon-close { display: block; }

@media (min-width: 1024px) {
  .gx-nav, .gx-header__actions { display: flex; }
  .gx-nav-toggle { display: none; }
}

/* Mobil menyu paneli */
.gx-mobile-menu {
  display: none;
  border-bottom: 1px solid var(--gx-border);
  background: var(--gx-surface);
}

.gx-mobile-menu.is-open {
  display: block;
}

.gx-mobile-menu__inner {
  padding-block: var(--gx-4);
  display: flex;
  flex-direction: column;
  gap: var(--gx-2);
}

.gx-mobile-menu a {
  padding: var(--gx-3) 0;
  font-weight: 600;
  color: var(--gx-text);
  border-bottom: 1px solid var(--gx-border);
}

.gx-mobile-menu__actions {
  display: flex;
  gap: var(--gx-3);
  padding-top: var(--gx-4);
}

@media (min-width: 1024px) {
  .gx-mobile-menu { display: none !important; }
}

/* ---------- 8. HERO ---------- */
.gx-hero {
  position: relative;
  padding-block: var(--gx-16) var(--gx-8);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .gx-hero { padding-block: var(--gx-24) var(--gx-12); }
}

.gx-hero::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -220px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gx-primary-soft), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.gx-hero__inner {
  position: relative;
  z-index: 1;
}

.gx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gx-3);
  margin-block: var(--gx-6) var(--gx-8);
}

.gx-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gx-8);
}

.gx-hero__stat-value {
  font-family: var(--gx-font-display);
  font-size: 22px;
  font-weight: 800;
}

.gx-hero__stat-label {
  font-size: 13px;
  color: var(--gx-text-muted);
}

.gx-hero__media {
  display: flex;
  justify-content: center;
}

.gx-hero__media img {
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 30px 60px rgba(76, 29, 149, .18));
}

/* ---------- 9. XUSUSIYAT RO'YXATI ---------- */
.gx-feature-media img {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}

.gx-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--gx-8);
}

.gx-feature {
  display: flex;
  gap: var(--gx-4);
}

.gx-feature__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--gx-radius-md);
  display: grid;
  place-items: center;
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-size: 20px;
}

.gx-feature__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.gx-feature__desc {
  font-size: 14px;
  color: var(--gx-text-muted);
  max-width: 48ch;
}

/* ---------- 10. KARTA (umumiy asos) ---------- */
.gx-card {
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gx-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--gx-shadow-md);
  border-color: var(--gx-border-strong);
}

/* ---------- 11. STATISTIKA ---------- */
.gx-stat {
  display: flex;
  align-items: center;
  gap: var(--gx-4);
  padding: var(--gx-6);
  height: 100%;
}

.gx-stat__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--gx-radius-md);
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #fff;
  background: var(--gx-gradient);
}

.gx-stat__value {
  font-family: var(--gx-font-display);
  font-size: 26px;
  font-weight: 800;
}

.gx-stat__label {
  font-size: 13px;
  color: var(--gx-text-muted);
}

/* ---------- 12. IMKONIYATLAR ---------- */
.gx-mission {
  padding: var(--gx-6);
  height: 100%;
}

.gx-mission__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--gx-radius-md);
  display: grid;
  place-items: center;
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-size: 20px;
  margin-bottom: var(--gx-4);
}

.gx-mission__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.gx-mission__desc {
  font-size: 13px;
  color: var(--gx-text-muted);
}

/* ---------- 13. CTA BANNER ---------- */
.gx-banner {
  background: var(--gx-gradient);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-16) var(--gx-8);
  text-align: center;
  color: #fff;
  box-shadow: var(--gx-shadow-lg);
}

.gx-banner__title {
  font-family: var(--gx-font-display);
  font-weight: 800;
  color: #fff;
  font-size: clamp(22px, 2.6vw, 28px);
  max-width: 32ch;
  margin-inline: auto;
  margin-bottom: var(--gx-3);
}

.gx-banner__lead {
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--gx-8);
}

/* ---------- 14. NARXLAR ---------- */
.gx-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--gx-radius-full);
  background: var(--gx-surface-hover);
  margin-bottom: var(--gx-12);
}

.gx-tabs__btn {
  border-radius: var(--gx-radius-full);
  padding: 10px var(--gx-6);
  font-size: 14px;
  font-weight: 700;
  color: var(--gx-text-muted);
}

.gx-tabs__btn.is-active {
  background: var(--gx-surface);
  color: var(--gx-primary);
  box-shadow: var(--gx-shadow-sm);
}

.gx-tab-pane {
  display: none;
}

.gx-tab-pane.is-active {
  display: block;
}

.gx-price {
  padding: var(--gx-6);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.gx-price--featured {
  border-color: color-mix(in srgb, var(--gx-primary) 45%, transparent);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--gx-primary) 18%, transparent);
}

.gx-price__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-3);
  margin-bottom: var(--gx-4);
}

.gx-price__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--gx-3);
}

.gx-price__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--gx-radius-md);
  display: grid;
  place-items: center;
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  flex-shrink: 0;
}

.gx-price__title {
  font-size: 17px;
  font-weight: 700;
}

.gx-badge {
  display: inline-flex;
  padding: 3px var(--gx-3);
  border-radius: var(--gx-radius-full);
  background: var(--gx-success-soft);
  color: var(--gx-success);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.gx-price__amount {
  font-family: var(--gx-font-display);
  font-size: 26px;
  font-weight: 800;
  margin-bottom: var(--gx-1);
}

.gx-price__amount sub {
  font-family: var(--gx-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--gx-text-muted);
}

.gx-price__desc {
  color: var(--gx-text-muted);
  font-size: 14px;
  margin-bottom: var(--gx-6);
}

.gx-price__list {
  display: flex;
  flex-direction: column;
  gap: var(--gx-3);
  margin-bottom: var(--gx-6);
  flex: 1;
}

.gx-price__list li {
  display: flex;
  align-items: center;
  gap: var(--gx-2);
  font-size: 14px;
}

.gx-price__list i {
  color: var(--gx-success);
  font-size: 16px;
  flex-shrink: 0;
}

/* ---------- 15. JAMOA ---------- */
.gx-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--gx-8) var(--gx-6);
  height: 100%;
}

.gx-team__avatar {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  margin-bottom: var(--gx-4);
  border-radius: 50%;
  overflow: hidden;
  background: var(--gx-surface-hover);
  box-shadow: 0 0 0 4px var(--gx-primary-soft);
}

.gx-team__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-team__name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.gx-team__role {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--gx-primary);
  background: var(--gx-primary-soft);
  padding: 4px 12px;
  border-radius: var(--gx-radius-full);
  margin-bottom: var(--gx-3);
}

.gx-team__bio {
  font-size: 13px;
  line-height: 1.6;
  color: var(--gx-text-muted);
}

/* ---------- 16. SAVOL-JAVOB ---------- */
.gx-faq-col {
  display: flex;
  flex-direction: column;
  gap: var(--gx-3);
}

.gx-faq-item {
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-md);
  overflow: hidden;
}

.gx-faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-3);
  padding: var(--gx-4) var(--gx-6);
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}

.gx-faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  transition: transform .2s ease;
}

.gx-faq-item__btn.is-active .gx-faq-item__icon {
  transform: rotate(45deg);
}

.gx-faq-item__panel {
  display: none;
  padding: 0 var(--gx-6) var(--gx-4);
  color: var(--gx-text-muted);
  font-size: 14px;
  max-width: 62ch;
}

.gx-faq-item__panel.is-open {
  display: block;
}

.gx-faq-item__panel a,
.gx-faq-item__panel code {
  color: var(--gx-primary);
}

.gx-faq-item__panel code {
  background: var(--gx-surface-hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
}

/* ---------- 17. YAKUNIY CTA ---------- */
.gx-final-cta {
  padding: var(--gx-8);
  display: grid;
  gap: var(--gx-6);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gx-final-cta { grid-template-columns: 1fr auto; }
}

.gx-final-cta__title {
  font-family: var(--gx-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  margin-bottom: var(--gx-2);
}

.gx-final-cta__lead {
  color: var(--gx-text-muted);
  max-width: 56ch;
}

/* ---------- 18. FOOTER ---------- */
.gx-footer {
  background: var(--gx-surface);
  border-top: 1px solid var(--gx-border);
  padding-block: var(--gx-20) var(--gx-8);
}

.gx-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gx-8);
}

@media (min-width: 640px) {
  .gx-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gx-footer__grid { grid-template-columns: 2fr 1fr 1fr 2fr; gap: var(--gx-12); }
}

.gx-footer__logo img {
  height: 26px;
  margin-bottom: var(--gx-4);
}

.gx-footer__desc {
  font-size: 14px;
  color: var(--gx-text-muted);
  max-width: 42ch;
  line-height: 1.7;
  margin-bottom: var(--gx-4);
}

.gx-footer__heading {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--gx-4);
}

.gx-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--gx-2);
}

.gx-footer__links a {
  font-size: 14px;
  color: var(--gx-text-muted);
  transition: color .15s ease;
}

.gx-footer__links a:hover {
  color: var(--gx-primary);
}

.gx-footer__bottom {
  margin-top: var(--gx-16);
  padding-top: var(--gx-6);
  border-top: 1px solid var(--gx-border);
  text-align: center;
  font-size: 13px;
  color: var(--gx-text-muted);
}

.gx-footer__bottom a {
  color: var(--gx-primary);
  font-weight: 600;
}

/* ---------- 19. YUQORIGA QAYTISH TUGMASI ---------- */
.gx-back-top {
  position: fixed;
  right: var(--gx-6);
  bottom: var(--gx-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gx-primary);
  color: #fff;
  box-shadow: var(--gx-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 40;
}

.gx-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gx-back-top:hover {
  background: var(--gx-primary-hover);
}

/* ---------- 20. YORDAMCHI KLASSLAR ---------- */
.gx-text-center { text-align: center; }

/* ---------- 21. FORMA BOSHQARUVLARI ----------
   Sabab: <select> uchun butun saytda hech qanday stil yozilmagan edi —
   brauzer o'zining tug'ma ko'rinishini chizardi. U yonidagi .gx-input
   maydonlaridan sezilarli past va tor bo'lib, shrifti ham merosga
   o'tmasdi (brauzerlar select uchun ~13px tizim shriftini qo'yadi).
   Natijada formalar "kichkina va hunuk" ko'rinardi.

   Shuning uchun bu yerda toza <select> elementining o'zi stillanadi —
   shunda maxsus klass yozilmagan eski formalar (masalan goxedu arizasi)
   ham avtomatik to'g'rilanadi. Tug'ma o'q appearance:none bilan
   o'chiriladi va uning o'rniga fon rasmi sifatida SVG shevron
   chiziladi (tashqi fayl emas — qo'shimcha so'rov bo'lmasligi uchun). */

:root {
  --gx-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --gx-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a49fc0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  }
}

select,
.gx-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  padding: 12px 40px 12px 14px;

  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--gx-text);

  background-color: var(--gx-surface);
  background-image: var(--gx-select-arrow);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;

  border: 1px solid var(--gx-border-strong);
  border-radius: var(--gx-radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

select:hover,
.gx-select:hover {
  border-color: var(--gx-primary);
}

select:focus,
.gx-select:focus {
  outline: none;
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 3px var(--gx-primary-soft);
}

select:disabled,
.gx-select:disabled {
  opacity: .55;
  cursor: not-allowed;
  background-color: var(--gx-surface-hover);
}

/* Ochilgan ro'yxat elementlari — Windows/Linux'da fon oq qolib ketmasligi
   uchun (macOS bu qoidani e'tiborsiz qoldiradi, bu normal). */
select option {
  color: var(--gx-text);
  background: var(--gx-surface);
}

/* Bir qatorga joylashtirilgan select (masalan filtr yonidagi) o'z
   kengligini egallashi uchun. */
.gx-select--auto {
  display: inline-block;
  width: auto;
  min-width: 180px;
}

/* Ko'p qatorli select (size > 1) o'q va cursor'siz bo'lishi kerak. */
select[multiple],
select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 14px;
  cursor: default;
}

/* Matn maydoni — select bilan bir xil ko'rinishda bo'lishi uchun.
   .gx-input goxost-auth.css da alohida yozilgan, textarea esa hech
   qayerda yo'q edi. */
.gx-textarea {
  display: block;
  width: 100%;
  min-height: 130px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gx-text);
  background: var(--gx-surface);
  border: 1px solid var(--gx-border-strong);
  border-radius: var(--gx-radius-sm);
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gx-textarea:focus {
  outline: none;
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 3px var(--gx-primary-soft);
}

.gx-textarea::placeholder { color: var(--gx-text-faint); }

/* Belgilash katakchasi va radio — tug'ma o'lchami 13px bo'lib, yonidagi
   matndan kichik ko'rinardi. */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gx-primary);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  select,
  .gx-select,
  .gx-textarea {
    transition: none;
  }
}

/* ---------- FAYL TANLASH MAYDONI ----------
   Sabab: <input type="file"> butun saytda stillanmagan edi — brauzer
   o'zining kulrang "Choose file / Файл не выбран" tugmasini chizardi.
   U yonidagi maydonlardan past, boshqa shriftda va boshqa rangda bo'lib,
   forma buzilgandek ko'rinardi.

   Yechim: maydonning o'zi punktir ramkali "yuklash sohasi"ga aylantiriladi,
   ichidagi tugma esa ::file-selector-button orqali sayt tugmalari bilan bir
   xil qilinadi. ::-webkit-file-upload-button — eski Safari uchun nusxa
   (u standart selektorni hali tanimaydi).

   Token'lar fallback qiymat bilan yozilgan: bu blok ham gx- dizayn
   tizimida (ochiq sayt, panel), ham eski insaf temasida (shaxsiy kabinet)
   ishlashi kerak, ular esa turli o'zgaruvchilar to'plamiga ega. */

input[type="file"],
.form-control[type="file"],
.gxp-input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gx-text-muted, #64607a);
  background-color: var(--gx-surface, #ffffff);
  background-image: none;
  border: 1.5px dashed var(--gx-border-strong, #d7d2ea);
  border-radius: var(--gx-radius-sm, 10px);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

input[type="file"]:hover,
.form-control[type="file"]:hover {
  border-color: var(--gx-primary, #6c5ffc);
  background-color: var(--gx-surface-hover, #f1eefb);
}

input[type="file"]:focus-visible,
.form-control[type="file"]:focus-visible {
  outline: none;
  border-color: var(--gx-primary, #6c5ffc);
  box-shadow: 0 0 0 3px var(--gx-primary-soft, rgba(108, 95, 252, .14));
}

input[type="file"]::file-selector-button,
.form-control[type="file"]::file-selector-button {
  margin: -2px 14px -2px 0;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--gx-radius-sm, 9px);
  background: var(--gx-primary, #6c5ffc);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease;
}

input[type="file"]::-webkit-file-upload-button,
.form-control[type="file"]::-webkit-file-upload-button {
  margin: -2px 14px -2px 0;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--gx-radius-sm, 9px);
  background: var(--gx-primary, #6c5ffc);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

input[type="file"]:hover::file-selector-button,
.form-control[type="file"]:hover::file-selector-button {
  background: var(--gx-primary-hover, #5847e0);
}

input[type="file"]:disabled,
.form-control[type="file"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Rasm oldindan ko'rinishi — yuklashdan oldin nima tanlanganini ko'rsatadi. */
.gx-photo-field {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.gx-photo-field__preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gx-primary, #6c5ffc);
  color: #ffffff;
  font-weight: 700;
  font-size: 26px;
}

.gx-photo-field__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-photo-field__control {
  flex: 1 1 260px;
  min-width: 240px;
}

@media (prefers-reduced-motion: reduce) {
  input[type="file"],
  input[type="file"]::file-selector-button {
    transition: none;
  }
}

/* =========================================================
   IKONKALAR VA HARAKAT

   Bu blok sayt bo'ylab bitta: ochiq sahifa ham, panel ham, kabinet ham
   goxost-landing.css ni yuklaydi. Har bir sahifada o'z animatsiyasini
   yozish bir joyda 200ms, boshqa joyda 600ms bo'lib qolishiga olib
   kelardi — bu yerda esa muddat va egri chiziq bitta o'zgaruvchida.
   ========================================================= */

:root {
  --gx-ease: cubic-bezier(.22, .61, .36, 1);
  --gx-dur: .28s;
  --gx-dur-slow: .5s;
}

/* ---------- IKONKA ----------
   Matn bilan yonma-yon turganda siqilib ketmasin va qatorda o'rtada
   ko'rinsin. Rangni o'zi belgilamaydi — currentColor. */
.gx-icon {
  flex: 0 0 auto;
  vertical-align: -0.15em;
}

/* ---------- KIRISH ANIMATSIYASI ----------
   `data-anim` qo'yilgan element sahifa ochilganda pastdan suzib chiqadi.
   Ketma-ket kartalar uchun `style="--gx-i:2"` — kechikish shunga qarab
   hisoblanadi va ro'yxat to'lqin bo'lib ochiladi.

   Animatsiya `forwards` bilan tugaydi: tugagach element o'z holicha
   qoladi, transform qolib ketmaydi (aks holda position:fixed bo'lgan
   bolalar shu elementga nisbatan joylashib, modal buzilardi). */
@keyframes gx-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes gx-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gx-scale {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

[data-anim] {
  opacity: 0;
  animation: gx-rise var(--gx-dur-slow) var(--gx-ease) forwards;
  animation-delay: calc(var(--gx-i, 0) * 60ms);
}

[data-anim="fade"]  { animation-name: gx-fade; }
[data-anim="scale"] { animation-name: gx-scale; }

/* ---------- KO'TARILISH ----------
   Bosiladigan kartalar uchun. `will-change` ataylab yo'q: o'nlab karta
   bir vaqtda qatlamga chiqsa, mobil qurilmada aksincha sekinlashadi. */
.gx-lift {
  transition:
    transform var(--gx-dur) var(--gx-ease),
    box-shadow var(--gx-dur) var(--gx-ease),
    border-color var(--gx-dur) var(--gx-ease);
}

.gx-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--gx-shadow-md);
}

.gx-lift:active { transform: translateY(-1px); }

/* ---------- BOSISH ---------- */
.gx-press { transition: transform .12s var(--gx-ease); }
.gx-press:active { transform: scale(.97); }

/* ---------- PULSATSIYA ----------
   Diqqat talab qiladigan yagona narsa uchun (o'qilmagan bildirishnoma
   nuqtasi). Cheksiz aylanadi, shuning uchun juda past kontrastda. */
@keyframes gx-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.gx-pulse { animation: gx-pulse 2s ease-in-out infinite; }

/* ---------- AYLANISH ----------
   Yuborilayotgan forma tugmasi ichidagi ikonka uchun. */
@keyframes gx-spin {
  to { transform: rotate(360deg); }
}

.gx-spin { animation: gx-spin .9s linear infinite; }

/* ---------- YUKLANISH SKELETI ---------- */
@keyframes gx-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.gx-skeleton {
  border-radius: var(--gx-radius-sm);
  background: linear-gradient(
    90deg,
    var(--gx-border) 25%,
    var(--gx-surface-hover) 37%,
    var(--gx-border) 63%
  );
  background-size: 200% 100%;
  animation: gx-shimmer 1.4s ease infinite;
}

/* ---------- HARAKATNI KAMAYTIRISH ----------
   Tizim sozlamasida "harakatni kamaytirish" yoqilgan bo'lsa, animatsiya
   umuman bo'lmaydi. MUHIM: [data-anim] uchun opacity 1 ga qaytariladi,
   aks holda animatsiyasiz element ko'rinmay qolardi. */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1;
    animation: none;
  }

  .gx-lift,
  .gx-press {
    transition: none;
  }

  .gx-lift:hover,
  .gx-lift:active,
  .gx-press:active {
    transform: none;
  }

  .gx-pulse,
  .gx-spin,
  .gx-skeleton {
    animation: none;
  }
}

/* =========================================================
   FORMA BOSHQARUVLARI

   Bu bloklar avval goxost-auth.css da edi — ya'ni faqat kirish/ro'yxatdan
   o'tish sahifalarida yuklanardi. Ochiq saytdagi boshqa formalar
   (GoxEdu arizasi, aloqa) esa o'sha klasslarni yozsa ham, CSS'siz qolib
   brauzerning tayyor maydonlarini ko'rsatardi.

   Endi ular shu yerda: goxost-landing.css hamma karkasga ulanadi.
   goxost-auth.css da faqat kirish sahifasiga xos narsalar qoldi.
   ========================================================= */

.gx-field {
  margin-bottom: var(--gx-4);
}

.gx-field:last-of-type { margin-bottom: 0; }

.gx-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--gx-text);
  margin-bottom: 6px;
}

.gx-label__aux {
  font-size: 12px;
  font-weight: 600;
  color: var(--gx-primary);
}

.gx-input {
  width: 100%;
  height: 46px;
  padding: 0 var(--gx-4);
  border-radius: var(--gx-radius-sm);
  border: 1.5px solid var(--gx-border);
  background: var(--gx-bg);
  color: var(--gx-text);
  font-size: 15px;
  font-family: var(--gx-font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gx-input::placeholder { color: var(--gx-text-faint); }

.gx-input:focus {
  outline: none;
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 3px var(--gx-primary-soft);
}

.gx-input--error {
  border-color: #f43f5e;
}

.gx-input[readonly] {
  color: var(--gx-text-muted);
  cursor: not-allowed;
}

.gx-input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.gx-input-group .gx-input { flex: 1 1 auto; }

.gx-input-toggle {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--gx-radius-sm);
  border: 1.5px solid var(--gx-border);
  background: var(--gx-surface);
  color: var(--gx-text-muted);
  display: grid;
  place-items: center;
  font-size: 17px;
  transition: border-color .15s ease, color .15s ease;
}

.gx-input-toggle:hover {
  color: var(--gx-primary);
  border-color: var(--gx-border-strong);
}

.gx-field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #e11d48;
}

@media (prefers-color-scheme: dark) {
  .gx-field-error { color: #fb7185; }
}

.gx-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.gx-checkbox-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--gx-primary);
}

.gx-checkbox-row label {
  font-size: 13px;
  color: var(--gx-text-muted);
  font-weight: 500;
}

.gx-alert {
  padding: var(--gx-3) var(--gx-4);
  border-radius: var(--gx-radius-md);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: var(--gx-4);
}

.gx-alert--success {
  background: var(--gx-success-soft);
  color: #15803d;
}

/* Xato varianti: ochiq saytdagi formalar uchun kerak edi, auth
   sahifalarida esa xatolar maydon ostida (.gx-field-error) chiqadi. */
.gx-alert--error {
  background: rgba(239, 68, 68, .1);
  color: #dc2626;
}

@media (prefers-color-scheme: dark) {
  .gx-alert--success { color: #4ade80; }
  .gx-alert--error { color: #fb7185; }
}

/* ---------- HEADERDAGI FOYDALANUVCHI ----------
   Tizimga kirgan odam uchun "Kirish/Ro'yxatdan o'tish" o'rniga kabinet
   tugmasi va avatar chiqadi. */
.gx-user-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  border: 1.5px solid var(--gx-border);
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-weight: 700;
  font-size: 14px;
  transition: border-color .2s var(--gx-ease, ease);
}

.gx-user-chip:hover { border-color: var(--gx-primary); }

.gx-user-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .gx-user-chip { transition: none; }
}