/* Valyuta Kursi — 2-dizayn (ega 1027): oq fon, chap menyu, kartalar. Manrope shrifti, asosiy rang #0B3C5D. */
:root{--fon:#f6f8fb;--karta:#fff;--matn:#1c2b3a;--xira:#6b7a8c;--chiziq:#e6ebf1;--asosiy:#0B3C5D;--asosiy2:#e7eef5;
  --urg:#2d6cdf;--yuq:#13a452;--yuqfon:#e6f6ec;--pas:#e5484d;--pasfon:#fdecec;--eski:#a15c00;--eskifon:#fff4e0;
  --soya:0 1px 2px rgba(16,30,54,.04),0 6px 20px -8px rgba(16,30,54,.12);--yon:270px}
:root[data-mavzu="tun"]{--fon:#0f1720;--karta:#16212c;--matn:#e7edf3;--xira:#93a3b5;--chiziq:#263443;--asosiy:#7fb3e0;--asosiy2:#1d2c3b;
  --urg:#7fb3e0;--yuq:#3ccf7d;--yuqfon:#143323;--pas:#ff7b7f;--pasfon:#3a1e22;--eski:#ffb547;--eskifon:#33280f;--soya:none}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fon);color:var(--matn);font:15px/1.55 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--urg);text-decoration:none}
a:hover{text-decoration:underline}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
h1,h2,h3{margin:0;line-height:1.25}

/* chap menyu */
.yon{position:fixed;inset:0 auto 0 0;width:var(--yon);background:var(--karta);border-right:1px solid var(--chiziq);padding:20px 18px;
  display:flex;flex-direction:column;gap:6px;z-index:30;transition:transform .25s}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;color:var(--asosiy);letter-spacing:-.3px}
.logo:hover{text-decoration:none}
.logo b{color:var(--yuq);font-weight:800}
.logo-belgi{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--asosiy);color:#fff}
:root[data-mavzu="tun"] .logo-belgi{background:#1f4f78}
.yon>.logo{margin:4px 6px 22px}
.yon-sarlavha{margin:8px 10px 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--xira)}
.yon-menyu{display:flex;flex-direction:column;gap:4px}
.yon-menyu a,.yon-bot{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:var(--matn);font-weight:600}
.yon-menyu a:hover,.yon-bot:hover{background:var(--asosiy2);text-decoration:none}
.yon-menyu a.faol{background:var(--asosiy);color:#fff}
:root[data-mavzu="tun"] .yon-menyu a.faol{background:#1f4f78}
.yon-bot{margin-top:auto;border:1px dashed var(--chiziq)}
.parda{display:none}

/* tepa panel */
.sahifa{margin-left:var(--yon);min-height:100vh;display:flex;flex-direction:column}
.tepa{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:68px;padding:0 28px;
  background:color-mix(in srgb,var(--fon) 88%,transparent);backdrop-filter:blur(8px)}
.tepa-ong{margin-left:auto;display:flex;align-items:center;gap:10px}
.ikon-tugma{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--matn);cursor:pointer;font:inherit}
.ikon-tugma:hover{background:var(--asosiy2)}
.menyu-tugma,.logo-mobil{display:none}
.quyosh{display:none}
:root[data-mavzu="tun"] .quyosh{display:block}
:root[data-mavzu="tun"] .oy{display:none}
.til-tanlov{display:inline-flex;padding:3px;border-radius:999px;background:var(--karta);border:1px solid var(--chiziq)}
.til-tanlov a{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;color:var(--xira)}
.til-tanlov a:hover{color:var(--asosiy);text-decoration:none}
.til-tanlov a.faol{background:var(--asosiy);color:#fff}

/* mazmun */
.asosiy{width:100%;max-width:1240px;padding:4px 28px 24px;flex:1}
.karta,.sarlavha-karta{background:var(--karta);border:1px solid var(--chiziq);border-radius:16px;box-shadow:var(--soya);padding:22px;margin-bottom:20px}
.sarlavha-karta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--asosiy2),var(--karta) 70%)}
.sarlavha-karta h1{font-size:24px;font-weight:800;color:var(--asosiy)}
.yol{margin:6px 0 0;color:var(--xira);font-size:13px}
.yol span{margin:0 6px}
.sarlavha-tavsif{margin:0;color:var(--xira);font-size:14px;max-width:460px}
.karta-bosh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.karta-sarlavha{font-size:17px;font-weight:700}
.filtr-qator{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.filtr-bolim{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filtr-nom{margin:0;font-size:13px;font-weight:700;color:var(--xira)}
.segment{display:inline-flex;gap:4px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:12px;background:var(--fon);border:1px solid var(--chiziq)}
.segment a,.segment button{padding:8px 16px;white-space:nowrap;flex-shrink:0;border-radius:9px;border:0;background:transparent;color:var(--xira);font-family:inherit;font-weight:700;font-size:14px;line-height:1.2;cursor:pointer}
.segment a:hover,.segment button:hover{color:var(--asosiy);text-decoration:none}
.segment .faol{background:var(--karta);color:var(--asosiy);box-shadow:0 1px 2px rgba(16,30,54,.08),0 4px 12px -6px rgba(16,30,54,.3)}
select,input{font:inherit;color:var(--matn);background:var(--karta);border:1px solid var(--chiziq);border-radius:10px;padding:9px 12px;min-height:42px}
select:focus,input:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--urg);outline-offset:1px}
.valyuta-tanlov select{max-width:240px}
.mb-karta{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;border:1px solid var(--chiziq);background:var(--fon);min-width:300px}
.mb-karta.eski{background:var(--eskifon)}
.mb-belgi{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--asosiy);color:#fff}
.mb-matn p{margin:0}
.mb-nom{font-size:13px;color:var(--xira);font-weight:600}
.mb-kurs{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.mb-vaqt{font-size:12px;color:var(--xira)}
.nishon{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;vertical-align:middle;font-variant-numeric:tabular-nums}
.nishon.yuq{background:var(--yuqfon);color:var(--yuq)}
.nishon.pas{background:var(--pasfon);color:var(--pas)}
.belgi.eski{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--eskifon);color:var(--eski);font-size:12px;font-weight:700}

