/*
  Oyun Qurdu — dizayn sistemi.

  Duruş: kiosk qiymət lövhəsi. Sərt kənar, qalın haşiyə, düz rəng bloku.
  Yumşaq kölgə, şüşə effekti və qradient QƏSDƏN yoxdur — onlar "premium"
  hissi verir, bu isə telefonla 10 manatlıq UC alan oyunçu üçün mağazadır.

  Dərinlik yalnız bir yolla verilir: 3px offset kölgə (çap hissi), və yalnız
  əsas düymədə. Qalan hər şey düz və sakit qalır.
*/

:root {
  /* Rənglər — bayraqdakı mavidən çıxarılıb */
  --ink:        #0B1620;   /* mavi çalarlı qara, saf qara deyil */
  --ink-soft:   #33414D;
  --mute:       #6B7A87;
  --paper:      #FFFFFF;
  --shell:      #F2F5F7;   /* səhifə fonu */
  --line:       #0B1620;   /* sərt haşiyə */
  --line-soft:  #DCE3E8;
  --sky:        #1CA3E2;   /* bayraq mavisi — əsas */
  --sky-press:  #1281B4;
  --sky-wash:   #E8F5FC;
  --good:       #12855A;
  --bad:        #C6273E;
  --warn:       #B26A00;

  --tap: 48px;             /* minimum toxunma sahəsi */
  --bar: 60px;             /* alt naviqasiya hündürlüyü */
  --radius: 3px;           /* demək olar sıfır — sərt duruş */
}

:root[data-theme="dark"], .dark {
  --ink:        #EDF2F5;
  --ink-soft:   #B4C0C9;
  --mute:       #8496A3;
  --paper:      #14212B;
  --shell:      #0B1620;
  --line:       #2C3E4C;
  --line-soft:  #22323E;
  --sky-wash:   #10303F;
}

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
body { overflow-x: hidden; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--shell);
  color: var(--ink);
  font-family: Archivo, "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom));
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* ── tipoqrafiya ─────────────────────────────────────────────────────────
   Tək ailə, iki en. Genişlik kontrastı ailə kontrastından daha səliqəlidir
   və "qiymət lövhəsi" duruşunu verir. */
.t-display {
  font-stretch: 118%;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .95;
  text-transform: uppercase;
}
.t-title { font-stretch: 108%; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.t-label {
  font-stretch: 100%; font-weight: 700; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mute);
}
.t-price { font-stretch: 112%; font-weight: 800; letter-spacing: -.02em; }

/* ── karkas ──────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 14px; }
@media (min-width: 768px) { .wrap { padding-inline: 24px; } }

.panel {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}

/* Sərt offset kölgə — səhifədəki YEGANƏ dərinlik jesti. */
.stamp { box-shadow: 3px 3px 0 var(--line); }

/* ── qiymət lövhəsi: məhsul kartı ────────────────────────────────────── */
.plate { display: block; background: var(--paper); border: 2px solid var(--line);
         border-radius: var(--radius); overflow: hidden; }
.plate:active { transform: translate(1px, 1px); }
.plate__art { aspect-ratio: 1/1; background: var(--sky-wash); display: grid;
              place-items: center; overflow: hidden; border-bottom: 2px solid var(--line); }
.plate__art img { width: 100%; height: 100%; object-fit: cover; }
.plate__body { padding: 9px 10px 0; }
.plate__cat  { font-size: 10px; font-weight: 700; letter-spacing: .08em;
               text-transform: uppercase; color: var(--mute); }
.plate__name { font-size: 13px; font-weight: 600; line-height: 1.25; margin-top: 2px;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
               overflow: hidden; min-height: 2.5em; }
/* Qiymət kartın dibinə yapışdırılmış etiket kimi oturur — səhifənin imzası. */
.plate__tag  { margin-top: 9px; background: var(--sky); color: #fff;
               padding: 7px 10px; display: flex; align-items: baseline; gap: 7px; }
.plate__now  { font-size: 15px; }
.plate__was  { font-size: 11px; opacity: .72; text-decoration: line-through; font-weight: 600; }
.plate__off  { margin-left: auto; background: var(--ink); color: var(--paper);
               font-size: 10px; font-weight: 800; padding: 2px 5px; }
.plate--out .plate__art { position: relative; }
.plate--out .plate__art::after {
  content: attr(data-out); position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11,22,32,.72); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ── düymələr ────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       min-height: var(--tap); padding: 0 18px; border: 2px solid var(--line);
       border-radius: var(--radius); font-weight: 700; font-size: 14px;
       letter-spacing: -.01em; cursor: pointer; background: var(--paper); color: var(--ink); }
.btn--primary { background: var(--sky); color: #fff; box-shadow: 3px 3px 0 var(--line); }
.btn--primary:active { transform: translate(3px, 3px); box-shadow: none; }
.btn--block { width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--sky); outline-offset: 2px;
}

.field { width: 100%; min-height: var(--tap); padding: 0 14px; font-size: 15px;
         background: var(--paper); color: var(--ink);
         border: 2px solid var(--line); border-radius: var(--radius); }
.field::placeholder { color: var(--mute); }
textarea.field { padding: 12px 14px; min-height: 96px; resize: vertical; }

