/* ============================================================
 * GLASS THEME — iOS 26 / macOS Tahoe Liquid Glass effekti.
 * Yuklash: har sahifa partials/yandex_head.php orqali oladi.
 *
 * Qatlamlar:
 *   1. Glass tokenlari (:root)
 *   2. Body mesh fon — oyna ortidagi rang manbai
 *   3. Utility klaslar — .gl-card, .gl-pill, .gl-btn, .gl-input, .gl-chip
 *   4. Kichik global tuzatishlar (scrollbar, focus halqalari)
 *
 * Eslatma: yandex_head.php :root tokenlarini buzmaymiz, faqat --gl-* qo'shamiz.
 * ============================================================ */

:root{
  /* === Glass surface ranglari (adaptive light) === */
  --gl-50:  rgba(255,255,255,.50);
  --gl-65:  rgba(255,255,255,.62);
  --gl-78:  rgba(255,255,255,.78);
  --gl-90:  rgba(255,255,255,.90);
  --gl-tint-y: rgba(255,200,6,.10);
  --gl-tint-b: rgba(120,180,255,.10);

  /* === Backdrop filterlar === */
  --gl-blur-xs: blur(6px) saturate(140%);
  --gl-blur-sm: blur(12px) saturate(160%);
  --gl-blur-md: blur(20px) saturate(175%);
  --gl-blur-lg: blur(32px) saturate(190%);

  /* === Chegaralar va highlight === */
  --gl-border:    1px solid rgba(255,255,255,.55);
  --gl-border-dk: 1px solid rgba(33,32,31,.06);
  --gl-stroke-top:    inset 0 1px 0 rgba(255,255,255,.85);
  --gl-stroke-bottom: inset 0 -1px 0 rgba(33,32,31,.04);
  --gl-stroke-edge:   inset 0 0 0 1px rgba(255,255,255,.4);

  /* === Soyalar === */
  --gl-shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.06);
  --gl-shadow-2: 0 2px 4px rgba(15,23,42,.05), 0 14px 36px rgba(15,23,42,.10);
  --gl-shadow-3: 0 4px 8px rgba(15,23,42,.06), 0 24px 56px rgba(15,23,42,.14);

  /* === Radiuslar (iOS 26 organik) === */
  --gl-r-sm:  10px;
  --gl-r-md:  16px;
  --gl-r-lg:  22px;
  --gl-r-xl:  28px;
  --gl-r-pill: 999px;
}

/* ============================================================
 * MESH FON — html::before/::after orqali (body emas, chunki ba'zi sahifalar
 * body::before/after'ni o'zining drift gradientlari uchun ishlatadi).
 * ============================================================ */
