/* ============================================================
   Ravshan tizim — iOS uslubidagi DIZAYN TIZIMI
   (ochiq / qidiruvga chiqadigan sahifalar uchun)

   NEGA ALOHIDA FAYL. Bot ichidagi web app (jobs.html) o'z uslubida
   qoladi — unga TEGILMAYDI. Bu fayl faqat Telegramsiz ochiladigan
   ochiq sahifalarga ulanadi. Keyinchalik web app ham shu tizimga
   ko'chirilsa — bitta fayl almashtiriladi, tuzilma buzilmaydi.

   ASOS: Apple Human Interface Guidelines ruhi —
     • katta sarlavha (Large Title) va aniq ierarxiya;
     • «guruhlangan ro'yxat» (inset grouped list) kartochkalari;
     • shaffof-xira (blur) yuqori panel;
     • bosilganda kichrayadigan (scale) tugmalar;
     • prujina (spring) egri chizig'i bo'yicha silliq animatsiya.

   Shrift: Apple qurilmalarida haqiqiy SF Pro (-apple-system orqali),
   boshqa qurilmalarda unga eng yaqin bepul shrift — Inter.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENLAR — yorug' rejim (iOS "systemGrouped" fonlari)
   ------------------------------------------------------------ */
:root{
  /* Fon qatlamlari */
  --i-bg:        #f2f2f7;   /* systemGroupedBackground */
  --i-bg2:       #ffffff;   /* karta yuzasi */
  --i-bg3:       #f4f4f7;   /* ichki yuza (input, chip) */
  --i-blur:      rgba(249,249,251,.72);   /* xira panel foni */

  /* Matn (iOS "label" ierarxiyasi) */
  --i-tx:        #000000;
  --i-tx2:       rgba(60,60,67,.60);      /* secondaryLabel */
  --i-tx3:       rgba(60,60,67,.30);      /* tertiaryLabel */

  /* Chiziqlar */
  --i-sep:       rgba(60,60,67,.13);      /* separator (hairline) */
  --i-line:      rgba(60,60,67,.20);

  /* Aksent — Ravshan tizim brendi (binafsha), iOS jonliligida */
  --i-acc:       #7c4dff;
  --i-acc2:      #9d6bff;
  --i-acc-soft:  rgba(124,77,255,.10);
  --i-acc-tx:    #6236e0;
  --i-grad:      linear-gradient(135deg,#7c4dff 0%,#9d6bff 55%,#c99aff 100%);

  /* iOS tizim ranglari (holat belgilari uchun) */
  --i-green:     #34c759;
  --i-orange:    #ff9500;
  --i-red:       #ff3b30;
  --i-blue:      #007aff;

  /* Shakl */
  --i-r:         22px;   /* karta burchagi */
  --i-r2:        14px;   /* kichik element */
  --i-sh:        0 1px 2px rgba(0,0,0,.04), 0 8px 28px -12px rgba(50,40,90,.18);
  --i-sh-lift:   0 4px 10px rgba(0,0,0,.05), 0 18px 44px -16px rgba(50,40,90,.28);

  /* Harakat — iOS prujina egri chizig'i */
  --i-spring:    cubic-bezier(.32,.72,0,1);
  --i-ease:      cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------
   2. TOKENLAR — qorong'i rejim (qurilma sozlamasiga qarab)
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --i-bg:       #000000;
    --i-bg2:      #1c1c1e;
    --i-bg3:      #2c2c2e;
    --i-blur:     rgba(28,28,30,.72);
    --i-tx:       #ffffff;
    --i-tx2:      rgba(235,235,245,.60);
    --i-tx3:      rgba(235,235,245,.30);
    --i-sep:      rgba(84,84,88,.55);
    --i-line:     rgba(84,84,88,.65);
    --i-acc:      #a78bfa;
    --i-acc2:     #c4b5fd;
    --i-acc-soft: rgba(167,139,250,.16);
    --i-acc-tx:   #c4b5fd;
    --i-sh:       0 1px 2px rgba(0,0,0,.5), 0 8px 28px -12px rgba(0,0,0,.7);
    --i-sh-lift:  0 4px 10px rgba(0,0,0,.5), 0 18px 44px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --i-bg:#000000; --i-bg2:#1c1c1e; --i-bg3:#2c2c2e; --i-blur:rgba(28,28,30,.72);
  --i-tx:#ffffff; --i-tx2:rgba(235,235,245,.60); --i-tx3:rgba(235,235,245,.30);
  --i-sep:rgba(84,84,88,.55); --i-line:rgba(84,84,88,.65);
  --i-acc:#a78bfa; --i-acc2:#c4b5fd; --i-acc-soft:rgba(167,139,250,.16); --i-acc-tx:#c4b5fd;
  --i-sh:0 1px 2px rgba(0,0,0,.5), 0 8px 28px -12px rgba(0,0,0,.7);
  --i-sh-lift:0 4px 10px rgba(0,0,0,.5), 0 18px 44px -16px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------
   3. ASOS
   ------------------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
              "Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  background:var(--i-bg);
  color:var(--i-tx);
  font-size:17px;              /* iOS asosiy o'lcham */
  line-height:1.47;
  letter-spacing:-.011em;      /* SF ning tabiiy zichligi */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:var(--i-acc-tx);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.i-wrap{max-width:760px;margin:0 auto;padding:0 16px}
.i-wrap.wide{max-width:1100px}

/* ------------------------------------------------------------
   4. YUQORI PANEL — shaffof-xira (iOS navigation bar)
   ------------------------------------------------------------ */
.i-nav{
  position:sticky;top:0;z-index:50;
  background:var(--i-blur);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--i-sep);   /* iOS "hairline" */
}
/* MUHIM: panel elementlari sahifani KENGAYTIRIB yubormasligi kerak.
   Flex elementi sukut bo'yicha o'z mazmunidan tor bo'lmaydi — natijada tor
   telefonda butun hujjat kengayib, o'ng chekka qirqilib qolgan edi.
   Yechim: `min-width:0` + havolalar tasmasi o'zi gorizontal suriladi. */
.i-nav .row{max-width:1100px;margin:0 auto;padding:11px 16px;
  display:flex;align-items:center;gap:12px;min-width:0}
.i-nav .brand{display:flex;align-items:center;gap:9px;font-weight:700;
  font-size:17px;letter-spacing:-.02em;color:var(--i-tx);flex:none;
  white-space:nowrap}
.i-nav .mark{width:30px;height:30px;border-radius:9px;background:var(--i-grad);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 3px 10px -3px rgba(124,77,255,.6);flex:none}
.i-nav .links{display:flex;align-items:center;gap:2px;margin-left:auto;
  min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.i-nav .links::-webkit-scrollbar{display:none}
.i-nav .lnk{font-size:15px;color:var(--i-acc-tx);font-weight:590;flex:none;
  padding:6px 10px;border-radius:9px;white-space:nowrap;
  transition:background .2s var(--i-ease)}
.i-nav .lnk:hover{background:var(--i-acc-soft)}
.i-nav .lnk.on{background:var(--i-acc-soft)}
@media (max-width:520px){
  .i-nav .row{padding:9px 12px;gap:8px}
  .i-nav .brand{font-size:15px}
  .i-nav .mark{width:26px;height:26px;border-radius:8px;font-size:13px}
  .i-nav .lnk{font-size:13.5px;padding:5px 8px}
}

/* ------------------------------------------------------------
   5. KATTA SARLAVHA (iOS Large Title)
   ------------------------------------------------------------ */
.i-head{padding:22px 0 18px}
/* clamp: tor telefonda sarlavha o'zi kichrayadi — uzun so'z chetdan chiqmaydi */
.i-head h1{font-size:clamp(26px,7.2vw,34px);font-weight:730;
  letter-spacing:-.028em;line-height:1.12;overflow-wrap:break-word}
.i-head .sub{color:var(--i-tx2);font-size:16px;margin-top:7px;max-width:56ch}
.i-head .cnt{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:13px;font-weight:640;color:var(--i-acc-tx);
  background:var(--i-acc-soft);padding:5px 12px;border-radius:99px}
@media (min-width:760px){ .i-head h1{font-size:42px} }

/* Non ushshoq — breadcrumb (qidiruv tizimi uchun ham, odam uchun ham) */
.i-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:13px;color:var(--i-tx2);padding-top:16px}
.i-crumb a{color:var(--i-tx2)}
.i-crumb a:hover{color:var(--i-acc-tx)}
.i-crumb span.s{color:var(--i-tx3)}

/* ------------------------------------------------------------
   6. GURUHLANGAN RO'YXAT — iOS "inset grouped list"
   ------------------------------------------------------------ */
.i-sec{margin-bottom:26px}
.i-sec > h2{font-size:13px;font-weight:640;letter-spacing:.02em;
  text-transform:uppercase;color:var(--i-tx2);padding:0 18px 8px}
.i-list{background:var(--i-bg2);border-radius:var(--i-r);overflow:hidden;
  box-shadow:var(--i-sh)}
.i-row{display:flex;align-items:center;gap:13px;padding:14px 18px;
  position:relative;transition:background .18s var(--i-ease)}
.i-row + .i-row::before{content:"";position:absolute;top:0;left:18px;right:0;
  height:.5px;background:var(--i-sep)}
a.i-row:active{background:var(--i-bg3)}
@media (hover:hover){ a.i-row:hover{background:var(--i-bg3)} }
.i-row .ic{width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--i-acc-soft);display:flex;align-items:center;
  justify-content:center;font-size:19px}
.i-row .tx{flex:1;min-width:0}
.i-row .tx b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.i-row .tx small{display:block;font-size:13.5px;color:var(--i-tx2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.i-row .chev{color:var(--i-tx3);font-size:15px;flex:none}

/* ------------------------------------------------------------
   7. KARTA (vakansiya / anketa)
   ------------------------------------------------------------ */
.i-cards{display:grid;gap:12px}
.i-cards > *{min-width:0}       /* grid elementi mazmuni bilan kengayib ketmasin */
@media (min-width:720px){ .i-cards.two{grid-template-columns:1fr 1fr} }
.i-card{display:block;background:var(--i-bg2);border-radius:var(--i-r);
  padding:17px 18px;box-shadow:var(--i-sh);color:var(--i-tx);
  transition:transform .38s var(--i-spring), box-shadow .38s var(--i-spring)}
@media (hover:hover){
  .i-card:hover{transform:translateY(-3px);box-shadow:var(--i-sh-lift)}
}
.i-card:active{transform:scale(.978)}
.i-card .top{display:flex;align-items:flex-start;gap:12px}
.i-card .logo{width:46px;height:46px;border-radius:13px;flex:none;overflow:hidden;
  background:var(--i-grad);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:19px;font-weight:700;
  box-shadow:0 4px 12px -4px rgba(124,77,255,.55)}
.i-card .logo img{width:100%;height:100%;object-fit:cover}
.i-card h3{font-size:17.5px;font-weight:640;letter-spacing:-.02em;
  line-height:1.28;color:var(--i-tx)}
.i-card .co{font-size:14px;color:var(--i-tx2);margin-top:2px}
.i-card .pay{font-size:16px;font-weight:680;color:var(--i-acc-tx);margin-top:10px}
.i-card .meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}

/* Chip / belgi */
.i-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;
  font-weight:590;color:var(--i-tx2);background:var(--i-bg3);
  border:.5px solid var(--i-sep);padding:4.5px 11px;border-radius:99px}
