/; на тоже можно —
position там НЕ переопределяется (иначе ломается sticky и fixed cookie).
========================================================================== */
.jt-crt-z,.jt-kabin-z,.jt-saha-z,.jt-vektor-z,.jt-marki-z,.jt-jeton-z,.jt-fis-z{isolation:isolate}
:where(.jt-crt-z,.jt-kabin-z,.jt-saha-z,.jt-vektor-z,.jt-marki-z,.jt-jeton-z,.jt-fis-z):not(header,.site-header,.header,[class*="drawer"]){position:relative;overflow:clip}
header.jt-crt-z,header.jt-kabin-z,header.jt-saha-z,header.jt-vektor-z,header.jt-marki-z,header.jt-jeton-z,header.jt-fis-z{overflow:visible}
/* СТЕКЛО КИНЕСКОПА: строчная развёртка, свечение люминофора, тёмные углы */
.jt-crt-z.jt-crt-z.jt-crt-z{background:
var(--jt-doku),
var(--jt-tarama),
radial-gradient(120% 95% at 50% 42%,color-mix(in srgb,var(--jt-fosfor) 13%,transparent),transparent 72%),
radial-gradient(135% 115% at 50% 50%,transparent 52%,rgba(0,0,0,.72) 100%),
linear-gradient(var(--jt-ekran),color-mix(in srgb,var(--jt-ekran) 86%,var(--jt-kabin)));
background-size:160px 160px,auto,auto,auto,auto}
/* КОРПУС АВТОМАТА: боковая оклейка — косые цветные полосы по тёмному винилу */
.jt-kabin-z.jt-kabin-z.jt-kabin-z{background:
var(--jt-doku),
repeating-linear-gradient(116deg,color-mix(in srgb,var(--jt-acc) 10%,transparent) 0 13px,transparent 13px 88px),
repeating-linear-gradient(116deg,color-mix(in srgb,var(--jt-acc-2) 7%,transparent) 26px 33px,transparent 33px 88px),
linear-gradient(170deg,color-mix(in srgb,var(--jt-kabin) 88%,#fff 7%),var(--jt-kabin) 62%,color-mix(in srgb,var(--jt-kabin) 78%,#000));
background-size:160px 160px,auto,auto,auto}
/* ПОЛЕ ПИНБОЛА: дорожки-направляющие, кольца бамперов, подсветка снизу */
.jt-saha-z.jt-saha-z.jt-saha-z{background:
var(--jt-doku),
radial-gradient(circle at 17% 24%,transparent 0 24px,color-mix(in srgb,var(--jt-acc) 46%,transparent) 24px 28px,transparent 29px),
radial-gradient(circle at 81% 38%,transparent 0 17px,color-mix(in srgb,var(--jt-acc-2) 44%,transparent) 17px 21px,transparent 22px),
radial-gradient(circle at 63% 76%,transparent 0 30px,color-mix(in srgb,var(--jt-jeton) 40%,transparent) 30px 34px,transparent 35px),
linear-gradient(104deg,transparent 0 46%,color-mix(in srgb,var(--jt-ray) 16%,transparent) 46% 47%,transparent 47%),
linear-gradient(76deg,transparent 0 58%,color-mix(in srgb,var(--jt-ray) 14%,transparent) 58% 59%,transparent 59%),
radial-gradient(90% 60% at 50% 104%,color-mix(in srgb,var(--jt-acc) 18%,transparent),transparent 70%),
linear-gradient(color-mix(in srgb,var(--jt-ekran) 82%,var(--jt-kabin)),color-mix(in srgb,var(--jt-ekran) 96%,#000));
background-size:160px 160px,auto,auto,auto,auto,auto,auto,auto}
/* ВЕКТОРНАЯ СЕТКА: проволочный каркас ранних векторных автоматов */
.jt-vektor-z.jt-vektor-z.jt-vektor-z{background:
repeating-linear-gradient(90deg,color-mix(in srgb,var(--jt-acc) 20%,transparent) 0 1px,transparent 1px 54px),
repeating-linear-gradient(0deg,color-mix(in srgb,var(--jt-acc) 14%,transparent) 0 1px,transparent 1px 54px),
radial-gradient(130% 80% at 50% 100%,color-mix(in srgb,var(--jt-acc) 20%,transparent),transparent 62%),
linear-gradient(var(--jt-ekran),color-mix(in srgb,var(--jt-ekran) 84%,var(--jt-kabin)))}
/* МАРКИ-ПАННО: подсвеченная изнутри панель с рядом ламп по верху (СВЕТЛАЯ) */
.jt-marki-z.jt-marki-z.jt-marki-z{background:
radial-gradient(circle 4px at 17px 13px,color-mix(in srgb,var(--jt-jeton) 70%,#fff) 0 4px,transparent 5px),
radial-gradient(70% 130% at 50% -8%,rgba(255,255,255,.95),transparent 66%),
linear-gradient(180deg,color-mix(in srgb,var(--jt-marki) 97%,#fff),var(--jt-marki) 46%,color-mix(in srgb,var(--jt-marki) 88%,var(--jt-ray)));
background-size:34px 100%,auto,auto;background-repeat:repeat-x,no-repeat,no-repeat}
/* ЛОТОК ЖЕТОНОВ: латунь с насечкой и лежащими столбиками монет (СВЕТЛАЯ) */
.jt-jeton-z.jt-jeton-z.jt-jeton-z{background:
repeating-linear-gradient(90deg,color-mix(in srgb,var(--jt-ink) 7%,transparent) 0 1px,transparent 1px 12px),
radial-gradient(circle at 12% 78%,color-mix(in srgb,var(--jt-ink) 13%,transparent) 0 26px,transparent 27px),
radial-gradient(circle at 88% 22%,color-mix(in srgb,var(--jt-ink) 10%,transparent) 0 18px,transparent 19px),
linear-gradient(150deg,color-mix(in srgb,var(--jt-jeton) 34%,#fff),color-mix(in srgb,var(--jt-jeton) 54%,#fff) 52%,color-mix(in srgb,var(--jt-jeton) 40%,#fff))}
/* СЕРВИСНЫЙ ФИШ: бумага журнала обслуживания в линейку с полем (СВЕТЛАЯ) */
.jt-fis-z.jt-fis-z.jt-fis-z{background:
repeating-linear-gradient(0deg,transparent 0 25px,color-mix(in srgb,var(--jt-ink) 9%,transparent) 25px 26px),
linear-gradient(90deg,transparent 0 46px,color-mix(in srgb,var(--jt-acc-2) 24%,transparent) 46px 47px,transparent 47px),
var(--jt-tarama-k),
linear-gradient(#FCFAF4,#F3F0E6)}
/* ==========================================================================
2. КРОМКИ СЕКЦИЙ — ::before секции. Высоты строго в px.
========================================================================== */
/* ВЕРХ КИНЕСКОПА: яркая строка развёртки и затухающие строчки под ней */
.jt-tarama-top{position:relative}
.jt-tarama-top::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;z-index:3;pointer-events:none;
background:
linear-gradient(color-mix(in srgb,var(--jt-acc) 72%,#fff) 0 2px,transparent 2px),
repeating-linear-gradient(to bottom,color-mix(in srgb,var(--jt-acc) 26%,transparent) 2px 3px,transparent 3px 7px);
-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
/* ОТРЫВНОЙ КРАЙ ФИША: ряд пробитых отверстий и пунктир по верху */
.jt-perfore-top{position:relative}
.jt-perfore-top::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;z-index:3;pointer-events:none;
background:
radial-gradient(circle 3.5px at 11px 12px,rgba(0,0,0,.42) 0 3.5px,transparent 4.2px) 0 0/24px 22px repeat-x,
repeating-linear-gradient(90deg,color-mix(in srgb,var(--jt-ink) 32%,transparent) 0 7px,transparent 7px 14px) 0 0/auto 1px repeat-x}
.jt-crt-z.jt-perfore-top::before,.jt-kabin-z.jt-perfore-top::before,.jt-saha-z.jt-perfore-top::before,.jt-vektor-z.jt-perfore-top::before{
background:
radial-gradient(circle 3.5px at 11px 12px,rgba(0,0,0,.72) 0 3.5px,transparent 4.2px) 0 0/24px 22px repeat-x,
repeating-linear-gradient(90deg,color-mix(in srgb,var(--jt-isik) 34%,transparent) 0 7px,transparent 7px 14px) 0 0/auto 1px repeat-x}
/* ХРОМИРОВАННАЯ РЕЙКА поля с двумя винтами */
.jt-ray-top{position:relative}
.jt-ray-top::before{content:"";position:absolute;left:2.5%;right:2.5%;top:0;height:14px;z-index:3;pointer-events:none;
border-radius:0 0 4px 4px;
background:
radial-gradient(circle 3px at 16px 7px,color-mix(in srgb,var(--jt-ink) 52%,transparent) 0 3px,transparent 3.6px),
radial-gradient(circle 3px at calc(100% - 16px) 7px,color-mix(in srgb,var(--jt-ink) 52%,transparent) 0 3px,transparent 3.6px),
linear-gradient(color-mix(in srgb,var(--jt-ray) 42%,#fff),var(--jt-ray) 55%,color-mix(in srgb,var(--jt-ray) 60%,#000));
box-shadow:0 2px 6px -3px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6)}
/* ШЛЕЙФ ПРОВОДОВ — разделитель внутри секции: «KAB 12 · 5V · SERVİS 2026» */
hr.jt-kablo{border:0;height:0;overflow:visible;position:relative;margin:2.3rem 0;
border-top:1.5px solid color-mix(in srgb,var(--jt-ink) 28%,transparent)}
hr.jt-kablo::before{content:"";position:absolute;left:0;right:0;top:-4px;height:9px;pointer-events:none;
background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--jt-ink) 22%,transparent) 0 1px,transparent 1px 3px)}
hr.jt-kablo::after{content:attr(data-kablo);position:absolute;left:50%;top:-13px;transform:translateX(-50%);
padding:0 .8rem;font-weight:700;font-size:.64rem;line-height:1.6;letter-spacing:.2em;text-transform:uppercase;
font-family:var(--jt-nokta-font,inherit);color:color-mix(in srgb,var(--jt-ink) 76%,transparent);
background:var(--jt-kablo-bg,var(--jt-marki));
/* в две строки подпись наезжает на сам шлейф — держать в одну */
white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
/* на тёмной земле подпись шлейфа обязана быть светлой */
.jt-crt-z hr.jt-kablo,.jt-kabin-z hr.jt-kablo,.jt-saha-z hr.jt-kablo,.jt-vektor-z hr.jt-kablo{
border-top-color:color-mix(in srgb,var(--jt-isik) 34%,transparent)}
.jt-crt-z hr.jt-kablo::before,.jt-kabin-z hr.jt-kablo::before,.jt-saha-z hr.jt-kablo::before,.jt-vektor-z hr.jt-kablo::before{
background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--jt-isik) 26%,transparent) 0 1px,transparent 1px 3px)}
.jt-crt-z hr.jt-kablo::after,.jt-kabin-z hr.jt-kablo::after,.jt-saha-z hr.jt-kablo::after,.jt-vektor-z hr.jt-kablo::after{
color:color-mix(in srgb,var(--jt-isik) 94%,transparent)}
/* ==========================================================================
3. НОСИТЕЛИ — экран, корпус, табло, жетон, кнопка, сервисный фиш.
Деталь носителя рисуется ТОЛЬКО через ::before (см. канон выше).
========================================================================== */
/* ЭКРАН — основная карточка. Кинескоп в рамке корпуса: скруглённое стекло,
строчная развёртка, тёмные углы. Текст СВЕТЛЫЙ. */
.jt-ekran{position:relative;padding:1.5rem 1.6rem 1.6rem;color:var(--jt-isik);
border:7px solid color-mix(in srgb,var(--jt-kabin) 84%,#fff 8%);
border-radius:18px/26px;
background:
var(--jt-tarama),
radial-gradient(125% 110% at 50% 50%,transparent 46%,rgba(0,0,0,.62) 100%),
linear-gradient(var(--jt-ekran),color-mix(in srgb,var(--jt-ekran) 88%,var(--jt-kabin)));
box-shadow:0 14px 30px -20px rgba(0,0,0,.9),inset 0 0 36px rgba(0,0,0,.6)}
/* блик на стекле — диагональная полоса света в верхнем углу */
.jt-ekran::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(126deg,rgba(255,255,255,.17) 0 16%,transparent 44%)}
/* КОРПУС АВТОМАТА — карточка-кабинет: марки-панно по верху, панель управления снизу */
.jt-kabin{position:relative;padding:calc(30px + 1.1rem) 1.4rem 1.55rem;color:var(--jt-isik);
border-radius:8px 8px 3px 3px;
background:
repeating-linear-gradient(116deg,color-mix(in srgb,var(--jt-acc) 12%,transparent) 0 10px,transparent 10px 54px),
linear-gradient(176deg,color-mix(in srgb,var(--jt-kabin) 90%,#fff 6%),var(--jt-kabin) 70%,color-mix(in srgb,var(--jt-kabin) 76%,#000));
box-shadow:0 12px 26px -20px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.07);
border-bottom:4px solid color-mix(in srgb,var(--jt-ray) 70%,#000)}
/* марки-панно: подсвеченная полоса по верхнему краю корпуса */
.jt-kabin::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;pointer-events:none;
border-radius:7px 7px 0 0;
background:
radial-gradient(circle 2.5px at 11px 25px,color-mix(in srgb,var(--jt-jeton) 80%,#fff) 0 2.5px,transparent 3.2px) 0 0/22px 30px repeat-x,
linear-gradient(color-mix(in srgb,var(--jt-marki) 96%,#fff),color-mix(in srgb,var(--jt-marki) 80%,var(--jt-jeton)));
box-shadow:0 1px 10px color-mix(in srgb,var(--jt-marki) 40%,transparent)}
/* ТАБЛО — точечная матрица в тёмной панели: таблицы, расписания, прайс */
.jt-pano{position:relative;padding:1.35rem 1.45rem;color:var(--jt-isik);border-radius:3px;
background:linear-gradient(color-mix(in srgb,var(--jt-ekran) 94%,var(--jt-kabin)),var(--jt-ekran));
box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--jt-acc) 36%,transparent),0 10px 22px -18px rgba(0,0,0,.9)}
.jt-pano::before{content:"";position:absolute;inset:2px;pointer-events:none;
background-image:radial-gradient(circle .9px at 2px 2px,color-mix(in srgb,var(--jt-acc) 26%,transparent) 0 1px,transparent 1.5px);
background-size:5px 5px;opacity:.55}
/* ЖЕТОН — латунный кружок с насечкой: числа, цены, короткие факты */
.jt-jeton{position:relative;display:grid;place-content:center;text-align:center;
max-width:max-content;margin-inline:auto;min-width:146px;min-height:146px;aspect-ratio:1;
padding:1.5rem 1.35rem;color:var(--jt-ink);border-radius:50%;
background:
radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--jt-jeton) 20%,#fff),color-mix(in srgb,var(--jt-jeton) 62%,#fff) 58%,color-mix(in srgb,var(--jt-jeton) 86%,#000) 100%);
box-shadow:0 8px 18px -12px rgba(0,0,0,.8),inset 0 0 0 2px color-mix(in srgb,var(--jt-jeton) 90%,#000)}
/* содержимое жетона лежит ВЫШЕ насечки: позиционированный ::before иначе
перекрывает строчные подписи и выгрызает из них буквы */
.jt-jeton>*:not([class*="jt-kiv"]){position:relative;z-index:1}
/* насечка по ребру и внутреннее кольцо гурта */
.jt-jeton::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--jt-ink) 26%,transparent) 0deg 1.6deg,transparent 1.6deg 4deg);
-webkit-mask-image:radial-gradient(circle,transparent 0 calc(50% - 9px),#000 calc(50% - 8px));
mask-image:radial-gradient(circle,transparent 0 calc(50% - 9px),#000 calc(50% - 8px));
box-shadow:inset 0 0 0 11px color-mix(in srgb,var(--jt-jeton) 70%,#fff 30%)}
/* КНОПКА — прозрачный аркадный клавиш: контакты, часы, мелкие плитки */
.jt-tus{position:relative;padding:1.15rem 1.4rem 1.3rem;color:var(--jt-ink);border-radius:999px;
background:
radial-gradient(circle at 34% 24%,rgba(255,255,255,.95),transparent 56%),
linear-gradient(color-mix(in srgb,var(--jt-acc) 26%,#fff),color-mix(in srgb,var(--jt-acc) 52%,#fff));
box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--jt-acc) 58%,#000 14%),0 8px 16px -12px rgba(0,0,0,.7),
inset 0 0 0 3px color-mix(in srgb,var(--jt-ink) 22%,transparent)}
/* ободок прижимной гайки */
.jt-tus::before{content:"";position:absolute;inset:6px;pointer-events:none;border-radius:inherit;
border:1px solid color-mix(in srgb,var(--jt-ink) 16%,transparent)}
/* СЕРВИСНЫЙ ФИШ — бумага журнала: пробитый левый край, строки, рукописные пометки */
.jt-fis{position:relative;padding:1.3rem 1.4rem 1.35rem calc(1.4rem + 22px);color:var(--jt-ink);border-radius:2px;
background:
repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--jt-ink) 5%,transparent) 23px 24px),
linear-gradient(#FDFBF5,#F4F1E7);
box-shadow:0 8px 18px -14px rgba(0,0,0,.6),inset 0 0 0 1px color-mix(in srgb,var(--jt-ink) 12%,transparent)}
/* пробитый край подшивки */
.jt-fis::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22px;pointer-events:none;
background:
radial-gradient(circle 3.4px at 11px 15px,color-mix(in srgb,var(--jt-ink) 40%,transparent) 0 3.4px,transparent 4.1px) 0 0/22px 30px repeat-y,
linear-gradient(90deg,color-mix(in srgb,var(--jt-ink) 7%,transparent),transparent)}
/* Отступы, ЗАЩИЩАЮЩИЕ содержимое от собственной детали носителя (марки,
пробитый край). Дублированный класс — чтобы правило сайта не перебило. */
.jt-kabin.jt-kabin{padding-top:calc(30px + 1.1rem)}
.jt-fis.jt-fis{padding-left:calc(1.4rem + 22px)}
.jt-pano.jt-pano{padding:1.35rem 1.45rem}
.jt-ekran.jt-ekran{padding-inline:1.6rem}
/* Тёмные носители красят текст сами: элементы без собственного kit-класса
наследуют светлый цвет, иначе тёмный текст сайта тонет в экране. */
.jt-ekran.jt-ekran,.jt-kabin.jt-kabin,.jt-pano.jt-pano{color:var(--jt-isik)}
.jt-ekran.jt-ekran :where(p,li,dd,dt,td,th,figcaption,blockquote,small,em,strong,b,i,h1,h2,h3,h4,h5,h6,label,summary):not([class*="jt-"]),
.jt-kabin.jt-kabin :where(p,li,dd,dt,td,th,figcaption,blockquote,small,em,strong,b,i,h1,h2,h3,h4,h5,h6,label,summary):not([class*="jt-"]),
.jt-pano.jt-pano :where(p,li,dd,dt,td,th,figcaption,blockquote,small,em,strong,b,i,h1,h2,h3,h4,h5,h6,label,summary):not([class*="jt-"]){color:inherit}
.jt-ekran.jt-ekran a:not([class]),.jt-kabin.jt-kabin a:not([class]),.jt-pano.jt-pano a:not([class]){
color:color-mix(in srgb,var(--jt-acc) 72%,#fff)}
/* светлые носители — наоборот: тёмная тушь */
.jt-jeton.jt-jeton,.jt-tus.jt-tus,.jt-fis.jt-fis{color:var(--jt-ink)}
.jt-jeton.jt-jeton :where(p,li,small,em,strong,b,span,h1,h2,h3,h4,h5,h6):not([class*="jt-"]),
.jt-tus.jt-tus :where(p,li,small,em,strong,b,span,h1,h2,h3,h4,h5,h6):not([class*="jt-"]),
.jt-fis.jt-fis :where(p,li,dd,dt,td,th,small,em,strong,b,h1,h2,h3,h4,h5,h6):not([class*="jt-"]){color:inherit}
.jt-jeton.jt-jeton a:not([class]),.jt-tus.jt-tus a:not([class]),.jt-fis.jt-fis a:not([class]){
color:color-mix(in srgb,var(--jt-acc-2) 70%,#000)}
/* ==========================================================================
4. РАСКЛАДКИ — ряд автоматов у стены, банк экранов, путь жетона.
========================================================================== */
/* РЯД АВТОМАТОВ: корпуса стоят на одном полу, высоты разные */
:where(.jt-kabin-sira){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
/* корпуса стоят ОДНИМ основанием на полу: поднимать их margin'ом нельзя —
ряд читается как сбитая вёрстка, а не как разные по высоте автоматы */
.jt-kabin-sira{gap:1.05rem;align-items:end;position:relative;
padding-bottom:14px;border-bottom:3px solid color-mix(in srgb,var(--jt-ray) 46%,transparent)}
.jt-kabin-sira>*:nth-child(3n+2){padding-top:calc(30px + 2rem)}
.jt-kabin-sira>*:nth-child(4n+3){padding-top:calc(30px + 1.6rem)}
/* БАНК ЭКРАНОВ: каталог как стена мониторов, ряды со смещением */
:where(.jt-pano-dizi){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.jt-pano-dizi{gap:1.1rem}
.jt-pano-dizi>*:nth-child(even){transform:translateY(14px)}
/* ПУТЬ ЖЕТОНА: шаги нанизаны на монетоприёмник, идущий сверху вниз слева */
.jt-jeton-yolu{position:relative;display:grid;gap:1.15rem;padding-left:46px}
.jt-jeton-yolu::before{content:"";position:absolute;left:17px;top:6px;bottom:6px;width:10px;border-radius:5px;
background:
radial-gradient(circle 6px at 5px 22px,color-mix(in srgb,var(--jt-jeton) 86%,#000 6%) 0 6px,transparent 7px) 0 0/10px 62px repeat-y,
linear-gradient(color-mix(in srgb,var(--jt-ink) 42%,transparent),color-mix(in srgb,var(--jt-ink) 22%,transparent))}
.jt-crt-z .jt-jeton-yolu::before,.jt-kabin-z .jt-jeton-yolu::before,.jt-saha-z .jt-jeton-yolu::before,.jt-vektor-z .jt-jeton-yolu::before{
background:
radial-gradient(circle 5px at 5px 26px,color-mix(in srgb,var(--jt-jeton) 88%,#fff) 0 5px,transparent 6px) 0 0/10px 96px repeat-y,
linear-gradient(color-mix(in srgb,var(--jt-isik) 30%,transparent),color-mix(in srgb,var(--jt-isik) 14%,transparent))}
/* РАЗНОБОЙ: один носитель, но пропорции в ряду разные */
.jt-cesit>*:nth-child(3n+1){grid-column:span 2}
@media (max-width:760px){.jt-cesit>*:nth-child(3n+1){grid-column:auto}}
/* ==========================================================================
5. МЕТКИ ЗАЛА — инвентарная наклейка, жетоны, номер корпуса, год, рекорд.
========================================================================== */
/* инвентарная наклейка с штрих-кодом */
.jt-etiket{display:inline-block;padding:.3rem .8rem;color:var(--jt-ink);
font-weight:700;font-size:.66rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;
font-family:var(--jt-nokta-font,inherit);
background:
repeating-linear-gradient(90deg,color-mix(in srgb,var(--jt-ink) 70%,transparent) 0 1px,transparent 1px 3px) 0 100%/100% 4px no-repeat,
linear-gradient(#FDFBF4,#EFEADC);
border:1px solid color-mix(in srgb,var(--jt-ink) 22%,transparent);border-radius:2px;
transform:rotate(-.6deg)}
/* счётчик жетонов: латунный кружок перед числом */
.jt-jeton-m{display:inline-flex;align-items:center;gap:.45rem;padding:.26rem .8rem .26rem .5rem;
color:var(--jt-ink);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
background:color-mix(in srgb,var(--jt-jeton) 30%,#fff);border-radius:999px;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--jt-jeton) 70%,#000 10%)}
.jt-jeton-m::before{content:"";width:13px;height:13px;border-radius:50%;flex:0 0 13px;
background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--jt-jeton) 18%,#fff),color-mix(in srgb,var(--jt-jeton) 88%,#000));
box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
/* номер корпуса: трафарет по боковине */
.jt-no{display:inline-block;padding:.28rem .72rem;color:var(--jt-isik);
font-family:var(--jt-nokta-font,inherit);font-weight:700;font-size:.68rem;letter-spacing:.2em;
background:color-mix(in srgb,var(--jt-ink) 86%,#000);border-radius:2px;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--jt-isik) 26%,transparent)}
/* год выпуска: выбитое клеймо на шильдике */
.jt-yil{display:inline-block;padding:.22rem .7rem;color:color-mix(in srgb,var(--jt-ink) 88%,transparent);
font-family:var(--jt-nokta-font,inherit);font-weight:700;font-size:.66rem;letter-spacing:.16em;
border:1.5px solid color-mix(in srgb,var(--jt-ink) 34%,transparent);border-radius:999px}
.jt-crt-z .jt-yil,.jt-kabin-z .jt-yil,.jt-saha-z .jt-yil,.jt-vektor-z .jt-yil,
.jt-ekran .jt-yil,.jt-kabin .jt-yil,.jt-pano .jt-yil{
color:color-mix(in srgb,var(--jt-isik) 92%,transparent);border-color:color-mix(in srgb,var(--jt-isik) 40%,transparent)}
/* РЕКОРД — полоса на носителе (::after), как строка «HIGH SCORE» на экране */
:where(.jt-ekran,.jt-kabin,.jt-pano,.jt-jeton,.jt-tus,.jt-fis).jt-skor-m[data-skor]::after{
content:attr(data-skor);position:absolute;top:10px;right:14px;left:auto;bottom:auto;transform:none;animation:none;
padding:.2rem .6rem;border-radius:2px;
font-family:var(--jt-nokta-font,inherit);font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--jt-ekran);background:color-mix(in srgb,var(--jt-acc) 86%,#fff);
box-shadow:0 0 12px color-mix(in srgb,var(--jt-acc) 46%,transparent)}
.jt-ekran.jt-skor-m[data-skor]::after{top:12px;right:16px}
/* ЛЕНТА МАРКИ — надпись поперёк верха носителя (::after) */
:where(.jt-ekran,.jt-kabin,.jt-pano,.jt-fis).jt-serit[data-serit]::after{
content:attr(data-serit);position:absolute;top:0;left:0;right:auto;bottom:auto;transform:none;animation:none;
padding:.26rem 1rem;border-radius:0 0 4px 0;
font-family:var(--jt-nokta-font,inherit);font-weight:700;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--jt-ekran);background:color-mix(in srgb,var(--jt-jeton) 76%,#fff)}
.jt-kabin.jt-serit[data-serit]::after{top:30px}
/* Метка лежит в ВЕРХНЕЙ полосе носителя, значит полосу надо зарезервировать:
без этого лента садилась на первую строку формы («REZERVASYON» поверх
«Ad Soyad»), а рекорд подпирал крупную цифру сверху. */
:where(.jt-ekran,.jt-pano,.jt-fis,.jt-tus,.jt-jeton).jt-serit[data-serit]{padding-top:44px}
.jt-kabin.jt-serit[data-serit]{padding-top:calc(30px + 1.1rem + 22px)}
:where(.jt-ekran,.jt-pano,.jt-fis,.jt-tus).jt-skor-m[data-skor]{padding-top:38px}
/* ==========================================================================
6. ТИПОГРАФИКА ЗАЛА — точечная матрица, семисегмент, марки, шильдик, рука.
========================================================================== */
/* ЗАГОЛОВОК ТОЧЕЧНОЙ МАТРИЦЫ: светящиеся буквы в тёмном окне табло */
.jt-nokta{display:inline-block;padding:.35rem .85rem;border-radius:3px;
font-family:var(--jt-nokta-font,inherit);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:color-mix(in srgb,var(--jt-acc) 84%,#fff);
background:
radial-gradient(circle .9px at 2px 2px,rgba(255,255,255,.16) 0 1px,transparent 1.5px) 0 0/5px 5px,
linear-gradient(color-mix(in srgb,var(--jt-ekran) 92%,var(--jt-kabin)),var(--jt-ekran));
text-shadow:0 0 10px color-mix(in srgb,var(--jt-acc) 52%,transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--jt-acc) 28%,transparent)}
/* СЕМИСЕГМЕНТ: наклонные цифры счётчика в тёмном окошке */
.jt-yedi{display:inline-block;padding:.25rem .7rem;border-radius:2px;
font-family:var(--jt-nokta-font,inherit);font-weight:700;font-variant-numeric:tabular-nums;
letter-spacing:.12em;color:color-mix(in srgb,var(--jt-jeton) 40%,#FFE9A8);
background:linear-gradient(color-mix(in srgb,var(--jt-ekran) 88%,#000),var(--jt-ekran));
text-shadow:0 0 9px color-mix(in srgb,var(--jt-jeton) 60%,transparent);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);transform:skewX(-7deg)}
/* МАРКИ-НАДПИСЬ: крупные капсы подсвеченного панно с рядом ламп под строкой */
/* display:inline-block ставить НЕЛЬЗЯ: заголовок встаёт в одну строку с
eyebrow'ом jt-nokta. Блок шириной по содержимому — ряд ламп по длине строки */
.jt-marki-yazi{position:relative;display:block;width:max-content;max-width:100%;padding:.1rem 0 .55rem;
font-family:var(--jt-bas-font,inherit);font-weight:900;letter-spacing:.015em;text-transform:uppercase;
line-height:.98;color:var(--jt-ink);text-wrap:balance}
.jt-marki-yazi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;
background:radial-gradient(circle 3px at 7px 3.5px,color-mix(in srgb,var(--jt-jeton) 72%,#fff) 0 3px,transparent 3.8px) 0 0/18px 7px repeat-x}
.jt-crt-z .jt-marki-yazi,.jt-kabin-z .jt-marki-yazi,.jt-saha-z .jt-marki-yazi,.jt-vektor-z .jt-marki-yazi,
.jt-ekran .jt-marki-yazi,.jt-kabin .jt-marki-yazi,.jt-pano .jt-marki-yazi{
color:var(--jt-isik);text-shadow:0 0 22px color-mix(in srgb,var(--jt-marki) 40%,transparent)}
/* ШИЛЬДИК: мелкая строка характеристик автомата */
.jt-kunye{font-family:var(--jt-nokta-font,inherit);font-size:.7rem;line-height:1.6;
letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--jt-ink) 82%,transparent)}
.jt-crt-z .jt-kunye,.jt-kabin-z .jt-kunye,.jt-saha-z .jt-kunye,.jt-vektor-z .jt-kunye,
.jt-ekran .jt-kunye,.jt-kabin .jt-kunye,.jt-pano .jt-kunye{
color:color-mix(in srgb,var(--jt-isik) 90%,transparent)}
/* РУКА ОПЕРАТОРА: пометка маркером на корпусе */
.jt-el{font-family:var(--jt-el-font,inherit);font-size:1.02rem;line-height:1.5;
color:color-mix(in srgb,var(--jt-acc-2) 62%,#000);transform:rotate(-.8deg);display:inline-block}
.jt-el.jt-buyuk{font-size:1.5rem;line-height:1.35}
.jt-crt-z .jt-el,.jt-kabin-z .jt-el,.jt-saha-z .jt-el,.jt-vektor-z .jt-el,
.jt-ekran .jt-el,.jt-kabin .jt-el,.jt-pano .jt-el{
color:color-mix(in srgb,var(--jt-jeton) 34%,#FFF0C4)}
/* СВЕТЛЫЙ НОСИТЕЛЬ НА ТЁМНОЙ ЗЕМЛЕ: правила земли выше красят типографику
светлым, и на жетоне/кнопке/фише она исчезает. Эти правила идут ПОСЛЕ
земельных и возвращают тёмную тушь. Трогать порядок нельзя. */
.jt-jeton .jt-kunye,.jt-tus .jt-kunye,.jt-fis .jt-kunye{color:color-mix(in srgb,var(--jt-ink) 82%,transparent)}
.jt-jeton .jt-el,.jt-tus .jt-el,.jt-fis .jt-el{color:color-mix(in srgb,var(--jt-acc-2) 62%,#000)}
.jt-jeton .jt-marki-yazi,.jt-tus .jt-marki-yazi,.jt-fis .jt-marki-yazi{color:var(--jt-ink);text-shadow:none}
.jt-jeton .jt-yil,.jt-tus .jt-yil,.jt-fis .jt-yil{
color:color-mix(in srgb,var(--jt-ink) 88%,transparent);border-color:color-mix(in srgb,var(--jt-ink) 34%,transparent)}
/* КЛЕЙМО-ЛОГОТИП: монограмма, выбитая на жетоне */
.jt-damga{display:inline-grid;place-content:center;width:40px;height:40px;border-radius:50%;
font-family:var(--jt-bas-font,inherit);font-weight:900;font-size:.95rem;letter-spacing:.02em;
color:var(--jt-ekran);
background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--jt-jeton) 14%,#fff),color-mix(in srgb,var(--jt-jeton) 72%,#fff) 56%,color-mix(in srgb,var(--jt-jeton) 92%,#000));
box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--jt-jeton) 94%,#000),0 2px 6px -3px rgba(0,0,0,.7)}
/* ==========================================================================
7. ИСКРЫ ЗАЛА — пиксель, жетон, шарик, светодиод, провод, стрелка, пометка.
Лежат в земле секции (position:relative у земли), по 3-5 на секцию.
========================================================================== */
.jt-kiv{position:absolute;pointer-events:none;z-index:0}
/* в шапке и подвале искры обязаны уходить ПОД текст пунктов меню */
:where(header,.site-header,.header,footer,.site-footer) .jt-kiv{z-index:-1}
.jt-kiv--piksel{width:9px;height:9px;background:color-mix(in srgb,var(--jt-acc) 70%,transparent);
box-shadow:14px 9px 0 color-mix(in srgb,var(--jt-acc) 38%,transparent),-11px 17px 0 color-mix(in srgb,var(--jt-acc-2) 34%,transparent)}
.jt-kiv--jeton{width:17px;height:17px;border-radius:50%;
background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--jt-jeton) 16%,#fff),color-mix(in srgb,var(--jt-jeton) 84%,#000));
box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.jt-kiv--top{width:15px;height:15px;border-radius:50%;
background:radial-gradient(circle at 32% 26%,#fff,color-mix(in srgb,var(--jt-ray) 70%,#fff) 42%,color-mix(in srgb,var(--jt-ray) 40%,#000));
box-shadow:0 2px 5px -2px rgba(0,0,0,.7)}
.jt-kiv--led{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--jt-acc-2) 82%,#fff);
box-shadow:0 0 12px color-mix(in srgb,var(--jt-acc-2) 68%,transparent)}
.jt-kiv--kablo{width:44px;height:22px;border:2px solid color-mix(in srgb,var(--jt-acc) 40%,transparent);
border-top:0;border-left:0;border-radius:0 0 22px 0;transform:rotate(-14deg)}
.jt-kiv--ok{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;
border-bottom:13px solid color-mix(in srgb,var(--jt-jeton) 72%,transparent)}
.jt-kiv--not{font-family:var(--jt-el-font,inherit);font-weight:600;font-size:.74rem;line-height:1.2;
color:color-mix(in srgb,var(--jt-ink) 76%,transparent);transform:rotate(-3deg);max-width:150px}
.jt-crt-z .jt-kiv--not,.jt-kabin-z .jt-kiv--not,.jt-saha-z .jt-kiv--not,.jt-vektor-z .jt-kiv--not{
color:color-mix(in srgb,var(--jt-isik) 70%,transparent)}
/* ==========================================================================
8. ЭФФЕКТЫ — свет люминофора за курсором, бегущая строка развёртки,
блик по стеклу, бегущие лампы марки.
========================================================================== */
/* свет люминофора идёт за курсором: --jt-mx/--jt-my из pointermove */
.jt-fosfor-fx::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(320px 320px at var(--jt-mx,50%) var(--jt-my,40%),
color-mix(in srgb,var(--jt-acc) 20%,transparent),transparent 70%);
transition:background-position .2s linear}
/* бегущая строка развёртки по секции */
.jt-tarama-fx::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:0;pointer-events:none;
background:linear-gradient(transparent,color-mix(in srgb,var(--jt-acc) 12%,transparent) 60%,transparent);
animation:jt-sweep 7.5s linear infinite}
@keyframes jt-sweep{from{transform:translateY(-120px)}to{transform:translateY(100vh)}}
/* блик по стеклу носителя (::after — несовместим с jt-skor-m/jt-serit/jt-ampul) */
.jt-parlak::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(118deg,transparent 0 38%,rgba(255,255,255,.2) 46%,transparent 56%)}
/* бегущие лампы марки по верху носителя */
.jt-ampul::after{content:"";position:absolute;left:8px;right:8px;top:7px;height:7px;pointer-events:none;
background:radial-gradient(circle 3px at 7px 3.5px,color-mix(in srgb,var(--jt-jeton) 78%,#fff) 0 3px,transparent 3.8px) 0 0/19px 7px repeat-x;
animation:jt-chase 1.6s steps(1) infinite}
@keyframes jt-chase{0%{opacity:1}50%{opacity:.42}100%{opacity:1}}
/* ==========================================================================
9. ФОТО, ПОДПИСИ, ССЫЛКИ, МОБИЛЬНЫЙ, REDUCED-MOTION
========================================================================== */
/* фото в экране: стекло обрезает углы вместе с картинкой */
.jt-ekran img,.jt-ekran picture img{border-radius:12px/16px}
.jt-kabin img,.jt-pano img{border-radius:3px}
/* подпись ПОВЕРХ фото обязана иметь свою плашку: тени мало на светлом кадре */
:where(.jt-ekran,.jt-kabin,.jt-pano,.jt-fis,.jt-tus) :is(figure,.photo,.gorsel):has(img) figcaption{
background:rgba(9,12,18,.86);border-radius:2px;padding:.5rem .7rem}
:where(.jt-ekran,.jt-kabin,.jt-pano,.jt-fis,.jt-tus) :is(figure,.photo,.gorsel):has(img) figcaption.jt-el,
:where(.jt-ekran,.jt-kabin,.jt-pano,.jt-fis,.jt-tus) :is(figure,.photo,.gorsel):has(img) figcaption.jt-kunye,
:where(.jt-ekran,.jt-kabin,.jt-pano,.jt-fis,.jt-tus) :is(figure,.photo,.gorsel):has(img) figcaption:not([class]){
color:#F2F6F3}
/* ссылки внутри светлых носителей: тёмный вариант акцента */
.jt-fis a:not([class*="btn"]),.jt-jeton a:not([class*="btn"]),.jt-tus a:not([class*="btn"]){color:color-mix(in srgb,var(--jt-acc-2) 68%,#000)}
@media (max-width:760px){
.jt-ekran{padding:1.2rem 1.15rem 1.25rem;border-width:5px;border-radius:14px/20px}
.jt-ekran.jt-ekran{padding-inline:1.15rem}
.jt-kabin{padding:calc(26px + .9rem) 1.1rem 1.25rem}
.jt-kabin.jt-kabin{padding-top:calc(26px + .9rem)}
.jt-kabin::before{height:26px}
.jt-kabin.jt-serit[data-serit]::after{top:26px}
.jt-fis{padding:1.1rem 1.1rem 1.15rem calc(1.1rem + 20px)}
.jt-fis.jt-fis{padding-left:calc(1.1rem + 20px)}
.jt-jeton{min-width:128px;min-height:128px;padding:1.2rem 1rem}
.jt-jeton-yolu{padding-left:38px}
.jt-jeton-yolu::before{left:13px}
.jt-pano-dizi>*:nth-child(even){transform:none}
.jt-kabin-sira>*:nth-child(3n+2),.jt-kabin-sira>*:nth-child(4n+3){margin-bottom:0}
:where(.jt-ekran,.jt-kabin,.jt-pano,.jt-jeton,.jt-tus,.jt-fis).jt-skor-m[data-skor]::after{top:8px;right:10px;font-size:.58rem}
.jt-tarama-top::before{height:18px}
.jt-perfore-top::before{height:18px}
}
@media (prefers-reduced-motion:reduce){
.jt-tarama-fx::after,.jt-ampul::after{animation:none}
}