html{ background: #fafaf7; }
html::before{
  content:'';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(48vw 48vw at 8% 12%,  rgba(255,200,6,.22),  transparent 62%),
    radial-gradient(42vw 42vw at 92% 8%,  rgba(120,180,255,.18), transparent 62%),
    radial-gradient(55vw 55vw at 50% 100%, rgba(255,140,210,.14), transparent 65%),
    radial-gradient(40vw 40vw at 100% 75%, rgba(140,255,200,.12), transparent 60%),
    linear-gradient(180deg, #faf9f5 0%, #f3f2ee 100%);
}
/* Nozik shovqin — glass'ga "shisha" hissi qo'shadi */
html::after{
  content:'';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* body o'z fon rangini bermasin — html mesh ko'rinsin */
body{ background: transparent; }

/* ============================================================
 * UTILITY KLASLAR — sahifa CSS'lari opt-in qilishi uchun.
 * ============================================================ */

/* Glass card — asosiy panel uslubi */
.gl-card{
  position: relative;
  background: var(--gl-78);
  -webkit-backdrop-filter: var(--gl-blur-md);
  backdrop-filter: var(--gl-blur-md);
  border: var(--gl-border);
  border-radius: var(--gl-r-lg);
  box-shadow: var(--gl-shadow-1), var(--gl-stroke-top);
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s,
              background .15s;
}
.gl-card:hover{
  background: var(--gl-90);
  box-shadow: var(--gl-shadow-2), var(--gl-stroke-top);
}
.gl-card.lift:hover{ transform: translateY(-3px); }

/* Strong glass — yuqori ko'rinish (modal, dialog, navigation) */
.gl-strong{
  background: var(--gl-90);
  -webkit-backdrop-filter: var(--gl-blur-lg);
  backdrop-filter: var(--gl-blur-lg);
  border: var(--gl-border);
  box-shadow: var(--gl-shadow-2), var(--gl-stroke-top);
  border-radius: var(--gl-r-lg);
}

/* Light glass — kichik chip, badge */
.gl-light{
  background: var(--gl-50);
  -webkit-backdrop-filter: var(--gl-blur-xs);
  backdrop-filter: var(--gl-blur-xs);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: var(--gl-stroke-top);
}

/* Pill — yumaloq kapsula tugma/tab */
.gl-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--gl-r-pill);
  background: var(--gl-65);
  -webkit-backdrop-filter: var(--gl-blur-sm);
  backdrop-filter: var(--gl-blur-sm);
  border: var(--gl-border);
  box-shadow: var(--gl-stroke-top), 0 1px 2px rgba(15,23,42,.04);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.gl-pill:hover{
  background: var(--gl-90);
  transform: translateY(-1px);
  box-shadow: var(--gl-stroke-top), 0 6px 16px rgba(15,23,42,.10);
}
.gl-pill:active{ transform: translateY(0); }
.gl-pill.active,
.gl-pill[aria-pressed="true"]{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(15,23,42,.20);
}

/* Glass button — Yandex sariq saqlanadi, lekin glass shadow va highlight */
.gl-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  height: 44px;
  border: 0;
  border-radius: var(--gl-r-md);
  background: linear-gradient(180deg, #ffd840 0%, #ffc806 100%);
  color: #1a1400;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 2px 4px rgba(213,171,34,.30),
    0 8px 20px rgba(213,171,34,.18);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.gl-btn:hover{
  background: linear-gradient(180deg, #ffe056 0%, #ffd116 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 4px 8px rgba(213,171,34,.32),
    0 14px 28px rgba(213,171,34,.24);
}
.gl-btn:active{ transform: translateY(1px); }
.gl-btn.ghost{
  background: var(--gl-78);
  -webkit-backdrop-filter: var(--gl-blur-sm);
  backdrop-filter: var(--gl-blur-sm);
  color: var(--ink);
  box-shadow: var(--gl-stroke-top), inset 0 0 0 1px rgba(33,32,31,.10), 0 1px 2px rgba(15,23,42,.04);
}
.gl-btn.ghost:hover{ background: var(--gl-90); }
.gl-btn.dark{
  background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 2px 4px rgba(0,0,0,.20),
    0 8px 18px rgba(0,0,0,.24);
}

/* Glass input */
.gl-input{
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--gl-65);
  -webkit-backdrop-filter: var(--gl-blur-xs);
  backdrop-filter: var(--gl-blur-xs);
  border: 1px solid rgba(33,32,31,.10);
  border-radius: var(--gl-r-md);
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.gl-input:hover{ background: var(--gl-78); }
.gl-input:focus{
  background: var(--gl-90);
  border-color: var(--y-yellow);
  box-shadow: 0 0 0 4px rgba(255,200,6,.22);
}

/* Glass chip — kichik label/status */
.gl-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--gl-r-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--gl-65);
  -webkit-backdrop-filter: var(--gl-blur-xs);
  backdrop-filter: var(--gl-blur-xs);
  border: var(--gl-border);
  box-shadow: var(--gl-stroke-top);
  color: var(--ink-3);
}
.gl-chip.ok    { background: rgba(34,197,94,.14);  color: #15803d; border-color: rgba(34,197,94,.30); }
.gl-chip.warn  { background: rgba(234,179,8,.16);  color: #92400e; border-color: rgba(234,179,8,.30); }
.gl-chip.err   { background: rgba(239,68,68,.14);  color: #b91c1c; border-color: rgba(239,68,68,.30); }
.gl-chip.info  { background: rgba(59,130,246,.14); color: #1d4ed8; border-color: rgba(59,130,246,.30); }

/* Divider — glass-friendly nozik chiziq */
.gl-div{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(33,32,31,.12), transparent);
  margin: 16px 0;
}

/* ============================================================
 * GLOBAL POLISHING
 * ============================================================ */

/* Iconni yumshatish */
::selection{ background: rgba(255,200,6,.55); color: #1a1400; }
::-moz-selection{ background: rgba(255,200,6,.55); color: #1a1400; }

/* Glass-da yumaloq scrollbar */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: rgba(33,32,31,.18);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(33,32,31,.32); background-clip: padding-box; border: 2px solid transparent; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .gl-card,.gl-pill,.gl-btn{ transition: none !important; }
  body::before{ animation: none !important; }
}

/* Mobile — backdrop-filter kuchayadi (CPU yengilroq bo'lishi uchun blurni kamaytirish) */
@media (max-width: 640px){
  :root{
    --gl-blur-md: blur(14px) saturate(160%);
    --gl-blur-lg: blur(22px) saturate(170%);
  }
}