/* ============================================================
   BASE — tokenlar, tipografiya, tugmalar, forma elementlari
   Sayt ham, admin panel ham shu fayldan foydalanadi.
   ============================================================ */

:root{
  /* ---- ranglar ---- */
  --paper:#FFFFFF;
  --wash:#F4F5F7;          /* bo'lim foni */
  --wash-2:#EDEFF2;
  --ink:#1B1D21;           /* asosiy matn */
  --ink-soft:#5A6068;      /* ikkinchi darajali matn */
  --faint:#8B9199;
  --line:#E4E7EB;
  --line-2:#D3D8DE;

  --brand:#FFC62B;         /* sariq — asosiy harakat */
  --brand-dark:#F2B300;
  --brand-ink:#1B1D21;     /* sariq ustidagi matn */

  --teal:#12AEC4;          /* firuza — ikkinchi aksent */
  --teal-dark:#0E93A6;

  --night:#14161A;         /* yuqori qora chiziq */
  --ok:#22A845;            /* "sotuvda bor" */
  --danger:#E5484D;
  --wa:#25D366;            /* WhatsApp */
  --tg:#2AABEE;            /* Telegram */

  /* ---- shrift ---- */
  --head:"Manrope",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;

  /* ---- o'lcham ---- */
  --pad:clamp(16px,4vw,48px);
  --max:1280px;
  --r-lg:16px;
  --r-md:12px;
  --r-sm:8px;

  --shadow-1:0 1px 2px rgba(27,29,33,.05);
  --shadow-2:0 4px 16px rgba(27,29,33,.08);
  --shadow-3:0 12px 32px rgba(27,29,33,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--head);line-height:1.2;letter-spacing:-.02em;font-weight:700}
img{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* ============ BREND ============ */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-mark{
  width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--teal);color:#fff;font-size:21px;
}
.brand-name{font-family:var(--head);font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.05}
.brand-name small{
  display:block;font-family:var(--body);font-size:9px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-top:2px;
}

/* ============ TUGMALAR ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  padding:11px 20px;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:var(--body);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn i{font-size:17px}

.btn-brand{background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-1)}
.btn-brand:hover{background:var(--brand-dark)}

.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-dark)}

.btn-line{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--ink);background:var(--wash)}

.btn-ghost{background:transparent;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--wash);color:var(--ink)}

.btn-danger{background:#FDECEC;color:var(--danger);border-color:#F7CFD0}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{filter:brightness(.93)}
.btn-tg{background:var(--tg);color:#fff}
.btn-tg:hover{filter:brightness(.93)}

.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:13px}

/* ============ FORMA ============ */
.field{margin-bottom:18px}
.field > label{
  display:block;margin-bottom:7px;
  font-size:13px;font-weight:600;color:var(--ink);
}
.hint{display:block;font-size:12.5px;color:var(--faint);margin-top:6px;font-weight:400}

.input,.textarea,.select{
  width:100%;font-family:var(--body);font-size:15px;color:var(--ink);
  padding:11px 14px;border-radius:var(--r-sm);
  background:var(--paper);border:1px solid var(--line-2);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.textarea{min-height:110px;resize:vertical;line-height:1.6}
.select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6068' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.input::placeholder,.textarea::placeholder{color:#AFB5BD}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,174,196,.15);
}
.input.is-bad,.textarea.is-bad,.select.is-bad{border-color:var(--danger)}
.input.is-bad:focus,.textarea.is-bad:focus{box-shadow:0 0 0 3px rgba(229,72,77,.13)}
.err{display:block;margin-top:6px;font-size:13px;color:var(--danger)}

/* checkbox */
.check{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;margin-bottom:14px}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  width:20px;height:20px;flex:none;border-radius:5px;display:grid;place-items:center;
  background:var(--paper);border:1.5px solid var(--line-2);
  transition:background .18s,border-color .18s;
}
.check .box i{font-size:13px;color:#fff;opacity:0;transition:opacity .15s}
.check input:checked + .box{background:var(--teal);border-color:var(--teal)}
.check input:checked + .box i{opacity:1}
.check input:focus-visible + .box{outline:2px solid var(--teal);outline-offset:2px}
.check .txt{font-size:14.5px;color:var(--ink)}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

/* ============ NISHONLAR ============ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:500;color:var(--ink-soft);
}
.badge i{font-size:15px}
.badge-ok i{color:var(--ok)}
.badge-off{color:var(--faint)}

.tag{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;
}
.tag-on{color:#12703A;background:#E4F6EA}
.tag-off{color:var(--faint);background:var(--wash-2)}

/* ============ ANIMATSIYA ============ */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}