/* ════════════════════════════════════════════════════════════
   TERAN ILDIZ — css/apple-motion.css   (v56 · 8/8)
   ────────────────────────────────────────────────────────────
   3D CHUQURLIK QATLAMI — MOBIL BIRINCHI

   v55 dan farqi (nega qayta yozildi):
     • v55 da 3D faqat sichqoncha bilan ishlardi → telefonda
       umuman bilinmasdi. Endi harakatning ASOSIY manbai —
       SCROLL. Telefonda ham, kompyuterda ham doim ko'rinadi.
     • Scroll animatsiyasi `animation-timeline: view()` orqali
       KOMPOZITOR OQIMIDA ishlaydi: JS ishtirok etmaydi,
       asosiy oqim bloklanmaydi, 60fps kafolatlanadi.
     • Telefonda karta o'lchamlari qayta sozlandi: ro'yxat
       qatorlari o'rniga 2 ustunli, muqovali haqiqiy kartalar.
     • Tezlik uchun: content-visibility, contain, va telefonda
       backdrop-filter kartalardan olib tashlandi (u eng qimmat
       CSS xususiyati — 200 ta kartada telefonni bo'g'adi).

   HARAKAT MANBALARI (4 ta, bir-birini to'ldiradi):
     1) SCROLL   — karta ekranga kirganda 3D dan yassiga chiqadi
     2) TEZLIK   — tez scroll qilganda kartalar oqimga egiladi
     3) BARMOQ   — bosilgan nuqta tomon 3D og'ish (telefon)
     4) KURSOR   — sichqoncha ostida 3D og'ish (kompyuter)

   TARTIB:
     0) O'zgaruvchilar va @property ro'yxati
     1) Chuqurlik: ko'p qatlamli va rangli soyalar
     2) Shisha yuzalar
     3) YAGONA TRANSFORM — 4 manba bitta ifodada
     4) Scroll xoreografiyasi
     5) Muqova qatlamlari va spekulyar nur
     6) 3D KATEGORIYA — ekstruziyali kafel
     7) MOBIL: o'lcham, to'r, tipografiya
     8) TEZLIK: content-visibility, contain
     9) Moslashuv: reduced-motion, Save-Data, eski brauzer
   ════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   0) O'ZGARUVCHILAR
───────────────────────────────────────────── */

/* Ro'yxatdan o'tkazish — bu o'zgaruvchilarni ANIMATSIYALANADIGAN
   qiladi. Aks holda CSS ularni sakratib almashtiradi va scroll
   xoreografiyasi umuman ishlamaydi. */
@property --ap-sy { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ap-sz { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ap-sr { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --ap-ss { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --ap-so { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --ap-xz { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ap-xs { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --ap-xo { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --ap-rx { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --ap-ry { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --ap-sc { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --ap-mx { syntax: '<number>'; inherits: false; initial-value: .5; }
@property --ap-my { syntax: '<number>'; inherits: false; initial-value: .5; }
/* Tezlik — BUTUN sahifaga tarqaladi, shuning uchun inherits: true */
@property --ap-vel { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

:root {
  /* ── Apple egri chiziqlari ── */
  --ap-ease:     cubic-bezier(.32, .72, 0, 1);
  --ap-ease-out: cubic-bezier(.16, 1, .3, 1);

  --ap-t-1: 130ms;
  --ap-t-2: 240ms;
  --ap-t-3: 400ms;

  --ap-tilt:  7deg;    /* kursor og'ishi chegarasi   */
  --ap-touch: 9deg;    /* barmoq og'ishi (kuchliroq) */
  --ap-depth: 40px;    /* muqova glifi chuqurligi    */
  --ap-persp: 1100px;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ap-spring: linear(
      0, .0088 1.4%, .0345 2.9%, .1252 5.9%, .5346 14.7%, .6812 17.6%,
      .8028 20.6%, .8986 23.8%, .9351 25.5%, .9651 27.4%, .9887 29.6%,
      1.0062 32%, 1.0182 34.7%, 1.024 38%, 1.0219 43.5%, 1.0002 62.6%,
      .9977 71.2%, 1
    );
  }
}
:root { --ap-spring: var(--ap-spring, cubic-bezier(.16, 1, .3, 1)); }

/* ─────────────────────────────────────────────
   1) CHUQURLIK — ko'p qatlamli soya

   Bitta soya hech qachon haqiqiy ko'rinmaydi. Uchtasi kerak:
   kontakt (yaqin, qattiq) + ambient (keng, yumshoq) + key
   (yo'nalishli). Ustiga kategoriya rangida NUR qo'shiladi —
   shundan karta "yonayotgandek" ko'rinadi.
───────────────────────────────────────────── */
:root {
  --ap-sh-1: 0 1px 2px rgba(0,0,0,.24), 0 3px 8px rgba(0,0,0,.20);
  --ap-sh-2: 0 1px 2px rgba(0,0,0,.26), 0 6px 14px rgba(0,0,0,.24),
             0 14px 34px rgba(0,0,0,.26);
  --ap-sh-3: 0 2px 4px rgba(0,0,0,.30), 0 12px 28px rgba(0,0,0,.30),
             0 28px 66px rgba(0,0,0,.40);
  --ap-sh-4: 0 3px 6px rgba(0,0,0,.34), 0 20px 44px rgba(0,0,0,.36),
             0 48px 110px rgba(0,0,0,.50);

  --ap-rim:    inset 0 1px 0 rgba(255,255,255,.10);
  --ap-rim-hi: inset 0 1px 0 rgba(255,255,255,.20),
               inset 0 -1px 0 rgba(0,0,0,.30);

  --ap-glass:    rgba(30, 34, 40, .62);
  --ap-glass-hi: rgba(42, 47, 55, .74);
  --ap-glass-bd: rgba(255,255,255,.11);
  --ap-blur:     blur(22px) saturate(180%);
  --ap-blur-lg:  blur(34px) saturate(190%);
  --ap-spec: .18;
}

[data-theme="white"],
[data-theme="silver"],
[data-theme="tiffany"] {
  --ap-sh-1: 0 1px 2px rgba(18,24,32,.06), 0 3px 8px rgba(18,24,32,.07);
  --ap-sh-2: 0 1px 2px rgba(18,24,32,.07), 0 6px 16px rgba(18,24,32,.09),
             0 16px 36px rgba(18,24,32,.10);
  --ap-sh-3: 0 2px 4px rgba(18,24,32,.08), 0 14px 30px rgba(18,24,32,.12),
             0 32px 70px rgba(18,24,32,.15);
  --ap-sh-4: 0 3px 6px rgba(18,24,32,.09), 0 22px 48px rgba(18,24,32,.15),
             0 56px 120px rgba(18,24,32,.20);
  --ap-rim:    inset 0 1px 0 rgba(255,255,255,.85);
  --ap-rim-hi: inset 0 1px 0 rgba(255,255,255,.95),
               inset 0 -1px 0 rgba(18,24,32,.07);
  --ap-glass:    rgba(255,255,255,.68);
  --ap-glass-hi: rgba(255,255,255,.82);
  --ap-glass-bd: rgba(18,24,32,.10);
  --ap-spec: .34;
}

/* ── Kategoriya rangidagi NUR — kartaning o'z rangi bilan yonadi ── */
.ap-on .card {
  --ap-halo: 0 10px 30px -6px
    color-mix(in srgb, var(--cc, var(--gold)) 30%, transparent);
  --ap-halo-hi: 0 18px 48px -8px
    color-mix(in srgb, var(--cc, var(--gold)) 46%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ap-on .card { --ap-halo: none; --ap-halo-hi: none; }
}

/* ─────────────────────────────────────────────
   2) FON AURASI — shishaning ostida rang bo'lishi uchun
───────────────────────────────────────────── */
.ap-on body::before {
  content: "";
  position: fixed; inset: -20vmax;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 18% 8%,
      color-mix(in srgb, var(--cc, #c9a96a) 18%, transparent) 0%, transparent 62%),
    radial-gradient(42vmax 34vmax at 86% 82%,
      color-mix(in srgb, var(--emerald-hi, #46a37e) 14%, transparent) 0%, transparent 66%);
  opacity: .55;
  filter: blur(30px);
  animation: apAura 46s var(--ap-ease) infinite alternate;
}
@keyframes apAura {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ap-on body::before { display: none; }
}

/* ─────────────────────────────────────────────
   3) YAGONA TRANSFORM

   4 ta harakat manbai BITTA ifodada qo'shiladi. Hech biri
   ikkinchisini almashtirmaydi — v55 dagi asosiy xato shu edi.
     sy/sz/sr/ss  → scroll kirishi
     xz/xs        → scroll chiqishi
     rx/ry/sc     → kursor yoki barmoq og'ishi
     vel          → scroll tezligi (butun sahifaga umumiy)
───────────────────────────────────────────── */
.ap-on #grid.grid,
.ap-on .rec-grid { perspective: var(--ap-persp); perspective-origin: 50% 42%; }

.ap-on .card {
  animation: none;                    /* eski cardIn o'chadi */
  transform-style: preserve-3d;

  background: var(--ap-glass);
  -webkit-backdrop-filter: var(--ap-blur);
  backdrop-filter: var(--ap-blur);
  border: 1px solid var(--ap-glass-bd);
  border-radius: 18px;
  box-shadow: var(--ap-sh-2), var(--ap-halo), var(--ap-rim);

  transform:
    perspective(var(--ap-persp))
    translate3d(0, var(--ap-sy), calc(var(--ap-sz) + var(--ap-xz)))
    rotateX(calc(var(--ap-sr) + var(--ap-rx) + var(--ap-vel)))
    rotateY(var(--ap-ry))
    scale(calc(var(--ap-ss) * var(--ap-xs) * var(--ap-sc)));

  opacity: calc(var(--ap-so) * var(--ap-xo));

  /* Faqat og'ish o'zgaruvchilari kuzatiladi. Scroll o'zgaruvchilari
     animation-timeline bilan boshqariladi — ularni transition
     qilish kerak emas va zararli (ikki tizim kurashadi). */
  transition:
    box-shadow   var(--ap-t-3) var(--ap-ease-out),
    border-color var(--ap-t-2) var(--ap-ease),
    background   var(--ap-t-2) var(--ap-ease),
    --ap-rx var(--ap-t-3) var(--ap-spring),
    --ap-ry var(--ap-t-3) var(--ap-spring),
    --ap-sc var(--ap-t-3) var(--ap-spring);
}

/* Kursor/barmoq ostida — kechikishsiz kuzatish */
.ap-on .card.ap-live {
  transition:
    box-shadow   var(--ap-t-3) var(--ap-ease-out),
    border-color var(--ap-t-2) var(--ap-ease),
    background   var(--ap-t-2) var(--ap-ease);
  will-change: transform;
}

.ap-on .card:hover,
.ap-on .card.ap-live {
  box-shadow: var(--ap-sh-3), var(--ap-halo-hi), var(--ap-rim-hi);
  border-color: color-mix(in srgb, var(--cc, var(--gold)) 40%, var(--ap-glass-bd));
  background: var(--ap-glass-hi);
}
.ap-on .card:hover .cttl { text-decoration: none; }

/* ─────────────────────────────────────────────
   4) SCROLL XOREOGRAFIYASI

   MUHIM: bu animatsiyalar KOMPOZITOR OQIMIDA ishlaydi.
   JS umuman ishtirok etmaydi, asosiy oqim bo'sh qoladi.
   Shu sabab telefonda ham 200 ta kartada ham tez.
───────────────────────────────────────────── */
@keyframes apEnter {
  from { --ap-sy: 48px; --ap-sz: -180px; --ap-sr: 19deg; --ap-ss: .82; --ap-so: 0; }
  60%  { --ap-so: 1; }
  to   { --ap-sy: 0px;  --ap-sz: 0px;    --ap-sr: 0deg;  --ap-ss: 1;   --ap-so: 1; }
}
@keyframes apExit {
  from { --ap-xz: 0px;    --ap-xs: 1;   --ap-xo: 1; }
  to   { --ap-xz: -130px; --ap-xs: .93; --ap-xo: .30; }
}

@supports (animation-timeline: view()) {
  .ap-on .card {
    animation: apEnter linear both, apExit linear both;
    animation-timeline: view(), view();
    /* Kirish: pastdan chiqib, ekran o'rtasiga yetguncha yassilanadi
       Chiqish: tepadan chiqayotganda orqaga cho'kib, xiralashadi */
    animation-range: entry 0% cover 26%, exit 20% exit 100%;
  }
  /* Yon panel vidjetlari ham xuddi shunday, lekin yumshoqroq */
  .ap-on .ti-rail > .rw {
    animation: apEnter linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
}

/* animation-timeline yo'q brauzer: JS IntersectionObserver
   zaxira sifatida .ap-in klassini qo'yadi (motion3d.js) */
@supports not (animation-timeline: view()) {
  .ap-on .card.ap-rise {
    --ap-sy: 34px; --ap-sz: -110px; --ap-sr: 12deg; --ap-ss: .90; --ap-so: 0;
    transition:
      --ap-sy .7s var(--ap-ease-out) var(--ap-d, 0ms),
      --ap-sz .7s var(--ap-ease-out) var(--ap-d, 0ms),
      --ap-sr .7s var(--ap-ease-out) var(--ap-d, 0ms),
      --ap-ss .7s var(--ap-ease-out) var(--ap-d, 0ms),
      --ap-so .7s var(--ap-ease-out) var(--ap-d, 0ms),
      box-shadow var(--ap-t-3) var(--ap-ease-out);
  }
  .ap-on .card.ap-rise.ap-in {
    --ap-sy: 0px; --ap-sz: 0px; --ap-sr: 0deg; --ap-ss: 1; --ap-so: 1;
  }
}

/* ─────────────────────────────────────────────
   5) MUQOVA QATLAMLARI + SPEKULYAR NUR
───────────────────────────────────────────── */
.ap-on .card .cov {
  transform: translateZ(8px);
  border-radius: 17px 17px 0 0;
  overflow: hidden;
}
.ap-on .card .cov-ic {
  transform: translateZ(var(--ap-depth));
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45))
          drop-shadow(0 1px 2px rgba(0,0,0,.32));
  transition: transform var(--ap-t-3) var(--ap-spring);
}
.ap-on .card:hover .cov-ic,
.ap-on .card.ap-live .cov-ic {
  transform: translateZ(calc(var(--ap-depth) + 22px)) translateY(-5px) scale(1.08);
}
.ap-on .card .cov-badge {
  transform: translateZ(30px);
  background: rgba(14,16,19,.50);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  box-shadow: 0 5px 14px rgba(0,0,0,.30);
}
.ap-on .card .audio-disc {
  transform: translateZ(34px);
  box-shadow: 0 12px 26px rgba(0,0,0,.42), var(--ap-rim);
  transition: transform var(--ap-t-3) var(--ap-spring);
}
.ap-on .card:hover .audio-disc,
.ap-on .card.ap-live .audio-disc { transform: translateZ(52px) scale(1.08); }
.ap-on .card .cov-eq { transform: translateZ(24px); }
.ap-on .card .cbd    { transform: translateZ(16px); }
.ap-on .card .cft,
.ap-on .card .cab-bar { transform: translateZ(8px); }

/* ── IMZO: kursor/barmoq ostidagi yorug'lik dog'i ── */
.ap-on .card .cov::before {
  background:
    radial-gradient(
      44% 64% at calc(var(--ap-mx) * 100%) calc(var(--ap-my) * 100%),
      rgba(255,255,255, var(--ap-spec)) 0%,
      rgba(255,255,255, calc(var(--ap-spec) * .28)) 34%,
      transparent 70%),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.05) 0 1px, transparent 1px 9px);
}

/* ── Tugmalar ── */
.ap-on .cbtn {
  border-radius: 11px;
  background: var(--ap-glass);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border-color: var(--ap-glass-bd);
  box-shadow: var(--ap-sh-1), var(--ap-rim);
  transform: translateZ(20px);
  transition: background var(--ap-t-2) var(--ap-ease),
              color var(--ap-t-2) var(--ap-ease),
              border-color var(--ap-t-2) var(--ap-ease),
              box-shadow var(--ap-t-2) var(--ap-ease-out),
              transform var(--ap-t-2) var(--ap-spring);
}
.ap-on .cbtn:hover  { transform: translateZ(28px) translateY(-1px); box-shadow: var(--ap-sh-2), var(--ap-rim-hi); }
.ap-on .cbtn:active { transform: translateZ(12px) scale(.95); }

.ap-on .cab-bar { background: transparent; border-top-color: var(--ap-glass-bd); }
.ap-on .cab-btn { border-radius: 10px; transition: background var(--ap-t-1) var(--ap-ease), transform var(--ap-t-2) var(--ap-spring); }
.ap-on .cab-btn:active { transform: scale(.93); }

.ap-on .card-soon { --ap-rx: 0deg; --ap-ry: 0deg; --ap-sc: 1; --ap-halo: none; }

/* ─────────────────────────────────────────────
   6) 3D KATEGORIYA — EKSTRUZIYALI KAFEL

   Kategoriya ikoni endi yassi kvadrat emas: qatlamli
   box-shadow bilan HAQIQIY qalinlik beriladi (yon yuzalar),
   rotateY bilan burilganda qalinlik ko'rinadi.
   Telefonda hover yo'q — shuning uchun sekin "suzish"
   animatsiyasi doim ishlaydi va 3D o'zi bilinib turadi.
───────────────────────────────────────────── */
.ap-on #catbar { perspective: 900px; }

.ap-on .nc {
  position: relative;
  border-radius: 13px;
  transform-style: preserve-3d;
  transition: color var(--ap-t-2) var(--ap-ease),
              transform var(--ap-t-2) var(--ap-spring);
}
.ap-on .nc::before {
  content: "";
  position: absolute; inset: 2px 0; z-index: -1;
  border-radius: 13px;
  background: var(--ap-glass);
  -webkit-backdrop-filter: var(--ap-blur);
  backdrop-filter: var(--ap-blur);
  border: 1px solid transparent;
  opacity: 0; transform: scale(.90);
  transition: opacity var(--ap-t-2) var(--ap-ease-out),
              transform var(--ap-t-2) var(--ap-spring),
              box-shadow var(--ap-t-2) var(--ap-ease-out);
}
.ap-on .nc:hover::before {
  opacity: 1; transform: scale(1);
  border-color: var(--ap-glass-bd);
  box-shadow: var(--ap-sh-1), var(--ap-rim);
}
.ap-on .nc.on::before {
  opacity: 1; transform: scale(1);
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  box-shadow: var(--ap-sh-2), var(--ap-rim-hi);
}

/* Ekstruziya: 6 qatlam qorong'i chekka = qalinlik illyuziyasi */
.ap-on .nc i,
.ap-on .side-item i,
.ap-on .cbadge i {
  border-radius: 7px;
  box-shadow:
    1px 1px 0 rgba(0,0,0,.30), 2px 2px 0 rgba(0,0,0,.26),
    3px 3px 0 rgba(0,0,0,.22), 4px 4px 0 rgba(0,0,0,.18),
    5px 5px 0 rgba(0,0,0,.13), 6px 6px 0 rgba(0,0,0,.09),
    0 10px 18px rgba(0,0,0,.32),
    var(--ap-rim);
  transition: transform var(--ap-t-3) var(--ap-spring),
              box-shadow var(--ap-t-2) var(--ap-ease-out);
}
.ap-on .nc i {
  transform: rotateY(-16deg) rotateX(7deg);
  animation: apTileFloat 5.5s var(--ap-ease) infinite alternate;
}
/* Har chipga boshqa faza — hammasi bir vaqtda tebranmasin */
.ap-on .nc:nth-child(3n)   i { animation-delay: -1.8s; }
.ap-on .nc:nth-child(3n+1) i { animation-delay: -3.6s; }
@keyframes apTileFloat {
  from { transform: rotateY(-16deg) rotateX(7deg)  translateZ(0)    translateY(0); }
  to   { transform: rotateY(-26deg) rotateX(11deg) translateZ(14px) translateY(-2px); }
}
.ap-on .nc:hover i {
  transform: rotateY(-34deg) rotateX(13deg) translateZ(26px) scale(1.16);
  animation-play-state: paused;
}
.ap-on .nc.on i { animation-play-state: paused; transform: rotateY(-22deg) rotateX(9deg) translateZ(18px) scale(1.10); }
.ap-on .nc:active { transform: scale(.94); }

/* Yon menyu */
.ap-on .side-panel {
  perspective: 900px;
  background: var(--ap-glass-hi);
  -webkit-backdrop-filter: var(--ap-blur-lg);
  backdrop-filter: var(--ap-blur-lg);
  box-shadow: var(--ap-sh-4);
}
.ap-on .side-ov { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ap-on .side-item {
  border-radius: 13px;
  transform-style: preserve-3d;
  transition: background var(--ap-t-2) var(--ap-ease),
              color var(--ap-t-2) var(--ap-ease),
              transform var(--ap-t-2) var(--ap-spring),
              box-shadow var(--ap-t-2) var(--ap-ease-out);
}
.ap-on .side-item i { transform: rotateY(-16deg) rotateX(7deg); }
.ap-on .side-item:hover { transform: translateX(5px); box-shadow: var(--ap-sh-1), var(--ap-rim); }
.ap-on .side-item:hover i { transform: rotateY(-32deg) rotateX(12deg) translateZ(22px) scale(1.14); }
.ap-on .side-item.on i    { transform: rotateY(-22deg) rotateX(9deg) translateZ(14px) scale(1.08); }
.ap-on .side-item:active  { transform: translateX(2px) scale(.98); }

/* ── Bo'lim (hub) kartochkalari — kategoriyaning katta ko'rinishi ── */
.ap-on .card-hub .cov { overflow: visible; }
.ap-on .card-hub .cov-ic {
  left: 50%; bottom: 50%;
  font-size: 58px;
  transform: translate(-50%, 50%) translateZ(calc(var(--ap-depth) + 18px)) rotateY(-14deg);
  animation: apHubFloat 6s var(--ap-ease) infinite alternate;
}
@keyframes apHubFloat {
  from { transform: translate(-50%, 50%) translateZ(58px)  rotateY(-14deg) rotateX(4deg); }
  to   { transform: translate(-50%, 50%) translateZ(84px)  rotateY(-24deg) rotateX(-4deg); }
}
.ap-on .card-hub:hover .cov-ic,
.ap-on .card-hub.ap-live .cov-ic { animation-play-state: paused; }
/* Aylanuvchi nur halqasi — bo'lim ekanini bildiradi */
.ap-on .card-hub .cov::after {
  background:
    conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.24) 42deg,
      transparent 112deg, transparent 360deg),
    linear-gradient(180deg, transparent 45%, rgba(10,12,14,.42) 100%);
  animation: apHubRing 8s linear infinite;
}
@keyframes apHubRing { to { transform: rotate(360deg); } }

/* Hub subnav + rail vidjetlari */
.ap-on .hub-pills > *, .ap-on .hub-back {
  border-radius: 12px;
  background: var(--ap-glass);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid var(--ap-glass-bd);
  box-shadow: var(--ap-sh-1), var(--ap-rim);
  transition: transform var(--ap-t-2) var(--ap-spring),
              box-shadow var(--ap-t-2) var(--ap-ease-out);
}
.ap-on .hub-pills > *:hover, .ap-on .hub-back:hover {
  transform: translateY(-2px); box-shadow: var(--ap-sh-2), var(--ap-rim-hi);
}
.ap-on .hub-pills > *:active, .ap-on .hub-back:active { transform: scale(.95); }

.ap-on #nav, .ap-on #catbar {
  -webkit-backdrop-filter: var(--ap-blur);
  backdrop-filter: var(--ap-blur);
}
.ap-on #nav { box-shadow: var(--ap-sh-1); }

.ap-on .rw {
  border-radius: 18px;
  background: var(--ap-glass);
  -webkit-backdrop-filter: var(--ap-blur);
  backdrop-filter: var(--ap-blur);
  border-color: var(--ap-glass-bd);
  box-shadow: var(--ap-sh-2), var(--ap-rim);
  transform-style: preserve-3d;
}

/* ─────────────────────────────────────────────
   7) MOBIL — O'LCHAM VA TO'R QAYTA SOZLANDI

   Eski holat: 104px eskiz + matn qatori (gazeta ro'yxati).
   3D uchun joy yo'q, muqova juda kichik edi.
   Yangi holat: 2 ustunli haqiqiy kartalar, katta muqova,
   birinchisi to'liq enli "bosh material".
───────────────────────────────────────────── */
@media (max-width: 719px) {
  .ap-on #grid.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border-top: 0;
    padding: 4px 0 8px;
    perspective: 900px;
  }

  .ap-on #grid.grid > .card {
    display: flex; flex-direction: column;
    border: 1px solid var(--ap-glass-bd);
    border-radius: 16px;
    background: var(--ap-glass);
    box-shadow: var(--ap-sh-2), var(--ap-halo), var(--ap-rim);
    overflow: hidden;
  }

  .ap-on #grid.grid > .card .cov {
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: 0;
    align-self: stretch;
  }
  .ap-on #grid.grid > .card .cov-ic {
    left: 12px; bottom: 10px;
    font-size: 30px;
    transform: translateZ(26px);
  }
  .ap-on #grid.grid > .card .audio-disc {
    right: 10px; bottom: 8px; left: auto;
    width: 38px; height: 38px; font-size: 15px;
    transform: translateZ(22px);
  }
  .ap-on #grid.grid > .card .cov-eq { display: flex; left: 12px; bottom: 12px; height: 16px; }
  .ap-on #grid.grid > .card .cov-badge { top: 8px; left: 8px; padding: 3px 7px; font-size: .56rem; }

  .ap-on #grid.grid > .card .cbd { padding: 11px 12px 0; }
  .ap-on #grid.grid > .card .cbadge { font-size: .58rem; letter-spacing: .06em; }
  .ap-on #grid.grid > .card .cbadge i { width: 15px; height: 15px; font-size: 8px; }
  .ap-on #grid.grid > .card .cttl {
    font-size: .88rem; line-height: 1.28; -webkit-line-clamp: 3; margin-bottom: 4px;
  }
  .ap-on #grid.grid > .card .cdsc { display: none; }   /* 2 ustunda joy yo'q */
  .ap-on #grid.grid > .card .cft {
    padding: 8px 0 10px; border-top: 1px solid var(--ap-glass-bd);
    flex-direction: column; align-items: stretch; gap: 7px;
  }
  .ap-on #grid.grid > .card .csub { font-size: .66rem; }
  .ap-on #grid.grid > .card .cbtn {
    width: 100%; justify-content: center; padding: 9px 8px; font-size: .62rem;
  }
  /* Amal paneli — faqat ikonlar, matn sig'maydi */
  .ap-on #grid.grid > .card .cab-bar { margin: 0 -12px; border-top: 1px solid var(--ap-glass-bd); }
  .ap-on #grid.grid > .card .cab-btn { padding: 10px 2px; }
  .ap-on #grid.grid > .card .cab-btn span { display: none; }
  .ap-on #grid.grid > .card .cab-btn i { font-size: .92rem; }

  /* Birinchi karta — to'liq enli bosh material */
  .ap-on #grid.grid > .card:first-child { grid-column: 1 / -1; }
  .ap-on #grid.grid > .card:first-child .cov { aspect-ratio: 16 / 9; }
  .ap-on #grid.grid > .card:first-child .cov-ic { font-size: 42px; left: 16px; bottom: 14px; }
  .ap-on #grid.grid > .card:first-child .cttl { font-size: 1.16rem; -webkit-line-clamp: 2; }
  .ap-on #grid.grid > .card:first-child .cdsc {
    display: -webkit-box; -webkit-line-clamp: 2; font-size: .8rem; margin-bottom: 10px;
  }
  .ap-on #grid.grid > .card:first-child .cft { flex-direction: row; align-items: center; }
  .ap-on #grid.grid > .card:first-child .cbtn { width: auto; }
  .ap-on #grid.grid > .card:first-child .cab-btn span { display: inline; }

  /* Bo'lim kartochkalari to'liq enli — ular navigatsiya, kontent emas */
  .ap-on #grid.grid > .card-hub { grid-column: 1 / -1; }
  .ap-on #grid.grid > .card-hub .cov { aspect-ratio: 21 / 9; }
  .ap-on #grid.grid > .card-hub .cov-ic { left: 50%; bottom: 50%; font-size: 44px; }
  .ap-on #grid.grid > .card-hub .cdsc { display: block; }

  /* Chiplar telefonda kattaroq — barmoq nishoni 44px dan kam bo'lmasin */
  .ap-on .nc i { width: 24px; height: 24px; font-size: 11px; }

  /* Muqova ichidagi 3D chuqurligi telefonda kichikroq — ekran tor,
     katta translateZ chetlardan chiqib ketadi */
  .ap-on .card { --ap-depth: 26px; --ap-persp: 780px; }
}

/* Juda tor ekran (≤ 359px): bitta ustun */
@media (max-width: 359px) {
  .ap-on #grid.grid { grid-template-columns: 1fr; }
  .ap-on #grid.grid > .card .cdsc { display: -webkit-box; -webkit-line-clamp: 2; }
  .ap-on #grid.grid > .card .cab-btn span { display: inline; }
}

/* ─────────────────────────────────────────────
   8) TEZLIK

   content-visibility: auto — brauzer ekran tashqarisidagi
   kartaning ichini UMUMAN chizmaydi. 194 ta kartada bu eng
   katta yutuq. contain-intrinsic-size scrollbar sakramasligi
   uchun taxminiy balandlikni beradi.
───────────────────────────────────────────── */
.ap-on #grid.grid > .card {
  content-visibility: auto;
  contain-intrinsic-size: auto 330px;
  contain: layout paint style;
}
@media (max-width: 719px) {
  .ap-on #grid.grid > .card { contain-intrinsic-size: auto 290px; }
}

/* TELEFONDA backdrop-filter KARTALARDAN OLIB TASHLANADI.
   U eng qimmat CSS xususiyati: har kadrda ortidagi pikselni
   qayta blur qiladi. 200 ta kartada telefon bo'g'iladi.
   O'rniga — deyarli bir xil ko'rinadigan, lekin BEPUL
   gradient yuza. Haqiqiy shisha faqat 3 ta elementda
   qoladi: masthead, chip lentasi, yon menyu. */
@media (max-width: 719px) {
  .ap-on #grid.grid > .card,
  .ap-on .cbtn,
  .ap-on .rw {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--surf) 82%, transparent) 0%,
        color-mix(in srgb, var(--surf-1) 94%, transparent) 100%);
  }
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  @media (max-width: 719px) {
    .ap-on #grid.grid > .card, .ap-on .cbtn, .ap-on .rw { background: var(--surf); }
  }
}