.i-chip.acc{color:var(--i-acc-tx);background:var(--i-acc-soft);border-color:transparent}
.i-chip.ok{color:#1a7f37;background:rgba(52,199,89,.14);border-color:transparent}
.i-chip.warn{color:#9a6100;background:rgba(255,149,0,.15);border-color:transparent}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .i-chip.ok{color:#5ee27f}
  :root:not([data-theme="light"]) .i-chip.warn{color:#ffb340}
}

/* ------------------------------------------------------------
   8. TUGMALAR — iOS "filled" / "tinted"
   ------------------------------------------------------------ */
.i-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:16.5px;font-weight:620;letter-spacing:-.01em;
  padding:14px 22px;border-radius:15px;background:var(--i-grad);color:#fff;
  box-shadow:0 6px 18px -8px rgba(124,77,255,.75);
  transition:transform .32s var(--i-spring), box-shadow .32s var(--i-spring),
             filter .2s var(--i-ease)}
.i-btn:active{transform:scale(.962)}
@media (hover:hover){ .i-btn:hover{filter:brightness(1.06);
  box-shadow:0 10px 26px -10px rgba(124,77,255,.85)} }
.i-btn.wide{width:100%}
.i-btn.tint{background:var(--i-acc-soft);color:var(--i-acc-tx);box-shadow:none}
.i-btn.grey{background:var(--i-bg3);color:var(--i-tx);box-shadow:none;
  border:.5px solid var(--i-sep)}

/* ------------------------------------------------------------
   9. SEGMENT BOSHQARUV (iOS segmented control) — filtrlar uchun
   ------------------------------------------------------------ */
.i-seg{display:flex;gap:3px;background:var(--i-bg3);padding:3px;
  border-radius:12px;overflow-x:auto;scrollbar-width:none;min-width:0}
.i-seg::-webkit-scrollbar{display:none}
.i-seg a{flex:0 0 auto;font-size:14px;font-weight:590;color:var(--i-tx2);
  padding:8px 15px;border-radius:9px;white-space:nowrap;
  transition:background .28s var(--i-spring), color .2s var(--i-ease)}
.i-seg a.on{background:var(--i-bg2);color:var(--i-tx);
  box-shadow:0 2px 6px rgba(0,0,0,.09)}

/* Gorizontal chip-tasma (viloyat / kategoriya havolalari) */
.i-scroll{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.i-scroll::-webkit-scrollbar{display:none}
.i-scroll .i-chip{flex:0 0 auto}

/* ------------------------------------------------------------
   10. E'LON SAHIFASI ichki bloklari
   ------------------------------------------------------------ */
.i-hero{background:var(--i-bg2);border-radius:var(--i-r);padding:24px 22px;
  box-shadow:var(--i-sh);position:relative;overflow:hidden}
.i-hero::before{content:"";position:absolute;top:-70px;right:-50px;
  width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,var(--i-acc-soft),transparent 68%)}
.i-hero > *{position:relative}
.i-hero h1{font-size:27px;font-weight:720;letter-spacing:-.026em;line-height:1.2}
.i-hero .co{font-size:15.5px;color:var(--i-tx2);margin-top:6px}
.i-hero .pay{font-size:22px;font-weight:720;color:var(--i-acc-tx);margin-top:14px;
  letter-spacing:-.02em}
.i-hero .meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.i-hero .ava{width:96px;height:96px;border-radius:28px;object-fit:cover;
  margin-bottom:14px;box-shadow:var(--i-sh)}

.i-body{background:var(--i-bg2);border-radius:var(--i-r);padding:20px 22px;
  box-shadow:var(--i-sh)}
.i-body h2{font-size:19px;font-weight:660;letter-spacing:-.02em;margin-bottom:9px}
.i-body p{font-size:16px;color:var(--i-tx);white-space:pre-line}
.i-body .part + .part{margin-top:20px;padding-top:20px;border-top:.5px solid var(--i-sep)}
.i-body .kv{display:flex;gap:10px;font-size:15.5px;margin-bottom:7px}
.i-body .kv b{color:var(--i-tx2);font-weight:500;min-width:120px}
.i-body audio{width:100%;margin-top:6px}
.i-body .certs{display:flex;flex-wrap:wrap;gap:9px}
.i-body .certs a{width:92px;height:92px;border-radius:14px;overflow:hidden;
  box-shadow:var(--i-sh)}
.i-body .certs img{width:100%;height:100%;object-fit:cover}

/* Bog'lanish bloki (raqam ochiq berilmaydi — bot orqali) */
.i-cta{background:var(--i-bg2);border-radius:var(--i-r);padding:22px;
  box-shadow:var(--i-sh);text-align:center}
.i-cta .lock{font-size:14.5px;color:var(--i-tx2);margin-bottom:14px;line-height:1.5}
.i-cta .i-btn{width:100%;max-width:380px}

/* Bo'sh holat */
.i-empty{background:var(--i-bg2);border-radius:var(--i-r);padding:44px 24px;
  text-align:center;box-shadow:var(--i-sh)}
.i-empty .em{font-size:44px;margin-bottom:12px}
.i-empty p{color:var(--i-tx2);font-size:15.5px;max-width:44ch;margin:0 auto 18px}

/* Sahifalash */
.i-pages{display:flex;justify-content:center;gap:8px;margin-top:22px}
.i-pages a,.i-pages span{min-width:42px;text-align:center;padding:10px 14px;
  border-radius:12px;font-size:15px;font-weight:590;background:var(--i-bg2);
  box-shadow:var(--i-sh);color:var(--i-tx)}
.i-pages span.now{background:var(--i-grad);color:#fff;box-shadow:none}

/* Matn bloki (SEO uchun jonli tavsif) */
.i-note{font-size:15px;color:var(--i-tx2);line-height:1.6;padding:18px 20px;
  background:var(--i-bg2);border-radius:var(--i-r);box-shadow:var(--i-sh)}
.i-note b{color:var(--i-tx);font-weight:620}

/* Pastki qism */
.i-foot{padding:36px 0 46px;text-align:center;color:var(--i-tx2);font-size:13.5px}
.i-foot .links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
  margin-bottom:18px}
.i-foot .links a{color:var(--i-tx2);font-weight:560}
.i-foot .links a:hover{color:var(--i-acc-tx)}
.i-foot .made{margin-top:10px}
.i-foot .made a{font-weight:620}

/* ------------------------------------------------------------
   11. ANIMATSIYA — bo'lim ochilishi (iOS prujina ruhida)
       .i-rise elementlari ekranga kirganda pastdan "ko'tariladi",
       ketma-ket elementlar biroz kechikish bilan (stagger).
   ------------------------------------------------------------ */
.i-rise{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .62s var(--i-spring), transform .62s var(--i-spring)}
.i-rise.in{opacity:1;transform:none}

/* Sahifa birinchi ochilishi — yuqori panel va sarlavha */
@keyframes iFadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes iPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.i-nav{animation:iFadeDown .5s var(--i-spring) both}
.i-head{animation:iPop .62s var(--i-spring) both;animation-delay:.05s}

/* Harakat kamaytirilgan bo'lsa — hurmat qilamiz (HIG talabi) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .i-rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}