/* MagicDental 0.2 -- zamonaviy, toza, tibbiy. Ranglar: :root o'zgaruvchilari (Sozlamalar -> Ranglar) */ /* Shrift sayt ichidan (1.1.0): Onest, faqat lotin, kengaytirilgan lotin va kirill harflari -- tashqi so'rov yo'q */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(shrift/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(shrift/onest-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(shrift/onest-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --md-asosiy: #0B6FB8; --md-asosiy-toq: #08548C; --md-ikkinchi: #13B6CC; --md-och: #E5F4FB; --md-siyoh: #0F2741; --md-urg: #FF7A59; --md-fon: #F5F8FB; --md-matn: #475866; --md-xira: #5A6B78; --md-chiziq: #E3EAEF; --md-grafit: #5F6361; --md-r: 24px; --md-soya: 0 18px 50px -24px rgba(16, 38, 56, .28); --md-grad: linear-gradient(120deg, var(--md-asosiy), var(--md-ikkinchi)); --md-grad-toq: linear-gradient(135deg, var(--md-siyoh), var(--md-asosiy-toq)); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--md-siyoh); background: #fff; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, iframe { max-width: 100%; } img { height: auto; } a { color: var(--md-asosiy); } a:hover { color: var(--md-asosiy-toq); } h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.025em; } h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; } :focus-visible { outline: 3px solid var(--md-asosiy); outline-offset: 3px; border-radius: 6px; } .md-ichki { max-width: 1220px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .md-bolim { padding-top: 72px; padding-bottom: 24px; } .md-izoh { color: var(--md-xira); font-size: 15px; margin: 0 0 18px; } .md-otish { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 10px; } .md-otish:focus { left: 8px; } /* ---------- Tugmalar ---------- */ .md-tugma { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border-radius: 999px; background: var(--md-grad); color: #fff; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; } .md-tugma:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -12px var(--md-asosiy); filter: saturate(1.1) brightness(1.04); } .md-tugma.katta { padding: 15px 26px; font-size: 16px; } .md-tugma.kichik { min-height: 36px; padding: 7px 14px; font-size: 14px; } .md-tugma.ikkinchi { background: #fff; color: var(--md-siyoh); border-color: #CFDAE2; } .md-tugma.ikkinchi:hover { border-color: var(--md-siyoh); box-shadow: none; } .md-tugma.oq { background: #fff; color: var(--md-siyoh); } .md-tugma.chiziq { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .md-tugma.chiziq:hover { border-color: #fff; box-shadow: none; } .md-tugmalar { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Menyu ---------- */ .md-menyu { position: sticky; top: 0; z-index: 50; background: linear-gradient(100deg, color-mix(in srgb, var(--md-och) 86%, transparent) 0%, color-mix(in srgb, var(--md-ikkinchi) 16%, rgba(255,255,255,.82)) 55%, color-mix(in srgb, var(--md-urg) 10%, rgba(255,255,255,.86)) 100%); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--md-asosiy) 12%, transparent); box-shadow: 0 10px 34px -22px color-mix(in srgb, var(--md-asosiy) 70%, transparent); transition: box-shadow .2s; } .md-menyu.soyali { box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--md-asosiy) 75%, transparent); } .admin-bar .md-menyu { top: 32px; } .md-menyu-qator { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; padding-top: 12px; padding-bottom: 12px; } .md-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--md-siyoh); flex: none; } .md-logo img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; } .md-logo span { display: flex; flex-direction: column; line-height: 1.15; } .md-logo b { font-size: 19px; font-weight: 800; } .md-logo i { font-style: normal; color: var(--md-asosiy); } .md-logo small { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; color: var(--md-grafit); } .md-logo.oq { color: #fff; } .md-logo.oq small { color: #9FB4C2; } .md-nav { display: flex; align-items: center; gap: 4px 6px; font-weight: 600; font-size: 15px; } .md-nav li { list-style: none; } .md-nav a { color: var(--md-siyoh); text-decoration: none; padding: 8px 12px; border-radius: 999px; transition: background .15s; } .md-nav a:hover, .md-nav .current-menu-item > a { background: rgba(255,255,255,.75); color: var(--md-asosiy); } .md-menyu-ong { display: flex; align-items: center; gap: 12px; } .md-menyu-tel { display: inline-flex; align-items: center; gap: 6px; color: var(--md-siyoh); text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; } .md-til { display: flex; background: rgba(255,255,255,.7); border-radius: 999px; padding: 3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-asosiy) 14%, transparent); } .md-til a { font-size: 13px; font-weight: 700; padding: 7px 11px; border-radius: 999px; color: var(--md-xira); text-decoration: none; } .md-til a.faol { background: var(--md-grad); color: #fff; box-shadow: 0 4px 10px -4px var(--md-asosiy); } .md-menyu-tugma { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.75); color: var(--md-siyoh); align-items: center; justify-content: center; cursor: pointer; } /* ---------- Asosiy blok ---------- */ .md-hero-fon { position: relative; overflow: hidden; background: radial-gradient(900px 480px at 92% -8%, color-mix(in srgb, var(--md-ikkinchi) 22%, transparent), transparent 62%), radial-gradient(760px 420px at -6% 104%, color-mix(in srgb, var(--md-asosiy) 14%, transparent), transparent 60%), radial-gradient(420px 260px at 40% 10%, color-mix(in srgb, var(--md-urg) 8%, transparent), transparent 70%), #fff; } .md-hero-fon.kichik .md-hero { padding-top: 20px; } .md-hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 48px; } .md-hero-matn { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; } .md-hero h1 { font-size: clamp(38px, 5.6vw, 64px); font-weight: 800; letter-spacing: -0.035em; background: linear-gradient(100deg, var(--md-siyoh) 30%, var(--md-asosiy) 68%, var(--md-ikkinchi)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; } .md-lid { margin: 0; font-size: 19px; color: var(--md-matn); max-width: 560px; } .md-jonli, .md-teg { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--md-asosiy-toq); background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--md-asosiy) 22%, transparent), 0 8px 20px -14px var(--md-asosiy); padding: 7px 14px; border-radius: 999px; } .md-teg { letter-spacing: 1px; text-transform: uppercase; font-size: 12.5px; } .md-ochiq-nuqta { width: 8px; height: 8px; border-radius: 999px; background: #1A9E6F; box-shadow: 0 0 0 0 rgba(26,158,111,.5); animation: md-puls 2s infinite; display: inline-block; flex: none; } @keyframes md-puls { 70% { box-shadow: 0 0 0 8px rgba(26,158,111,0); } 100% { box-shadow: 0 0 0 0 rgba(26,158,111,0); } } .md-faktlar { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 6px 0 0; } .md-faktlar div { display: flex; flex-direction: column; } .md-faktlar dt { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; } .md-faktlar dd { margin: 0; font-size: 14px; color: var(--md-xira); } .md-hero-media { flex: 1 1 440px; min-width: 0; position: relative; isolation: isolate; } .md-hero-media::before { content: ''; position: absolute; inset: 8% -4% -6% 10%; z-index: -1; border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%; background: var(--md-grad); filter: blur(40px); opacity: .35; } .md-hero-rasm { height: 500px; border-radius: 36px 36px 120px 36px; background: linear-gradient(135deg, var(--md-och), #DCEAF3) center / cover no-repeat; overflow: hidden; box-shadow: var(--md-soya); } .md-hero-rasm.kichik { height: 380px; border-radius: 32px 32px 96px 32px; } .md-hero-rasm video { width: 100%; height: 100%; object-fit: cover; display: block; } .md-suzuvchi { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 12px 16px; box-shadow: var(--md-soya); animation: md-suz 6s ease-in-out infinite; } .md-suzuvchi b { display: block; font-size: 17px; } .md-suzuvchi small { color: var(--md-xira); font-size: 12.5px; } .md-suzuvchi.yuqori { top: 22px; left: -18px; } .md-suzuvchi.pastki { bottom: 28px; right: -10px; animation-delay: -3s; } .md-suzuvchi-belgi { width: 40px; height: 40px; border-radius: 12px; background: var(--md-grad); color: #fff; display: flex; align-items: center; justify-content: center; } .md-yulduzlar { display: inline-flex; gap: 2px; color: #E8A317; } @keyframes md-suz { 50% { transform: translateY(-8px); } } /* ---------- Bo'lim sarlavhasi ---------- */ .md-bolim-sarlavha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 26px; } .md-bolim-sarlavha h2::after { content: ''; display: block; width: 64px; height: 5px; margin-top: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--md-asosiy), var(--md-ikkinchi), var(--md-urg)); } .md-hammasi { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; } .md-sahifa-sarlavha { font-size: clamp(34px, 5vw, 56px); font-weight: 800; margin: 14px 0 24px; } .md-yol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--md-xira); } .md-yol a { color: var(--md-xira); text-decoration: none; } .md-yol a:hover { color: var(--md-asosiy); } .md-yol [aria-current] { color: var(--md-siyoh); font-weight: 600; } /* ---------- Xizmatlar ---------- */ .md-yonalish { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; } .md-yonalish-karta { position: relative; overflow: hidden; display: flex; min-height: 280px; border-radius: 32px; background: var(--md-grad); color: #fff; text-decoration: none; isolation: isolate; } .md-yonalish-karta.toq { background: var(--md-grad-toq); } .md-yonalish-karta::after { content: ''; position: absolute; width: 260px; height: 260px; right: -70px; top: -90px; border-radius: 50%; background: rgba(255,255,255,.12); z-index: -1; } .md-yonalish-karta.toq::after { background: color-mix(in srgb, var(--md-urg) 30%, transparent); filter: blur(10px); } .md-yonalish-rasm { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .28; z-index: -1; transition: transform .6s, opacity .3s; mix-blend-mode: luminosity; } .md-yonalish-karta:hover .md-yonalish-rasm { transform: scale(1.05); opacity: .38; } .md-yonalish-karta:hover { color: #fff; } .md-yonalish-ichi { display: flex; flex-direction: column; gap: 12px; padding: 34px; width: 100%; } .md-kichik-teg { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; opacity: .85; } .md-yonalish-nom { font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.02em; } .md-yonalish-izoh { font-size: 16px; opacity: .88; max-width: 440px; } .md-yonalish-past { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 800; font-size: 18px; } .md-strelka { width: 52px; height: 52px; border-radius: 999px; background: #fff; color: var(--md-siyoh); display: flex; align-items: center; justify-content: center; transition: transform .25s; flex: none; } .md-yonalish-karta:hover .md-strelka { transform: rotate(-45deg); } .md-xizmatlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .md-xizmat { --k1: #0B6FB8; --k2: #13B6CC; --kfon: #E8F3FD; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; color: var(--md-siyoh); text-decoration: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--k1) 14%, transparent); transition: transform .25s, box-shadow .25s; } .md-xizmat:hover { color: var(--md-siyoh); transform: translateY(-4px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k1) 30%, transparent), 0 22px 44px -22px color-mix(in srgb, var(--k1) 70%, transparent); } .md-xizmatlar > .md-xizmat:nth-child(5n+1), .md-xizmat.rang-kok { --k1: #0B6FB8; --k2: #13B6CC; --kfon: #E8F3FD; } .md-xizmatlar > .md-xizmat:nth-child(5n+2), .md-xizmat.rang-firuza { --k1: #0B8F9C; --k2: #3CCBB2; --kfon: #E2F7F6; } .md-xizmatlar > .md-xizmat:nth-child(5n+3), .md-xizmat.rang-marjon { --k1: #E8603E; --k2: #FFA26B; --kfon: #FFF0EA; } .md-xizmatlar > .md-xizmat:nth-child(5n+4), .md-xizmat.rang-lavanda { --k1: #5B4BDB; --k2: #A08CFF; --kfon: #F0EDFF; } .md-xizmatlar > .md-xizmat:nth-child(5n+5), .md-xizmat.rang-yashil { --k1: #1C9466; --k2: #5FD39E; --kfon: #E6F7EF; } .md-xizmat-rasm { display: block; aspect-ratio: 16 / 10; background: var(--kfon) center / cover no-repeat; transition: transform .5s; } .md-xizmat:hover .md-xizmat-rasm { transform: scale(1.05); } .md-xizmat-ichi { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; flex: 1; background: #fff; } .md-xizmat-belgi { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--k1), var(--k2)); color: #fff; box-shadow: 0 10px 20px -10px var(--k1); flex: none; } .md-xizmat-belgi img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); } .uslub-rasm .md-xizmat-belgi { position: absolute; top: -26px; left: 16px; border: 3px solid #fff; width: 52px; height: 52px; } .uslub-rasm .md-xizmat-nom { margin-top: 22px; } .md-xizmat-nom { font-weight: 700; font-size: 16.5px; line-height: 1.3; } .md-xizmat-past { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; } .md-xizmat-narx { font-size: 14px; font-weight: 700; color: var(--k1); } .md-xizmat-strelka { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--kfon); color: var(--k1); transition: transform .25s, background .25s, color .25s; } .md-xizmat:hover .md-xizmat-strelka { background: var(--k1); color: #fff; transform: rotate(-45deg); } .uslub-ikonka { background: linear-gradient(160deg, var(--kfon), #fff 70%); } .uslub-ikonka .md-xizmat-ichi { background: transparent; padding: 22px; } .uslub-ikonka .md-xizmat-belgi { width: 60px; height: 60px; border-radius: 20px; } /* ---------- Afzalliklar ---------- */ .md-afzal { background: var(--md-grad-toq); color: #fff; margin-top: 72px; } .md-afzal-qator { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; padding-top: 40px; padding-bottom: 40px; } .md-afzal-band { display: flex; gap: 14px; align-items: flex-start; } .md-afzal-band b { display: block; font-size: 18px; } .md-afzal-band small { font-size: 14.5px; color: #B9C9D4; } .md-belgi-doira { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--md-grad); box-shadow: 0 0 0 4px rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; } /* ---------- Oldin / keyin ---------- */ .md-natijalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; } .md-natija { margin: 0; } .md-solishtir { position: relative; aspect-ratio: 4 / 3; border-radius: var(--md-r); overflow: hidden; background: var(--md-fon); user-select: none; } .md-solishtir img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .md-solishtir-oldin { clip-path: inset(0 calc(100% - var(--surish)) 0 0); } .md-solishtir-chiziq { position: absolute; top: 0; bottom: 0; left: var(--surish); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; } .md-solishtir-chiziq span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--md-siyoh); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); } .md-solishtir input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; } .md-yorliq { position: absolute; top: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(16,30,40,.62); color: #fff; font-size: 12.5px; font-weight: 700; pointer-events: none; } .md-yorliq.chap { left: 12px; } .md-yorliq.ong { right: 12px; } .md-natija figcaption { padding: 12px 4px 0; font-weight: 700; } /* ---------- Shifokorlar ---------- */ .md-karusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 280px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } .md-karusel::-webkit-scrollbar { display: none; } .md-karusel > * { scroll-snap-align: start; } .md-karusel-tugmalar { display: flex; gap: 8px; } .md-karusel-tugmalar button { width: 46px; height: 46px; border-radius: 999px; border: 1.5px solid #CFDAE2; background: #fff; color: var(--md-siyoh); display: flex; align-items: center; justify-content: center; cursor: pointer; } .md-karusel-tugmalar button:hover { border-color: var(--md-siyoh); } .md-shifokorlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .md-shifokor { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--md-siyoh); } .md-shifokor-rasm { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border-radius: var(--md-r); background: var(--md-och) center top / cover no-repeat; color: var(--md-asosiy); margin-bottom: 10px; transition: transform .3s; } .md-shifokor:hover .md-shifokor-rasm { transform: translateY(-3px); } .md-shifokor b { font-size: 17.5px; } .md-shifokor span { color: var(--md-asosiy); font-weight: 600; font-size: 14.5px; } .md-shifokor small { color: var(--md-xira); font-size: 14px; } .md-shifokor-qator { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 20px; } .md-shifokor-rasm.katta { flex: 0 1 400px; margin: 0; } .md-shifokor-matn { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; } .md-shifokor-matn h1 { font-size: clamp(32px, 4.5vw, 52px); font-weight: 800; } /* ---------- Videolar ---------- */ .md-videolar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .md-video { display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--md-siyoh); cursor: pointer; } .md-video-muqova { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: var(--md-r); background: var(--md-siyoh) center / cover no-repeat; overflow: hidden; } .md-video-muqova::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(10,20,30,.45)); } .md-play { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 999px; background: var(--md-grad); color: #fff; box-shadow: 0 0 0 8px rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; padding-left: 4px; transition: transform .25s; } .md-video:hover .md-play { transform: scale(1.1); } .md-video-nom { font-weight: 700; font-size: 16px; } .md-video-oyna { width: min(960px, 94vw); padding: 0; border: 0; border-radius: 20px; background: #000; overflow: visible; } .md-video-oyna::backdrop { background: rgba(8,16,24,.82); } .md-oyna-ichi { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; } .md-oyna-ichi.tik { aspect-ratio: 9 / 14; max-height: 86vh; margin: 0 auto; } .md-oyna-ichi iframe, .md-oyna-ichi video { width: 100%; height: 100%; border: 0; display: block; } .md-oyna-yop { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 999px; border: 0; background: #fff; color: #111; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* ---------- Narxlar ---------- */ .md-narxlar { display: flex; flex-wrap: wrap; gap: 40px; } .md-narx-chap { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; } .md-narx-ong { flex: 2 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .md-ochiladi { border: 1px solid var(--md-chiziq); border-radius: 20px; padding: 18px 22px; background: #fff; transition: box-shadow .2s; } .md-ochiladi[open] { box-shadow: var(--md-soya); } .md-ochiladi summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; cursor: pointer; } .md-ochiladi summary::-webkit-details-marker { display: none; } .md-belgi-qosh { color: var(--md-asosiy); transition: transform .2s; display: flex; } .md-ochiladi[open] .md-belgi-qosh { transform: rotate(45deg); } .md-narx-jadval { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15.5px; } .md-narx-jadval td { padding: 10px 0; border-top: 1px solid #EEF2F5; } .md-narx-jadval td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 16px; } /* ---------- Fikrlar va yangiliklar ---------- */ .md-fikrlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; } .md-fikr { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--md-r); background: var(--md-fon); position: relative; } .md-fikr::before { content: '“'; position: absolute; top: 6px; right: 22px; font-size: 90px; line-height: 1; font-weight: 800; background: var(--md-grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .35; } .md-fikr blockquote { margin: 0; color: #33444F; line-height: 1.6; } .md-fikr blockquote p { margin: 0 0 8px; } .md-fikr figcaption { font-size: 14.5px; color: var(--md-xira); } .md-fikr figcaption b { color: var(--md-siyoh); } .md-fikr .md-tugma { align-self: flex-start; } .md-yangiliklar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .md-yangilik { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--md-siyoh); } .md-yangilik-rasm { aspect-ratio: 16 / 10; border-radius: var(--md-r); background: var(--md-och) center / cover no-repeat; margin-bottom: 6px; transition: transform .3s; } .md-yangilik:hover .md-yangilik-rasm { transform: translateY(-3px); } .md-yangilik small { color: var(--md-xira); } .md-yangilik b { font-size: 18px; line-height: 1.3; } /* ---------- Yozilish va filiallar ---------- */ .md-yozilish { display: flex; flex-wrap: wrap; gap: 32px; padding: 44px; border-radius: 36px; background: radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--md-ikkinchi) 35%, transparent), transparent 70%), radial-gradient(420px 240px at 0% 100%, color-mix(in srgb, var(--md-urg) 22%, transparent), transparent 70%), var(--md-grad-toq); color: #fff; margin-bottom: 48px; } .md-yozilish-matn { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .md-yozilish-matn p { margin: 0; color: #BFD0DB; font-size: 17px; } .md-filiallar { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .md-filial { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.07); } .md-filial b { display: flex; align-items: center; gap: 6px; font-size: 17px; } .md-filial span { font-size: 14.5px; color: #BFD0DB; } .md-filial-past { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .md-filial a { color: #fff; } /* ---------- Xizmat / maqola sahifasi ---------- */ .md-maqola-qator { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 40px; padding-bottom: 24px; } .md-matn { flex: 1 1 560px; min-width: 0; font-size: 17px; line-height: 1.75; color: #33444F; max-width: 780px; } .md-matn.keng { max-width: none; } .md-matn h2, .md-matn h3 { margin: 1.6em 0 .5em; color: var(--md-siyoh); } .md-matn h2 { font-size: 28px; } .md-matn h3 { font-size: 22px; } .md-matn img, .md-matn iframe, .md-matn video { border-radius: 18px; } .md-matn ul { padding-left: 1.2em; } .md-matn li { margin: .3em 0; } .md-yon-karta { flex: 0 1 330px; position: sticky; top: 108px; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--md-r); background: var(--md-fon); } .md-yon-karta b { font-size: 20px; } .md-yon-karta p { margin: 0 0 6px; color: var(--md-xira); font-size: 15px; } .md-chiplar { display: flex; flex-wrap: wrap; gap: 10px; } .md-chiplar a { padding: 11px 17px; border-radius: 999px; background: var(--md-fon); color: var(--md-siyoh); text-decoration: none; font-weight: 600; font-size: 15px; transition: background .2s; } .md-chiplar a:hover { background: var(--md-och); color: var(--md-asosiy); } .md-maqola { max-width: 860px; } .md-maqola-rasm { aspect-ratio: 16 / 8; border-radius: 28px; background: center / cover no-repeat; margin-bottom: 28px; } .md-sana { display: block; margin-top: 18px; color: var(--md-xira); } .md-404 { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 80px; } .md-404-raqam { font-size: clamp(90px, 18vw, 180px); font-weight: 800; line-height: 1; color: var(--md-och); letter-spacing: -0.05em; } .navigation.pagination { margin-top: 28px; } .nav-links { display: flex; flex-wrap: wrap; gap: 8px; } .page-numbers { padding: 9px 15px; border-radius: 999px; background: var(--md-fon); color: var(--md-siyoh); text-decoration: none; font-weight: 600; } .page-numbers.current { background: var(--md-grad); color: #fff; } /* ---------- Pastki qism ---------- */ .md-pastki { background: var(--md-siyoh); color: #B9C9D4; margin-top: 24px; } .md-pastki-ustun { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 32px; } .md-pastki-ustun > div { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; } .md-pastki-ustun a { color: #DCE6EC; text-decoration: none; } .md-pastki-ustun a:hover { color: #fff; } .md-pastki-sarlavha { color: #fff; font-size: 15px; margin-bottom: 4px; } .md-pastki-brend p { margin: 8px 0 0; max-width: 300px; } .md-ijtimoiy { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; } .md-pastki-past { border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; padding-bottom: 24px; font-size: 13.5px; color: #8EA3B1; } .md-mobil-panel { display: none; } /* ---------- Ohista paydo bo'lish ---------- */ .md-animatsiya .md-paydo { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .md-animatsiya .md-paydo.korindi { opacity: 1; transform: none; } /* ---------- Planshet va telefon ---------- */ @media (max-width: 1100px) { .md-menyu-tel span { display: none; } .md-pastki-ustun { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .md-menyu-tugma { display: inline-flex; } .md-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; background: linear-gradient(180deg, #fff, var(--md-och)); border-bottom: 1px solid var(--md-chiziq); box-shadow: 0 20px 40px -24px rgba(0,0,0,.3); } .md-nav.ochiq { display: flex; } .md-nav a { display: block; padding: 14px 8px; border-radius: 12px; font-size: 17px; } .md-suzuvchi.yuqori { left: 10px; } .md-suzuvchi.pastki { right: 10px; } } @media (max-width: 760px) { .md-ichki { padding-left: 16px; padding-right: 16px; } .md-bolim { padding-top: 52px; } .md-menyu-ong > .md-tugma, .md-menyu-tel { display: none; } .md-menyu-qator { gap: 10px; } .md-logo { gap: 9px; min-width: 0; flex: 1 1 auto; } .md-logo img { width: 40px; height: 40px; } .md-logo span { min-width: 0; } .md-logo b { font-size: 16.5px; } .md-logo small { font-size: 8.5px; letter-spacing: .8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .md-menyu-ong { gap: 8px; flex: none; } .md-til a { padding: 6px 9px; font-size: 12.5px; } .md-hero { padding-top: 20px; gap: 24px; } .md-hero-media { order: -1; flex-basis: 100%; } .md-hero-rasm { height: 260px; border-radius: 26px 26px 72px 26px; } .md-hero-rasm.kichik { height: 220px; } .md-suzuvchi { padding: 9px 12px; } .md-suzuvchi.yuqori { top: 12px; } .md-suzuvchi.pastki { bottom: 12px; } .md-lid { font-size: 16.5px; } .md-faktlar dt { font-size: 24px; } .md-yonalish { grid-template-columns: 1fr; } .md-yonalish-karta { min-height: 220px; border-radius: 26px; } .md-yonalish-ichi { padding: 24px; } .md-xizmatlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .md-xizmat-ichi { padding: 14px 12px 12px; } .uslub-rasm .md-xizmat-belgi { width: 44px; height: 44px; top: -22px; left: 12px; } .md-xizmat-nom { font-size: 15px; } .md-xizmat-strelka { display: none; } .md-afzal { margin-top: 52px; } .md-natijalar, .md-videolar, .md-fikrlar, .md-yangiliklar { grid-template-columns: 1fr; } .md-karusel { grid-auto-columns: 72%; } .md-yozilish { padding: 26px; border-radius: 28px; } .md-filiallar { grid-template-columns: 1fr; } .md-yon-karta { position: static; flex-basis: 100%; } .md-pastki-ustun { grid-template-columns: 1fr; padding-top: 40px; } body { padding-bottom: 78px; } .md-mobil-panel { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--md-chiziq); } .md-mobil-panel a { min-height: 48px; border-radius: 14px; background: #F1F5F8; color: var(--md-siyoh); text-decoration: none; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 6px; } .md-mobil-panel a.asosiy { background: var(--md-grad); color: #fff; } } @media (max-width: 782px) { .admin-bar .md-menyu { top: 46px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *:not(.ijro *), *:not(.ijro *)::before, *:not(.ijro *)::after { animation: none !important; transition: none !important; } } /* ===================== 0.4: shisha effekti, yorug' bloklar, animatsiyalar ===================== */ :root { --md-shisha: rgba(255,255,255,.55); --md-shisha-chegara: rgba(255,255,255,.8); --md-shisha-soya: 0 22px 50px -30px color-mix(in srgb, var(--md-asosiy) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.85); --md-prujina: cubic-bezier(.34, 1.56, .64, 1); } body { background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--md-och) 60%, #fff) 100%) fixed; } /* Fonda sekin suzuvchi rangli dog'lar -- shisha effekti shular ustida ko'rinadi */ body::before, body::after { content: ''; position: fixed; z-index: -1; width: 48vw; height: 48vw; max-width: 680px; max-height: 680px; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; animation: md-dog 24s ease-in-out infinite alternate; will-change: transform; } body::before { top: -14vw; right: -10vw; background: radial-gradient(circle, color-mix(in srgb, var(--md-ikkinchi) 65%, transparent), transparent 70%); } body::after { bottom: -16vw; left: -12vw; background: radial-gradient(circle, color-mix(in srgb, var(--md-urg) 45%, transparent), transparent 70%); animation-duration: 30s; animation-direction: alternate-reverse; } @keyframes md-dog { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6vw, 9vh) scale(1.12); } 100% { transform: translate(5vw, -5vh) scale(.94); } } .md-hero-fon { background-color: transparent; } /* ---------- Menyu: shisha, bo'rtib chiquvchi bandlar ---------- */ .md-menyu { isolation: isolate; background: rgba(255,255,255,.4); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,.75); box-shadow: 0 10px 34px -20px color-mix(in srgb, var(--md-asosiy) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--md-asosiy) 8%, transparent); } .md-menyu::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in srgb, var(--md-och) 65%, transparent), color-mix(in srgb, var(--md-ikkinchi) 12%, transparent) 55%, color-mix(in srgb, var(--md-urg) 10%, transparent)); } .md-menyu.soyali { box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--md-asosiy) 65%, transparent), inset 0 -1px 0 rgba(255,255,255,.6); } .md-nav a { display: inline-block; transition: transform .4s var(--md-prujina), background .25s, box-shadow .25s, color .2s; } .md-nav a:hover, .md-nav a:focus-visible, .md-nav .current-menu-item > a { transform: translateY(-3px) scale(1.09); background: rgba(255,255,255,.72); color: var(--md-asosiy); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--md-asosiy) 65%, transparent), inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,.95); } .md-menyu-tel, .md-til, .md-menyu .md-tugma, .md-logo img { transition: transform .4s var(--md-prujina), box-shadow .25s; } .md-menyu-tel:hover, .md-til:hover { transform: translateY(-2px) scale(1.05); } .md-logo:hover img { transform: rotate(-8deg) scale(1.06); } /* ---------- Implant animatsiyasi ---------- */ .md-animatsiya-quti { position: relative; border-radius: 36px; padding: 18px 18px 16px; background: var(--md-shisha); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--md-shisha-chegara); box-shadow: var(--md-shisha-soya); } .md-implant { display: block; width: 100%; height: auto; } .md-hero-media:has(.md-animatsiya-quti) .md-suzuvchi.pastki { display: none; } .md-yonalish-ichi .md-yonalish-nom { max-width: 100%; } .md-implant .mdi-vint { animation: mdi-vint 9s cubic-bezier(.45, .05, .3, 1) infinite; } .md-implant .mdi-rezba { animation: mdi-rezba 9s linear infinite; } .md-implant .mdi-abatment { animation: mdi-abat 9s ease-out infinite; } .md-implant .mdi-toj { animation: mdi-toj 9s cubic-bezier(.3, 1.4, .5, 1) infinite; } .md-implant .mdi-soya { transform-box: fill-box; transform-origin: center; animation: mdi-soya 9s ease-in-out infinite; } .md-implant .mdi-yalt path { transform-box: fill-box; transform-origin: center; animation: mdi-yalt 9s ease-in-out infinite; } .md-implant .mdi-yalt path:nth-child(2) { animation-delay: .2s; } .md-implant .mdi-yalt path:nth-child(3) { animation-delay: .4s; } @keyframes mdi-vint { 0% { transform: translateY(-300px); opacity: 0; } 6% { transform: translateY(-300px); opacity: 1; } 38% { transform: translateY(0); opacity: 1; } 92% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } } @keyframes mdi-rezba { 0%, 6% { transform: translateY(0); } 38%, 100% { transform: translateY(96px); } } @keyframes mdi-abat { 0%, 40% { transform: translateY(-70px); opacity: 0; } 50% { transform: translateY(0); opacity: 1; } 92% { transform: translateY(0); opacity: 1; } 100% { opacity: 0; } } @keyframes mdi-toj { 0%, 52% { transform: translateY(-170px); opacity: 0; } 56% { opacity: 1; } 66% { transform: translateY(0); } 92% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } } @keyframes mdi-soya { 0%, 6% { opacity: .12; transform: scale(.6); } 38% { opacity: .4; transform: scale(1); } 92% { opacity: .35; } 100% { opacity: .12; } } @keyframes mdi-yalt { 0%, 66% { transform: scale(0) rotate(0); opacity: 0; } 72% { transform: scale(1.3) rotate(20deg); opacity: 1; } 80% { transform: scale(1) rotate(45deg); } 90% { opacity: 1; } 96%, 100% { transform: scale(0); opacity: 0; } } .md-bosqichlar { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .md-bosqichlar li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--md-xira); font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.95); animation-duration: 9s; animation-iteration-count: infinite; } .md-bosqichlar li span { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--md-och); color: var(--md-asosiy); font-size: 13px; } .md-bosqichlar .b1 { animation-name: md-b1; } .md-bosqichlar .b2 { animation-name: md-b2; } .md-bosqichlar .b3 { animation-name: md-b3; } @keyframes md-b1 { 0%, 5% { background: rgba(255,255,255,.75); color: var(--md-xira); } 8%, 39% { background: var(--md-asosiy); color: #fff; } 42%, 100% { background: rgba(255,255,255,.75); color: var(--md-xira); } } @keyframes md-b2 { 0%, 39% { background: rgba(255,255,255,.75); color: var(--md-xira); } 42%, 53% { background: var(--md-asosiy); color: #fff; } 56%, 100% { background: rgba(255,255,255,.75); color: var(--md-xira); } } @keyframes md-b3 { 0%, 53% { background: rgba(255,255,255,.75); color: var(--md-xira); } 56%, 92% { background: var(--md-asosiy); color: #fff; } 95%, 100% { background: rgba(255,255,255,.75); color: var(--md-xira); } } /* ---------- Katta kartochkalar (Implant, Breket): yorug' shisha, rasm ko'rinib turadi ---------- */ .md-yonalish-karta { color: var(--md-siyoh); background: linear-gradient(135deg, rgba(255,255,255,.9), color-mix(in srgb, var(--md-och) 85%, #fff)); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--md-shisha-soya); transition: transform .4s var(--md-prujina), box-shadow .3s; } .md-yonalish-karta.toq { background: linear-gradient(135deg, rgba(255,255,255,.9), color-mix(in srgb, var(--md-ikkinchi) 18%, #fff)); } .md-yonalish-karta:hover { color: var(--md-siyoh); transform: translateY(-4px); } .md-yonalish-rasm { left: 44%; opacity: 1; mix-blend-mode: normal; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); animation: md-kenburns 16s ease-in-out infinite alternate; } .md-yonalish-karta:hover .md-yonalish-rasm { opacity: 1; } .md-yonalish-karta::after { background: color-mix(in srgb, var(--md-ikkinchi) 25%, transparent); filter: blur(30px); } .md-yonalish-karta.toq::after { background: color-mix(in srgb, var(--md-urg) 22%, transparent); filter: blur(30px); } .md-yonalish-ichi { max-width: 64%; } .md-kichik-teg { color: var(--md-asosiy); opacity: 1; } .md-yonalish-izoh { color: var(--md-matn); opacity: 1; } .md-yonalish-past > span:first-child { color: var(--md-asosiy-toq); } .md-yonalish-past .md-strelka { background: var(--md-grad); color: #fff; box-shadow: 0 10px 22px -10px var(--md-asosiy); } @keyframes md-kenburns { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.12) translate(-2.5%, -2%); } } /* ---------- Xizmat kartochkalari: shisha va jonli rasmlar ---------- */ .md-xizmat { background: rgba(255,255,255,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .4s var(--md-prujina), box-shadow .3s; } .md-xizmat-ichi { background: transparent; } .md-xizmat-rasm { animation: md-kenburns 14s ease-in-out infinite alternate; } .md-xizmatlar > .md-xizmat:nth-child(2n) .md-xizmat-rasm { animation-duration: 18s; animation-direction: alternate-reverse; } .md-xizmatlar > .md-xizmat:nth-child(3n) .md-xizmat-rasm { animation-delay: -6s; } .md-xizmat-belgi { transition: transform .4s var(--md-prujina); } .md-xizmat:hover .md-xizmat-belgi { transform: translateY(-3px) rotate(-6deg); } /* ---------- Afzalliklar: yorug' shisha qator ---------- */ .md-afzal { background: transparent; color: var(--md-siyoh); } .md-afzal .md-afzal-qator { width: calc(100% - 48px); max-width: 1172px; padding: 28px 32px; border-radius: 28px; background: var(--md-shisha); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--md-shisha-chegara); box-shadow: var(--md-shisha-soya); } .md-afzal-band small { color: var(--md-xira); } .md-belgi-doira { box-shadow: 0 10px 20px -10px var(--md-asosiy); } /* ---------- Boshqa kartochkalar ham shisha ---------- */ .md-fikr, .md-ochiladi, .md-yon-karta { background: rgba(255,255,255,.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 18px 40px -30px color-mix(in srgb, var(--md-asosiy) 60%, transparent); } .md-chiplar a { background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95); transition: transform .35s var(--md-prujina), background .2s; } .md-chiplar a:hover { transform: translateY(-2px) scale(1.04); } /* ---------- Qabulga yoziling: yorug' shisha ---------- */ .md-yozilish { color: var(--md-siyoh); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--md-shisha-soya); background: radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--md-ikkinchi) 24%, transparent), transparent 70%), radial-gradient(420px 240px at 0% 100%, color-mix(in srgb, var(--md-urg) 16%, transparent), transparent 70%), linear-gradient(135deg, rgba(255,255,255,.85), color-mix(in srgb, var(--md-och) 85%, #fff)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .md-yozilish-matn p { color: var(--md-matn); } .md-yozilish .md-tugma.oq { background: var(--md-grad); color: #fff; } .md-yozilish .md-tugma.chiziq { color: var(--md-siyoh); background: rgba(255,255,255,.65); border-color: color-mix(in srgb, var(--md-asosiy) 28%, transparent); } .md-yozilish .md-tugma.chiziq:hover { color: var(--md-asosiy); border-color: var(--md-asosiy); } .md-filial { background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 12px 26px -20px color-mix(in srgb, var(--md-asosiy) 60%, transparent); transition: transform .35s var(--md-prujina); } .md-filial:hover { transform: translateY(-3px); } .md-filial span { color: var(--md-xira); } .md-filial a { color: var(--md-asosiy); } .md-filial b svg { color: var(--md-asosiy); } /* ---------- Pastki qism: yorug' ---------- */ .md-pastki { color: var(--md-xira); background: linear-gradient(180deg, rgba(255,255,255,.45), color-mix(in srgb, var(--md-och) 90%, #fff)); border-top: 1px solid rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .md-pastki-ustun a { color: var(--md-siyoh); } .md-pastki-ustun a:hover { color: var(--md-asosiy); } .md-pastki-sarlavha { color: var(--md-siyoh); } .md-pastki-past { color: var(--md-xira); border-top-color: color-mix(in srgb, var(--md-asosiy) 12%, transparent); } @media (max-width: 760px) { body::before, body::after { width: 90vw; height: 90vw; opacity: .4; } .md-yonalish-ichi { max-width: 100%; } .md-yonalish-rasm { left: 30%; opacity: .45; } .md-afzal .md-afzal-qator { width: calc(100% - 32px); padding: 20px; } .md-animatsiya-quti { padding: 10px 10px 12px; border-radius: 26px; } .md-bosqichlar li { font-size: 13px; padding: 5px 11px 5px 5px; } .md-mobil-panel { background: rgba(255,255,255,.55); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top-color: rgba(255,255,255,.85); } } @media (prefers-reduced-motion: reduce) { .md-animatsiya-quti:not(.ijro) .mdi-vint, .md-animatsiya-quti:not(.ijro) .mdi-abatment, .md-animatsiya-quti:not(.ijro) .mdi-toj { opacity: 1; transform: none; } .md-animatsiya-quti:not(.ijro) .mdi-yalt { display: none; } } /* To'xtatish / ko'rish tugmasi */ .md-animatsiya-quti.toxtagan *, .md-animatsiya-quti.toxtagan *::before, .md-animatsiya-quti.toxtagan *::after { animation-play-state: paused !important; } .md-anim-tugma { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px 6px 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--md-siyoh); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 8px 18px -12px var(--md-asosiy); transition: transform .35s var(--md-prujina); } .md-anim-tugma:hover { transform: scale(1.06); } .md-anim-belgi { width: 12px; height: 12px; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); } .md-anim-tugma.oyna { background: var(--md-grad); color: #fff; } .md-anim-tugma.oyna .md-anim-belgi { background: currentColor; clip-path: polygon(15% 0, 100% 50%, 15% 100%); } /* ===================== 0.4.1: jonli surat -- implant jarayoni suratning o'zida ===================== */ .md-jsurat { padding: 12px 12px 14px; } .md-jonli-oyna { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: #fff; } .md-kamera { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; } .md-jsurat.nuqtali .md-kamera { animation: md-kamera 12s ease-in-out infinite; } .md-jsurat:not(.nuqtali) .md-kamera { animation: md-kenburns 14s ease-in-out infinite alternate; } .md-kamera img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes md-kamera { 0%, 6% { transform-origin: 50% 50%; transform: scale(1); } 14%, 31% { transform-origin: 36% 50%; transform: scale(1.75); } 40%, 57% { transform-origin: 78% 40%; transform: scale(1.75); } 66%, 83% { transform-origin: 66% 0%; transform: scale(1.75); } 92%, 100% { transform-origin: 50% 50%; transform: scale(1); } } /* Nuqtalar va yozuvlar (kamera bilan birga harakatlanadi) */ .md-nuqta { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--md-asosiy); box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.25); opacity: 0; animation-duration: 12s; animation-iteration-count: infinite; } .md-nuqta::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--md-asosiy); animation: md-halqa 1.6s ease-out infinite; } @keyframes md-halqa { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } } .md-nuqta.n1 { animation-name: md-n1; } .md-nuqta.n2 { animation-name: md-n2; } .md-nuqta.n3 { animation-name: md-n3; } @keyframes md-n1 { 0%, 10% { opacity: 0; } 14%, 32% { opacity: 1; } 36%, 86% { opacity: 0; } 90%, 98% { opacity: 1; } 100% { opacity: 0; } } @keyframes md-n2 { 0%, 38% { opacity: 0; } 42%, 58% { opacity: 1; } 62%, 86% { opacity: 0; } 90%, 98% { opacity: 1; } 100% { opacity: 0; } } @keyframes md-n3 { 0%, 64% { opacity: 0; } 68%, 84% { opacity: 1; } 87%, 88% { opacity: 0; } 90%, 98% { opacity: 1; } 100% { opacity: 0; } } .md-nuqta-yozuv { position: absolute; left: 20px; top: 50%; display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; white-space: nowrap; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--md-siyoh); font-size: 9px; font-weight: 700; box-shadow: 0 8px 20px -10px var(--md-asosiy); opacity: 0; transform: translate(-6px, -50%); animation-duration: 12s; animation-iteration-count: infinite; } .md-nuqta-yozuv b { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--md-grad); color: #fff; font-size: 8px; } .md-nuqta.n2 .md-nuqta-yozuv, .md-nuqta.n3 .md-nuqta-yozuv { left: auto; right: 20px; transform: translate(6px, -50%); } .md-nuqta.n1 .md-nuqta-yozuv { animation-name: md-y1; } .md-nuqta.n2 .md-nuqta-yozuv { animation-name: md-y2; } .md-nuqta.n3 .md-nuqta-yozuv { animation-name: md-y3; } @keyframes md-y1 { 0%, 15% { opacity: 0; } 19%, 31% { opacity: 1; transform: translate(0, -50%); } 34%, 100% { opacity: 0; } } @keyframes md-y2 { 0%, 43% { opacity: 0; } 47%, 57% { opacity: 1; transform: translate(0, -50%); } 60%, 100% { opacity: 0; } } @keyframes md-y3 { 0%, 69% { opacity: 0; } 73%, 83% { opacity: 1; transform: translate(0, -50%); } 86%, 100% { opacity: 0; } } /* 1-qadam: tish teshigi va implant tushadigan yo'l */ .md-lunka { position: absolute; width: 7%; aspect-ratio: 1.3; margin: -2.7% 0 0 -3.5%; border-radius: 50%; border: 2px dashed #fff; box-shadow: 0 0 0 2px var(--md-asosiy), 0 0 18px var(--md-asosiy); opacity: 0; animation: md-lunka 12s ease-in-out infinite; } .md-yolak { position: absolute; width: 0; border-left: 2px dashed rgba(255,255,255,.95); filter: drop-shadow(0 0 3px var(--md-asosiy)); opacity: 0; animation: md-lunka 12s ease-in-out infinite; } .md-yolak::after { content: ''; position: absolute; left: -5px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--md-asosiy); box-shadow: 0 0 0 2px #fff; animation: md-tomchi 1.3s ease-in infinite; } @keyframes md-lunka { 0%, 12% { opacity: 0; transform: scale(.7); } 18%, 31% { opacity: 1; transform: scale(1); } 35%, 100% { opacity: 0; } } @keyframes md-tomchi { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Yaltiroq nur */ .md-yaltirash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); transform: translateX(-130%); animation: md-nur 12s ease-in-out infinite; } @keyframes md-nur { 0%, 84% { transform: translateX(-130%); } 97%, 100% { transform: translateX(130%); } } /* Bosqichlar kamera bilan bir vaqtda */ .md-jsurat .md-bosqichlar { margin-top: 10px; } .md-jsurat .md-bosqichlar li { animation-duration: 12s; } .md-jsurat .md-bosqichlar .r1 { animation-name: md-r1; } .md-jsurat .md-bosqichlar .r2 { animation-name: md-r2; } .md-jsurat .md-bosqichlar .r3 { animation-name: md-r3; } @keyframes md-r1 { 0%, 12% { background: rgba(255,255,255,.75); color: var(--md-xira); } 14%, 33% { background: var(--md-asosiy); color: #fff; } 36%, 100% { background: rgba(255,255,255,.75); color: var(--md-xira); } } @keyframes md-r2 { 0%, 38% { background: rgba(255,255,255,.75); color: var(--md-xira); } 40%, 59% { background: var(--md-asosiy); color: #fff; } 62%, 100% { background: rgba(255,255,255,.75); color: var(--md-xira); } } @keyframes md-r3 { 0%, 64% { background: rgba(255,255,255,.75); color: var(--md-xira); } 66%, 85% { background: var(--md-asosiy); color: #fff; } 88%, 100% { background: rgba(255,255,255,.75); color: var(--md-xira); } } @media (prefers-reduced-motion: reduce) { .md-jsurat:not(.ijro) .md-nuqta, .md-jsurat:not(.ijro) .md-nuqta-yozuv { opacity: 1; transform: translate(0, -50%); } .md-jsurat:not(.ijro) .md-nuqta { transform: none; } .md-jsurat:not(.ijro) .md-nuqta-yozuv { font-size: 12px; } .md-jsurat:not(.ijro) .md-nuqta-yozuv b { width: 18px; height: 18px; font-size: 10px; } } @media (max-width: 760px) { .md-jsurat { padding: 8px 8px 10px; } .md-jonli-oyna { border-radius: 20px; } .md-nuqta-yozuv { font-size: 8px; } } /* 0.4.3: logotip yozuvi -- qalin va to'q */ .md-logo b { font-size: 21px; font-weight: 900; letter-spacing: -.01em; color: var(--md-siyoh); } .md-logo i { color: var(--md-asosiy-toq); font-weight: 900; } .md-logo small { font-weight: 800; color: color-mix(in srgb, var(--md-siyoh) 82%, #fff); letter-spacing: 1.6px; } @media (max-width: 760px) { .md-logo b { font-size: 17.5px; } .md-logo small { font-size: 8.5px; letter-spacing: .8px; } } /* ===================== 0.5.0: manzillar, xarita, yo'nalish, eng yaqin filial ===================== */ .md-yozilish { flex-direction: column; } .md-yozilish-tepa { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; } .md-yozilish-tepa .md-yozilish-matn { flex: 1 1 340px; } .md-xarita-quti { flex: 1.3 1 420px; min-height: 320px; border-radius: 24px; overflow: hidden; background: var(--md-och); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 18px 40px -26px color-mix(in srgb, var(--md-asosiy) 70%, transparent); } .md-xarita { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; } .md-eng-yaqin { align-self: flex-start; margin-top: 4px; background: rgba(255,255,255,.75) !important; color: var(--md-asosiy-toq) !important; border: 1.5px dashed color-mix(in srgb, var(--md-asosiy) 45%, transparent) !important; } .md-eng-yaqin:disabled { opacity: .7; cursor: progress; } .md-joy-xabar { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--md-xira); } .md-yozilish .md-filiallar { flex: none; width: 100%; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .md-filial { position: relative; gap: 6px; padding: 20px 18px 18px; } .md-filial-raqam { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--md-grad); color: #fff; font-size: 13px; font-weight: 800; } .md-filial b { font-size: 18px; padding-right: 34px; } .md-filial-manzil { display: flex; gap: 6px; align-items: flex-start; color: var(--md-siyoh) !important; font-weight: 600; font-size: 15px !important; line-height: 1.4; } .md-filial-manzil svg { flex: none; margin-top: 2px; color: var(--md-asosiy); } .md-filial-mojal { font-size: 13.5px !important; } .md-filial-tugmalar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .md-filial-tugmalar .md-tugma { min-height: 38px; } .md-masofa { align-self: flex-start; font-size: 13px !important; font-weight: 700; color: var(--md-asosiy-toq) !important; background: var(--md-och); padding: 3px 10px; border-radius: 999px; } .md-filial.tanlangan { box-shadow: 0 0 0 2px var(--md-asosiy), 0 18px 34px -20px var(--md-asosiy); } .md-filial.eng-yaqin { box-shadow: 0 0 0 2.5px var(--md-urg), 0 18px 34px -18px var(--md-urg); } .md-filial.eng-yaqin .md-masofa { background: var(--md-urg); color: #fff !important; } @media (max-width: 760px) { .md-xarita-quti, .md-xarita { min-height: 260px; } .md-eng-yaqin { width: 100%; } } .md-filial .md-filial-raqam { color: #fff !important; } .md-filial a.md-tugma { color: #fff; } .md-filial a.md-tugma.ikkinchi, .md-filial button.md-tugma.ikkinchi { color: var(--md-siyoh); } /* 0.5.1: filial telefoni (trubka) va Telegram */ .md-filial-aloqa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .md-filial .md-filial-aloqa a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--md-siyoh); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-asosiy) 18%, transparent); transition: transform .35s var(--md-prujina), box-shadow .2s; } .md-filial .md-filial-aloqa a:hover { transform: translateY(-2px) scale(1.03); box-shadow: inset 0 0 0 1px var(--md-asosiy), 0 10px 20px -12px var(--md-asosiy); } .md-aloqa-belgi { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; } .md-aloqa-tel .md-aloqa-belgi { background: linear-gradient(135deg, #1FAF73, #4DD69A); } .md-aloqa-tg .md-aloqa-belgi { background: linear-gradient(135deg, #229ED9, #3BB4F0); } /* ===================== 0.6.0: bitta animatsiyali 24/7 belgisi ===================== */ .md-doira { position: absolute; left: -34px; bottom: 56px; z-index: 3; width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 20px 40px -18px color-mix(in srgb, var(--md-asosiy) 70%, transparent); animation: md-suz 6s ease-in-out infinite; } .md-doira-halqa { position: absolute; inset: 0; width: 100%; height: 100%; animation: md-aylan 16s linear infinite; } .md-doira-halqa text { font-family: inherit; font-size: 12.5px; font-weight: 900; letter-spacing: 0; fill: var(--md-asosiy-toq); } .md-doira-markaz { position: relative; width: 74px; height: 74px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--md-grad); color: #fff; box-shadow: 0 10px 22px -10px var(--md-asosiy); } .md-doira-markaz b { font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1; } .md-doira-markaz .md-ochiq-nuqta { background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); } @keyframes md-aylan { to { transform: rotate(360deg); } } .md-hero-media:has(.md-doira) .md-suzuvchi.pastki { display: none; } @media (max-width: 900px) { .md-doira { left: 8px; bottom: 64px; } } @media (max-width: 760px) { .md-doira { width: 96px; height: 96px; left: 6px; bottom: 54px; } .md-doira-markaz { width: 56px; height: 56px; } .md-doira-markaz b { font-size: 17px; } .md-doira-halqa text { font-size: 10px; } } /* ===================== 0.7.0: statistika, manzillar, ixcham pastki qator, tabiiy ranglar ===================== */ /* Tabiiy ranglar: xizmat kartochkalari faqat rang to'plamidan (asosiy, ikkinchi, urg'u) -- bir oila ranglari */ .md-xizmatlar > .md-xizmat:nth-child(3n+1) { --k1: var(--md-asosiy); --k2: var(--md-ikkinchi); --kfon: color-mix(in srgb, var(--md-asosiy) 10%, #fff); } .md-xizmatlar > .md-xizmat:nth-child(3n+2) { --k1: color-mix(in srgb, var(--md-asosiy) 55%, var(--md-ikkinchi)); --k2: var(--md-ikkinchi); --kfon: color-mix(in srgb, var(--md-ikkinchi) 14%, #fff); } .md-xizmatlar > .md-xizmat:nth-child(3n) { --k1: color-mix(in srgb, var(--md-urg) 80%, var(--md-asosiy)); --k2: color-mix(in srgb, var(--md-urg) 60%, #fff); --kfon: color-mix(in srgb, var(--md-urg) 10%, #fff); } .md-xizmat.rang-kok { --k1: #3D6FD8; --k2: #7FA2F0; --kfon: #EEF3FD; } .md-xizmat.rang-firuza { --k1: #2A9D97; --k2: #6CCBC4; --kfon: #EAF7F6; } .md-xizmat.rang-marjon { --k1: #D9705A; --k2: #F0A894; --kfon: #FCF0EC; } .md-xizmat.rang-lavanda { --k1: var(--md-asosiy); --k2: var(--md-ikkinchi); --kfon: color-mix(in srgb, var(--md-asosiy) 10%, #fff); } .md-xizmat.rang-yashil { --k1: #3E9A72; --k2: #7CC9A5; --kfon: #EDF7F1; } body::before, body::after { opacity: .32; } .md-hero h1 { background: linear-gradient(100deg, var(--md-siyoh) 35%, color-mix(in srgb, var(--md-asosiy) 85%, var(--md-siyoh)) 75%, var(--md-asosiy)); -webkit-background-clip: text; background-clip: text; } /* Statistika */ .md-statistika { position: relative; overflow: hidden; padding: 40px 44px; border-radius: 32px; background: radial-gradient(560px 240px at 0% 0%, color-mix(in srgb, var(--md-ikkinchi) 20%, transparent), transparent 70%), radial-gradient(460px 220px at 100% 100%, color-mix(in srgb, var(--md-urg) 12%, transparent), transparent 70%), rgba(255,255,255,.66); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--md-shisha-soya); } .md-stat-sarlavha { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 22px; color: var(--md-siyoh); } .md-stat-qator { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 24px; margin: 0; } .md-stat { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 3px solid color-mix(in srgb, var(--md-asosiy) 35%, transparent); } .md-stat dt { font-size: clamp(32px, 4vw, 46px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; background: linear-gradient(110deg, var(--md-asosiy-toq), var(--md-asosiy) 60%, var(--md-ikkinchi)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } .md-stat dd { margin: 0; color: var(--md-matn); font-size: 15px; font-weight: 600; } /* Manzillar: tepada sarlavha + tugmalar; chapda filiallar, o'ngda xarita */ .md-yozilish-tepa { align-items: flex-end; justify-content: space-between; } .md-yozilish-tepa .md-yozilish-matn { flex: 1 1 360px; gap: 8px; } .md-yozilish-amal { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .md-yozilish-amal .md-eng-yaqin { margin: 0; align-self: auto; } .md-joy-xabar { margin: -8px 0 0; } .md-manzil-tana { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; } .md-manzil-tana .md-filiallar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: auto; } .md-manzil-tana .md-xarita-quti { position: sticky; top: 100px; min-height: 0; height: 100%; max-height: 640px; } .md-manzil-tana .md-xarita { height: 100%; min-height: 460px; } .md-filial { padding: 16px 16px 14px; } .md-filial b { font-size: 17px; } /* Pastki qism: ixcham bitta qator */ .md-pastki-qator { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-bottom: 20px; } .md-logo.kichik img { width: 36px; height: 36px; } .md-logo.kichik b { font-size: 17px; } .md-pastki-mualliflik { font-size: 13.5px; color: var(--md-xira); } .md-pastki .md-ijtimoiy { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; } .md-pastki .md-ijtimoiy a { color: var(--md-siyoh); text-decoration: none; font-weight: 600; font-size: 14px; } .md-pastki .md-ijtimoiy a:hover { color: var(--md-asosiy); } @media (max-width: 1000px) { .md-manzil-tana { grid-template-columns: 1fr; } .md-manzil-tana .md-xarita-quti { position: static; height: auto; } .md-manzil-tana .md-xarita { min-height: 320px; } } @media (max-width: 760px) { .md-statistika { padding: 26px 22px; border-radius: 26px; } .md-stat-qator { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-manzil-tana .md-filiallar { grid-template-columns: 1fr; } .md-yozilish-amal, .md-yozilish-amal .md-tugma { width: 100%; } .md-pastki-qator { flex-direction: column; text-align: center; } } .md-stat dt { white-space: nowrap; font-size: clamp(28px, 3.3vw, 42px); } .md-stat-qator { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .md-yashirin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .md-filial-aloqa { flex-wrap: nowrap; align-items: center; } .md-filial .md-filial-aloqa a.md-aloqa-tg { padding: 4px; } .md-filial .md-filial-aloqa a.md-aloqa-tel { min-width: 0; } .md-filial .md-filial-aloqa a.md-aloqa-tel { white-space: nowrap; font-size: 13.5px; padding-right: 10px; } .md-filial-aloqa { gap: 6px; } /* ===================== 0.8.0: filiallar sahifasi, filial kartochkasi, galereya ===================== */ .md-filial-kartalar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .md-filial-kartalar.katta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .md-filial-k { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; } .md-filial-muqova { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 10; padding: 14px 16px; background: center / cover no-repeat; color: #fff; text-decoration: none; isolation: isolate; } .md-filial-muqova::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(18,14,48,.65)); } .md-filial-muqova.bosh { background: radial-gradient(260px 160px at 80% 10%, color-mix(in srgb, var(--md-ikkinchi) 55%, transparent), transparent 70%), linear-gradient(135deg, var(--md-asosiy), color-mix(in srgb, var(--md-asosiy) 60%, var(--md-urg))); } .md-filial-muqova.bosh::after { background: none; } .md-filial-muqova-belgi { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -62%); opacity: .35; } .md-filial-nom { font-size: 20px; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.25); } .md-filial-k .md-filial-raqam { top: 12px; right: 12px; background: rgba(255,255,255,.9); color: var(--md-asosiy-toq) !important; } .md-filial-ichi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; } .md-filial-k .md-filial-tugmalar { margin-top: auto; padding-top: 6px; } .md-filial-k:hover .md-filial-muqova { filter: saturate(1.08); } .md-xarita-quti.kichik { margin-top: 18px; height: 240px; min-height: 0; } .md-xarita-quti.kichik .md-xarita { min-height: 240px; height: 240px; } .md-xarita-quti.keng { margin-top: 20px; height: 380px; } .md-xarita-quti.keng .md-xarita { height: 380px; min-height: 380px; } .md-filial-sahifa-bosh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .md-filial-katta-manzil { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 18px; font-weight: 600; color: var(--md-siyoh); } .md-filial-katta-manzil svg { flex: none; margin-top: 3px; color: var(--md-asosiy); } .md-filial-aloqa.katta { flex-wrap: wrap; } .md-filial-aloqa.katta a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--md-siyoh); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-asosiy) 18%, transparent); } .md-filial-aloqa.katta .md-aloqa-belgi { width: 36px; height: 36px; } .md-galereya { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .md-galereya-rasm { display: block; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: var(--md-och); aspect-ratio: 4 / 3; } .md-galereya-rasm img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; } .md-galereya-rasm:hover img { transform: scale(1.06); } .md-oyna-ichi.rasmli { aspect-ratio: auto; background: transparent; } .md-oyna-ichi.rasmli img { display: block; width: 100%; max-height: 86vh; object-fit: contain; border-radius: 20px; } @media (max-width: 1100px) { .md-filial-kartalar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .md-filial-kartalar, .md-filial-kartalar.katta { grid-template-columns: 1fr; } .md-xarita-quti.keng, .md-xarita-quti.keng .md-xarita { height: 300px; min-height: 300px; } } .md-filial .md-filial-nom { color: #fff !important; font-size: 20px !important; font-weight: 800; } .md-xarita-quti.kichik, .md-xarita-quti.keng { flex: none; width: 100%; } .md-filial-k .md-filial-tugmalar { flex-wrap: nowrap; } .md-filial-kartalar.katta .md-filial-k .md-filial-tugmalar { flex-wrap: wrap; } /* 0.8.1: bosh sahifadagi filiallar -- 2x2, gorizontal kartochka (chapda rasm, o'ngda ma'lumot) */ .md-filial-kartalar:not(.katta) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .md-filial-kartalar:not(.katta) .md-filial-k { flex-direction: row; min-height: 200px; } .md-filial-kartalar:not(.katta) .md-filial-muqova { flex: 0 0 40%; aspect-ratio: auto; min-height: 100%; } .md-filial-kartalar:not(.katta) .md-filial-ichi { padding: 16px 18px; gap: 8px; min-width: 0; } .md-filial-kartalar:not(.katta) .md-filial-tugmalar { flex-wrap: wrap; } .md-filial-kartalar.katta .md-filial-ichi { padding: 18px 20px 20px; gap: 8px; } @media (max-width: 1100px) { .md-filial-kartalar:not(.katta) { grid-template-columns: 1fr; } } @media (max-width: 560px) { .md-filial-kartalar:not(.katta) .md-filial-k { flex-direction: column; } .md-filial-kartalar:not(.katta) .md-filial-muqova { flex: none; aspect-ratio: 16 / 9; } } /* ===================== 0.9.0: bosh blok ostidagi filiallar qatori ===================== */ .md-fq-bolim { position: relative; z-index: 2; margin-top: -8px; } .md-fq-qator { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(4, minmax(0, 1fr)); gap: 12px; } .md-fq-yaqin, .md-fq { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--md-shisha-soya); transition: transform .35s var(--md-prujina), box-shadow .25s; } .md-fq:hover { transform: translateY(-3px); } .md-fq-yaqin { background: radial-gradient(240px 140px at 100% 0%, color-mix(in srgb, var(--md-ikkinchi) 30%, transparent), transparent 70%), linear-gradient(135deg, rgba(255,255,255,.85), color-mix(in srgb, var(--md-och) 85%, #fff)); } .md-fq-yaqin-belgi { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--md-grad); color: #fff; box-shadow: 0 10px 20px -10px var(--md-asosiy); } .md-fq-yaqin b { font-size: 17px; margin-top: 4px; } .md-fq-yaqin small { color: var(--md-xira); font-size: 13px; line-height: 1.35; } .md-fq-yaqin .md-tugma { margin-top: auto; min-height: 40px; padding: 8px 14px; font-size: 14px; background: var(--md-grad) !important; color: #fff !important; border: 0 !important; } .md-eng-natija { white-space: normal; text-align: center; line-height: 1.3; background: linear-gradient(135deg, var(--md-urg), color-mix(in srgb, var(--md-urg) 60%, var(--md-asosiy))) !important; } .md-fq-yaqin .md-joy-xabar { margin: 0; font-size: 12.5px; min-height: 0; } .md-fq-nom { display: flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 800; color: var(--md-siyoh); text-decoration: none; } .md-fq-nom:hover { color: var(--md-asosiy); } .md-fq-raqam { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--md-och); color: var(--md-asosiy-toq); font-size: 12px; font-weight: 800; } .md-fq-manzil { font-size: 13.5px; line-height: 1.35; color: var(--md-matn); } .md-fq .md-masofa { font-size: 12.5px; padding: 2px 9px; } .md-fq-tugmalar { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; } .md-fq-t { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: transform .35s var(--md-prujina), box-shadow .2s; } .md-fq-t:hover { color: #fff; transform: translateY(-2px) scale(1.08); } .md-fq-t.tel { background: linear-gradient(135deg, #1FAF73, #4DD69A); box-shadow: 0 8px 16px -10px #1FAF73; } .md-fq-t.tg { background: linear-gradient(135deg, #229ED9, #3BB4F0); box-shadow: 0 8px 16px -10px #229ED9; } .md-fq-t.yo { background: var(--md-grad); box-shadow: 0 8px 16px -10px var(--md-asosiy); } .md-fq.eng-yaqin { box-shadow: 0 0 0 2.5px var(--md-urg), 0 18px 34px -18px var(--md-urg); } .md-fq-bolim + .md-bolim { padding-top: 56px; } @media (max-width: 1100px) { .md-fq-qator { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 240px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 12px; scrollbar-width: none; } .md-fq-qator::-webkit-scrollbar { display: none; } .md-fq-qator > * { scroll-snap-align: start; } } @media (max-width: 760px) { .md-fq-qator { grid-auto-columns: 78%; } .md-fq-bolim { margin-top: 0; } } [hidden] { display: none !important; } .md-filial .md-fq-t, .md-filial .md-fq-t:hover { color: #fff; } .md-filial .md-fq-nom { color: var(--md-siyoh); } .md-filial .md-fq-nom:hover { color: var(--md-asosiy); } /* ---------- 0.9.2: yuqori menyu -- o'rtada shisha kapsula, siljiydigan belgi ---------- */ .md-menyu-qator { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 16px; padding-top: 14px; padding-bottom: 14px; } .md-menyu-qator > .md-logo { justify-self: start; } .md-menyu-ong { justify-self: end; } @media (min-width: 901px) { .md-nav { position: relative; gap: 2px; padding: 5px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42)); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--md-asosiy) 60%, transparent), inset 0 1px 0 #fff, inset 0 0 0 1px color-mix(in srgb, var(--md-asosiy) 8%, transparent); } .md-nav a, .md-nav a:hover, .md-nav a:focus-visible, .md-nav .current-menu-item > a { position: relative; z-index: 1; transform: none; box-shadow: none; background: transparent; padding: 10px 18px; font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--md-siyoh); white-space: nowrap; } .md-nav a:hover, .md-nav a:focus-visible, .md-nav a.faol, .md-nav .current-menu-item > a { color: var(--md-asosiy-toq); } .md-nav a:focus-visible { outline: 2px solid var(--md-asosiy); outline-offset: -2px; } .md-nav a.faol::after, .md-nav .current-menu-item > a::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--md-grad); box-shadow: 0 0 8px color-mix(in srgb, var(--md-asosiy) 70%, transparent); } .md-nav-iz { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--md-och) 70%, #fff)); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--md-asosiy) 75%, transparent), 0 0 0 1px color-mix(in srgb, var(--md-asosiy) 12%, transparent); transition: transform .45s var(--md-prujina), width .45s var(--md-prujina), opacity .25s; } } @media (min-width: 901px) and (max-width: 1100px) { .md-nav a, .md-nav a:hover, .md-nav a.faol { padding: 9px 12px; font-size: 14px; } .md-menyu-qator { gap: 10px; } .md-logo small { white-space: nowrap; font-size: 9.5px; letter-spacing: 1px; } } @media (max-width: 900px) { .md-menyu-qator { grid-template-columns: minmax(0,1fr) auto; } .md-menyu-qator > .md-logo { min-width: 0; max-width: 100%; } .md-nav-iz { display: none; } .md-nav a.faol { background: rgba(255,255,255,.8); color: var(--md-asosiy-toq); } } /* ---------- 0.9.3: Aksiyalar ---------- */ .md-aksiyalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .md-aksiyalar.bitta { grid-template-columns: minmax(0, 720px); } .md-aksiya { display: flex; flex-direction: column; text-decoration: none; color: var(--md-siyoh); background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95); border-radius: 26px; overflow: hidden; box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--md-asosiy) 70%, transparent); transition: transform .4s var(--md-prujina), box-shadow .3s; } .md-aksiya:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--md-asosiy) 80%, transparent); } .md-aksiya-rasm { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--md-grad) center / cover no-repeat; color: rgba(255,255,255,.85); } .md-aksiyalar.bitta .md-aksiya-rasm { aspect-ratio: 21 / 9; } .md-aksiya-chegirma { position: absolute; top: 14px; left: 14px; padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: linear-gradient(135deg, var(--md-urg), color-mix(in srgb, var(--md-urg) 60%, var(--md-asosiy))); color: #fff; font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: -.02em; box-shadow: 0 10px 22px -10px var(--md-urg); animation: md-chegirma 2.6s ease-in-out infinite; } .md-aksiya-chegirma.katta { top: 18px; left: 18px; font-size: 38px; padding: 12px 20px; border-radius: 22px 22px 22px 6px; } @keyframes md-chegirma { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(2deg) scale(1.06); } } .md-aksiya-ichi { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; } .md-aksiya-nom { font-size: 19px; font-weight: 800; line-height: 1.25; } .md-aksiya-izoh { color: var(--md-xira); font-size: 15px; line-height: 1.5; } .md-aksiya-narx { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; } .md-aksiya-narx s { color: var(--md-xira); font-size: 15px; } .md-aksiya-narx b { color: var(--md-asosiy-toq); font-size: 20px; font-weight: 900; } .md-aksiya-narx.katta s { font-size: 19px; } .md-aksiya-narx.katta b { font-size: 30px; } .md-aksiya-past { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; } .md-aksiya-muddat { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--md-asosiy) 9%, #fff); color: var(--md-asosiy-toq); font-size: 13px; font-weight: 700; } .md-aksiya-muddat.oz, .md-aksiya-muddat.bugun { background: color-mix(in srgb, var(--md-urg) 13%, #fff); color: color-mix(in srgb, var(--md-urg) 70%, #000); } .md-aksiya-muddat.tugagan { background: #eee; color: #666; } .md-aksiya-muddat.tugagan .md-ochiq-nuqta { display: none; } .md-aksiya-muddat.katta { font-size: 14px; padding: 8px 14px; margin-bottom: 14px; } .md-aksiya-banner { position: relative; background-color: var(--md-asosiy); background-image: var(--md-grad); } .md-nav-aksiya { position: relative; } .md-nav-nuqta { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--md-urg); box-shadow: 0 0 0 0 color-mix(in srgb, var(--md-urg) 60%, transparent); animation: md-nuqta 1.8s ease-out infinite; } @keyframes md-nuqta { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--md-urg) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } } @media (max-width: 900px) { .md-nav-nuqta { position: static; display: inline-block; margin-left: 8px; vertical-align: middle; } } @media (max-width: 760px) { .md-aksiyalar { grid-template-columns: 1fr; } .md-aksiyalar.bitta .md-aksiya-rasm { aspect-ratio: 16 / 9; } .md-aksiya-chegirma.katta { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .md-aksiya-chegirma, .md-nav-nuqta { animation: none; } } .md-logo small { white-space: nowrap; } .md-aksiya-muddat.katta { align-self: flex-start; width: fit-content; } @media (min-width: 901px) and (max-width: 1240px) { .md-logo small { display: none; } } /* ---------- 0.9.4: logo yozuvi har doim; pastda ijtimoiy tarmoq ikonkalari ---------- */ @media (min-width: 901px) and (max-width: 1240px) { .md-logo small { display: block; } } @media (min-width: 901px) and (max-width: 1280px) { .md-menyu-qator { gap: 10px; } .md-nav a, .md-nav a:hover, .md-nav a:focus-visible, .md-nav a.faol, .md-nav .current-menu-item > a { padding: 9px 11px; font-size: 14px; } .md-logo { gap: 9px; } .md-logo img { width: 42px; height: 42px; } .md-logo b { font-size: 17.5px; } .md-logo small { font-size: 8.6px; letter-spacing: .9px; } } @media (min-width: 901px) and (max-width: 1060px) { .md-nav { gap: 0; padding: 4px; } .md-nav a, .md-nav a:hover, .md-nav a:focus-visible, .md-nav a.faol, .md-nav .current-menu-item > a { padding: 8px 8px; font-size: 13.5px; } .md-nav-iz { top: 4px; bottom: 4px; } .md-logo img { width: 38px; height: 38px; } .md-logo b { font-size: 16px; } .md-logo small { font-size: 7.8px; letter-spacing: .6px; } .md-til a { padding: 6px 9px; } } .md-pastki .md-ijtimoiy { gap: 10px; align-items: center; } .md-pastki .md-ijtimoiy a.md-tarmoq { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--md-siyoh); background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--md-asosiy) 70%, transparent); transition: transform .35s var(--md-prujina), background .25s, color .25s, box-shadow .25s; } .md-pastki .md-ijtimoiy a.md-tarmoq:hover, .md-pastki .md-ijtimoiy a.md-tarmoq:focus-visible { transform: translateY(-3px) scale(1.06); color: #fff; box-shadow: 0 12px 22px -12px rgba(0,0,0,.45); } .md-tarmoq.telegram:hover, .md-tarmoq.telegram:focus-visible { background: #229ED9; } .md-tarmoq.instagram:hover, .md-tarmoq.instagram:focus-visible { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .md-tarmoq.tiktok:hover, .md-tarmoq.tiktok:focus-visible { background: #111; } .md-tarmoq.youtube:hover, .md-tarmoq.youtube:focus-visible { background: #FF0033; } .md-tarmoq.facebook:hover, .md-tarmoq.facebook:focus-visible { background: #1877F2; } .md-tarmoq.pochta:hover, .md-tarmoq.pochta:focus-visible { background: var(--md-grad); } .md-tarmoq.youtube:hover svg path + path { fill: #FF0033; } /* 0.9.4: footer har doim pastda; yo'l ko'rsatkichi nafasi; shifokor sahifasi; telefonda logo yozuvi va 24/7 doirasi */ body { min-height: 100vh; display: flex; flex-direction: column; } body > .md-asosiy { flex: 1 0 auto; width: 100%; } .md-hero-fon.kichik .md-yol { padding-top: 26px; } .md-shifokor-qator { align-items: flex-start; } .md-shifokor-matn .md-tugmalar { margin-top: 6px; } @media (max-width: 760px) { .md-doira { left: auto; right: 6px; } .md-logo small { font-size: 7.6px; letter-spacing: .35px; overflow: visible; text-overflow: clip; } } @media (max-width: 380px) { .md-logo small { font-size: 7px; letter-spacing: .2px; } .md-logo b { font-size: 15.5px; } } .md-shifokor-matn .md-matn { flex: 0 0 auto; } @media (max-width: 760px) { .md-doira { width: 84px; height: 84px; bottom: 46px; right: 4px; } .md-doira-markaz { width: 50px; height: 50px; } .md-doira-markaz b { font-size: 17px; } } /* ---------- 0.9.9: yuqori panel -- info qatori + yaxlit shisha kapsula (logo | ikonkali menyu | til) ---------- */ .md-menyu { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.25) 70%, rgba(255,255,255,0)); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; box-shadow: none; } .md-menyu::before { display: none; } .md-menyu.soyali { box-shadow: none; } .md-info { max-height: 44px; overflow: hidden; transition: max-height .35s ease, opacity .25s ease; font-size: 13px; } .md-menyu.soyali .md-info { max-height: 0; opacity: 0; } .md-info-ichi { display: flex; align-items: center; gap: 6px 22px; min-height: 36px; padding-top: 6px; } .md-info-ochiq { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--md-siyoh); white-space: nowrap; } .md-info .md-ochiq-nuqta { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: md-yashil 1.8s ease-out infinite; flex: none; } @keyframes md-yashil { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } } .md-info-filial { display: inline-flex; align-items: center; gap: 6px; color: var(--md-siyoh); text-decoration: none; font-weight: 600; white-space: nowrap; } .md-info-filial svg { color: var(--md-asosiy); } .md-info-filial:hover { color: var(--md-asosiy); } .md-info-tarmoq { margin-left: auto; display: flex; gap: 4px; } .md-info-t { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--md-siyoh); transition: background .2s, color .2s, transform .3s var(--md-prujina); } .md-info-t:hover, .md-info-t:focus-visible { color: #fff; transform: translateY(-1px); } .md-info-t.telegram:hover { background: #229ED9; } .md-info-t.instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .md-info-t.tiktok:hover { background: #111; } .md-info-t.youtube:hover { background: #FF0033; } .md-info-t.facebook:hover { background: #1877F2; } .md-info-t.youtube:hover svg path + path { fill: #FF0033; } .md-menyu-tashqi { padding-top: 6px; padding-bottom: 8px; } .md-menyu-qator { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.6)); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--md-asosiy) 75%, transparent), 0 0 0 1px color-mix(in srgb, var(--md-asosiy) 7%, transparent), inset 0 1px 0 #fff; transition: box-shadow .3s; } .md-menyu.soyali .md-menyu-qator { box-shadow: 0 20px 44px -22px color-mix(in srgb, var(--md-asosiy) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--md-asosiy) 9%, transparent), inset 0 1px 0 #fff; } .md-menyu-qator > .md-logo { padding-right: 16px; border-right: 1px solid color-mix(in srgb, var(--md-asosiy) 14%, transparent); } .md-nav a { display: inline-flex; align-items: center; gap: 7px; } .md-nav-b { display: inline-flex; color: var(--md-asosiy); opacity: .8; transition: opacity .2s, transform .35s var(--md-prujina); } .md-nav a:hover .md-nav-b, .md-nav a.faol .md-nav-b { opacity: 1; transform: translateY(-1px) scale(1.08); } @media (min-width: 901px) { .md-menyu-qator { grid-template-columns: auto minmax(0, 1fr) auto; } .md-nav { justify-self: center; background: transparent; border: 0; box-shadow: none; padding: 2px; } .md-nav-iz { top: 2px; bottom: 2px; } } @media (min-width: 901px) and (max-width: 1140px) { .md-nav-b { display: none; } .md-menyu-qator > .md-logo { padding-right: 10px; } } @media (max-width: 900px) { .md-menyu-qator { grid-template-columns: minmax(0, 1fr) auto; padding: 7px 8px 7px 10px; border-radius: 22px; } .md-menyu-qator > .md-logo { border-right: 0; padding-right: 0; } .md-nav { top: calc(100% - 2px); left: 12px; right: 12px; padding: 8px; border: 1px solid rgba(255,255,255,.95); border-radius: 22px; background: rgba(255,255,255,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--md-asosiy) 70%, transparent); } .md-nav a { display: flex; gap: 12px; padding: 13px 12px; } .md-nav-b { width: 34px; height: 34px; border-radius: 11px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--md-asosiy) 9%, #fff); opacity: 1; } } @media (max-width: 600px) { .md-info { font-size: 12px; } .md-info-ichi { gap: 6px 14px; min-height: 32px; } .md-info-tarmoq { display: none; } } @media (prefers-reduced-motion: reduce) { .md-info .md-ochiq-nuqta { animation: none; } } /* ---------- 0.9.9: telefonda filiallar -- ustma-ust ro'yxat (yonga surish yo'q) ---------- */ @media (max-width: 760px) { .md-fq-qator { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; padding: 0; gap: 10px; } .md-fq { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom tug" "manzil tug" "masofa tug"; column-gap: 12px; row-gap: 3px; align-items: center; padding: 13px 12px 13px 14px; border-radius: 20px; } .md-fq:hover { transform: none; } .md-fq-nom { grid-area: nom; font-size: 16px; } .md-fq-manzil { grid-area: manzil; font-size: 13px; padding-left: 32px; } .md-fq .md-masofa { grid-area: masofa; justify-self: start; margin-left: 32px; } .md-fq-tugmalar { grid-area: tug; margin: 0; padding: 0; gap: 6px; } .md-fq-t { width: 40px; height: 40px; } .md-fq-yaqin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "belgi b tugma" "belgi small tugma" "natija natija natija" "xabar xabar xabar"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 20px; } .md-fq-yaqin-belgi { grid-area: belgi; } .md-fq-yaqin b { grid-area: b; margin: 0; font-size: 16px; } .md-fq-yaqin small { grid-area: small; font-size: 12.5px; } .md-fq-yaqin .md-eng-yaqin { grid-area: tugma; margin: 0; } .md-fq-yaqin .md-eng-natija { grid-area: natija; margin-top: 8px; justify-self: start; } .md-fq-yaqin .md-joy-xabar { grid-area: xabar; } .md-fq-yaqin .md-eng-yaqin:not([hidden]) ~ .md-eng-natija[hidden] { display: none; } } /* ---------- 1.0.2: narxlar -- sarlavhada xizmatlar soni va "...dan" narx, dastlabki 2 tasi ochiq, qidiruv, hammasini ochish ---------- */ .md-narx-sarlavha { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .md-narx-sarlavha small { font-size: 13.5px; font-weight: 600; color: var(--md-asosiy-toq); } .md-narx-chap { position: sticky; top: 110px; align-self: flex-start; } .md-narx-qidir { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 0 14px; height: 50px; border-radius: 16px; background: rgba(255,255,255,.85); border: 1px solid color-mix(in srgb, var(--md-asosiy) 18%, transparent); color: var(--md-asosiy); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--md-asosiy) 70%, transparent); } .md-narx-qidir:focus-within { border-color: var(--md-asosiy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-asosiy) 18%, transparent); } .md-narx-qidir input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--md-siyoh); outline: none; } .md-narx-hammasi { align-self: flex-start; } .md-narx-yoq { margin: 0; padding: 18px 22px; border-radius: 20px; background: rgba(255,255,255,.7); color: var(--md-xira); } .md-narx-jadval tr[hidden] { display: none; } .md-narx-jadval mark { background: color-mix(in srgb, var(--md-urg) 22%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; } @media (max-width: 900px) { .md-narx-chap { position: static; } } @media (max-width: 760px) { .md-ochiladi { padding: 14px 16px; } .md-ochiladi summary { font-size: 16px; } .md-narx-jadval { font-size: 14.5px; } .md-narx-jadval td:last-child { white-space: normal; min-width: 110px; } } /* ---------- 1.0.4: filial kartochkasida rasmlar almashinuvi (sekin kattalashish + silliq o'tish) ---------- */ .md-almash { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--md-asosiy); } .md-almash-r { position: absolute; inset: -2px; background: center / cover no-repeat; opacity: 0; transform: scale(1.14); transition: opacity 1.4s ease, transform 7s cubic-bezier(.2,.6,.3,1); will-change: opacity, transform; } .md-almash-r.faol { opacity: 1; transform: scale(1); } .md-almash-r.ketdi { opacity: 0; transform: scale(1.02); transition: opacity 1.4s ease, transform 1.4s ease; } .md-filial-muqova:hover .md-almash-r.faol { transform: scale(1.04); transition: opacity 1.4s ease, transform 1.2s ease; } .md-almash-nuqtalar { position: absolute; left: 50%; bottom: 10px; z-index: 1; display: flex; gap: 5px; transform: translateX(-50%); } .md-almash-nuqtalar i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.55); transition: width .4s ease, background .4s ease; } .md-almash-nuqtalar i.faol { width: 18px; background: #fff; } .md-filial-k .md-filial-nom { position: relative; z-index: 1; text-shadow: 0 2px 10px rgba(0,0,0,.35); } .md-filial-kartalar:not(.katta) .md-almash-nuqtalar, .md-filial-kartalar.katta .md-almash-nuqtalar { left: auto; right: 14px; transform: none; bottom: 16px; }