/* ==========================================================================
   02 · BASE — reset, tipografiya, fon, fokus, skrollbar
   ========================================================================== */

* { box-sizing: border-box; }

/* hidden atributi har doim ustun tursin (display:flex/grid uni bekor qilmasin) */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1100px 620px at 88% -14%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 62%),
    radial-gradient(980px 560px at -6% 6%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 58%),
    radial-gradient(760px 500px at 50% 112%, color-mix(in srgb, var(--green) 10%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* nozik toʻr — sahifaga chuqurlik beradi */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(1200px 700px at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(1200px 700px at 50% 0%, #000, transparent 72%);
}
html[data-theme="dark"] body::before { opacity: .35; }

/* .topbar bu roʻyxatda YOʻQ: unda position:sticky turibdi, uni bosib ketmaslik kerak */
main, .footer, .teacher-banner { position: relative; z-index: 1; }

/* ---------- tipografiya ---------- */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 10px; }
p { margin: 0 0 12px; }
a { color: inherit; text-decoration: none; }
s { color: var(--red); }

code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: .95em;
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

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

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

.container {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- yordamchi klasslar ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* klaviatura bilan yurganda birinchi Tab — kontentga oʻtish */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

::selection { background: color-mix(in srgb, var(--blue) 26%, transparent); color: var(--ink); }

/* ---------- fokus halqasi ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 12px;
}
/* SVG ichidagi bosiladigan boʻlaklar uchun (box-shadow SVG da ishlamaydi) */
svg [tabindex]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- skrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-2) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-2) 40%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--blue) 60%, transparent); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }