/* HadisLab — asos: reset, tipografika, tugmalar, kartalar, maydonlar. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fon);
  color: var(--siyoh);
  font-family: var(--shrift);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 900; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--havola); font-weight: 700; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgb(124 77 255 / 0.22); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.otib-ket { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--r-sm); background: var(--siyoh); color: var(--fon); }
.otib-ket:focus { top: 12px; }

.konteyner { width: 100%; max-width: var(--kenglik); margin-inline: auto; padding-inline: var(--gutter); }

/* ── 3D ikonkalar ────────────────────────────────────────────────── */

.ikon3d { object-fit: contain; flex-shrink: 0; user-select: none; -webkit-user-drag: none; }
.ikon3d--soya { filter: drop-shadow(0 10px 14px rgb(31 42 68 / 0.18)); }

.suzadi { animation: suzish 5s ease-in-out infinite; will-change: transform; }
@keyframes suzish { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }

/* Belgili quti: 3D ikonka rangli fonda */
.ikon-quti {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--o, 56px);
  height: var(--o, 56px);
  border-radius: calc(var(--o, 56px) * 0.32);
  background: var(--och, var(--asosiy-och));
}
.ikon-quti .ikon3d { width: 64%; height: 64%; }

/* ── Tugmalar: gradient va nur ───────────────────────────────────── */

.tugma {
  --grad: var(--asosiy-grad);
  --nur-rang: 91 92 255;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--r);
  background: var(--grad);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgb(var(--nur-rang) / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.3);
  transition: transform var(--otish), box-shadow var(--otish), filter var(--otish);
}
.tugma:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -12px rgb(var(--nur-rang) / 0.72), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.tugma:active { transform: translateY(1px); filter: brightness(0.96); }
.tugma .ikon3d { width: 24px; height: 24px; }

.tugma--yashil { --grad: var(--yashil-grad); --nur-rang: 34 197 94; }
.tugma--kok    { --grad: var(--kok-grad);    --nur-rang: 47 107 255; }
.tugma--pushti { --grad: var(--pushti-grad); --nur-rang: 255 79 139; }
.tugma--sariq  { --grad: var(--sariq-grad);  --nur-rang: 249 115 22; }
.tugma--qizil  { --grad: var(--qizil-grad);  --nur-rang: 244 63 94; }
.tugma--sinf-5 { --grad: var(--sinf-5-grad); --nur-rang: 34 197 94; }
.tugma--sinf-6 { --grad: var(--sinf-6-grad); --nur-rang: 47 107 255; }
.tugma--sinf-7 { --grad: var(--sinf-7-grad); --nur-rang: 255 79 139; }
.tugma--daraja-1 { --grad: var(--daraja-1-grad); --nur-rang: 34 197 94; }
.tugma--daraja-2 { --grad: var(--daraja-2-grad); --nur-rang: 249 115 22; }
.tugma--daraja-3 { --grad: var(--daraja-3-grad); --nur-rang: 244 63 94; }

.tugma--oq {
  background: var(--karta);
  color: var(--siyoh);
  box-shadow: 0 0 0 1.5px var(--chiziq) inset, 0 10px 24px -16px rgb(31 42 68 / 0.25);
}
.tugma--oq:hover { box-shadow: 0 0 0 1.5px var(--chiziq-2) inset, 0 16px 30px -16px rgb(31 42 68 / 0.3); }

.tugma--katta { min-height: 60px; padding-inline: 32px; font-size: 1.0625rem; border-radius: 20px; }
.tugma--toliq { width: 100%; }
.tugma--kichik { min-height: 42px; padding: 8px 16px; font-size: 0.875rem; border-radius: var(--r-sm); }

.tugma[disabled], .tugma[aria-disabled="true"] {
  background: var(--chiziq);
  color: var(--siyoh-3);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}

.tugmalar { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Kartalar ────────────────────────────────────────────────────── */

.karta {
  position: relative;
  background: var(--karta);
  border: 1px solid var(--chiziq);
  border-radius: var(--r-lg);
  box-shadow: var(--soya-karta);
}
.karta--harakat { transition: transform var(--otish), box-shadow var(--otish), border-color var(--otish); }
.karta--harakat:hover { transform: translateY(-4px); box-shadow: var(--soya-kotar); border-color: var(--chiziq-2); }

/* Gradient hoshiyali karta */
.karta--nurli {
  border: 2px solid transparent;
  background: linear-gradient(var(--karta), var(--karta)) padding-box, var(--grad, var(--asosiy-grad)) border-box;
}

/* ── Chip ────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--och, var(--fon-2));
  color: var(--rang, var(--siyoh-2));
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.chip .ikon3d { width: 18px; height: 18px; }
.chip--oq { background: var(--karta); box-shadow: 0 0 0 1.5px var(--chiziq) inset; color: var(--siyoh); }

/* ── Progress chizig'i ───────────────────────────────────────────── */

.progress { height: 10px; border-radius: 999px; background: var(--fon-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--chiziq); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--grad, var(--asosiy-grad)); transition: width 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }

/* ── Maydonlar ───────────────────────────────────────────────────── */

.maydon { display: grid; gap: 8px; margin-bottom: 18px; }
.maydon > label { font-weight: 800; font-size: 0.9375rem; }

input[type="text"], textarea {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--siyoh);
  background: var(--karta);
  border: 2px solid var(--chiziq);
  border-radius: var(--r);
  padding: 15px 18px;
  resize: vertical;
  transition: border-color var(--otish), box-shadow var(--otish);
}
input[type="text"]::placeholder, textarea::placeholder { color: var(--siyoh-3); font-weight: 600; }
input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: var(--asosiy);
  box-shadow: 0 0 0 5px rgb(59 108 255 / 0.15);
}

/* ── Markdown matni ──────────────────────────────────────────────── */

.nasr > * + * { margin-top: 12px; }
.nasr ul, .nasr ol { padding-left: 22px; margin-block: 10px; }
.nasr li + li { margin-top: 5px; }
.nasr strong { font-weight: 900; }
.nasr table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; margin-block: 14px; border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 0 0 1.5px var(--chiziq); }
.nasr th, .nasr td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--chiziq); background: var(--karta); }
.nasr tr:last-child td { border-bottom: 0; }
.nasr th { background: var(--fon-2); font-weight: 900; }

/* ── Bo'lim sarlavhasi ───────────────────────────────────────────── */

.bolim { padding-block: clamp(64px, 9vw, 104px); }
.bolim--fon { background: var(--fon-2); }
.bolim-bosh { display: grid; justify-items: center; gap: 10px; text-align: center; margin: 0 auto clamp(36px, 5vw, 52px); max-width: 700px; }
.bolim-bosh .ikon3d { width: 64px; height: 64px; margin-bottom: 4px; }
.bolim-bosh h2 { font-size: clamp(2rem, 4.2vw, 2.75rem); }
.bolim-bosh p { color: var(--siyoh-2); font-size: 1.125rem; font-weight: 700; }

/* ── Ogohlantirish ───────────────────────────────────────────────── */

.eslatma {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--r);
  background: var(--sariq-och);
  color: var(--siyoh);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
}
.eslatma .ikon3d { width: 36px; height: 36px; }
.eslatma code { font-size: 0.9em; background: rgb(0 0 0 / 0.06); padding: 1px 6px; border-radius: 6px; }

/* ── Belgili tugma (rejim, menyu) ────────────────────────────────── */

.belgi-tugma {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--karta);
  color: var(--siyoh-2);
  box-shadow: 0 0 0 1.5px var(--chiziq) inset;
  cursor: pointer;
  transition: color var(--otish), box-shadow var(--otish);
}
.belgi-tugma:hover { color: var(--siyoh); box-shadow: 0 0 0 1.5px var(--chiziq-2) inset; }
.belgi-tugma svg { width: 22px; height: 22px; }
.belgi-tugma__oy { display: none; }
:root[data-theme="dark"] .belgi-tugma__quyosh { display: none; }
:root[data-theme="dark"] .belgi-tugma__oy { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .belgi-tugma__quyosh { display: none; }
  :root:not([data-theme="light"]) .belgi-tugma__oy { display: block; }
}

/* ── Animatsiyalar ───────────────────────────────────────────────── */

@keyframes paydo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sakra { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}