/* ============================================================================
   EKOMARKAZ — BASE
   Reset, tipografika, foydalanish imkoniyati (a11y), harakat primitivlari.
   ============================================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--tr-base);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}

img, svg, video, canvas { max-width: 100%; display: block; }
img, video { height: auto; }

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-head);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

p { text-wrap: pretty; }

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

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: none; }

/* Interaktiv elementlarda mobil "tap delay" bo'lmasin */
button, a, [role="button"], [role="tab"], .q-opt, .chat-contact, .lesson-row {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--brand-tint); color: var(--text); }

.hidden { display: none !important; }

/* ---- SCROLLBAR ----------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

/* ============================================================================
   A11Y
   ============================================================================ */

/* Ko'rinadigan fokus — faqat klaviatura bilan yurganda.
   Sichqoncha bosishida chiqmaydi, lekin Tab bosilganda aniq ko'rinadi. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Skrinreader uchun matn — ko'zga ko'rinmaydi, o'qiladi */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Klaviatura bilan kelganda ko'rinadigan "asosiy kontentga o'tish" havolasi */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-toast);
  background: var(--surface); color: var(--text);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-2);
  border: 1px solid var(--border-2); box-shadow: var(--sh-3);
  font-weight: var(--fw-semi); font-size: var(--fs-sm);
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { top: var(--sp-4); }

/* ============================================================================
   MOTION PRIMITIVES
   ============================================================================ */
@keyframes fx-rise      { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes fx-rise-lg   { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes fx-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-scale-in  { from { opacity: 0; transform: scale(.96) translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes fx-pop       { 0% { opacity: 0; transform: scale(.7); } 65% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fx-slide-r   { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fx-slide-l   { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fx-shimmer   { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fx-spin      { to { transform: rotate(360deg); } }
@keyframes fx-pulse     { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes fx-ring      { 0% { box-shadow: 0 0 0 0 var(--ring-c, rgba(208,69,47,.4)); }
                          70% { box-shadow: 0 0 0 14px transparent; }
                          100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes fx-drift-a   { 0%, 100% { transform: translate3d(0,0,0) scale(1); }
                          33% { transform: translate3d(56px,-38px,0) scale(1.10); }
                          66% { transform: translate3d(-38px,28px,0) scale(.94); } }
@keyframes fx-drift-b   { 0%, 100% { transform: translate3d(0,0,0) scale(1); }
                          50% { transform: translate3d(-64px,-46px,0) scale(1.16); } }
@keyframes fx-grad      { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes fx-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-check     { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
@keyframes fx-ring-fill { from { stroke-dashoffset: var(--ring-len, 314); } }

/* ---- Sahifa kirishi: pog'onali (staggered) ------------------------------- */
.pg-anim > * { animation: fx-rise var(--dur-4) var(--ease-out) both; }
.pg-anim > *:nth-child(1) { animation-delay: 20ms; }
.pg-anim > *:nth-child(2) { animation-delay: 70ms; }
.pg-anim > *:nth-child(3) { animation-delay: 115ms; }
.pg-anim > *:nth-child(4) { animation-delay: 155ms; }
.pg-anim > *:nth-child(5) { animation-delay: 190ms; }
.pg-anim > *:nth-child(6) { animation-delay: 220ms; }
.pg-anim > *:nth-child(n+7) { animation-delay: 245ms; }

/* ---- Scroll bilan ochilish (IntersectionObserver boshqaradi) ------------- */
.io-hidden { opacity: 0; transform: translate3d(0, 22px, 0); }
.io-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}

/* ---- Utility ------------------------------------------------------------- */
.u-num    { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.u-muted  { color: var(--text-3); }
.u-nowrap { white-space: nowrap; }
.u-stack  { display: flex; flex-direction: column; }
.u-row    { display: flex; align-items: center; }
.u-gap-2  { gap: var(--sp-2); } .u-gap-3 { gap: var(--sp-3); } .u-gap-4 { gap: var(--sp-4); }
.u-mt-4   { margin-top: var(--sp-4); } .u-mt-6 { margin-top: var(--sp-6); }
.u-grow   { flex: 1 1 auto; min-width: 0; }

/* Chop etishda faqat kerakli narsa qoladi */
@media print {
  .no-print, .sidebar, .app-header, .mob-bar { display: none !important; }
  body { background: #fff; }
}