/* ── alt naviqasiya ──────────────────────────────────────────────────── */
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--paper); border-top: 2px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 768px) { .bottombar { display: none; } }
.bottombar a { display: flex; flex-direction: column; align-items: center; justify-content: center;
               gap: 3px; height: var(--bar); color: var(--mute); font-size: 10px; font-weight: 700;
               letter-spacing: .02em; text-decoration: none; }
.bottombar a[aria-current="page"] { color: var(--sky); }
.bottombar a[aria-current="page"] svg { stroke-width: 2.4; }
.bottombar .dot { position: absolute; transform: translate(11px, -11px);
                  background: var(--bad); color: #fff; font-size: 9px; font-weight: 800;
                  min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 3px; }

/* ── başlıq ──────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--paper);
          border-bottom: 2px solid var(--line); }

/* ── kateqoriya lentləri ─────────────────────────────────────────────── */
.rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
        padding-bottom: 2px; scroll-snap-type: x proximity; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }
.chip { display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
        border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper);
        font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.chip[aria-current="true"] { background: var(--ink); color: var(--paper); }

/* ── bölmə başlığı ───────────────────────────────────────────────────── */
.head { display: flex; align-items: baseline; justify-content: space-between;
        gap: 12px; margin-bottom: 12px; }
.head h2 { font-size: 19px; }
.head a { font-size: 12px; font-weight: 700; color: var(--sky); }

.grid-plates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .grid-plates { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid-plates { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

.note { border: 2px solid var(--line); border-radius: var(--radius);
        padding: 11px 13px; font-size: 13px; font-weight: 600; }
.note--ok  { background: #E6F5EE; color: var(--good); border-color: var(--good); }
.note--bad { background: #FBE9EC; color: var(--bad);  border-color: var(--bad); }
.dark .note--ok  { background: #0E2A20; }
.dark .note--bad { background: #2C1218; }

/* ── kiçik utilit qatı ───────────────────────────────────────────────────
   Tailwind əvəzinə: yalnız həqiqətən lazım olanlar. Siyahı qısa qalmalıdır,
   yoxsa öz-özünə bir freymvorka çevrilir. */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { justify-content: space-between; }
.center  { justify-content: center; }
.wide    { flex: 1 1 auto; min-width: 0; }
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.pad12{padding:12px}.pad16{padding:16px}.pad20{padding:20px}
.sec { padding-block: 22px; }
.s11{font-size:11px}.s12{font-size:12px}.s13{font-size:13px}.s14{font-size:14px}
.s15{font-size:15px}.s17{font-size:17px}.s20{font-size:20px}.s26{font-size:26px}
.w600{font-weight:600}.w700{font-weight:700}.w800{font-weight:800}
.mute{color:var(--mute)}.sky{color:var(--sky)}.bad{color:var(--bad)}.good{color:var(--good)}
.right{text-align:right}.middle{text-align:center}
.hide-sm{display:none}
@media (min-width:768px){ .hide-sm{display:revert} .only-sm{display:none} }
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.divide > * + * { border-top: 2px solid var(--line-soft); }
.tag { display:inline-flex; align-items:center; height:22px; padding:0 7px;
       border:2px solid var(--line); border-radius:var(--radius);
       font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.tag--sky {background:var(--sky);color:#fff;border-color:var(--sky)}
.tag--ok  {background:var(--good);color:#fff;border-color:var(--good)}
.tag--bad {background:var(--bad);color:#fff;border-color:var(--bad)}
.tag--warn{background:var(--warn);color:#fff;border-color:var(--warn)}
.empty { padding: 44px 16px; text-align: center; color: var(--mute); font-size: 14px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── canlı dəstək çatı ───────────────────────────────────────────────────
   Telefonda tam ekran: dvh klaviatura açılanda düzgün ölçülür. */
.chat { display: flex; flex-direction: column;
        height: calc(100dvh - 56px - var(--bar) - env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .chat { height: 74vh; border: 2px solid var(--line); } }
.chat__head { border-bottom: 2px solid var(--line); background: var(--paper); }
.chat__thread { flex: 1 1 auto; overflow-y: auto; padding: 14px;
                display: flex; flex-direction: column; gap: 8px; background: var(--shell); }
.chat__foot { border-top: 2px solid var(--line); background: var(--paper); padding: 10px 12px; }
.msg { max-width: 84%; padding: 9px 12px; font-size: 14px; line-height: 1.4;
       border: 2px solid var(--line); white-space: pre-wrap; word-break: break-word; }
.msg--them { align-self: flex-start; background: var(--paper); }
.msg--me   { align-self: flex-end; background: var(--sky); color: #fff; border-color: var(--sky); }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px;
          background: var(--paper); border: 2px solid var(--line); }
.typing i { width: 6px; height: 6px; background: var(--mute); display: block;
            animation: blip 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .16s } .typing i:nth-child(3) { animation-delay: .32s }
@keyframes blip { 0%,80%,100% { opacity: .28 } 40% { opacity: 1 } }

dialog { border: 2px solid var(--line); border-radius: var(--radius);
         background: var(--paper); color: var(--ink); padding: 0; max-width: 92vw; width: 380px; }
dialog::backdrop { background: rgba(11,22,32,.6); }