/* ─────────────────────────────────────────────
   9) MOSLASHUV
───────────────────────────────────────────── */

/* backdrop-filter yo'q brauzer — matn o'qilishi kafolatlanadi */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ap-on .card, .ap-on .rw, .ap-on .side-panel,
  .ap-on .nc::before, .ap-on .cbtn { background: var(--surf); }
}

/* Klaviatura fokusi */
.ap-on .card:focus-visible, .ap-on .nc:focus-visible,
.ap-on .side-item:focus-visible, .ap-on .cbtn:focus-visible,
.ap-on .cab-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 5px color-mix(in srgb, var(--cc, var(--gold)) 80%, transparent),
    var(--ap-sh-3);
}

/* Bosish javobi */
.ap-on .card.ap-press { --ap-sc: .965; }

/* "Harakatni kamaytir" — harakat o'chadi, IERARXIYA qoladi.
   Selektor kuchi kartanikiga TENG bo'lishi shart, aks holda
   kartalar opacity 0 da qotib qoladi. */
@media (prefers-reduced-motion: reduce) {
  .ap-on body::before,
  .ap-on .nc i,
  .ap-on .card-hub .cov-ic,
  .ap-on .card-hub .cov::after { animation: none !important; }
  .ap-on .card, .ap-on .ti-rail > .rw {
    animation: none !important;
    --ap-sy: 0px; --ap-sz: 0px; --ap-sr: 0deg; --ap-ss: 1; --ap-so: 1;
    --ap-xz: 0px; --ap-xs: 1; --ap-xo: 1;
    --ap-rx: 0deg; --ap-ry: 0deg; --ap-sc: 1; --ap-vel: 0deg;
    opacity: 1;
  }
  .ap-on .card .cov-ic, .ap-on .side-item i, .ap-on .cbtn { transform: none !important; }
  .ap-on * { transition-duration: 1ms !important; }
}

/* Save-Data — eng qimmat uchtasi o'chadi */
.ti-savedata.ap-on body::before { display: none; }
.ti-savedata.ap-on .card,
.ti-savedata.ap-on .rw,
.ti-savedata.ap-on .nc::before {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surf);
}

@media print {
  .ap-on body::before { display: none; }
  .ap-on .card {
    box-shadow: none; background: #fff; opacity: 1 !important;
    animation: none !important;
    --ap-sy: 0px; --ap-sz: 0px; --ap-sr: 0deg; --ap-ss: 1; --ap-so: 1;
    --ap-xz: 0px; --ap-xs: 1; --ap-xo: 1;
  }
}