/* ===========================================================================
AliMarket — premium dizayn. Mobil birinchi.
Tuzilishi: 1) tokenlar 2) asos 3) komponentlar 4) animatsiya 5) admin
Barcha animatsiyalar faqat transform/opacity ustida — telefonda ham silliq.
prefers-reduced-motion yoqilgan bo'lsa hammasi o'chadi.
=========================================================================== */
/* ---------------------------------------------------------------- 1. TOKENLAR */
:root{
/* brend */
--brand:#15181d; --brand-2:#2e353f; --brand-dark:#0b0d11; --brand-soft:#f1f2f4;
--on-brand:#ffffff; /* brend fonidagi matn rangi */
--sale:#b42318; /* chegirma/aksiya belgisi */
--sale-soft:#fdf0ee;
--brand-grad:linear-gradient(135deg,#15181d,#2e353f);
/* neytral */
--ink:#101317; --ink-2:#5a6069; --ink-3:#8e949c;
--bg:#ffffff; --bg-2:#f7f7f8; --bg-3:#ecedef; --line:#e3e4e8;
/* holat */
--ok:#1a7f4b; --err:#b42318; --warn:#9a6b10;
/* mavzu almashganda AG'DARILMAYDIGAN ranglar */
--sidebar:#101317; --sidebar-ink:#c4c9d0;
--warn-bg:#faf4e6; --warn-ink:#7a5608; --warn-line:#e8d9ae;
/* shakl */
--r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-full:999px;
/* soya — premium his aynan shu yerda */
--sh-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
--sh-2:0 2px 6px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.07);
--sh-3:0 8px 20px rgba(16,24,40,.09), 0 24px 56px rgba(16,24,40,.12);
--sh-brand:0 6px 18px rgba(16,19,23,.18);
/* harakat */
--e-out:cubic-bezier(.22,.8,.3,1);
--e-spring:cubic-bezier(.34,1.46,.54,1);
--t-fast:.16s var(--e-out);
--t:.26s var(--e-out);
--t-slow:.5s var(--e-out);
--max:1260px;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--ink:#edeff2; --ink-2:#a6adb6; --ink-3:#717880;
--bg:#0e1013; --bg-2:#15181c; --bg-3:#1e2228; --line:#262b31;
--brand:#f2f4f7; --brand-2:#dfe3e8; --brand-dark:#ffffff;
--brand-grad:linear-gradient(135deg,#ffffff,#dfe3e8);
--on-brand:#0e1013; --brand-soft:#1c2026;
--sale:#e5564a; --sale-soft:#2a1715;
--ok:#3dc07d; --err:#e5564a;
--sh-brand:0 6px 18px rgba(0,0,0,.5);
color-scheme:dark;
--warn-bg:#272213; --warn-ink:#e0b75a; --warn-line:#443c1e;
--sh-1:0 1px 2px rgba(0,0,0,.4);
--sh-2:0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
--sh-3:0 8px 20px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.45);
}
}
:root[data-theme="dark"]{
--ink:#edeff2; --ink-2:#a6adb6; --ink-3:#717880;
--bg:#0e1013; --bg-2:#15181c; --bg-3:#1e2228; --line:#262b31;
--brand:#f2f4f7; --brand-2:#dfe3e8; --brand-dark:#ffffff;
--brand-grad:linear-gradient(135deg,#ffffff,#dfe3e8);
--on-brand:#0e1013; --brand-soft:#1c2026;
--sale:#e5564a; --sale-soft:#2a1715;
--ok:#3dc07d; --err:#e5564a;
--sh-brand:0 6px 18px rgba(0,0,0,.5);
--warn-bg:#272213; --warn-ink:#e0b75a; --warn-line:#443c1e;
color-scheme:dark;
}
/* ---------------------------------------------------------------- 2. ASOS */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
margin:0; background:var(--bg); color:var(--ink);
font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
Roboto,"Helvetica Neue",Arial,sans-serif;
font-feature-settings:"cv05","ss01";
-webkit-font-smoothing:antialiased;
padding-bottom:env(safe-area-inset-bottom);
overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.2; font-weight:700; letter-spacing:-.022em}
h1{font-size:clamp(22px,3.4vw,30px)}
h2{font-size:clamp(18px,2.4vw,23px)}
h3{font-size:17px}
hr{border:0; border-top:1px solid var(--line); margin:18px 0}
::selection{background:var(--brand); color:var(--on-brand)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.row{display:flex; gap:12px; align-items:center}
.row-between{display:flex; gap:12px; align-items:center; justify-content:space-between}
.col{display:flex; flex-direction:column; gap:12px}
.grow{flex:1 1 auto; min-width:0}
@media(max-width:759px){ .hide-mob{display:none !important} }
@media(min-width:760px){ .hide-desk{display:none !important} }
/* ---------------------------------------------------------------- 3. HEADER */
.head{
position:sticky; top:0; z-index:60;
background:color-mix(in srgb, var(--bg) 82%, transparent);
-webkit-backdrop-filter:saturate(180%) blur(14px);
backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid transparent;
transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.head.stuck{ border-bottom-color:var(--line); box-shadow:var(--sh-1) }
@supports not (backdrop-filter: blur(1px)){ .head{background:var(--bg)} }
.head-top{display:flex; align-items:center; gap:12px; padding:11px 0}
.logo{
display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px;
letter-spacing:-.03em; white-space:nowrap;
}
.logo-mark{
width:34px; height:34px; border-radius:11px; flex:none;
background:var(--brand-grad); box-shadow:var(--sh-brand);
display:grid; place-items:center; color:var(--on-brand); font-size:18px; font-weight:800;
transition:transform var(--t-slow) var(--e-spring);
}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06)}
.logo span b{
background:var(--brand-grad); -webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
.search{position:relative; flex:1 1 auto; min-width:0}
.search input{
width:100%; height:44px; padding:0 46px 0 16px; border:1.5px solid var(--line);
border-radius:var(--r-full); background:var(--bg-2); outline:none;
transition:border-color var(--t), background var(--t), box-shadow var(--t);
}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{
border-color:var(--brand); background:var(--bg);
box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
.search button{
position:absolute; right:5px; top:5px; width:34px; height:34px; border:0;
border-radius:var(--r-full); background:var(--brand-grad); color:var(--on-brand); cursor:pointer;
display:grid; place-items:center; transition:transform var(--t-fast), filter var(--t-fast);
}
.search button:hover{filter:brightness(1.08)} .search button:active{transform:scale(.92)}
.suggest{
position:absolute; left:0; right:0; top:52px; background:var(--bg); z-index:70;
border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3);
overflow:hidden; opacity:0; transform:translateY(-6px) scale(.985);
pointer-events:none; transition:opacity var(--t), transform var(--t);
}
.suggest.on{opacity:1; transform:none; pointer-events:auto}
.suggest a{display:flex; gap:11px; align-items:center; padding:10px 13px;
border-bottom:1px solid var(--bg-3); transition:background var(--t-fast)}
.suggest a:last-child{border:0}
.suggest a:hover{background:var(--bg-2)}
.suggest img{width:38px; height:38px; border-radius:9px; object-fit:cover; flex:none; background:var(--bg-3)}
.head-acts{display:flex; align-items:center; gap:2px; flex:none}
.icon-btn{
position:relative; display:grid; place-items:center; width:42px; height:42px;
border-radius:var(--r-sm); border:0; background:transparent; cursor:pointer; color:var(--ink-2);
transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover{background:var(--bg-2); color:var(--ink)}
.icon-btn:active{transform:scale(.92)}
.icon-btn .badge{
position:absolute; top:3px; right:3px; min-width:19px; height:19px; padding:0 5px;
border-radius:var(--r-full); background:var(--sale); color:#fff; font-size:11px;
font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg);
}
.badge.bump{animation:badgeBump .45s var(--e-spring)}
.head-nav{display:flex; gap:6px; overflow-x:auto; padding:0 0 10px;
scrollbar-width:none; -webkit-overflow-scrolling:touch}
.head-nav::-webkit-scrollbar{display:none}
.head-nav a{
padding:7px 14px; border-radius:var(--r-full); background:var(--bg-2); white-space:nowrap;
font-size:13.5px; font-weight:500; color:var(--ink-2);
transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.head-nav a:hover{background:var(--bg-3); color:var(--ink); transform:translateY(-1px)}
.head-nav a.on{color:var(--ink)}
/* ---------------------------------------------------------------- 4. TUGMALAR */
.btn{
position:relative; overflow:hidden;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
height:46px; padding:0 20px; border:0; cursor:pointer;
border-radius:var(--r-sm); background:var(--bg-3); color:var(--ink);
font-weight:600; letter-spacing:-.01em; text-align:center;
transition:transform var(--t-fast), background var(--t-fast),
box-shadow var(--t), filter var(--t-fast);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:var(--brand-grad); color:var(--on-brand); box-shadow:var(--sh-brand)}
.btn-primary:hover{filter:brightness(1.14); box-shadow:0 10px 24px rgba(16,19,23,.26)}
.btn-outline{background:transparent; border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--ink-3); background:var(--bg-2)}
.btn-ghost{background:transparent; color:var(--ink-2)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-block{width:100%}
.btn-sm{height:36px; padding:0 14px; font-size:13.5px; border-radius:var(--r-xs)}
.btn[disabled]{opacity:.5; pointer-events:none}
.btn.loading{color:transparent !important; pointer-events:none}
.btn.loading::after{
content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
animation:spin .7s linear infinite;
}
/* bosilganda to'lqin */
.btn .ripple{
position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
background:rgba(255,255,255,.45); animation:ripple .55s var(--e-out) forwards;
}
.btn-outline .ripple,.btn-ghost .ripple{background:color-mix(in srgb,var(--ink) 12%,transparent)}
/* ---------------------------------------------------------------- 5. KARTA / TO'R */
.card{
background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
padding:18px; box-shadow:var(--sh-1);
}
.card-pad0{padding:0; overflow:hidden}
.card-warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink)}
.card-warn .muted,.card-warn .small{color:inherit; opacity:.85}
.grid{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:560px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px} }
@media(min-width:860px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(min-width:1120px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
/* ------- tovar kartochkasi */
.prod{
position:relative; background:var(--bg); border:1px solid var(--line);
border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
transition:box-shadow var(--t), transform var(--t), border-color var(--t);
will-change:transform;
}
.prod:hover{box-shadow:var(--sh-3); transform:translateY(-4px); border-color:transparent}
.prod-img{position:relative; aspect-ratio:1; background:var(--bg-2); overflow:hidden}
.prod-img > a{display:block; width:100%; height:100%}
.prod-img img{
width:100%; height:100%; object-fit:cover;
transition:transform .55s var(--e-out), opacity .4s;
}
.prod:hover .prod-img img{transform:scale(1.07)}
.prod-body{padding:12px; display:flex; flex-direction:column; gap:5px; flex:1}
.prod-title{
font-size:13.5px; line-height:1.38; color:var(--ink-2);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
transition:color var(--t-fast);
}
.prod:hover .prod-title{color:var(--ink)}
.prod-price{font-size:17px; font-weight:800; letter-spacing:-.03em}
.prod-old{font-size:12.5px; color:var(--ink-3); text-decoration:line-through}
.prod-meta{display:flex; gap:9px; align-items:center; font-size:12px; color:var(--ink-3); margin-top:auto; padding-top:4px}
.prod-fav{
position:absolute; top:9px; right:9px; width:34px; height:34px; border:0; cursor:pointer;
border-radius:var(--r-full); background:color-mix(in srgb,var(--bg) 88%,transparent);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
display:grid; place-items:center; box-shadow:var(--sh-1); color:var(--ink-3);
transition:transform var(--t-fast) var(--e-spring), color var(--t-fast), background var(--t-fast);
}
.prod-fav:hover{transform:scale(1.12)} .prod-fav:active{transform:scale(.9)}
.prod-fav.on{color:var(--sale)}
.prod-fav.on svg{animation:heart .45s var(--e-spring)}
/* kartochkadagi tezkor "savatga" tugmasi */
.prod-quick{
position:absolute; left:10px; right:10px; bottom:10px; z-index:2; height:38px; border:0; cursor:pointer;
border-radius:var(--r-xs); background:var(--brand-grad); color:var(--on-brand); font-weight:600; font-size:13px;
display:grid; place-items:center; box-shadow:var(--sh-brand);
opacity:0; transform:translateY(10px); transition:opacity var(--t), transform var(--t);
}
.prod:hover .prod-quick{opacity:1; transform:none}
@media(hover:none){ .prod-quick{display:none} }
.tag{
position:absolute; top:9px; left:9px; padding:4px 9px; border-radius:var(--r-full);
background:var(--sale); color:#fff; font-size:11px; font-weight:700; letter-spacing:.01em;
box-shadow:0 4px 12px rgba(180,35,24,.22);
}
.tag-src{
position:absolute; bottom:9px; left:9px; padding:3px 8px; border-radius:var(--r-xs);
background:rgba(12,14,18,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
color:#fff; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
}
/* ------- gorizontal qator */
.rail{display:flex; gap:12px; overflow-x:auto; padding:4px 16px 10px;
scroll-snap-type:x proximity; scrollbar-width:none; margin:0 -16px;
-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 47%; scroll-snap-align:start}
@media(min-width:560px){ .rail > *{flex:0 0 31%} }
@media(min-width:860px){ .rail > *{flex:0 0 23.2%} }
@media(min-width:1120px){ .rail{margin:0; padding:4px 0 10px} .rail > *{flex:0 0 19%} }
/* ---------------------------------------------------------------- 6. BO'LIMLAR */
.sec{padding:26px 0}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
.sec-head h2{margin:0}
.sec-head a{
color:var(--brand); font-size:13.5px; font-weight:600; white-space:nowrap;
transition:transform var(--t-fast); display:inline-block;
}
.sec-head a:hover{transform:translateX(3px)}
/* ------- kategoriya plitkalari (haqiqiy rasm bilan) */
.cats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
@media(min-width:560px){ .cats{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media(min-width:900px){ .cats{grid-template-columns:repeat(8,minmax(0,1fr))} }
.cat{
display:flex; flex-direction:column; align-items:center; gap:8px; padding:13px 7px;
border-radius:var(--r); background:var(--bg-2); text-align:center;
transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.cat:hover{background:var(--bg); transform:translateY(-3px); box-shadow:var(--sh-2)}
.cat-ico{
width:56px; height:56px; border-radius:var(--r-sm); overflow:hidden; background:var(--bg);
box-shadow:var(--sh-1); display:grid; place-items:center;
}
.cat-ico img{width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--e-out)}
.cat:hover .cat-ico img{transform:scale(1.12)}
.cat span:last-child{font-size:11.5px; line-height:1.3; color:var(--ink-2); font-weight:500}
/* ------- banner (jonli gradient) */
.banner{
position:relative; overflow:hidden; border-radius:var(--r-lg);
padding:26px; display:flex; gap:18px; align-items:center;
background:linear-gradient(120deg,#f6f6f7,#eceef1 45%,#f8f8f9);
border:1px solid var(--line);
}
.banner::before,.banner::after{
content:""; position:absolute; border-radius:50%; filter:blur(48px); opacity:.55;
pointer-events:none; will-change:transform;
}
.banner::before{
width:340px; height:340px; top:-120px; right:-70px;
background:radial-gradient(circle,#c9cdd4,transparent 68%);
animation:float1 16s ease-in-out infinite;
}
.banner::after{
width:280px; height:280px; bottom:-130px; left:-60px;
background:radial-gradient(circle,#9aa0a9,transparent 68%);
animation:float2 20s ease-in-out infinite;
}
.banner > *{position:relative; z-index:1}
.banner h2{font-size:clamp(21px,4vw,33px); margin:0 0 8px; letter-spacing:-.03em}
.banner p{margin:0 0 16px; color:var(--ink-2); font-size:14.5px; max-width:52ch}
@media(min-width:760px){ .banner{padding:38px} }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .banner{background:linear-gradient(120deg,#171a1f,#1d2128 50%,#15181c)}
}
/* ---------------------------------------------------------------- 7. TOVAR SAHIFASI */
.pdp{display:grid; gap:22px}
@media(min-width:880px){ .pdp{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:36px; align-items:start} }
.gallery-main{
aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2);
box-shadow:var(--sh-1); position:relative;
}
.gallery-main img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-out)}
.gallery-main:hover img{transform:scale(1.06)}
.gallery-main img.swap{animation:imgSwap .38s var(--e-out)}
.gallery-thumbs{display:flex; gap:9px; margin-top:10px; overflow-x:auto; scrollbar-width:none}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumbs button{
flex:none; width:62px; height:62px; padding:0; border:2px solid transparent; cursor:pointer;
border-radius:var(--r-sm); overflow:hidden; background:var(--bg-2);
transition:border-color var(--t-fast), transform var(--t-fast);
}
.gallery-thumbs button:hover{transform:translateY(-2px)}
.gallery-thumbs button.on{border-color:var(--brand)}
.gallery-thumbs img{width:100%; height:100%; object-fit:cover}
.price-big{font-size:clamp(26px,4.4vw,34px); font-weight:800; letter-spacing:-.035em; line-height:1.05}
.price-note{font-size:12.5px; color:var(--ink-3); margin-top:5px}
.pbox{background:var(--bg-2); border-radius:var(--r); padding:15px}
.pbox-row{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:13.5px}
.pbox-row b{font-weight:700}
details.pbox summary{list-style:none; cursor:pointer}
details.pbox summary::-webkit-details-marker{display:none}
details.pbox summary::before{content:"▸ "; color:var(--brand); display:inline-block; transition:transform var(--t)}
details.pbox[open] summary::before{content:"▾ "}
details.pbox[open] > div{animation:slideDown .3s var(--e-out)}
.variants{display:flex; flex-wrap:wrap; gap:9px}
.variants label{
padding:9px 14px; border:1.5px solid var(--line); border-radius:var(--r-xs); cursor:pointer;
font-size:13.5px; background:var(--bg); transition:all var(--t-fast);
}
.variants label:hover{border-color:var(--ink-3)}
.variants input{position:absolute; opacity:0; pointer-events:none}
.variants label:has(input:checked){
border-color:var(--brand); background:var(--brand-soft); color:var(--brand);
font-weight:600; box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent);
}
.variants label:has(input:disabled){opacity:.4; text-decoration:line-through; cursor:not-allowed}
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--line);
border-radius:var(--r-sm); overflow:hidden; background:var(--bg)}
.qty button{width:40px; height:44px; border:0; background:transparent; cursor:pointer;
font-size:19px; color:var(--ink-2); transition:background var(--t-fast)}
.qty button:hover{background:var(--bg-2); color:var(--brand)}
.qty input{width:50px; height:44px; border:0; text-align:center; background:transparent;
-moz-appearance:textfield; font-weight:600}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.attrs{width:100%; border-collapse:collapse; font-size:13.5px}
.attrs td{padding:9px 0; border-bottom:1px solid var(--bg-3); vertical-align:top}
.attrs tr:last-child td{border:0}
.attrs td:first-child{color:var(--ink-3); width:42%; padding-right:12px}
.desc{font-size:14.5px; line-height:1.7; color:var(--ink-2); overflow-wrap:anywhere}
.desc img{border-radius:var(--r-sm); margin:10px 0; height:auto}
.desc table{max-width:100%; overflow-x:auto; display:block}
/* ---------------------------------------------------------------- 8. SAVAT / FORMA */
.cart-line{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);
animation:fadeUp .35s var(--e-out) both}
.cart-line:last-child{border:0}
.cart-line img{width:84px; height:84px; border-radius:var(--r-sm); object-fit:cover;
flex:none; background:var(--bg-2)}
.cart-line.removing{animation:lineOut .3s var(--e-out) forwards}
.sticky-sum{position:sticky; top:96px}
.field{display:block; margin-bottom:15px}
.field > span{display:block; font-size:13px; color:var(--ink-2); margin-bottom:6px; font-weight:600}
.field input,.field select,.field textarea{
width:100%; height:46px; padding:0 14px; border:1.5px solid var(--line);
border-radius:var(--r-sm); background:var(--bg); outline:none;
transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea{height:auto; min-height:92px; padding:12px 14px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
border-color:var(--brand);
box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent);
}
.field input:disabled{background:var(--bg-2); color:var(--ink-3)}
.hint{font-size:12px; color:var(--ink-3); margin-top:5px}
.radios{display:grid; gap:9px}
.radios label{
display:flex; gap:11px; align-items:flex-start; padding:13px 15px; cursor:pointer;
border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--bg);
transition:all var(--t-fast);
}
.radios label:hover{border-color:var(--ink-3)}
.radios label:has(input:checked){
border-color:var(--brand); background:var(--brand-soft);
box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent);
}
.radios input{margin:2px 0 0; accent-color:var(--brand); flex:none}
.radios b{display:block; font-size:14px}
.radios small{color:var(--ink-3)}
/* ---------------------------------------------------------------- 9. TURLI */
.crumbs{display:flex; gap:7px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); padding:14px 0}
.crumbs a{transition:color var(--t-fast)}
.crumbs a:hover{color:var(--brand)}
.crumbs span::after{content:"/"; margin-left:7px; color:var(--line)}
.badge-st{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; white-space:nowrap;
border-radius:var(--r-full); font-size:12px; font-weight:700; background:var(--bg-3); color:var(--ink-2)}
.badge-st::before{content:""; width:6px; height:6px; border-radius:var(--r-full); background:currentColor}
.st-green{background:#e7f7ee; color:#0b7a44} .st-blue{background:#e8f1ff; color:#1457c7}
.st-amber{background:#fdf2df; color:#9a5c08} .st-red{background:#feecec; color:#c62222}
.st-violet{background:#f1ecfe; color:#5b34c7} .st-teal{background:#e4f6f6; color:#0a7777}
.st-gray{background:var(--bg-3); color:var(--ink-2)}
.st-blue::before,.st-amber::before,.st-violet::before{animation:pulse 1.8s ease-in-out infinite}
.flash{
position:fixed; left:50%; bottom:84px; z-index:300;
max-width:92vw; padding:13px 20px; border-radius:var(--r-full); color:#fff;
background:var(--sidebar); box-shadow:var(--sh-3); font-size:14px; font-weight:500;
animation:toastIn .35s var(--e-spring);
}
.flash.err{background:var(--err)}
.flash.out{animation:toastOut .3s var(--e-out) forwards}
.steps{display:flex; flex-direction:column}
.step{display:flex; gap:14px; padding-bottom:18px; position:relative}
.step:not(:last-child)::before{content:""; position:absolute; left:10px; top:24px; bottom:0;
width:2px; background:var(--line)}
.step.done:not(:last-child)::before{background:var(--ok)}
.step-dot{width:22px; height:22px; border-radius:var(--r-full); background:var(--bg-3); flex:none;
z-index:1; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--ink-3)}
.step.done .step-dot{background:var(--ok); color:#fff}
.step.now .step-dot{background:var(--brand-grad); color:var(--on-brand); box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 18%,transparent);
animation:pulseRing 2s ease-in-out infinite}
.empty{text-align:center; padding:64px 20px; color:var(--ink-3); animation:fadeUp .4s var(--e-out)}
.empty-ico{font-size:54px; margin-bottom:12px; opacity:.5}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
table.tbl th{text-align:left; padding:11px 9px; border-bottom:2px solid var(--line);
color:var(--ink-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap}
table.tbl td{padding:11px 9px; border-bottom:1px solid var(--bg-3); vertical-align:middle}
table.tbl tr{transition:background var(--t-fast)}
table.tbl tr:hover td{background:var(--bg-2)}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.pager{display:flex; gap:7px; justify-content:center; flex-wrap:wrap; padding:28px 0}
.pager a,.pager span{min-width:40px; height:40px; display:grid; place-items:center; padding:0 12px;
border-radius:var(--r-xs); background:var(--bg-2); font-size:14px; font-weight:600;
transition:all var(--t-fast)}
.pager a:hover{background:var(--bg-3); transform:translateY(-2px)}
.pager .on{background:var(--brand-grad); color:var(--on-brand); box-shadow:var(--sh-brand)}
/* yuqoridagi yuklanish chizig'i */
#navbar-progress{
position:fixed; top:0; left:0; height:3px; width:0; z-index:999;
background:var(--brand-grad); box-shadow:0 0 10px rgba(16,19,23,.45);
transition:width .3s var(--e-out), opacity .3s;
}
/* pastdagi mobil navigatsiya */
.tabbar{
position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex;
background:color-mix(in srgb,var(--bg) 88%,transparent);
-webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
@supports not (backdrop-filter: blur(1px)){ .tabbar{background:var(--bg)} }
.tabbar a{flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
padding:8px 0 9px; font-size:10.5px; color:var(--ink-3); transition:color var(--t-fast)}
.tabbar a.on{color:var(--brand)}
.tabbar a.on svg{animation:tabPop .4s var(--e-spring)}
.tabbar svg{width:22px; height:22px}
.tabbar .badge{position:absolute; top:4px; left:50%; margin-left:4px; min-width:17px; height:17px;
border-radius:var(--r-full); background:var(--sale); color:#fff; font-size:10px; font-weight:700;
display:grid; place-items:center; padding:0 4px}
@media(min-width:760px){ .tabbar{display:none} }
@media(max-width:759px){ body{padding-bottom:66px} .sticky-sum{position:static} }
/* footer */
.foot{margin-top:48px; border-top:1px solid var(--line); background:var(--bg-2); padding:32px 0 36px}
.foot-grid{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:700px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.foot h4{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin-bottom:11px}
.foot a{display:block; padding:4px 0; font-size:13.5px; color:var(--ink-2); transition:color var(--t-fast), transform var(--t-fast)}
.foot a:hover{color:var(--brand); transform:translateX(3px)}
.foot .logo:hover{transform:none}
/* ---------------------------------------------------------------- 10. ANIMATSIYA */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes slideDown{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
@keyframes imgSwap{from{opacity:.25; transform:scale(1.04)} to{opacity:1; transform:none}}
@keyframes lineOut{to{opacity:0; transform:translateX(-24px); height:0; padding:0; margin:0}}
@keyframes badgeBump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes heart{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes tabPop{0%{transform:scale(1)}50%{transform:scale(1.22) translateY(-2px)}100%{transform:scale(1)}}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,16px) scale(.94)} to{opacity:1; transform:translate(-50%,0) scale(1)}}
@keyframes toastOut{to{opacity:0; transform:translate(-50%,10px) scale(.96)}}
@keyframes ripple{to{transform:scale(2.6); opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 18%,transparent)}
50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--brand) 6%,transparent)}}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,22px) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22px,-18px) scale(1.1)}}
@keyframes shimmer{to{background-position:200% 0}}
@keyframes flyToCart{to{transform:translate(var(--fx),var(--fy)) scale(.18); opacity:.25}}
.flash{transform:translateX(-50%)}
/* ------- skrollda paydo bo'lish */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none;
transition:opacity .55s var(--e-out) var(--d,0ms), transform .55s var(--e-out) var(--d,0ms)}
/* ------- rasm yuklanishi (shimmer skeleton) */
.ph{
background:linear-gradient(100deg,var(--bg-2) 30%,var(--bg-3) 50%,var(--bg-2) 70%);
background-size:200% 100%; animation:shimmer 1.3s linear infinite;
}
img.lazy-img{opacity:0; transition:opacity .45s var(--e-out)}
img.lazy-img.ready{opacity:1}
/* ------- savatga uchib ketuvchi rasm */
.fly-img{
position:fixed; z-index:400; border-radius:12px; object-fit:cover; pointer-events:none;
box-shadow:var(--sh-3); animation:flyToCart .72s cubic-bezier(.5,-.25,.6,1) forwards;
}
/* ---------------------------------------------------------------- 11. ADMIN */
.adm{display:grid; grid-template-columns:1fr; min-height:100vh; background:var(--bg-2)}
@media(min-width:960px){
.adm{grid-template-columns:250px 1fr}
/* Yon panel ekranga yopishadi: uzun ro'yxatda ham "Chiqish" va bo'lim
havolalari doim ko'rinib turadi, pastga aylantirish shart emas. */
.adm-side{position:sticky; top:0; height:100vh; overflow-y:auto}
}
/* ---- yon panel ---- */
.adm-side{
background:var(--sidebar); color:var(--sidebar-ink);
padding:18px 12px 14px; display:flex; flex-direction:column; gap:4px;
position:relative; overflow:hidden; isolation:isolate;
}
/* yon panelda ham girih — juda past kontrastda, "qimmat" tuyg'u beradi */
.adm-side::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.06;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:64px 64px;
-webkit-mask-image:linear-gradient(195deg,#000 0%,transparent 72%);
mask-image:linear-gradient(195deg,#000 0%,transparent 72%);
}
.adm-side-top{padding:0 8px 16px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.09)}
.adm-side .logo{color:#fff; margin:0}
/* .logo span b gradient bilan bo'yaladi; yorug' mavzuda gradient QORA bo'lib,
qora yon panelda "Market" so'zi butunlay ko'rinmay qolardi. */
.adm-side .logo span b{background:none; -webkit-text-fill-color:#fff; color:#fff}
.adm-side-tag{
display:block; margin-top:5px; font-size:10.5px; letter-spacing:.17em;
text-transform:uppercase; color:rgba(255,255,255,.42);
}
.adm-nav{display:flex; flex-direction:column; gap:2px}
.adm-nav a{
display:flex; gap:11px; align-items:center; padding:10px 13px; border-radius:var(--r-xs);
font-size:14px; color:var(--sidebar-ink); position:relative;
transition:background var(--t-fast), color var(--t-fast);
}
.adm-nav a svg{flex:none; opacity:.72; transition:opacity var(--t-fast)}
.adm-nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.adm-nav a:hover svg{opacity:1}
.adm-nav a.on{background:rgba(255,255,255,.1); color:#fff; font-weight:600}
.adm-nav a.on svg{opacity:1}
/* faol bo'limni chap chetidagi chiziq ko'rsatadi — oq to'ldirishdan ko'ra tinchroq */
.adm-nav a.on::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:3px; height:19px; border-radius:0 3px 3px 0; background:#fff;
}
.adm-nav-foot{margin-top:auto; padding-top:10px; border-top:1px solid rgba(255,255,255,.09)}
.adm-who{
padding:12px 13px 2px; font-size:12px; line-height:1.5;
border-top:1px solid rgba(255,255,255,.09); margin-top:10px;
}
.adm-who b{display:block; color:#fff; font-size:13px; font-weight:600}
.adm-who span{color:rgba(255,255,255,.44)}
/* ---- telefon: yon panel yuqoridagi tasmaga aylanadi ---- */
@media(max-width:959px){
/* qatorga yoyamiz: [logotip ....... sayt | chiqish] / [bo'limlar tasmasi] */
.adm-side{
padding:10px 0 0; gap:0;
flex-direction:row; flex-wrap:wrap; align-items:center;
position:sticky; top:0; z-index:50;
box-shadow:0 2px 14px rgba(0,0,0,.28);
}
.adm-side-top{
flex:1 1 auto; min-width:0; order:1;
display:flex; align-items:center;
padding:0 4px 0 12px; margin:0; border:0;
}
.adm-side-tag{display:none} /* telefonda joy qimmat */
.adm-nav{
flex:0 0 100%; order:3;
flex-direction:row; gap:4px; overflow-x:auto; padding:10px 12px 10px;
scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.adm-nav::-webkit-scrollbar{display:none}
.adm-nav a{white-space:nowrap; padding:8px 12px; font-size:13px}
.adm-nav a.on::before{display:none}
.adm-nav a.on{background:#fff; color:#101317}
/* "Saytni ochish" va "Chiqish" alohida qator egallamasin — logotip yoniga,
faqat ikonka bo'lib chiqadi. Chiqish doim bitta bosishda. */
.adm-nav-foot{
flex:0 0 auto; order:2;
flex-direction:row; gap:2px; margin:0; padding:0 8px 0 0; border:0;
}
.adm-nav-foot a{padding:9px 10px}
.adm-nav-foot a span{display:none}
.adm-who{display:none}
}
/* ---- ish maydoni ---- */
.adm-main{padding:0 0 70px; background:var(--bg-2); min-width:0}
/* Qorong'i mavzuda --bg-2 kartochkadan (--bg) OCHROQ bo'lib qolardi, natijada
kartochka ko'tarilgan emas, botgan ko'rinardi. Maydonni qoraytiramiz. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .adm-main{background:#08090c}
:root:not([data-theme="light"]) .adm{background:#08090c}
}
:root[data-theme="dark"] .adm-main,
:root[data-theme="dark"] .adm{background:#08090c}
.adm-main > *:not(.adm-head){margin-left:18px; margin-right:18px}
@media(min-width:960px){ .adm-main > *:not(.adm-head){margin-left:26px; margin-right:26px} }
/* ---- sarlavha bandi (mijoz tomonidagi .page-head bilan bir xil til) ---- */
.adm-head{
position:relative; overflow:hidden; isolation:isolate;
background:var(--bg); border-bottom:1px solid var(--line);
padding:22px 18px 24px; margin-bottom:22px;
}
@media(min-width:960px){ .adm-head{padding:26px 26px 28px} }
.adm-head-pattern{
position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.08;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:72px 72px;
-webkit-mask-image:linear-gradient(100deg, transparent 22%, #000 82%);
mask-image:linear-gradient(100deg, transparent 22%, #000 82%);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .adm-head-pattern{opacity:.08; filter:invert(1)}
}
:root[data-theme="dark"] .adm-head-pattern{opacity:.08; filter:invert(1)}
.adm-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
/* matn ustuni qisqarsin, tugmalar pastga tushib ketmasin */
.adm-head-row > .grow{flex:1 1 260px; min-width:0}
.adm-head h1{
margin:0; font-family:var(--serif); font-weight:600;
font-size:clamp(23px,3.2vw,30px); letter-spacing:-.015em; line-height:1.15;
}
.adm-head h1::after{
content:""; display:block; width:30px; height:2px; border-radius:2px;
background:var(--ink); opacity:.8; margin-top:10px;
}
.adm-head-lead{margin:9px 0 0; max-width:58ch; color:var(--ink-3); font-size:13.5px; line-height:1.55}
.adm-head-acts{display:flex; align-items:center; gap:8px; flex:none; padding-bottom:3px}
.adm-head-acts form{display:inline}
.adm-head-acts .btn{display:inline-flex; align-items:center; gap:6px}
/* ---- ko'rsatkich kartochkalari ---- */
.kpis{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:20px}
@media(min-width:760px){ .kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
.kpi{
background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:16px 17px;
box-shadow:var(--sh-1); position:relative; overflow:hidden;
transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.kpi::after{
content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background:var(--ink); opacity:.1; transition:opacity var(--t);
}
.kpi:hover{transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--ink-3)}
.kpi:hover::after{opacity:.5}
.kpi b{
display:block; font-family:var(--serif); font-size:26px; font-weight:600;
letter-spacing:-.025em; line-height:1.1;
}
.kpi span{
display:block; margin-top:5px; font-size:11.5px; color:var(--ink-3);
letter-spacing:.055em; text-transform:uppercase;
}
.adm-form{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:760px){ .adm-form{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1240px){ .adm-form{grid-template-columns:repeat(3,minmax(0,1fr))} }
.adm-form > .card{min-width:0}
.adm-main .card > h3:first-child{
font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:-.01em;
margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
/* holat belgisi: emoji o'rniga */
.mark{display:inline-flex; align-items:center; gap:5px; font-weight:600}
.mark svg{flex:none}
.mark-ok{color:var(--ok)}
.mark-warn{color:var(--warn)}
.mark-err{color:var(--err)}
/* ---- admin kirish sahifasi ---- */
body.adm-login{
display:grid; place-items:center; min-height:100vh; padding:24px 16px;
background:var(--sidebar); position:relative; overflow-x:hidden;
}
/* Qorong'i mavzuda --bg (#0e1013) --sidebar dan ham QORONG'IROQ bo'lib,
kartochka ko'tarilgan panel emas, teshikdek ko'rinardi. Fonni pasaytiramiz. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) body.adm-login{background:#05070a}
}
:root[data-theme="dark"] body.adm-login{background:#05070a}
.adm-login-pattern{
position:absolute; inset:0; pointer-events:none; opacity:.07;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:88px 88px;
-webkit-mask-image:radial-gradient(circle at 50% 42%, transparent 20%, #000 76%);
mask-image:radial-gradient(circle at 50% 42%, transparent 20%, #000 76%);
}
.adm-login-box{
position:relative; z-index:1; width:100%; max-width:400px;
background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
padding:clamp(24px,5vw,36px); box-shadow:0 20px 60px rgba(0,0,0,.45);
animation:admIn .5s var(--e-out) both;
}
@keyframes admIn{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}
.adm-login-brand{display:flex; align-items:center; gap:11px; margin-bottom:22px}
.adm-login-brand > div{display:flex; flex-direction:column; line-height:1.25}
.adm-login-brand b{font-size:16px; letter-spacing:-.01em}
.adm-login-brand span{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3)}
.adm-login-box h1{
font-family:var(--serif); font-weight:600; font-size:25px;
letter-spacing:-.015em; margin:0;
}
.adm-login-lead{margin:8px 0 20px; font-size:13.5px; line-height:1.55; color:var(--ink-3)}
.adm-login-err{
display:flex; align-items:center; gap:7px; margin:0 0 16px;
padding:10px 12px; border-radius:var(--r-xs); font-size:13px; font-weight:500;
background:var(--sale-soft); color:var(--err); border:1px solid currentColor;
}
.adm-login-err svg{flex:none}
.adm-login-note{
display:flex; align-items:flex-start; gap:7px; margin:18px 0 0;
font-size:12px; line-height:1.5; color:var(--ink-3);
}
.adm-login-note svg{flex:none; margin-top:1px}
.adm-login-back{
display:block; margin-top:14px; font-size:12.5px; color:var(--ink-3);
transition:color var(--t-fast);
}
.adm-login-back:hover{color:var(--ink)}
/* ---------------------------------------------------------------- 12. HARAKATNI KAMAYTIRISH */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
.reveal{opacity:1; transform:none}
img.lazy-img{opacity:1}
}
@media print{ .head,.tabbar,.foot,.btn,#navbar-progress{display:none !important} }
/* ---------------------------------------------------------------- 13. AFZALLIKLAR + FOOTER */
.feats{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:720px){ .feats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px} }
.feat{
background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
padding:18px 16px; box-shadow:var(--sh-1);
transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.feat:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:transparent}
.feat-ico{
display:grid; place-items:center; width:42px; height:42px; border-radius:var(--r-sm);
background:var(--brand-soft); color:var(--brand); margin-bottom:12px;
transition:transform var(--t) var(--e-spring);
}
.feat:hover .feat-ico{transform:scale(1.08) rotate(-4deg)}
.feat b{display:block; font-size:15px; letter-spacing:-.015em; margin-bottom:5px}
.feat p{margin:0; font-size:13px; line-height:1.5; color:var(--ink-3)}
/* qanday ishlaydi — 4 qadam */
.howto{
display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start; background:var(--bg-2); border-radius:var(--r-lg); padding:20px 18px;
}
@media(min-width:900px){ .howto{grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:18px; padding:24px} }
.howto-step{position:relative; padding-left:40px}
.howto-n{
position:absolute; left:0; top:-2px; width:28px; height:28px; border-radius:var(--r-full);
background:var(--brand-grad); color:var(--on-brand); font-weight:800; font-size:13px;
display:grid; place-items:center; box-shadow:var(--sh-brand);
}
.howto-step b{display:block; font-size:14.5px; margin-bottom:3px}
.howto-step p{margin:0; font-size:12.5px; color:var(--ink-3); line-height:1.45}
.howto .btn{align-self:center}
/* to'lov usullari */
.pay-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.chip{
padding:5px 11px; border-radius:var(--r-full); background:var(--bg-3);
font-size:11.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
}
/* footer havolalari ikonka bilan */
.foot-ico{display:flex !important; align-items:center; gap:9px}
.foot-ico svg{flex:none; opacity:.65}
.foot-ico:hover svg{opacity:1; color:var(--brand)}
.lang-switch{display:inline-flex; margin-top:12px; padding:3px; gap:2px;
background:var(--bg-3); border-radius:var(--r-full)}
.lang-switch a{display:block !important; padding:5px 13px; border-radius:var(--r-full);
font-size:12.5px; font-weight:600; color:var(--ink-3); transform:none !important}
.lang-switch a.on{background:var(--bg); color:var(--ink); box-shadow:var(--sh-1)}
.lang-switch a:hover{color:var(--ink)}
.foot-bottom{
display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
}
/* bo'sh holat ikonkasi (emoji o'rniga) */
.empty-ico{display:grid; place-items:center; width:72px; height:72px; margin:0 auto 14px;
border-radius:var(--r-full); background:var(--bg-2); color:var(--ink-3); font-size:0; opacity:1}
.empty-ico svg{width:32px; height:32px}
/* ===========================================================================
14. KIRISH EKRANI (HERO) — to'liq ekranli kino-slayder
=========================================================================== */
.hero{
position:relative; width:100%;
height:min(100svh, 860px); min-height:460px;
margin-top:calc(-1 * var(--head-h, 0px)); /* header hero USTIDA turadi */
overflow:hidden; background:#0b0d11; isolation:isolate;
}
@media(max-width:759px){ .hero{height:min(92svh, 720px)} }
.hero-slide{
position:absolute; inset:0; opacity:0; visibility:hidden;
transition:opacity 1s var(--e-out), visibility 1s;
}
.hero-slide.on{opacity:1; visibility:visible}
/* Ken Burns: sekin yaqinlashish — statik rasm ham "jonli" ko'rinadi */
.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-media img{
width:100%; height:100%; object-fit:cover; object-position:center;
transform:scale(1.06);
}
/* `linear` SHART: ease-out da harakatning 90%i birinchi soniyada tugab,
qolgan vaqt rasm qotib turardi — "qimirlamayapti" degan taassurot bergan.
Davomiylik slayd vaqtidan (7s) uzunroq, shunda hech qachon to'xtab qolmaydi. */
.hero-slide.on .hero-media img{
animation:kenburns 10s linear forwards;
}
@keyframes kenburns{
from{transform:scale(1.04) translate3d(0,0,0)}
to {transform:scale(1.20) translate3d(-2.4%,-1.8%,0)}
}
/* har slayd boshqa tomonga suriladi — takrorlanayotgandek tuyulmaydi */
.hero-slide:nth-child(2).on .hero-media img{animation-name:kenburns2}
.hero-slide:nth-child(3).on .hero-media img{animation-name:kenburns3}
@keyframes kenburns2{
from{transform:scale(1.18) translate3d(2%,1.4%,0)}
to {transform:scale(1.03) translate3d(0,0,0)}
}
@keyframes kenburns3{
from{transform:scale(1.05) translate3d(-1.8%,1.2%,0)}
to {transform:scale(1.19) translate3d(1.6%,-1.4%,0)}
}
/* muallif/litsenziya yozuvi (CC BY va CC BY-SA rasmlar uchun SHART) */
.hero-credit{
position:absolute; right:14px; bottom:14px; z-index:3; max-width:46vw;
font-size:10.5px; line-height:1.35; letter-spacing:.02em; text-align:right;
color:rgba(255,255,255,.55); text-shadow:0 1px 4px rgba(0,0,0,.5);
pointer-events:none;
}
@media(max-width:759px){ .hero-credit{right:10px; bottom:10px; font-size:9.5px; max-width:60vw} }
/* qorong'ilashtiruvchi qatlam — matn har qanday rasmda o'qiladi */
.hero-scrim{
position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(180deg, rgba(8,10,14,.68) 0%, rgba(8,10,14,.18) 26%, rgba(8,10,14,.10) 46%,
rgba(8,10,14,.62) 82%, rgba(8,10,14,.86) 100%),
radial-gradient(120% 80% at 18% 70%, rgba(8,10,14,.55), transparent 62%);
}
.hero-body{
position:absolute; left:0; right:0; bottom:0;
padding:0 0 clamp(64px, 11vh, 120px);
color:#fff; z-index:2;
}
.hero-kicker{
margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.24em;
text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hero-kicker span{position:relative; padding-left:34px}
.hero-kicker span::before{
content:""; position:absolute; left:0; top:50%; width:24px; height:1.5px;
background:#fff; transform-origin:left; /* hero doim qorong'i — chiziq oq */
}
.hero-title{
margin:0 0 14px; max-width:16ch; color:#fff;
font-size:clamp(30px, 6.2vw, 68px); line-height:1.04; letter-spacing:-.035em; font-weight:800;
text-shadow:0 2px 28px rgba(0,0,0,.35);
}
.hero-sub{
margin:0 0 26px; max-width:46ch; color:rgba(255,255,255,.88);
font-size:clamp(14px, 1.6vw, 18px); line-height:1.55;
text-shadow:0 1px 16px rgba(0,0,0,.4);
}
.hero-cta{
display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px;
border-radius:var(--r-full); background:#fff; color:#0f1115; font-weight:700;
box-shadow:0 10px 30px rgba(0,0,0,.28);
transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.hero-cta:hover{transform:translateY(-2px); background:#101317; color:#fff;
box-shadow:0 14px 34px rgba(0,0,0,.42)}
.hero-cta svg{transition:transform var(--t)}
.hero-cta:hover svg{transform:translate(3px,-3px)}
/* matn bosqichma-bosqich chiqadi */
.hero-slide.on .hero-kicker{animation:heroUp .8s var(--e-out) .15s both}
.hero-slide.on .hero-title {animation:heroUp .9s var(--e-out) .28s both}
.hero-slide.on .hero-sub {animation:heroUp .9s var(--e-out) .42s both}
.hero-slide.on .hero-cta {animation:heroUp .9s var(--e-out) .56s both}
@keyframes heroUp{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
/* o'q tugmalari */
.hero-arrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:52px; height:52px; border-radius:var(--r-full); cursor:pointer;
border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
color:#fff; display:grid; place-items:center;
opacity:0; transition:opacity var(--t), background var(--t), transform var(--t);
}
.hero:hover .hero-arrow{opacity:1}
.hero-arrow:hover{background:rgba(255,255,255,.22)}
.hero-arrow.prev{left:18px} .hero-arrow.next{right:18px}
.hero-arrow.prev:hover{transform:translateY(-50%) translateX(-3px)}
.hero-arrow.next:hover{transform:translateY(-50%) translateX(3px)}
@media(max-width:759px){ .hero-arrow{display:none} }
/* nuqtalar + avtomatik o'tish chizig'i */
.hero-dots{
position:absolute; left:50%; transform:translateX(-50%); bottom:26px; z-index:3;
display:flex; gap:9px;
}
.hero-dots button{
width:34px; height:3px; padding:0; border:0; cursor:pointer; border-radius:2px;
background:rgba(255,255,255,.32); overflow:hidden; transition:background var(--t);
}
.hero-dots button:hover{background:rgba(255,255,255,.55)}
/* width ni animatsiya qilish HAR KADRDA joylashuvni qayta hisoblaydi va
bu 7 soniya davomida uzluksiz ishlaydi — sahifa shundan ham qotardi.
scaleX kompozitorda, joylashuvga tegmaydi. */
.hero-dots button i{display:block; height:100%; width:100%; background:#fff;
border-radius:2px; transform:scaleX(0); transform-origin:left center}
.hero-dots button.on i{animation:dotFill var(--hero-ms,7000ms) linear forwards}
.hero.paused .hero-dots button.on i{animation-play-state:paused}
@keyframes dotFill{from{transform:scaleX(0)} to{transform:scaleX(1)}}
/* pastga tushish ishorasi */
.hero-scroll{
position:absolute; left:50%; transform:translateX(-50%); bottom:58px; z-index:3;
width:24px; height:38px; border:1.5px solid rgba(255,255,255,.45); border-radius:14px;
display:grid; place-items:start center; padding-top:7px;
}
.hero-scroll span{display:block; width:3px; height:7px; border-radius:2px; background:#fff;
animation:scrollDot 1.9s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0; transform:translateY(0)}35%{opacity:1}
100%{opacity:0; transform:translateY(13px)}}
@media(max-width:759px){ .hero-scroll{display:none} }
/* ---------- header hero ustida: shaffof, oq matn ---------- */
.head.over{
background:transparent !important; border-bottom-color:transparent !important;
box-shadow:none !important; color:#fff;
-webkit-backdrop-filter:none; backdrop-filter:none;
}
.head.over::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
background:linear-gradient(180deg, rgba(8,10,14,.55), transparent);
}
.head.over .logo{color:#fff}
.head.over .logo span b{-webkit-text-fill-color:#fff; background:none}
.head.over .icon-btn{color:rgba(255,255,255,.88)}
.head.over .icon-btn:hover{background:rgba(255,255,255,.14); color:#fff}
.head.over .icon-btn .badge{box-shadow:0 0 0 2px rgba(8,10,14,.5)}
.head.over .search input{
background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.26); color:#fff;
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.head.over .search input::placeholder{color:rgba(255,255,255,.7)}
.head.over .search input:focus{background:rgba(255,255,255,.2); border-color:#fff; box-shadow:none}
.head.over .head-nav a{background:rgba(255,255,255,.12); color:rgba(255,255,255,.9)}
.head.over .head-nav a:hover{background:rgba(255,255,255,.22); color:#fff}
.head.over .head-nav a.on{background:#fff; color:var(--ink); box-shadow:none}
.head{position:sticky; isolation:isolate}
@media (prefers-reduced-motion: reduce){
.hero-slide.on .hero-media img,
.hero-slide:nth-child(2).on .hero-media img,
.hero-slide:nth-child(3).on .hero-media img{animation:none; transform:scale(1.04)}
.hero-slide.on .hero-kicker,.hero-slide.on .hero-title,
.hero-slide.on .hero-sub,.hero-slide.on .hero-cta{animation:none}
.hero-dots button.on i{animation:none; transform:scaleX(1)}
.hero-scroll span{animation:none}
}
/* ===========================================================================
15. NAVBAR QAYTA ISHLANDI — yengil, premium
=========================================================================== */
.head-top{gap:18px; padding:13px 0}
/* qidiruv endi butun kenglikni egallamaydi */
.search{max-width:560px; margin:0 auto}
@media(max-width:759px){ .search{max-width:none; margin:0} }
.search input{height:42px; border-radius:var(--r-sm); border-width:1px}
/* telefon va til — terrapro uslubida */
.head-phone{
font-size:14px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
padding:0 8px; color:inherit; transition:color var(--t-fast);
}
.head-phone:hover{color:var(--brand)}
.head-lang{
display:grid; place-items:center; min-width:38px; height:34px; padding:0 9px;
border-radius:var(--r-xs); font-size:12.5px; font-weight:700; letter-spacing:.04em;
color:var(--ink-3); transition:background var(--t-fast), color var(--t-fast);
}
.head-lang:hover{background:var(--bg-2); color:var(--ink)}
/* kategoriya qatori: og'ir chiplar o'rniga matnli havolalar */
.head-nav{gap:24px; padding:0 0 11px; align-items:center}
.head-nav a{
position:relative; padding:5px 0; background:none; border-radius:0;
font-size:14px; font-weight:500; color:var(--ink-2); letter-spacing:-.01em;
}
.head-nav a:hover{background:none; color:var(--ink); transform:none}
.head-nav a::after{
content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
border-radius:2px; background:var(--brand); transition:right .32s var(--e-out);
}
.head-nav a:hover::after{right:0}
.head-nav a.on{color:var(--ink); font-weight:600}
.head-nav a.on::after{right:0}
/* "Katalog" tugmasi ajralib turadi */
.head-nav .nav-all{
display:inline-flex; align-items:center; gap:8px; flex:none;
padding:8px 16px; border-radius:var(--r-full); background:var(--ink); color:var(--bg);
font-weight:600; font-size:13.5px; margin-right:6px;
}
.head-nav .nav-all::after{display:none}
.head-nav .nav-all:hover{background:var(--brand); color:#fff; transform:translateY(-1px)}
/* hero ustidagi holat */
.head.over .head-nav a{background:none; color:rgba(255,255,255,.85)}
.head.over .head-nav a:hover,.head.over .head-nav a.on{color:#fff}
.head.over .head-nav .nav-all{background:rgba(255,255,255,.14); color:#fff;
border:1px solid rgba(255,255,255,.26);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.head.over .head-nav .nav-all:hover{background:#fff; color:var(--ink); border-color:#fff}
.head.over .head-phone{color:#fff}
.head.over .head-phone:hover{color:var(--brand-2)}
.head.over .head-lang{color:rgba(255,255,255,.8)}
.head.over .head-lang:hover{background:rgba(255,255,255,.16); color:#fff}
/* ===========================================================================
16. BO'LIM PLITKALARI — rasm butun kartani egallaydi
=========================================================================== */
.cats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media(min-width:520px){ .cats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:760px){ .cats{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(min-width:1060px){ .cats{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px} }
.cat{
display:block; padding:0; overflow:hidden; background:var(--bg); position:relative;
border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--sh-1);
transition:transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .4s var(--e-out);
}
.cat:hover{transform:translateY(-6px); box-shadow:var(--sh-3); border-color:transparent}
.cat:active{transform:translateY(-2px); transition-duration:.12s}
/* --- KINEMATIK KIRISH: uzoqdan fokusga keladi (blur + masshtab + siljish).
.reveal/.in ni app.js qo'yadi; bu yerda faqat plitkaga xos variant. */
/* blur(7px→0) bor edi — 8 ta plitka har kadrda qaytadan rasterlanib,
animatsiya qotardi. Masshtab + siljish ayni effektni tekinga beradi. */
.cat.reveal{
opacity:0; transform:translateY(30px) scale(.94);
}
.cat.reveal.in{
opacity:1; transform:none;
transition:opacity .75s var(--e-out) var(--d,0ms),
transform .95s cubic-bezier(.16,.84,.26,1) var(--d,0ms),
box-shadow .5s var(--e-out);
}
/* kirish tugagach hover yana ishlasin */
.cat.reveal.in:hover{transition:transform .5s var(--e-out), box-shadow .5s var(--e-out)}
/* rasm maydoni DOIM yorug' — oq fonli tovar har ikki mavzuda to'g'ri ko'rinadi */
.cat-img{
display:block; aspect-ratio:4/3; background:#f4f5f6; overflow:hidden; position:relative;
}
.cat-img::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 52%, rgba(16,18,24,.10));
opacity:.75; transition:opacity .5s var(--e-out);
pointer-events:none;
}
.cat:hover .cat-img::after{opacity:1}
.cat-img img{
width:100%; height:100%; object-fit:cover;
transform:scale(1.01);
transition:transform 1.1s cubic-bezier(.18,.72,.24,1);
}
/* sekin, kino kabi yaqinlashish */
.cat:hover .cat-img img{transform:scale(1.11)}
/* --- YORUG'LIK YUGURIG'I: sirpanib o'tuvchi nur */
.cat-sheen{
position:absolute; inset:-30% -60%; pointer-events:none; opacity:0;
background:linear-gradient(100deg,
transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
transform:translateX(-62%);
}
.cat:hover .cat-sheen{
opacity:1;
transform:translateX(62%);
transition:transform .95s cubic-bezier(.3,.7,.3,1), opacity .2s linear;
}
.cat-name{
position:relative;
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:13px 14px; font-size:14px; font-weight:600; letter-spacing:-.015em; color:var(--ink);
transition:transform .45s var(--e-out);
}
.cat:hover .cat-name{transform:translateY(-1px)}
/* nom ostida o'suvchi urg'u chizig'i */
.cat-name::after{
content:""; position:absolute; left:14px; right:14px; bottom:7px; height:1.5px;
border-radius:2px; background:var(--ink);
transform:scaleX(0); transform-origin:left;
transition:transform .55s var(--e-out);
}
.cat:hover .cat-name::after{transform:scaleX(1)}
.cat-name svg{
flex:none; color:var(--ink-3);
transition:transform .45s var(--e-spring), color .3s var(--e-out);
}
.cat:hover .cat-name svg{transform:translateX(5px); color:var(--ink)}
/* Harakatni kamaytirish yoqilgan bo'lsa — hech narsa surilmaydi */
@media (prefers-reduced-motion: reduce){
.cat.reveal,.cat.reveal.in{opacity:1; transform:none; filter:none}
.cat-sheen{display:none}
.trust-n{transform:none}
.trust-l{opacity:1; transform:none}
.trust-cell + .trust-cell::before{transform:scaleY(1)}
}
/* "Ko'p qidirilgan" qatori */
.sec .row .btn-outline.btn-sm{
border-radius:var(--r-full); border-color:var(--line); font-weight:500; color:var(--ink-2);
}
.sec .row .btn-outline.btn-sm:hover{border-color:var(--brand); color:var(--brand); background:transparent}
/* ---------------------------------------------------------------- 17. MAVZU TUGMASI */
.theme-toggle{position:relative}
.theme-toggle svg{position:absolute; transition:opacity .25s var(--e-out), transform .35s var(--e-spring)}
/* yorug'da — oy (qorong'iga o'tish taklifi); qorong'ida — quyosh */
.ico-moon{opacity:1; transform:rotate(0) scale(1)}
.ico-sun {opacity:0; transform:rotate(-70deg) scale(.6)}
:root[data-theme="dark"] .ico-moon{opacity:0; transform:rotate(70deg) scale(.6)}
:root[data-theme="dark"] .ico-sun {opacity:1; transform:rotate(0) scale(1)}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .ico-moon{opacity:0; transform:rotate(70deg) scale(.6)}
:root:not([data-theme="light"]) .ico-sun {opacity:1; transform:rotate(0) scale(1)}
}
:root[data-theme="light"]{color-scheme:light}
/* almashtirish paytida ranglar silliq o'tadi */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{
transition:background-color .32s var(--e-out), border-color .32s var(--e-out),
color .32s var(--e-out), box-shadow .32s var(--e-out) !important;
}
@media (prefers-reduced-motion: reduce){
.theme-anim,.theme-anim *{transition:none !important}
.theme-toggle svg{transition:none}
}
/* ===========================================================================
18. PREMIUM QATLAM — tipografika, don, nozik tafsilotlar
=========================================================================== */
:root{
--serif:"Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
}
/* Sarlavhalar serif: og'irlik va qadr qo'shadi. Interfeys (tugma, menyu,
kartochka matni) sans bo'lib qoladi — o'qilishi muhimroq. */
h1, h2, .hero-title, .sec-head h2, .price-big, .banner h2{
font-family:var(--serif);
font-weight:600;
letter-spacing:-.015em;
}
h1{font-size:clamp(26px,4vw,38px)}
h2{font-size:clamp(21px,2.8vw,28px)}
.sec-head h2{font-weight:600}
/* narx — serif raqamlar qimmatroq ko'rinadi, lekin tabular bo'lishi shart */
.price-big{font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.02em}
/* kartochkadagi narx sans qoladi (jadval kabi tekis o'qilsin) */
.prod-price{font-family:inherit}
/* ------- HERO: kinematik tafsilotlar ------- */
.hero-title{
font-weight:600; letter-spacing:-.02em; line-height:1.02;
font-size:clamp(34px,6.6vw,76px);
text-shadow:0 2px 40px rgba(0,0,0,.42);
}
.hero-sub{font-size:clamp(14.5px,1.65vw,19px); line-height:1.6; max-width:48ch}
/* nozik don (film grain) — rasm "raqamli" emas, "suratga olingan" ko'rinadi */
.hero::after{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
/* mix-blend-mode:overlay bor edi — Ken Burns ishlayotgan rasm ustida
har kadrda aralashtirishga majbur qilardi. 5% shaffoflikda farqi
sezilmaydi, lekin tezlik sezilarli. */
opacity:.05;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:160px 160px;
}
/* chekka qorayishi (vignette) — ko'z markazga tortiladi */
.hero-scrim::after{
content:""; position:absolute; inset:0;
background:radial-gradient(130% 105% at 50% 42%, transparent 48%, rgba(6,8,11,.42) 100%);
}
.hero-kicker{letter-spacing:.28em; font-size:11.5px}
.hero-cta{height:54px; padding:0 30px; font-size:15px; letter-spacing:-.01em}
/* ------- bo'lim sarlavhasi ustidagi nozik chiziqcha ------- */
.sec-head h2{position:relative; padding-top:14px}
.sec-head h2::before{
content:""; position:absolute; top:0; left:0; width:28px; height:2px;
background:var(--ink); opacity:.85; border-radius:2px;
}
/* ------- kartochka: yumshoqroq, qimmatroq ------- */
.prod{border-color:color-mix(in srgb, var(--line) 70%, transparent)}
.prod:hover{transform:translateY(-5px)}
.cat{border-color:color-mix(in srgb, var(--line) 70%, transparent)}
/* ------- ISHONCH BANDI (haqiqiy raqamlar) ------- */
.trust{
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding:28px 0; margin:8px 0 0;
}
.trust-grid{
display:grid; gap:22px 18px; grid-template-columns:repeat(2,minmax(0,1fr));
text-align:center;
}
@media(min-width:760px){ .trust-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.trust-cell{position:relative}
/* Ustunlar orasidagi ingichka chiziq pastdan yuqoriga "chiziladi" */
@media(min-width:760px){
.trust-cell + .trust-cell::before{
content:""; position:absolute; left:calc(-9px - 1px); top:4px; bottom:4px; width:1px;
background:var(--line); transform:scaleY(0); transform-origin:bottom;
transition:transform .8s var(--e-out) calc(var(--d,0ms) + 160ms);
}
.trust-cell.in + .trust-cell::before,
.trust-cell.in::before{transform:scaleY(1)}
}
/* Raqam parda ortidan ko'tariladi (kino titrlari kabi) */
.trust-clip{display:block; overflow:hidden; padding-bottom:3px; margin-bottom:5px}
.trust-n{
display:block; font-family:var(--serif); font-weight:600;
font-size:clamp(26px,3.6vw,38px); letter-spacing:-.02em; line-height:1.08;
transform:translateY(110%);
transition:transform .85s cubic-bezier(.16,.84,.26,1) var(--d,0ms);
}
.trust-cell.in .trust-n{transform:translateY(0)}
.trust-l{
display:block; font-size:12.5px; line-height:1.45; color:var(--ink-3);
opacity:0; transform:translateY(6px);
transition:opacity .6s var(--e-out) calc(var(--d,0ms) + 260ms),
transform .6s var(--e-out) calc(var(--d,0ms) + 260ms);
}
.trust-cell.in .trust-l{opacity:1; transform:none}
/* .reveal ning umumiy siljishi bu yerda ortiqcha — ichki qismlar o'zi harakatlanadi */
.trust-cell.reveal{transform:none}
.trust-cell.reveal.in{transform:none}
.trust-head{text-align:center; margin-bottom:24px}
/* Shior — sarlavha ustida, ikki yonida ingichka chiziq bilan.
Chiziqlar flex bilan: matn qancha uzun bo'lsa ham markazda qoladi. */
.trust-kicker{
display:flex; align-items:center; justify-content:center; gap:14px;
margin:0 0 10px; font-size:11px; font-weight:600; letter-spacing:.22em;
text-transform:uppercase; color:var(--ink-3);
}
.trust-kicker::before,.trust-kicker::after{
content:""; height:1px; width:clamp(18px,6vw,54px); background:var(--line); flex:none;
}
/* Telefonda matn ikki qatorga tushadi — chiziqlar faqat birinchi qatorning
yoniga tushib, ikkinchisi yolg'iz qolardi. Shuning uchun chiziqsiz. */
@media (max-width:560px){
.trust-kicker{gap:0; letter-spacing:.14em; line-height:1.5}
.trust-kicker::before,.trust-kicker::after{display:none}
}
.trust-head p{margin:6px 0 0; color:var(--ink-3); font-size:14px}
@media (prefers-reduced-motion: reduce){ .hero::after{display:none} }
/* ===========================================================================
19. O'ZBEKONA NAQSH + ICHKI SAHIFA SARLAVHASI
=========================================================================== */
/* Girih \u2014 sakkiz burchakli yulduz (ikki kvadrat 45\u00b0 burilgan).
O'zbek/Sharq me'morchiligining asosiy motivi. Juda past shaffoflikda
ishlatiladi: sezilsin, lekin matnni bosmasin. */
.uz-pattern{
background-image:url("data:image/svg+xml;utf8,\
");
background-size:72px 72px;
}
/* ------- ichki sahifa sarlavha bandi ------- */
.page-head{
position:relative; overflow:hidden; isolation:isolate;
background:var(--bg-2);
border-bottom:1px solid var(--line);
padding:26px 0 30px; margin-bottom:28px;
}
.page-head-pattern{
position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:72px 72px;
opacity:.08;
/* o'ngdan chapga so'nadi \u2014 matn tomoni toza qoladi */
-webkit-mask-image:linear-gradient(100deg, transparent 18%, #000 78%);
mask-image:linear-gradient(100deg, transparent 18%, #000 78%);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .page-head-pattern{opacity:.075; filter:invert(1)}
}
:root[data-theme="dark"] .page-head-pattern{opacity:.075; filter:invert(1)}
.page-head .crumbs{padding:0 0 10px}
.page-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.page-head h1{margin:0; line-height:1.1}
.page-head-lead{margin:9px 0 0; max-width:62ch; color:var(--ink-3); font-size:14.5px; line-height:1.55}
.page-head-aside{font-size:13px; color:var(--ink-3); white-space:nowrap; padding-bottom:4px}
/* sarlavha ostidagi nozik urg'u chizig'i */
.page-head h1::after{
content:""; display:block; width:34px; height:2px; border-radius:2px;
background:var(--ink); opacity:.8; margin-top:12px;
}
/* ------- KIRISH sahifasi: ikki ustunli ------- */
.auth-split{
display:grid; gap:0; grid-template-columns:1fr;
border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
box-shadow:var(--sh-2); margin:0 0 40px; background:var(--bg);
}
@media(min-width:860px){ .auth-split{grid-template-columns:1fr 1fr} }
.auth-form{padding:clamp(24px,4vw,44px)}
.auth-aside{
position:relative; min-height:260px; display:none; isolation:isolate;
background:var(--sidebar); color:#fff;
}
@media(min-width:860px){ .auth-aside{display:block} }
.auth-aside img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:.55;
}
.auth-aside::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(10,12,15,.25), rgba(10,12,15,.82));
}
.auth-aside-body{
position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
justify-content:flex-end; padding:34px;
}
.auth-aside-body blockquote{
margin:0 0 14px; font-family:var(--serif); font-weight:500;
font-size:clamp(19px,2.2vw,26px); line-height:1.3; letter-spacing:-.015em;
}
.auth-aside-body p{margin:0; font-size:13px; color:rgba(255,255,255,.72); line-height:1.5}
/* Brend imzosi — rasmning pastki chekkasida, iqtibosdan ajralib tursin */
.auth-since{
display:block; margin-top:18px; padding-top:14px;
border-top:1px solid rgba(255,255,255,.16);
font-size:10.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
color:rgba(255,255,255,.58);
}
/* ------- statik sahifalar (yordam, oferta, maxfiylik) ------- */
.prose{max-width:72ch}
.prose h3{
font-family:var(--serif); font-weight:600; font-size:19px;
margin:28px 0 10px; letter-spacing:-.015em;
}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 12px; line-height:1.7; color:var(--ink-2)}
.prose ul{margin:0 0 14px; padding-left:20px; line-height:1.7; color:var(--ink-2)}
.prose li{margin-bottom:5px}
/* ------- bo'sh holat: naqsh bilan ------- */
.empty{position:relative; isolation:isolate}
.empty-ico{
position:relative; background:var(--bg-2);
box-shadow:0 0 0 8px color-mix(in srgb, var(--bg-2) 55%, transparent);
}
/* ---- admin xato sahifasi ---- */
.adm-error{max-width:520px; text-align:center; padding:32px 26px}
.adm-error .mark{justify-content:center; margin-bottom:10px}
.adm-error h2{font-family:var(--serif); font-weight:600; font-size:21px; margin:0 0 8px}
.adm-error .row{justify-content:center}
/* ===========================================================================
20. TOVAR QATORLARI — KINEMATIK ORQA FON
Sekin suzuvchi girih maydoni + nafas oluvchi yorug'lik.
Faqat transform/opacity animatsiya qilinadi — kompozitorda ishlaydi,
qayta chizish (repaint) yo'q, telefon batareyasini yemaydi.
=========================================================================== */
.rowband{
position:relative; isolation:isolate; overflow:hidden;
padding:26px 0 14px;
}
.rowband .sec-head{margin-bottom:14px}
.rowband-bg{
position:absolute; inset:0; z-index:-1; pointer-events:none;
/* chetlari so'nadi — bandlar orasida keskin chegara qolmasin */
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
/* --- girih maydoni: bir katak (96px) surilgach takrorlanadi => uzluksiz */
.rowband-bg::before{
content:""; position:absolute; inset:-120px;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:96px 96px;
/* Yorug' mavzuda oq fon ustida .032 umuman ko'rinmasdi (qora 3% = #f6f6f6).
.085 da naqsh seziladi, lekin matnni bosmaydi. */
opacity:.085;
animation:girihDrift 64s linear infinite;
will-change:transform;
}
.rowband-alt .rowband-bg::before{
animation-name:girihDriftAlt;
animation-duration:82s;
}
/* --- nafas oluvchi yorug'lik: katta yumshoq dog' sekin suzadi */
.rowband-bg::after{
content:""; position:absolute; top:-40%; left:6%;
width:52%; aspect-ratio:1/1; border-radius:50%;
background:radial-gradient(circle at 50% 50%, rgba(16,19,23,.085), transparent 68%);
animation:glowFloat 26s ease-in-out infinite alternate;
will-change:transform;
}
.rowband-alt .rowband-bg::after{
left:auto; right:6%;
animation-duration:34s; animation-direction:alternate-reverse;
}
@keyframes girihDrift{
from{transform:translate3d(0,0,0)}
to {transform:translate3d(-96px,-96px,0)}
}
@keyframes girihDriftAlt{
from{transform:translate3d(0,0,0)}
to {transform:translate3d(96px,-96px,0)}
}
@keyframes glowFloat{
from{transform:translate3d(0,0,0) scale(1)}
to {transform:translate3d(14%,22%,0) scale(1.18)}
}
/* Qorong'i mavzuda naqsh teskari (oq chiziq), yorug'lik ham oq */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .rowband-bg::before{opacity:.055; filter:invert(1)}
:root:not([data-theme="light"]) .rowband-bg::after{
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 68%);
}
}
:root[data-theme="dark"] .rowband-bg::before{opacity:.055; filter:invert(1)}
:root[data-theme="dark"] .rowband-bg::after{
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 68%);
}
/* Harakatni kamaytirish: naqsh qoladi, lekin qimirlamaydi */
@media (prefers-reduced-motion: reduce){
.rowband-bg::before,.rowband-bg::after{animation:none}
}
/* ===========================================================================
21. SAVOL-JAVOB (mijoz <-> operator)
=========================================================================== */
/* ------- tovar sahifasidagi "savol berish" ochiluvchi bloki */
.askbox{
margin-top:14px; border:1px solid var(--line); border-radius:var(--r);
background:var(--bg-2); overflow:hidden;
}
.askbox > summary{
display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
padding:13px 15px; font-size:14px; font-weight:600; color:var(--ink);
transition:background var(--t-fast);
}
.askbox > summary::-webkit-details-marker{display:none}
.askbox > summary:hover{background:var(--bg-3)}
.askbox > summary svg{flex:none; color:var(--ink-3)}
.askbox[open] > summary{border-bottom:1px solid var(--line)}
.askbox form{padding:14px 15px 15px}
/* ------- umumiy matn maydoni */
.askbox textarea,.chat-form textarea{
width:100%; resize:vertical; min-height:72px;
padding:11px 13px; font:inherit; font-size:14px; line-height:1.5;
color:var(--ink); background:var(--bg);
border:1px solid var(--line); border-radius:var(--r-sm);
transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.askbox textarea:focus,.chat-form textarea:focus{
outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px var(--bg-3);
}
/* ------- suhbatlar ro'yxati */
.chat-list{display:flex; flex-direction:column; gap:10px; margin-bottom:40px}
.chat-row{
display:flex; align-items:center; gap:13px; padding:13px 15px;
background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--sh-1);
transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.chat-row:hover{transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--ink-3)}
.chat-row.unread{border-color:var(--ink); background:var(--bg)}
.chat-thumb{
width:48px; height:48px; flex:none; border-radius:10px; object-fit:cover;
background:#f4f5f6;
}
.chat-thumb-ico{display:grid; place-items:center; background:var(--bg-3); color:var(--ink-3)}
.chat-row-main{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.chat-row-main b{font-size:14px; font-weight:600; letter-spacing:-.01em}
.chat-dot{
flex:none; min-width:22px; height:22px; padding:0 6px; border-radius:var(--r-full);
background:var(--sale); color:#fff; font-size:11px; font-weight:700;
display:grid; place-items:center;
}
/* ------- suhbat ichidagi tovar kartochkasi */
.chat-item{display:flex; align-items:center; gap:13px; margin-bottom:16px}
.chat-item img{width:54px; height:54px; border-radius:9px; object-fit:cover; flex:none}
.chat-item span{display:flex; flex-direction:column; gap:3px; min-width:0}
/* ------- xabarlar oqimi */
.chat-thread{display:flex; flex-direction:column; gap:14px; margin-bottom:18px}
.chat-thread-adm{max-height:none}
.msg{display:flex; flex-direction:column; align-items:flex-start; max-width:86%}
.msg-mine{align-self:flex-end; align-items:flex-end}
.msg-bubble{
padding:11px 14px; border-radius:16px 16px 16px 4px;
background:var(--bg-2); border:1px solid var(--line);
font-size:14px; line-height:1.55; word-break:break-word;
}
.msg-mine .msg-bubble{
border-radius:16px 16px 4px 16px;
background:var(--brand); border-color:var(--brand); color:var(--on-brand);
}
.msg-meta{margin-top:5px; font-size:11.5px; color:var(--ink-3)}
.chat-form{margin-bottom:0}
.chat-form .btn{display:inline-flex; align-items:center; gap:6px}
/* ------- bo'sh holat */
.empty{text-align:center; padding:36px 24px}
.empty svg{color:var(--ink-3); margin-bottom:10px}
.empty h3{font-family:var(--serif); font-weight:600; font-size:19px; margin:0 0 6px}
/* ------- menyu/tugma ichidagi kichik belgi */
.badge-inline{
display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
margin-left:6px; border-radius:var(--r-full);
background:var(--sale); color:#fff; font-size:11px; font-weight:700; font-style:normal;
}
.adm-nav-badge{
margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-full);
background:var(--sale); color:#fff; font-size:11px; font-weight:700; font-style:normal;
display:grid; place-items:center; flex:none;
}
/* ===========================================================================
22. KIRISH ANIMATSIYASI — "Buyuk Ipak yo'li → bugun"
Umumiy davomiyligi ~4.2s. Parda CSS bilan o'zi ketadi (forwards),
JS ga bog'liq emas — shuning uchun hech qachon qora ekranda qotmaydi.
=========================================================================== */
.intro{display:none}
html[data-intro="on"] .intro[hidden]{
display:flex; flex-direction:column; align-items:center; justify-content:center;
position:fixed; inset:0; z-index:9999; overflow:hidden;
background:radial-gradient(130% 110% at 72% 62%, #16181d 0%, #0a0b0e 62%, #06070a 100%);
color:#f4f1e8;
/* Shamol pardani olib ketadi: 3.95s da boshlanadi, 0.9s da tugaydi.
visibility/pointer-events oxirida albatta qo'yiladi — JS ishlamasa ham
mijoz sayt bilan ishlay oladi. */
animation:introOut .9s cubic-bezier(.5,0,.2,1) 3.95s forwards;
}
/* Yo'qolish: parda tomoshabinga qarab kengayib, tuman ichida tarqaydi.
Oxirgi kadrda visibility/pointer-events ALBATTA o'chadi — JS ishlamasa
ham mijoz sayt bilan ishlay oladi. */
@keyframes introOut{
from{opacity:1; transform:scale(1)}
55% {opacity:.5}
to {opacity:0; transform:scale(1.55);
visibility:hidden; pointer-events:none}
}
/* ------- fon naqshi: sekin suzadi */
.intro-pattern{
position:absolute; inset:-15%; pointer-events:none; opacity:.085;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:96px 96px;
-webkit-mask-image:radial-gradient(circle at 50% 52%, #000 12%, transparent 72%);
mask-image:radial-gradient(circle at 50% 52%, #000 12%, transparent 72%);
animation:introPat 26s linear infinite;
}
@keyframes introPat{to{transform:translate3d(-96px,-96px,0)}}
/* ------- xarita */
.intro-map{
position:absolute; top:50%; left:50%;
width:min(1180px, 128vw); transform:translate(-50%,-62%);
opacity:0; animation:introMapIn .8s var(--e-out) .15s forwards;
}
@keyframes introMapIn{to{opacity:1}}
/* yo'l chiziladi */
.intro-route{
stroke-dasharray:1400; stroke-dashoffset:1400;
filter:drop-shadow(0 0 7px rgba(239,227,196,.4));
animation:introDraw 1.95s cubic-bezier(.42,0,.25,1) .9s forwards;
}
@keyframes introDraw{to{stroke-dashoffset:0}}
/* bekatlar ketma-ket yonadi */
.intro-stops circle{fill:#efe3c4; opacity:0; transform-box:fill-box; transform-origin:center}
.intro-stops text{
fill:rgba(244,241,232,.62); font-size:13px; font-weight:600;
letter-spacing:.09em; text-transform:uppercase; text-anchor:middle; opacity:0;
}
.intro-stops .stop circle{animation:stopPop .5s var(--e-spring) calc(.95s + var(--i) * .40s) forwards}
.intro-stops .stop text {animation:stopFade .5s var(--e-out) calc(1.08s + var(--i) * .40s) forwards}
.intro-stops .stop-last text{fill:#fff; font-size:15px; text-anchor:start}
.intro-stops .stop-last circle{fill:#fff}
@keyframes stopPop{from{opacity:0; transform:scale(.2)} to{opacity:1; transform:scale(1)}}
@keyframes stopFade{to{opacity:1}}
/* ------- karvon: tuya → yuk mashinasi */
.intro-rider{color:#efe3c4}
/* Belgilarning o'lchami/ko'zgusi SVG transform ida — CSS faqat ko'rinish
va kichik siljishni boshqaradi, shunda ikkisi bir-biriga xalal bermaydi. */
.rider-camel{fill:#efe3c4; opacity:0;
animation:camelIn .4s var(--e-out) .9s forwards,
camelOut .4s var(--e-out) 2.55s forwards}
.rider-truck{opacity:0; transform-box:fill-box; transform-origin:center;
animation:truckIn .55s var(--e-spring) 2.7s forwards}
@keyframes camelIn {to{opacity:1}}
@keyframes camelOut{to{opacity:0; transform:translateY(-9px)}}
@keyframes truckIn {from{opacity:0; transform:scale(.45)}
to {opacity:1; transform:scale(1)}}
/* ------- matn */
.intro-copy{
position:relative; z-index:2; text-align:center; padding:0 24px;
margin-top:min(31vh, 270px);
}
.intro-kicker{
display:block; font-size:11px; letter-spacing:.42em; text-transform:uppercase;
color:rgba(244,241,232,.5); margin-bottom:14px;
opacity:0; animation:introUp .7s var(--e-out) .55s forwards;
}
.intro-copy p{margin:0; overflow:hidden}
.intro-l1,.intro-l2{
font-family:var(--serif); font-weight:600; line-height:1.25;
font-size:clamp(19px,3.5vw,31px); letter-spacing:-.015em;
}
.intro-l1{color:rgba(244,241,232,.72); opacity:0; animation:introUp .8s var(--e-out) 1.25s forwards}
.intro-l2{color:#fff; opacity:0; animation:introUp .8s var(--e-out) 2.62s forwards}
@keyframes introUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.intro-logo{
display:inline-flex; align-items:center; gap:10px; margin-top:22px;
font-size:20px; font-weight:800; letter-spacing:-.03em; color:#fff;
opacity:0; animation:introUp .7s var(--e-out) 3.02s forwards;
}
.intro-logo b{font-weight:400}
/* Brend imzosi: logotip ostida ingichka chiziq + "Since 2013".
Logotipdan 180ms keyin chiqadi — ko'z avval nomni, keyin yilni o'qiydi. */
.intro-since{
display:block; margin-top:10px; font-size:10.5px; font-weight:600;
letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.62);
opacity:0; animation:introUp .7s var(--e-out) 3.2s forwards;
}
.intro-since::before{
content:""; display:block; width:34px; height:1px; margin:0 auto 10px;
background:rgba(255,255,255,.3);
}
.intro-logo .logo-mark{
width:32px; height:32px; background:#fff; color:#0a0b0e;
box-shadow:0 6px 18px rgba(0,0,0,.5);
}
/* ------- SHAMOL: ekranga qarab keladigan chang va tutun
TEZLIK QOIDASI: bu yerda FAQAT transform va opacity animatsiya qilinadi.
Avvalgi versiyada filter:blur(), mix-blend-mode va mask ham animatsiyada
edi — brauzer har kadrda qaytadan rasterlashga majbur bo'lib, animatsiya
qotib qolardi. Yumshoqlik endi gradientning o'zidan keladi (tekin),
tutun donadorligi esa bir marta rasmga "pishirilgan". */
.intro-fog{position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden;
contain:strict}
.intro-fog > span{
position:absolute; left:50%; top:50%; width:var(--w); height:var(--w);
margin-left:calc(var(--w) / -2); margin-top:calc(var(--w) / -2);
border-radius:50%; opacity:0;
/* ko'p to'xtashli gradient — blur filtri o'rniga, raster xarajati nol */
background:radial-gradient(closest-side,
rgba(238,228,205,var(--o)) 0%,
rgba(222,210,184,calc(var(--o) * .72)) 26%,
rgba(196,184,158,calc(var(--o) * .40)) 48%,
rgba(170,160,138,calc(var(--o) * .16)) 66%,
rgba(150,142,122,0) 80%);
/* Masshtab oralig'i ataylab tor (.22→2.4). Avval .1→7 edi — element
teksturasi 7 barobar kattayib, brauzer uni qayta rasterlashga majbur
bo'lardi. Ko'rinishi deyarli bir xil, narxi bir necha barobar arzon. */
transform:translate3d(var(--x), var(--y), 0) scale(.38);
animation:fogRush 1.55s cubic-bezier(.32,0,.52,1) calc(3.3s + var(--d)) forwards;
}
@keyframes fogRush{
0% {opacity:0; transform:translate3d(var(--x), var(--y), 0) scale(.38)}
18% {opacity:1}
62% {opacity:.9}
100%{opacity:0; transform:translate3d(var(--x), var(--y), 0) scale(2.2)}
}
/* QALINLIK shu yerdan keladi: butun ekranni qoplaydigan iliq tuman.
Faqat opacity animatsiya qilinadi (va juda kichik masshtab) — ya'ni
kompozitor uchun deyarli tekin, lekin tutunni zich qiladi. */
.fog-wall{
position:absolute; inset:0; opacity:0;
background:
radial-gradient(120% 95% at 50% 52%,
rgba(236,227,206,.92) 0%,
rgba(214,204,180,.80) 28%,
rgba(178,170,150,.55) 55%,
rgba(132,128,116,.26) 78%,
rgba(96,94,88,0) 100%);
transform:scale(1.02);
animation:wallRush 1.5s cubic-bezier(.34,0,.5,1) 3.38s forwards;
}
@keyframes wallRush{
0% {opacity:0; transform:scale(1.02)}
26% {opacity:.9}
58% {opacity:.82}
100%{opacity:0; transform:scale(1.14)}
}
/* Tutun donadorligi. Shovqin ham, yumshoq cheti ham SVG ichida — brauzer
uni bir marta rasm sifatida chizadi, keyin faqat siljitadi. */
.fog-veil{
position:absolute; inset:-25%; opacity:0;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:70vmax 70vmax;
background-position:center;
background-repeat:no-repeat;
transform:scale(.5);
animation:veilRush 1.6s cubic-bezier(.3,0,.5,1) 3.34s forwards;
}
@keyframes veilRush{
0% {opacity:0; transform:scale(.5)}
22% {opacity:.85}
60% {opacity:.62}
100%{opacity:0; transform:scale(2.3)}
}
/* ------- mayda zarralar (blur YO'Q — kichikligi bilan yumshoq ko'rinadi) */
.intro-dust{position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden;
contain:strict}
.intro-dust i{
position:absolute; left:var(--x); top:var(--y);
width:4px; height:4px; border-radius:50%;
background:radial-gradient(closest-side,
rgba(248,242,226,.95) 0%, rgba(239,227,196,.45) 45%, rgba(239,227,196,0) 78%);
opacity:0;
transform:translate3d(-50%,-50%,0) scale(.4);
animation:moteRush 1.3s cubic-bezier(.28,0,.5,1) calc(3.36s + var(--d)) forwards;
}
@keyframes moteRush{
0% {opacity:0; transform:translate3d(-50%,-50%,0) scale(.4)}
18% {opacity:.9}
100%{opacity:0; transform:translate3d(-50%,-50%,0) scale(5)}
}
/* ------- yo'l va matn tomoshabin yonidan o'tib ketadi (blur siz) */
html[data-intro="on"] .intro[hidden] .intro-map{
animation:introMapIn .8s var(--e-out) .15s forwards,
rushPastMap 1.1s cubic-bezier(.4,0,.45,1) 3.55s forwards;
}
html[data-intro="on"] .intro[hidden] .intro-copy{
animation:rushPastCopy 1.1s cubic-bezier(.4,0,.45,1) 3.62s forwards;
}
/* Xarita markazga translate(-50%,-62%) bilan qo'yilgan — kadrda o'sha
siljishni SAQLASH shart, aks holda element sakrab ketadi. */
@keyframes rushPastMap{
to{opacity:0; transform:translate(-50%,-62%) scale(2.1)}
}
@keyframes rushPastCopy{
to{opacity:0; transform:scale(1.85)}
}
/* ------- o'tkazib yuborish */
.intro-skip{
position:absolute; right:clamp(16px,4vw,34px); bottom:clamp(18px,4vh,34px);
z-index:3; padding:9px 16px; border-radius:var(--r-full);
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
color:rgba(244,241,232,.82); font:inherit; font-size:12.5px; font-weight:600;
cursor:pointer;
opacity:0; animation:introUp .5s var(--e-out) 1s forwards;
transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.intro-skip:hover{background:rgba(255,255,255,.16); color:#fff; transform:translateY(-1px)}
/* JS "o'tkazib yuborish" deganda shu sinf qo'yiladi — darhol so'nadi */
html[data-intro="on"] .intro.go[hidden]{
animation:introOut .32s var(--e-out) forwards;
}
/* o'tkazib yuborilganda barcha ichki animatsiyalar to'xtaydi */
html[data-intro="on"] .intro.go[hidden] *{animation-play-state:paused !important}
/* Telefon: xarita kichrayadi, matn pastroq turadi */
@media(max-width:720px){
/* 150vw da Guangzhou va Toshkent ekrandan chiqib ketardi — ya'ni yo'lning
ikki uchi, eng muhim ikki nuqta ko'rinmasdi. Xarita kichraytirildi,
o'rniga viewBox ichidagi yozuv va chiziq yo'g'onlashtirildi. */
.intro-map{width:106vw; transform:translate(-50%,-64%)}
.intro-route{stroke-width:5}
.intro-stops circle{r:8}
.intro-stops text{font-size:26px; letter-spacing:.06em}
.intro-stops .stop-last text{font-size:30px}
.intro-copy{margin-top:min(24vh, 200px)}
.intro-l1,.intro-l2{font-size:clamp(17px,5vw,23px)}
/* karvon belgisi ham kattalashsin (ichki g ning SVG transform i ustidan) */
.rider-camel > g{transform:translate(22px,-38px) scale(-2.1,2.1)}
.rider-truck > g{transform:translate(22px,-28px) scale(-1.95,1.95)}
}
/* Parda ko'rinib turganda sahifaning o'z animatsiyalari (hero Ken Burns,
girih suzishi) behuda ishlaydi va kompozitorni band qiladi — to'xtatamiz.
Parda ketgach data-intro o'chadi va hammasi o'z-o'zidan tiklanadi. */
html[data-intro="on"] .hero-slide,
html[data-intro="on"] .hero-slide img,
html[data-intro="on"] .rowband-bg::before,
html[data-intro="on"] .rowband-bg::after,
html[data-intro="on"] .cat-sheen,
html[data-intro="on"] .trust-n,
html[data-intro="on"] .ph{animation-play-state:paused !important}
/* Harakat kamaytirilsa — skripti pardani umuman ochmaydi.
Bu yerdagisi ikkinchi qavat himoya. */
@media (prefers-reduced-motion: reduce){
html[data-intro="on"] .intro[hidden]{display:none !important}
.intro-fog,.intro-dust{display:none}
}