/. На тоже можно:
position там не переопределяется (иначе ломается sticky и fixed cookie).
========================================================================== */
.sb-havuz,.sb-karamel-z,.sb-kabuk,.sb-sutzar,.sb-mermer-z,.sb-kazan-z,.sb-nisasta{isolation:isolate}
:where(.sb-havuz,.sb-karamel-z,.sb-kabuk,.sb-sutzar,.sb-mermer-z,.sb-kazan-z,.sb-nisasta):not(header,.site-header,.header,[class*="drawer"]){position:relative;overflow:clip}
header.sb-havuz,header.sb-karamel-z,header.sb-kabuk,header.sb-sutzar,header.sb-mermer-z,header.sb-kazan-z,header.sb-nisasta{overflow:visible}
.sb-havuz::before,.sb-karamel-z::before,.sb-kabuk::before,.sb-sutzar::before,.sb-mermer-z::before,.sb-kazan-z::before,.sb-nisasta::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:var(--sb-tanecik);background-size:160px 160px;opacity:.14}
/* сироп в котле: глубина, мениск у верхнего края, медленный блик */
.sb-havuz.sb-havuz.sb-havuz{background:
radial-gradient(150% 90% at 50% -24%,rgba(255,255,255,.5),transparent 58%),
linear-gradient(rgba(255,255,255,.22),rgba(0,0,0,.12) 72%,rgba(0,0,0,.2)),
linear-gradient(104deg,var(--sb-serbet-2),var(--sb-serbet) 46%,var(--sb-karamel));
box-shadow:inset 0 14px 22px -16px rgba(255,255,255,.75),inset 0 -16px 26px -18px rgba(0,0,0,.6)}
/* карамельный лист: тянутые разводы и пузырьковые кратеры */
.sb-karamel-z.sb-karamel-z.sb-karamel-z{background:
radial-gradient(circle at 18% 28%,rgba(255,255,255,.3) 0 3px,transparent 4px),
radial-gradient(circle at 63% 61%,rgba(255,255,255,.22) 0 5px,transparent 6px),
radial-gradient(circle at 84% 22%,rgba(255,255,255,.18) 0 4px,transparent 5px),
repeating-linear-gradient(118deg,rgba(255,255,255,.14) 0 3px,transparent 3px 22px),
linear-gradient(126deg,var(--sb-karamel),color-mix(in srgb,var(--sb-karamel) 60%,#000) 72%);
background-size:220px 190px,310px 260px,270px 230px,auto,auto}
/* сахарная корка: кристаллы на тёмном, холодный блеск */
.sb-kabuk.sb-kabuk.sb-kabuk{background:
radial-gradient(circle at 14% 20%,var(--sb-kristal) 0 1.4px,transparent 1.8px),
radial-gradient(circle at 57% 44%,var(--sb-kristal) 0 1.1px,transparent 1.5px),
radial-gradient(circle at 33% 77%,rgba(255,255,255,.45) 0 1.6px,transparent 2px),
radial-gradient(circle at 88% 83%,rgba(255,255,255,.4) 0 1.2px,transparent 1.6px),
linear-gradient(rgba(255,255,255,.08),transparent 40%),
var(--sb-koyu);
background-size:91px 79px,127px 113px,83px 97px,109px 101px,auto,auto}
/* молочная плёнка: матовая поверхность сютлача со «сморщенной» кожицей */
.sb-sutzar.sb-sutzar.sb-sutzar{background:
repeating-radial-gradient(ellipse 160px 42px at 30% 18%,rgba(0,0,0,.035) 0 1px,transparent 1px 14px),
radial-gradient(120% 70% at 50% 0,rgba(255,255,255,.85),transparent 70%),
var(--sb-sut)}
/* мраморная плита для остывания сахара */
.sb-mermer-z.sb-mermer-z.sb-mermer-z{background:
repeating-linear-gradient(72deg,rgba(0,0,0,.055) 0 1px,transparent 1px 3px,rgba(0,0,0,.03) 3px 4px,transparent 4px 26px),
repeating-linear-gradient(-58deg,rgba(0,0,0,.04) 0 1px,transparent 1px 38px),
radial-gradient(130% 80% at 24% 10%,rgba(255,255,255,.9),transparent 64%),
var(--sb-mermer)}
/* кованая медь казана: радиальные следы молотка */
.sb-kazan-z.sb-kazan-z.sb-kazan-z{background:
repeating-radial-gradient(circle at 50% 120%,rgba(255,255,255,.16) 0 2px,transparent 2px 13px),
repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 1px,transparent 1px 9px),
radial-gradient(90% 70% at 50% 120%,color-mix(in srgb,var(--sb-bakir) 72%,#FFD9A8),transparent 70%),
var(--sb-bakir)}
/* крахмал/пудра: светлая присыпанная доска */
.sb-nisasta.sb-nisasta.sb-nisasta{background:
radial-gradient(circle at 22% 32%,rgba(255,255,255,.95) 0 2.2px,transparent 2.6px),
radial-gradient(circle at 68% 64%,rgba(255,255,255,.8) 0 1.8px,transparent 2.2px),
radial-gradient(circle at 44% 86%,rgba(255,255,255,.7) 0 1.4px,transparent 1.8px),
linear-gradient(rgba(255,255,255,.5),transparent 52%),
color-mix(in srgb,var(--sb-sut) 82%,var(--sb-mermer));
background-size:117px 103px,143px 129px,97px 111px,auto,auto}
/* ==========================================================================
2. КРОМКИ СЕКЦИЙ — край разлитого, а не прямая линия
========================================================================== */
/* налитый край: волна с «губой» сиропа */
.sb-akinti-top{clip-path:polygon(0 2.2%,6% .9%,13% 2.6%,21% 1.1%,29% 2.9%,37% 1.4%,45% 3.1%,53% 1.3%,61% 2.8%,69% 1%,77% 2.6%,85% 1.2%,93% 2.7%,100% 1.4%,100% 100%,0 100%);margin-top:-1rem}
/* пенная корка: мелкие пузырьковые фестоны по верху */
.sb-kopuk-top{clip-path:polygon(0 2.6%,3% .2%,6% 2.6%,9% .2%,12% 2.6%,15% .2%,18% 2.6%,21% .2%,24% 2.6%,27% .2%,30% 2.6%,33% .2%,36% 2.6%,39% .2%,42% 2.6%,45% .2%,48% 2.6%,51% .2%,54% 2.6%,57% .2%,60% 2.6%,63% .2%,66% 2.6%,69% .2%,72% 2.6%,75% .2%,78% 2.6%,81% .2%,84% 2.6%,87% .2%,90% 2.6%,93% .2%,96% 2.6%,99% .2%,100% 2.6%,100% 100%,0 100%);margin-top:-.7rem}
/* сахарная нить между секциями: провисающая струна с бусиной */
.sb-tel-top{position:relative}
.sb-tel-top::before{content:"";position:absolute;left:8%;right:8%;top:-16px;height:18px;z-index:3;pointer-events:none;
border-top:2px solid color-mix(in srgb,var(--sb-serbet-2) 80%,#fff 10%);
border-radius:0 0 50% 50%/0 0 100% 100%;opacity:.85}
.sb-tel-top::after{content:"";position:absolute;left:50%;top:-6px;width:9px;height:11px;z-index:4;pointer-events:none;
transform:translateX(-50%);border-radius:50% 50% 46% 46%/42% 42% 58% 58%;
background:linear-gradient(var(--sb-serbet-2),var(--sb-serbet));
box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7)}
/* шкала кıvam — разделитель-«термометр» внутри секции */
hr.sb-kivam{border:0;height:0;overflow:visible;border-top:2px solid color-mix(in srgb,var(--sb-ink) 26%,transparent);
margin:2.3rem 0;position:relative}
hr.sb-kivam::before{content:"";position:absolute;left:0;right:0;top:-5px;height:10px;pointer-events:none;
background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--sb-ink) 30%,transparent) 0 1px,transparent 1px 26px)}
hr.sb-kivam::after{content:attr(data-kivam);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);/* подпись центрируется по линии: длинная надпись переносится и не свисает */
padding:0 .7rem;font-weight:700;font-size:.64rem;line-height:1.6;letter-spacing:.2em;text-transform:uppercase;
font-family:var(--sb-bas-font,inherit);color:color-mix(in srgb,var(--sb-ink) 74%,transparent);
background:var(--sb-kivam-bg,var(--sb-sut))}
/* ==========================================================================
3. НОСИТЕЛИ — посуда и сам десерт. Каждая карточка/цена/отзыв — один предмет.
========================================================================== */
/* глазурованная миска: круглый верх, внутренняя тень, блик на борту */
.sb-kase{position:relative;padding:1.5rem 1.4rem 2.4rem;color:var(--sb-ink);
/* «щёки» чаши в процентах съедали подпись у нижнего края (overflow:hidden
из sb-parlak): фиксированный радиус + воздух снизу держат текст внутри */
border-radius:14px 14px 92px 92px/14px 14px 34px 34px;
background:
radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.9),transparent 62%),
linear-gradient(rgba(255,255,255,.5),rgba(0,0,0,.06) 78%),
var(--sb-sut);
box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 -10px 18px -14px rgba(0,0,0,.55) inset,
0 14px 22px -16px rgba(0,0,0,.5);
transition:transform .35s ease,box-shadow .35s ease}
.sb-kase:hover{transform:translateY(-4px);box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 22px 28px -18px rgba(0,0,0,.5);z-index:5}
.sb-kase::before{content:"";position:absolute;left:14px;right:14px;top:7px;height:7px;border-radius:50%;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.85) 22%,transparent 46%,rgba(255,255,255,.55) 78%,transparent)}
/* поднос с плёнкой сиропа на дне */
.sb-tepsi{position:relative;padding:1.3rem 1.4rem;color:var(--sb-ink);border-radius:5px;
background:
linear-gradient(104deg,rgba(255,255,255,.55) 0 12%,transparent 30% 62%,rgba(255,255,255,.42) 76%,transparent 92%),
linear-gradient(rgba(255,255,255,.35),color-mix(in srgb,var(--sb-serbet) 16%,transparent)),
var(--sb-sut);
border:3px solid color-mix(in srgb,var(--sb-bakir) 62%,#FFD9A8 18%);
box-shadow:0 0 0 1px rgba(0,0,0,.18) inset,0 12px 20px -14px rgba(0,0,0,.5)}
/* форма-кalıp: рифлёные бока, вдавленный профиль */
.sb-kalip{position:relative;padding:1.4rem calc(34px + .55rem);color:var(--sb-ink);/* боковые рифления занимают по 34px — текст должен начинаться за ними */
background:
repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 2px,rgba(255,255,255,.62) 2px 7px,transparent 7px 11px) 0 0/34px 100% no-repeat,
repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 2px,rgba(255,255,255,.62) 2px 7px,transparent 7px 11px) 100% 0/34px 100% no-repeat,
linear-gradient(rgba(0,0,0,.05),rgba(255,255,255,.55) 42%,rgba(0,0,0,.06)),
color-mix(in srgb,var(--sb-mermer) 86%,var(--sb-serbet) 6%);
border-radius:3px 3px 10px 10px;
box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 -6px 12px -10px rgba(0,0,0,.45) inset,
0 10px 18px -14px rgba(0,0,0,.5)}
/* срез десерта: слои видны по левому краю */
.sb-dilim{position:relative;padding:1.3rem 1.4rem 1.3rem calc(1.4rem + 22px);color:var(--sb-ink);
background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0) 52%),var(--sb-sut);
box-shadow:0 10px 18px -14px rgba(0,0,0,.5)}
.sb-dilim::before{content:"";position:absolute;left:0;top:0;bottom:0;width:20px;pointer-events:none;
background:linear-gradient(
color-mix(in srgb,var(--sb-serbet) 88%,#fff 4%) 0 20%,
color-mix(in srgb,var(--sb-sut) 96%,#000 2%) 20% 32%,
color-mix(in srgb,var(--sb-karamel) 86%,#fff 4%) 32% 52%,
color-mix(in srgb,var(--sb-sut) 92%,#000 4%) 52% 70%,
color-mix(in srgb,var(--sb-acc-2) 70%,#fff 12%) 70% 80%,
color-mix(in srgb,var(--sb-karamel) 70%,#000 18%) 80% 100%);
box-shadow:1px 0 0 rgba(0,0,0,.3),inset -1px 0 0 rgba(0,0,0,.18)}
/* политый глазурью блок: глянец сверху и застывшая капля на нижнем крае */
.sb-sirli{position:relative;padding:1.4rem 1.5rem;color:var(--sb-ink);border-radius:4px;
background:
linear-gradient(170deg,color-mix(in srgb,var(--sb-serbet-2) 70%,#fff 22%) 0 26%,transparent 26%),
linear-gradient(rgba(255,255,255,.5),rgba(0,0,0,.05)),
var(--sb-sut);
box-shadow:0 12px 20px -15px rgba(0,0,0,.5)}
.sb-sirli::after{content:"";position:absolute;left:12%;right:12%;top:calc(26% - 2px);height:16px;pointer-events:none;
background:radial-gradient(11px 15px at 14% 0,color-mix(in srgb,var(--sb-serbet-2) 70%,#fff 22%) 0 96%,transparent 100%),
radial-gradient(8px 11px at 42% 0,color-mix(in srgb,var(--sb-serbet-2) 70%,#fff 22%) 0 96%,transparent 100%),
radial-gradient(12px 17px at 73% 0,color-mix(in srgb,var(--sb-serbet-2) 70%,#fff 22%) 0 96%,transparent 100%)}
/* стакан-тюльпан: для числа, цены, короткого факта */
.sb-bardak{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:.15rem;
padding:.7rem 1.2rem 1.05rem;color:var(--sb-ink);min-width:122px;
background:
linear-gradient(104deg,rgba(255,255,255,.85) 0 14%,rgba(255,255,255,.1) 28% 56%,rgba(255,255,255,.7) 70%,transparent 86%),
linear-gradient(color-mix(in srgb,var(--sb-serbet) 26%,var(--sb-cam)) 0 34%,color-mix(in srgb,var(--sb-serbet) 54%,var(--sb-cam)) 100%);
clip-path:polygon(6% 0,94% 0,86% 44%,78% 100%,22% 100%,14% 44%);
filter:drop-shadow(0 6px 6px rgba(0,0,0,.28)) drop-shadow(0 0 0 rgba(0,0,0,.4))}
.sb-bardak::after{content:"";position:absolute;left:24%;right:24%;bottom:2px;height:4px;border-radius:50%;pointer-events:none;
background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.4),transparent 74%)}
/* ==========================================================================
4. РАСКЛАДКА — поднос и слои, вместо «стены одинаковых карточек»
========================================================================== */
/* каталог на подносе: бортик, плёнка сиропа, предметы стоят в ряд */
.sb-tezgah{display:grid;gap:16px;padding:18px;border-radius:6px;
background:
linear-gradient(104deg,rgba(255,255,255,.4) 0 14%,transparent 32% 64%,rgba(255,255,255,.3) 78%,transparent 94%),
linear-gradient(rgba(255,255,255,.28),color-mix(in srgb,var(--sb-serbet) 20%,transparent)),
color-mix(in srgb,var(--sb-mermer) 88%,var(--sb-bakir) 8%);
border:4px solid color-mix(in srgb,var(--sb-bakir) 58%,#FFD9A8 16%);
box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 -6px 14px rgba(0,0,0,.16) inset,0 16px 28px -20px rgba(0,0,0,.55)}
.sb-tezgah>*{position:relative}
.sb-tezgah>*::after{content:"";position:absolute;left:8%;right:8%;bottom:-8px;height:8px;border-radius:50%;pointer-events:none;
background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--sb-serbet) 46%,transparent),transparent 72%)}
/* слоёная выкладка: каждая строка — слой десерта, край слоя виден */
.sb-kat{display:grid;gap:0}
.sb-kat>*{position:relative;padding-block:clamp(14px,2vw,22px)}
.sb-kat>*+*{border-top:3px solid color-mix(in srgb,var(--sb-ink) 12%,transparent)}
.sb-kat>*:nth-child(odd){background:linear-gradient(90deg,color-mix(in srgb,var(--sb-serbet) 9%,transparent),transparent 62%)}
.sb-kat>*:nth-child(even){background:linear-gradient(270deg,color-mix(in srgb,var(--sb-acc-2) 8%,transparent),transparent 62%)}
/* поток процесса: шаги связаны стекающей нитью сиропа */
.sb-akis{position:relative;display:grid;gap:clamp(18px,2.6vw,30px);padding-left:30px}
.sb-akis::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:4px;border-radius:2px;
background:linear-gradient(var(--sb-serbet-2),var(--sb-serbet) 55%,var(--sb-karamel))}
.sb-akis>*{position:relative}
.sb-akis>*::before{content:"";position:absolute;left:-26px;top:10px;width:14px;height:17px;
border-radius:50% 50% 46% 46%/40% 40% 60% 60%;
background:linear-gradient(var(--sb-serbet-2),var(--sb-serbet));
box-shadow:0 2px 3px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7)}
/* вариация пропорций в ряду — партия одного десерта, но не клоны */
.sb-parti>*:nth-child(4n+2){--sb-ar:1/1}
.sb-parti>*:nth-child(4n+3){--sb-ar:3/4}
/* ==========================================================================
5. МЕТКИ ВАРКИ — термометр, кıvam, ложка, капля: «крепёж» этого мира
========================================================================== */
/* градусник: колба + столбик, с подписью температуры */
.sb-derece{position:relative;display:inline-flex;align-items:center;gap:.5rem;
padding:.3rem .8rem .3rem 1.6rem;border-radius:999px;color:var(--sb-sut);
font-weight:700;font-size:.68rem;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;
font-family:var(--sb-bas-font,inherit);
background:linear-gradient(color-mix(in srgb,var(--sb-koyu) 86%,#000),var(--sb-koyu));
box-shadow:0 2px 6px -2px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14) inset;
text-shadow:0 1px 0 rgba(0,0,0,.5)}
.sb-derece::before{content:"";position:absolute;left:.5rem;top:50%;transform:translateY(-50%);
width:10px;height:10px;border-radius:50%;background:var(--sb-acc);
box-shadow:0 -7px 0 -3px var(--sb-acc),0 0 5px rgba(0,0,0,.4)}
/* бейдж кıvam с хвостом-каплей */
.sb-kivam-rozet{position:relative;display:inline-block;margin-bottom:12px;/* хвостик свисает на 21px — иначе он ложится на следующую строку */
padding:.34rem .85rem;border-radius:4px 4px 4px 0;
color:var(--sb-koyu);font-weight:700;font-size:.69rem;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;
font-family:var(--sb-bas-font,inherit);
background:linear-gradient(color-mix(in srgb,var(--sb-serbet-2) 90%,#fff 10%),var(--sb-serbet-2));
box-shadow:0 3px 7px -4px rgba(0,0,0,.6)}
.sb-kivam-rozet::after{content:"";position:absolute;left:0;bottom:-9px;width:11px;height:12px;
border-radius:0 0 50% 50%/0 0 70% 70%;background:var(--sb-serbet-2)}
/* ложка-проба: вытянутая бирка с круглой головкой */
.sb-kasik{position:relative;display:inline-block;margin-left:19px;padding:.3rem .9rem;border-radius:0 3px 3px 0;
color:var(--sb-ink);font-weight:600;font-size:.7rem;line-height:1.5;letter-spacing:.06em;
background:linear-gradient(90deg,color-mix(in srgb,var(--sb-cam) 82%,#fff),var(--sb-cam));
box-shadow:0 2px 5px -2px rgba(0,0,0,.5)}
.sb-kasik::before{content:"";position:absolute;left:-17px;top:50%;transform:translateY(-50%);
width:19px;height:15px;border-radius:50%;
background:radial-gradient(circle at 36% 32%,#fff,var(--sb-cam) 70%);
box-shadow:0 2px 4px -2px rgba(0,0,0,.5)}
/* застывшая капля-печать на углу носителя */
.sb-damla-m{position:relative}
/* ::after делят между собой носители (sb-sirli, sb-parlak): без сброса
left/bottom и без повышенной специфичности печать уезжает на текст */
.sb-damla-m{overflow:visible} /* капля висит снаружи: обрезка на том же элементе её съедала */
.sb-damla-m[data-damla]::after{content:attr(data-damla);position:absolute;top:-14px;right:10px;
left:auto;bottom:auto;transform:none;opacity:1;animation:none;z-index:4;
width:74px;height:84px;display:grid;place-items:center;padding:0 9px;text-align:center;
font-weight:700;font-size:7.4px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;
font-family:var(--sb-bas-font,inherit);overflow-wrap:anywhere;hyphens:none;
color:color-mix(in srgb,#fff 88%,var(--sb-acc));
background:radial-gradient(circle at 38% 28%,color-mix(in srgb,var(--sb-acc) 72%,#fff 16%),var(--sb-acc) 58%,color-mix(in srgb,var(--sb-acc) 72%,#000) 100%);
border-radius:50% 50% 48% 48%/38% 38% 62% 62%;
box-shadow:0 5px 9px -4px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.35) inset;
text-shadow:0 1px 0 rgba(0,0,0,.35)}
/* «из котла»: горячая метка с паром */
.sb-sicak{position:relative;display:inline-block;padding:.3rem .8rem;border-radius:3px;
color:var(--sb-sut);font-weight:700;font-size:.68rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;
font-family:var(--sb-bas-font,inherit);
background:linear-gradient(color-mix(in srgb,var(--sb-acc) 92%,#000 8%),color-mix(in srgb,var(--sb-acc) 66%,#000))}
.sb-sicak::before,.sb-sicak::after{content:"";position:absolute;top:-11px;width:3px;height:11px;border-radius:2px;
background:linear-gradient(transparent,rgba(255,255,255,.75));opacity:.8;
animation:sb-buhar 2.6s ease-in-out infinite}
.sb-sicak::before{left:24%}
.sb-sicak::after{right:28%;animation-delay:.9s}
@keyframes sb-buhar{0%,100%{transform:translateY(0) scaleY(.8);opacity:.25}50%{transform:translateY(-5px) scaleY(1.15);opacity:.8}}
/* бандероль-черпак: полоса с текстом поперёк носителя */
.sb-serit{position:relative}
/* Лента объявляет себя ПОЛНОСТЬЮ: ::after у носителя уже может быть занят
(.sb-sirli::after — полив, .sb-tezgah>*::after — тень-эллипс), и чужие
height/border-radius затекали в ленту: она превращалась в «зёрнышко»,
а текст уезжал наружу. */
.sb-serit::after{content:attr(data-serit);position:static;display:block;z-index:3;
width:max-content;max-width:min(100%,34ch);
margin:clamp(16px,2.2vw,22px) auto var(--sb-sy,0px);
grid-column:1/-1;flex-basis:100%;
height:auto;min-height:0;max-height:none;transform:none;animation:none;opacity:1;
padding:.52rem 1.6rem;text-align:center;pointer-events:none;
font-weight:700;font-size:.7rem;line-height:1.25;letter-spacing:.2em;text-transform:uppercase;
font-family:var(--sb-bas-font,inherit);
color:color-mix(in srgb,#fff 90%,var(--sb-serbet-2));text-shadow:0 1px 1px rgba(0,0,0,.45);
background:
linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,0) 44%),
linear-gradient(color-mix(in srgb,var(--sb-karamel) 88%,#000 6%),var(--sb-karamel) 58%,color-mix(in srgb,var(--sb-karamel) 72%,#000));
clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%);
filter:drop-shadow(0 3px 6px rgba(0,0,0,.32))}
/* ==========================================================================
6. ТИПОГРАФИКА ВАРКИ
========================================================================== */
/* налитый заголовок: карамельная заливка + капля под словом */
.sb-akan{position:relative;display:inline-block;
background:linear-gradient(180deg,var(--sb-serbet) 0 38%,color-mix(in srgb,var(--sb-karamel) 70%,var(--sb-serbet)) 38% 70%,var(--sb-karamel));
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.sb-akan::after{content:"";position:absolute;left:28%;bottom:-13px;width:12px;height:15px;
border-radius:50% 50% 46% 46%/40% 40% 60% 60%;
background:linear-gradient(var(--sb-serbet-2),var(--sb-serbet));
box-shadow:0 2px 3px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.7)}
/* на тёмной земле заливка светлее */
.sb-kabuk .sb-akan,.sb-karamel-z .sb-akan,.sb-kazan-z .sb-akan{
background:linear-gradient(180deg,#FFF0D2 0 42%,color-mix(in srgb,var(--sb-serbet-2) 88%,#fff) 42% 76%,var(--sb-serbet-2));
-webkit-background-clip:text;background-clip:text;color:transparent}
/* но внутри СВЕТЛОГО носителя на той же тёмной земле заливка снова тёмная:
светлый заголовок на кремовой карточке читался как 1:1 */
:is(.sb-kabuk,.sb-karamel-z,.sb-kazan-z) :is(.sb-kase,.sb-tepsi,.sb-kalip,.sb-dilim,.sb-sirli,.sb-bardak) .sb-akan{
background:linear-gradient(180deg,var(--sb-karamel) 0 46%,color-mix(in srgb,var(--sb-karamel) 68%,#000) 46%);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* засахаренные капсы: кристаллическая крошка по тексту */
.sb-sekerli{font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--sb-ink);
text-shadow:0 1px 0 rgba(255,255,255,.85),0 -1px 0 rgba(255,255,255,.5),1px 0 0 rgba(255,255,255,.4)}
.sb-kabuk .sb-sekerli,.sb-kazan-z .sb-sekerli,.sb-karamel-z .sb-sekerli{color:var(--sb-sut);
text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 6px rgba(255,255,255,.35)}
/* мелкий текст «кıvam / saklama / pişirme» */
.sb-tarif-not{display:block;font-size:.74rem;line-height:1.5;letter-spacing:.02em;
color:color-mix(in srgb,var(--sb-ink) 84%,transparent)}
.sb-kabuk .sb-tarif-not,.sb-kazan-z .sb-tarif-not,.sb-karamel-z .sb-tarif-not{color:color-mix(in srgb,var(--sb-sut) 94%,transparent)}
/* светлый носитель внутри тёмной земли: подпись обязана остаться тёмной,
иначе «9 gün şerbet» в стакане — сливки по сливкам */
.sb-kase .sb-tarif-not,.sb-tepsi .sb-tarif-not,.sb-kalip .sb-tarif-not,
.sb-dilim .sb-tarif-not,.sb-sirli .sb-tarif-not,.sb-bardak .sb-tarif-not{
color:color-mix(in srgb,var(--sb-ink) 84%,transparent)}
/* подпись живёт в сужающейся части стакана — держим её внутри клипа */
.sb-bardak .sb-tarif-not{font-size:.62rem;line-height:1.3;max-width:64%;text-align:center}
/* граммаж / порции — табличные цифры */
.sb-gramaj{display:inline-block;padding:.12rem .5rem;border-radius:2px;
font-weight:700;font-size:.72rem;line-height:1.5;letter-spacing:.06em;font-variant-numeric:tabular-nums;
color:var(--sb-ink);background:color-mix(in srgb,var(--sb-sut) 88%,var(--sb-serbet) 10%);
box-shadow:0 0 0 1px color-mix(in srgb,var(--sb-ink) 18%,transparent) inset}
/* рука кондитера: подпись/пометка на полях */
.sb-el{font-family:var(--sb-el-font,inherit);font-weight:600;font-size:1.02rem;line-height:1.35;
color:color-mix(in srgb,var(--sb-acc) 86%,#000 6%);transform:rotate(-1.4deg);display:inline-block}
.sb-el.sb-buyuk{font-size:clamp(1.35rem,2.4vw,2rem)}
.sb-kabuk .sb-el,.sb-kazan-z .sb-el,.sb-karamel-z .sb-el{color:color-mix(in srgb,var(--sb-serbet-2) 86%,#fff 10%)}
/* но внутри светлого носителя на тёмной земле рукописный текст остаётся тёмным:
светлый курсив по кремовой карточке давал 1,5:1 */
:is(.sb-kabuk,.sb-kazan-z,.sb-karamel-z) :is(.sb-kase,.sb-tepsi,.sb-kalip,.sb-dilim,.sb-sirli,.sb-bardak) .sb-el{
color:color-mix(in srgb,var(--sb-acc) 86%,#000 6%)}
/* медальон-клеймо для логотипа */
.sb-madalyon{position:relative;display:inline-grid;place-items:center;padding:.55rem 1rem;border-radius:999px;
color:var(--sb-ink);
background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.6),transparent 58%),
color-mix(in srgb,var(--sb-serbet) 26%,var(--sb-sut));
box-shadow:0 0 0 1px color-mix(in srgb,var(--sb-ink) 36%,transparent),
0 0 0 4px color-mix(in srgb,var(--sb-sut) 86%,transparent),
0 0 0 5px color-mix(in srgb,var(--sb-ink) 22%,transparent)}
/* ==========================================================================
7. ДЕКОР — мелочь сахарной кухни (3–5 на секцию)
========================================================================== */
.sb-zerre{position:absolute;z-index:1;pointer-events:none;user-select:none}
/* кристалл сахара */
.sb-zerre--kristal{width:12px;height:12px;transform:rotate(14deg);
background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--sb-cam) 62%,#fff));
clip-path:polygon(50% 0,100% 32%,82% 100%,18% 100%,0 32%);
filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(0,0,0,.35))}
/* пузырёк в сиропе */
.sb-zerre--kabarcik{width:13px;height:13px;border-radius:50%;
background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(255,255,255,.1) 58%,transparent 72%);
box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}
/* капля сиропа */
.sb-zerre--damla{width:11px;height:14px;border-radius:50% 50% 46% 46%/40% 40% 60% 60%;
background:linear-gradient(var(--sb-serbet-2),var(--sb-serbet));
box-shadow:0 2px 3px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.65)}
/* струйка пара */
.sb-zerre--buhar{width:4px;height:26px;border-radius:3px;
background:linear-gradient(transparent,rgba(255,255,255,.55),transparent);opacity:.65;
animation:sb-buhar 3.4s ease-in-out infinite}
/* сахарная нить */
.sb-zerre--tel{width:54px;height:11px;
border-top:2px solid color-mix(in srgb,var(--sb-serbet-2) 80%,#fff 12%);
border-radius:0 0 50% 50%/0 0 100% 100%;opacity:.8}
/* фисташковая/ореховая крупка */
.sb-zerre--kirik{width:7px;height:5px;border-radius:40% 60% 50% 50%;transform:rotate(-18deg);
background:linear-gradient(120deg,color-mix(in srgb,var(--sb-acc-2) 80%,#fff 14%),var(--sb-acc-2));
box-shadow:0 1px 2px rgba(0,0,0,.3)}
/* лужица-клякса сиропа */
.sb-zerre--lekesi{width:34px;height:20px;border-radius:52% 48% 44% 56%/60% 56% 44% 40%;
background:radial-gradient(ellipse at 38% 34%,color-mix(in srgb,var(--sb-serbet) 72%,#fff 12%),var(--sb-serbet) 68%,color-mix(in srgb,var(--sb-karamel) 80%,transparent));
opacity:.75;filter:blur(.2px)}
/* рукописная пометка на полях */
.sb-zerre--not{position:absolute;padding:.28rem .55rem;font-family:var(--sb-el-font,inherit);
font-weight:600;font-size:.72rem;line-height:1.2;color:var(--sb-ink);
transform:rotate(var(--sb-nr,-4deg));
background:color-mix(in srgb,var(--sb-sut) 92%,var(--sb-serbet) 6%);
box-shadow:0 2px 5px -3px rgba(0,0,0,.5)}
.sb-kabuk .sb-zerre--not,.sb-kazan-z .sb-zerre--not,.sb-karamel-z .sb-zerre--not{color:var(--sb-koyu)}
/* ==========================================================================
8. ЭФФЕКТЫ — глянец, кипение, уровень сиропа
========================================================================== */
/* глянец глазури, проходящий по носителю при наведении */
.sb-parlak{position:relative;overflow:hidden}
.sb-parlak::after{content:"";position:absolute;top:-60%;left:-40%;width:42%;height:220%;pointer-events:none;z-index:3;
transform:rotate(16deg);opacity:0;transition:opacity .35s ease,left .75s ease;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.sb-parlak:hover::after{opacity:1;left:108%}
/* кипение у нижнего края секции: пузыри поднимаются и лопаются */
.sb-kaynama{position:relative}
.sb-kaynama::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;z-index:1;pointer-events:none;
background:radial-gradient(circle at 12% 100%,rgba(255,255,255,.5) 0 4px,transparent 5px),
radial-gradient(circle at 31% 100%,rgba(255,255,255,.4) 0 6px,transparent 7px),
radial-gradient(circle at 54% 100%,rgba(255,255,255,.45) 0 5px,transparent 6px),
radial-gradient(circle at 73% 100%,rgba(255,255,255,.35) 0 7px,transparent 8px),
radial-gradient(circle at 91% 100%,rgba(255,255,255,.4) 0 4px,transparent 5px);
animation:sb-kaynama 4.2s ease-in-out infinite}
@keyframes sb-kaynama{0%,100%{transform:translateY(3px);opacity:.55}50%{transform:translateY(-4px);opacity:.95}}
/* уровень сиропа, поднимающийся со скроллом (--sb-akis-y: 0..100) */
.sb-dolum{position:relative}
/* фото внутри «наливающегося» носителя не должно уходить под сироп-слой:
иначе по кадру идёт жёсткая линия уровня и янтарная вуаль поверх снимка */
.sb-dolum>img,.sb-dolum>picture,.sb-dolum>figure{position:relative;z-index:1}
.sb-dolum::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;pointer-events:none;
height:calc(var(--sb-akis-y,18) * 1%);
background:linear-gradient(color-mix(in srgb,var(--sb-serbet) 34%,transparent),color-mix(in srgb,var(--sb-serbet) 12%,transparent));
border-top:2px solid color-mix(in srgb,var(--sb-serbet-2) 70%,transparent);
transition:height .25s linear}
/* тёплое свечение котла за курсором (--sb-mx/--sb-my в %) */
.sb-ocak-isik{position:relative}
.sb-ocak-isik::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(260px 200px at var(--sb-mx,50%) var(--sb-my,40%),
color-mix(in srgb,var(--sb-serbet-2) 32%,transparent),transparent 72%);
transition:background .2s ease}
/* ==========================================================================
9. КОНТРАСТ ВНУТРИ СВЕТЛЫХ НОСИТЕЛЕЙ (точечно, без blanket-правил)
Подпись поверх фото сама себе фон — её НЕ перекрашиваем.
========================================================================== */
.sb-kase h2,.sb-kase h3,.sb-kase h4,.sb-kase p,.sb-kase li,.sb-kase dt,.sb-kase dd,
.sb-tepsi h2,.sb-tepsi h3,.sb-tepsi h4,.sb-tepsi p,.sb-tepsi li,
.sb-kalip h3,.sb-kalip h4,.sb-kalip p,.sb-kalip li,
.sb-dilim h3,.sb-dilim h4,.sb-dilim p,.sb-dilim li,
.sb-sirli h3,.sb-sirli h4,.sb-sirli p,.sb-sirli li,
/* бейджи с собственной тёмной землёй (derece/sicak/rozet/serit) красить нельзя:
у них свой фон, и blanket-правило делало их тёмными по тёмному */
.sb-kase span:not([class*="sb-zerre"]):not([class*="sb-derece"]):not([class*="sb-sicak"]):not([class*="sb-rozet"]):not([class*="sb-serit"]):not(:where(:has(> img) > span,:has(> picture) > span)),
.sb-tepsi span:not([class*="sb-zerre"]):not([class*="sb-derece"]):not([class*="sb-sicak"]):not([class*="sb-rozet"]):not([class*="sb-serit"]):not(:where(:has(> img) > span,:has(> picture) > span)){color:var(--sb-ink)}
.sb-kase a:not([class*="btn"]):not([class*="buton"]),.sb-tepsi a:not([class*="btn"]):not([class*="buton"]),
.sb-kalip a:not([class*="btn"]):not([class*="buton"]){color:color-mix(in srgb,var(--sb-acc) 82%,#000)}
/* фото внутри носителя: ровный кадр + мягкая посадка */
.sb-kase>img,.sb-tepsi>img,.sb-kalip>img,.sb-sirli>img,
.sb-kase figure>img,.sb-tepsi figure>img,.sb-kalip figure>img,.sb-sirli figure>img{
display:block;width:100%;height:auto;aspect-ratio:var(--sb-ar,4/3);object-fit:cover;border-radius:3px}
/* ==========================================================================
10. АДАПТИВ И ДОСТУПНОСТЬ
========================================================================== */
@media (max-width:760px){
.sb-damla-m[data-damla]::after{width:56px;height:64px;font-size:6.6px;padding:0 5px;top:-10px;right:5px;left:auto}
.sb-akis{padding-left:24px}
.sb-akis::before{left:8px}
.sb-akis>*::before{left:-22px;width:12px;height:15px}
.sb-zerre--tel{width:34px}
.sb-zerre--lekesi{width:24px;height:15px}
.sb-bardak{min-width:104px;padding:.6rem .9rem .9rem}
.sb-tezgah{padding:12px;gap:12px}
}
@media (prefers-reduced-motion:reduce){
.sb-kaynama::after,.sb-zerre--buhar,.sb-sicak::before,.sb-sicak::after{animation:none}
.sb-kase,.sb-kase:hover{transition:none;transform:none}
.sb-parlak::after{display:none}
.sb-dolum::before{transition:none}
}