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

:root{
  /* ---- ranglar ---- */
  --paper:#FFFFFF;
  --wash:#F6F4F0;          /* iliq oq — bo'lim foni */
  --wash-2:#EDEAE3;
  --ink:#1E211F;           /* asosiy matn */
  --ink-soft:#5C635E;      /* ikkinchi darajali matn */
  --faint:#8C948E;
  --line:#E4E2DC;
  --line-2:#D2CFC6;

  --brand:#C8502B;         /* terrakota — asosiy harakat */
  --brand-dark:#A93F1F;
  --brand-ink:#FFFFFF;     /* terrakota ustidagi matn */

  --teal:#1F5F4B;          /* to'q yashil — logotip, ikkinchi aksent */
  --teal-dark:#164836;

  --night:#17201C;         /* banner va futer */
  --ok:#2E7D4F;            /* "sotuvda bor" */
  --danger:#C0392B;
  --wa:#25D366;            /* WhatsApp */
  --tg:#2AABEE;            /* Telegram */
  --ig:#C13584;            /* Instagram */

  /* ---- shrift ---- */
  --head:"Manrope",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --logo:"Cinzel",Georgia,"Times New Roman",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(30,33,31,.05);
  --shadow-2:0 4px 16px rgba(30,33,31,.08);
  --shadow-3:0 12px 32px rgba(30,33,31,.14);
}

*{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:11px;text-decoration:none;color:inherit}

.brand-mark{
  width:40px;height:40px;flex:none;border-radius:11px;overflow:hidden;
  box-shadow:0 2px 8px rgba(31,95,75,.30);
}
.brand-mark svg{width:100%;height:100%;display:block}

.brand-name{display:block;line-height:1}
.brand-word{
  font-family:var(--logo);
  font-size:19px;font-weight:700;letter-spacing:.14em;
  color:var(--ink);text-transform:uppercase;white-space:nowrap;
}
.brand-word em{font-style:normal;color:var(--teal);margin-left:.28em}
.brand-name small{
  display:block;font-family:var(--body);font-size:8.5px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-top:5px;
}

/* qorong'i fonda */
.hero .brand-word,.footer .brand-word{color:#fff}
.footer .brand-word em{color:var(--brand)}
.footer .brand-name small{color:#6E757D}

/* ============ 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-ig{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);color:#fff}
.btn-ig: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}
}