.saralash{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.saralash button{padding:9px 18px;border-radius:10px;border:1px solid var(--asosiy);background:transparent;color:var(--asosiy);font-family:inherit;font-weight:700;font-size:14px;line-height:1.2;cursor:pointer}
.saralash button:hover,.saralash button.faol{background:var(--asosiy);color:#fff}
:root[data-mavzu="tun"] .saralash button:hover,:root[data-mavzu="tun"] .saralash button.faol{color:#0f1720}
.eng{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:16px}
.eng-q{display:flex;flex-direction:column;padding:14px 18px;border-radius:14px;background:var(--yuqfon);border:1px solid color-mix(in srgb,var(--yuq) 25%,transparent)}
.eng-q span{font-size:13px;color:var(--xira);font-weight:600}
.eng-q b{font-size:20px;color:var(--yuq);font-variant-numeric:tabular-nums}
.eng-q em{font-style:normal;font-weight:700}

/* bank kartalari */
.banklar{display:grid;grid-template-columns:repeat(auto-fill,minmax(500px,1fr));gap:16px;margin-bottom:12px}
.bank{background:var(--karta);border:1px solid var(--chiziq);border-radius:16px;box-shadow:var(--soya);padding:18px 20px;display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s}
.bank:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(16,30,54,.1)}
.bank.eski{background:var(--eskifon)}
.bank-bosh{display:flex;align-items:center;gap:14px}
.bank-logo{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:color-mix(in srgb,var(--r) 12%,var(--karta));color:var(--r);font-size:24px;font-weight:800;flex-shrink:0;border:1px solid color-mix(in srgb,var(--r) 20%,transparent)}
.bank-logo.rasm{background:#fff;border-color:var(--chiziq);padding:6px}
.bank-logo.rasm img{display:block;width:100%;height:100%;object-fit:contain}
:root[data-mavzu="tun"] .bank-logo{color:color-mix(in srgb,var(--r) 45%,#fff)}
.bank-nom{min-width:0}
.bank-nom h2{font-size:17px;font-weight:700}
.bank-nom h2 a{color:var(--matn)}
.bank-nom p{margin:3px 0 0;font-size:12.5px;color:var(--xira)}
.bank-kurslar{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--chiziq)}
.kurs-q p{margin:0}
.kurs{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.kurs small{font-size:13px;color:var(--xira);font-weight:600}
.kurs.eng-yashil{color:var(--yuq)}
.kurs-nom{font-size:13px;color:var(--xira);font-weight:600}
.hisob-tugma,.hisob button,.oyna-yop{padding:10px 18px;border-radius:10px;border:0;background:var(--asosiy);color:#fff;font-family:inherit;font-weight:700;font-size:14px;line-height:1.2;cursor:pointer}
:root[data-mavzu="tun"] .hisob-tugma,:root[data-mavzu="tun"] .hisob button,:root[data-mavzu="tun"] .oyna-yop{background:#1f4f78}
.hisob-tugma:hover,.hisob button:hover{filter:brightness(1.15)}

/* kalkulyator */
.hisob{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.hisob input{width:150px}
.strelka{color:var(--xira);font-weight:700}
.natija{margin:14px 0 0;font-size:18px;font-weight:700}
.natija small{display:block;font-size:13px;color:var(--xira);font-weight:500}
.izoh{color:var(--xira);font-size:13px;margin:0 0 16px}
.bosh-holat{color:var(--xira);margin:0}

/* MB sahifasi */
.sana-nishon{padding:6px 12px;border-radius:999px;background:var(--asosiy2);color:var(--asosiy);font-size:13px;font-weight:700}
.mb-panjara{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.mb-v{border:1px solid var(--chiziq);border-radius:14px;padding:16px;background:var(--fon)}
.mb-v-bosh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mb-v-bosh h3{font-size:16px;font-weight:800;color:var(--asosiy)}
.mb-v-kurs{margin:10px 0 2px;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.mb-v-kurs small{font-size:13px;color:var(--xira)}
.mb-v-nom{margin:0;color:var(--xira);font-size:13px}
.jadval-o{overflow-x:auto}
.jadval{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.jadval th,.jadval td{padding:11px 14px;border-bottom:1px solid var(--chiziq);text-align:left;white-space:nowrap}
.jadval thead th{background:var(--fon);font-size:13px;color:var(--xira)}
.jadval tbody tr:nth-child(odd){background:color-mix(in srgb,var(--fon) 55%,transparent)}
.jadval tbody th{font-weight:600}
.jadval td{font-weight:700}
.jadval .ong{text-align:right}

/* hisoblash oynasi */
.oyna{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(10,20,30,.45)}
.oyna[hidden]{display:none}
.oyna-ichi{width:100%;max-width:420px;background:var(--karta);border-radius:18px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:14px}
.oyna-bosh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.oyna-bosh h3{font-size:18px}
.oyna-yonalish{display:flex}
.oyna-yonalish button{flex:1}
.oyna-maydon{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--xira);font-weight:600}
.oyna-maydon input{font-size:18px;font-weight:700}
.oyna-kurs{margin:0;color:var(--xira);font-size:13px}
.oyna-natija{margin:0;font-size:24px;font-weight:800;color:var(--yuq);font-variant-numeric:tabular-nums}

/* pastki qism */
.pastki{border-top:1px solid var(--chiziq);padding:20px 28px;color:var(--xira);font-size:13px}
.pastki-havolalar{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:8px}
.pastki-havolalar a{color:var(--matn);font-weight:600}
.pastki p{margin:0}

@media (max-width:1199px){
  .yon{transform:translateX(-100%);box-shadow:none}
  body.menyu-ochiq .yon{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.menyu-ochiq .parda{display:block;position:fixed;inset:0;z-index:25;background:rgba(10,20,30,.4)}
  .sahifa{margin-left:0}
  .menyu-tugma,.logo-mobil{display:flex}
  .logo-mobil{font-size:18px}
  .logo-mobil .logo-belgi{width:32px;height:32px;border-radius:10px}
}
@media (max-width:640px){
  .tepa{padding:0 12px;height:60px;gap:6px}
  .asosiy{padding:4px 16px 16px}
  .karta,.sarlavha-karta{padding:16px;border-radius:14px}
  .sarlavha-karta h1{font-size:20px}
  .banklar{grid-template-columns:1fr}
  .bank{padding:16px}
  .bank-kurslar{grid-template-columns:1fr 1fr}
  .hisob-tugma{grid-column:1/-1}
  .kurs{font-size:19px}
  .mb-karta{min-width:0;width:100%}
  .filtr-bolim{width:100%}
  .filtr-bolim .segment{width:100%}
  .saralash{flex-wrap:nowrap;overflow-x:auto;gap:6px}
  .saralash button{padding:8px 12px;font-size:13px;white-space:nowrap}
  .saralash .filtr-nom{display:none}
  .valyuta-tanlov,.valyuta-tanlov select{width:100%;max-width:none}
  .til-tanlov a{padding:5px 8px;font-size:12px}
  .logo-mobil span:last-child{display:none}
  .hisob input,.hisob select{flex:1 1 40%}
  .pastki{padding:16px}
}
.karta>.karta-sarlavha{margin-bottom:14px}