"; inherits:false; initial-value:0%;
}
.yg-cat__card::after {
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
/* the rest value is the registered initial-value above, so :hover is the only
declaration and there is no specificity subtlety with inherits:false */
/* both stops at the same position = a hard circular edge; the second colour is
transparent BLUE, not `transparent`, which would interpolate through black */
background:radial-gradient(circle at 13% 86%,
var(--c-blue) var(--yg-bloom), rgba(3,3,184,0) var(--yg-bloom));
clip-path:url(#yg-cat-photo);
transition:--yg-bloom .55s cubic-bezier(.65,0,.35,1);
}
.yg-cat__card:hover::after { --yg-bloom:100%; }
.yg-cat__no {
position:absolute; top:18px; left:18px; z-index:2;
font:700 12.5px/1 var(--title-font,"Space Grotesk",sans-serif); letter-spacing:.08em;
color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
padding:8px 11px; border-radius:999px;
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
transition:opacity .3s var(--c-e);
}
/* Arrow + label. The label is always in the layout at full width; at rest the whole
group is pushed right by exactly its own width minus the circle, which parks the
circle on the anchor and carries the label off the card, where overflow:hidden
hides it. Hover returns it to translateX(0), so the circle slides left by precisely
the label's width + gap.
Animating a width instead would need either a guessed max-width (the reveal then
finishes before the motion does) or a 0fr -> 1fr track, which collapses to zero
inside a shrink-to-fit absolutely positioned box. A transform has neither problem
and costs no layout. */
.yg-cat__cta {
--go:46px; /* must match .yg-cat__go's width */
position:absolute; right:18px; bottom:18px; z-index:3;
display:flex; align-items:center; gap:14px;
transform:translateX(calc(100% - var(--go)));
transition:transform .5s var(--c-e);
}
.yg-cat__card:hover .yg-cat__cta { transform:none; }
.yg-cat__go {
width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
transition:background .35s var(--c-e), border-color .35s var(--c-e), transform .35s var(--c-e);
}
.yg-cat__go svg { transition:transform .35s var(--c-e); }
.yg-cat__card:hover .yg-cat__go { background:#fff; border-color:transparent; color:var(--c-blue); }
.yg-cat__card:hover .yg-cat__go svg { transform:translate(1px,-1px); }
.yg-cat__label {
white-space:nowrap;
font:700 clamp(12px,2.9cqw,16px)/1.1 var(--title-font,"Space Grotesk",sans-serif);
letter-spacing:-.01em; color:#fff;
opacity:0;
transition:opacity .35s var(--c-e);
}
.yg-cat__card:hover .yg-cat__label { opacity:1; }
/* ---- white plate carved into the bottom-left corner ----
Painted as the drawing's own path, stretched over the whole card. The path is the
INVERSE of the supplied outline — the region the blue shape leaves empty — plus the
card's own bottom-left corner (r = 9.45), traced in the original coordinates:
(0,126.35) -> concave fillet r17.41 -> (17.41,143.76) plate meets the left edge
flat top to (103.27,143.76)
convex round to (126.33,149.63)
straight diagonal to (156.03,176.65) dx 29.7, dy 27.02 => 42.3°
concave fillet to (179.13,182.55) plate meets the bottom edge
back along the bottom, r9.45 card corner, up the left edge
There is no white element. The plate is the card's own background, uncovered by
clipping the photo, the scrim and the hover fill to the drawing (#yg-cat-photo in
includes/header.php). Every earlier attempt painted white ON TOP of the photo, which
puts two antialiased edges in the same place — as an image the white edge resampled
into a light rim, and as a second clip it disagreed with the card's own rounded
corner by a fraction of a pixel and let the photo through as a hairline. One
surface ending where another begins cannot do either. */
/* Text box sits inside the notch: 143.76 -> 182.55 of 182.55 is the bottom 21.25%.
Its width stops short of the diagonal so the copy never runs onto the chamfer. */
.yg-cat__body {
position:absolute; left:0; bottom:0; z-index:3;
width:58cqw; height:21.25cqh;
/* Sitting the title low in the plate is what buys it width: the chamfer runs at
42°, so every pixel further down is ~1.1px more room before the diagonal. */
display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
padding:0 2cqw 3.8cqh 3.6cqw;
}
/* Type is sized in cqw so the composition stays the drawing at every card width —
the plate is a fixed 21.25% of the card height, so absolute type would outgrow it.
Poppins is loaded per-page (only these two carry cards) alongside Space Grotesk. */
.yg-cat__title {
/* An : these four labels are the page's real sub-headings. margin:0 is load
bearing — the theme's default heading margin would otherwise push it off the
plate the moment the tag changed from a span. */
margin:0;
/* 20px is the ceiling: "Nötralizasyon Üniteleri" is the longest label and at 21px
it touches the chamfer with no margin at all. */
font:700 clamp(12px,3.62cqw,20px)/1.25 "Poppins","Space Grotesk",sans-serif;
letter-spacing:-.01em; color:var(--c-navy);
white-space:nowrap;
}
/* Hover blurb. Occupies the band between the number chip and the white plate — the
area the blue fill uncovers — so it never overlaps the plate, the chip or the CTA.
Both edges are pinned (top below the chip, bottom above the plate) rather than
letting the box grow from one side: these paragraphs run to ~500 characters and an
unpinned box would climb straight through the chip.
Size is in cq units throughout so the panel holds the same amount of text at every
card width instead of reflowing into a different number of lines. */
.yg-cat__desc {
margin:0; /* a
: kill the theme's block margin */
position:absolute; left:5cqw; right:5cqw; z-index:3;
top:calc(3.3cqh + 9.6cqh + 3cqh); /* chip inset + chip height + gap */
bottom:calc(21.25cqh + 2.6cqh); /* notch height + gap */
overflow:hidden; pointer-events:none;
display:flex; align-items:center; justify-content:center; text-align:center;
font:400 clamp(10.5px,2.65cqw,15px)/1.55 "Inter",sans-serif;
color:rgba(255,255,255,.93);
/* Hidden with opacity, never display:none or visibility:hidden — the paragraph
stays in the rendered box tree and in the served HTML, so a crawler reads it as
ordinary page text rather than as markup it has to execute something to reach. */
opacity:0; transform:translateY(12px);
transition:opacity .45s var(--c-e), transform .55s var(--c-e);
transition-delay:0s; /* leaving: go at once, with the fill */
}
/* Arriving: wait for the blue fill (.55s) to land before the text starts. The delay
lives only on the :hover rule, so mouse-out reverts to the 0s above and the text
does not linger over the returning photo. */
.yg-cat__card:hover .yg-cat__desc {
opacity:1; transform:none;
transition-delay:.5s;
}
/* Holding the floor at 10.5px on a phone-width card costs ~14px of height that the
band does not have, so the small card buys it back: tighter leading, a narrower
side inset and a smaller gap above the plate. Keyed on the CARD (it is a size
container), not the viewport — below 992px the grid is single-column, so a
viewport query would also catch 550px-wide cards that need no such thing. */
@container (max-width:420px) {
.yg-cat__desc {
left:4cqw; right:4cqw;
bottom:calc(21.25cqh + 1.2cqh);
line-height:1.4;
}
/* At 10.5px the longest paragraph runs to nine lines and its first line reaches
past the number chip. Nine lines cannot fit below the chip at this size, so the
chip yields while the blurb is up — it is decorative, and the blurb is not. */
.yg-cat__card:hover .yg-cat__no { opacity:0; }
}
/* Opt-in two-line variant. Labels like "Polipropilen (PP) Fabrikasyonlar" are ~32
characters and cannot fit the plate on one line at any size consistent with the
other pages. Narrowing the text box as well as allowing the break is the point:
the box must be narrower than the chamfer allows, or a title breaks only after it
has already run onto the photo. Two 20px lines still clear the notch height. */
.yg-cat--wrap .yg-cat__title { white-space:normal; }
.yg-cat--wrap .yg-cat__body { width:46cqw; }
.yg-cat__card:focus-visible { outline:3px solid var(--c-blue); outline-offset:3px; }
/* One column from tablet down. Two 340px-wide cards would leave the 21.25%-tall notch
too short for the longest taglines, and the notch height cannot be traded away
without departing from the drawing. */
@media (max-width:991px) {
.yg-cat { grid-template-columns:1fr; gap:16px; }
}
@media (max-width:575px) {
.yg-cat__no { top:14px; left:14px; }
.yg-cat__cta { right:14px; bottom:14px; --go:42px; }
.yg-cat__go { width:42px; height:42px; }
}
@media (prefers-reduced-motion:reduce) {
.yg-cat__img, .yg-cat__go, .yg-cat__go svg, .yg-cat__card::after,
.yg-cat__cta, .yg-cat__label, .yg-cat__desc { transition:none; }
.yg-cat__card:hover .yg-cat__img { transform:none; }
}
/* ===== yg-iacc — ikonlu akordeon (FAQ görünümlü özellik listeleri) ===== */
.yg-iacc { --ia-blue:#0303B8; --ia-navy:#0c2461; --ia-body:#51617f; --ia-line:#e4eaf4;
--ia-e:cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column; gap:12px; }
/* ---- outer tier: each heading is itself collapsible, holding its own accordion ---- */
.yg-iacc__item--group { background:#f7faff; }
.yg-iacc__head--group { padding:20px 22px; grid-template-columns:1fr auto; }
.yg-iacc__head--group .yg-iacc__title { font-size:19px; }
.yg-iacc__head--group .yg-iacc__arrow { width:34px; height:34px; }
.yg-iacc__item--group:has(> .collapse.show) { background:#fff; }
.yg-iacc__groupbody { padding:2px 18px 18px; }
/* children are plain rows — icon + title + text, always visible */
.yg-iacc__list { display:flex; flex-direction:column; gap:10px; }
/* static rows — no hover state (they are not interactive) */
.yg-iacc__row {
display:grid; grid-template-columns:auto 1fr; align-items:start; gap:16px;
padding:16px 20px; background:#fff;
border:1px solid var(--ia-line); border-radius:14px;
}
.yg-iacc__row .yg-iacc__ic { margin-top:1px; }
.yg-iacc__rowtitle {
font:700 15.5px/1.35 var(--title-font,"Space Grotesk",sans-serif);
color:var(--ia-navy); letter-spacing:-.01em; margin:0 0 5px;
}
.yg-iacc__rowtext p { margin:0; font-size:15px; line-height:1.7; color:var(--ia-body); }
@media (max-width:575px) {
.yg-iacc__row { gap:12px; padding:14px 16px; }
.yg-iacc__rowtitle { font-size:15px; }
}
.yg-iacc__item { background:#fff; border:1px solid var(--ia-line); border-radius:16px; overflow:hidden;
transition:border-color .3s var(--ia-e), box-shadow .3s var(--ia-e); }
.yg-iacc__item:has(.collapse.show) { border-color:rgba(3,3,184,.32); box-shadow:0 10px 30px rgba(12,36,97,.07); }
.yg-iacc__head {
width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
padding:16px 20px; background:none; border:0; text-align:left; cursor:pointer;
}
.yg-iacc__ic {
width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center;
background:rgba(3,3,184,.08); color:var(--ia-blue);
transition:background .3s var(--ia-e), color .3s var(--ia-e);
}
.yg-iacc__ic svg { width:24px; height:24px; }
.yg-iacc__title {
font:700 16.5px/1.35 var(--title-font,"Space Grotesk",sans-serif);
color:var(--ia-navy); letter-spacing:-.01em; transition:color .3s var(--ia-e);
}
.yg-iacc__arrow {
width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center;
border:1px solid var(--ia-line); color:var(--ia-navy);
transition:transform .35s var(--ia-e), background .3s var(--ia-e), color .3s var(--ia-e), border-color .3s var(--ia-e);
}
.yg-iacc__head:not(.collapsed) .yg-iacc__ic { background:var(--ia-blue); color:#fff; }
.yg-iacc__head:not(.collapsed) .yg-iacc__title { color:var(--ia-blue); }
.yg-iacc__head:not(.collapsed) .yg-iacc__arrow { transform:rotate(180deg); background:var(--ia-blue); color:#fff; border-color:transparent; }
.yg-iacc__head:hover .yg-iacc__ic { background:rgba(3,3,184,.16); }
.yg-iacc__head:focus-visible { outline:2px solid var(--ia-blue); outline-offset:-2px; }
/* body indents to sit under the title, not the icon */
.yg-iacc__body { padding:0 20px 18px calc(20px + 44px + 16px); }
.yg-iacc__body p { margin:0; font-size:15px; line-height:1.75; color:var(--ia-body); }
@media (max-width:575px) {
.yg-iacc__head { gap:12px; padding:14px 16px; }
.yg-iacc__ic { width:38px; height:38px; border-radius:11px; }
.yg-iacc__ic svg { width:20px; height:20px; }
.yg-iacc__title { font-size:15px; }
.yg-iacc__body { padding:0 16px 16px calc(16px + 38px + 12px); }
}
@media (prefers-reduced-motion:reduce) {
.yg-iacc__item, .yg-iacc__ic, .yg-iacc__title, .yg-iacc__arrow { transition:none; }
}
/* ===== yg-rel — ürün ailesi kartları (ilgili ürünler) ===== */
.yg-rel { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:24px; }
.yg-rel__card {
display:flex; flex-direction:column; background:#fff;
border:1px solid #e4eaf4; border-radius:22px; overflow:hidden;
transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1);
}
.yg-rel__card:hover { transform:translateY(-6px); border-color:rgba(3,3,184,.3); }
.yg-rel__media { margin:0; overflow:hidden; aspect-ratio:1/1; background:#f3f7fd; }
.yg-rel__media img { width:100%; height:100%; object-fit:cover; display:block;
transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.yg-rel__card:hover .yg-rel__media img { transform:scale(1.05); }
.yg-rel__body { padding:22px 24px 26px; }
.yg-rel__body h3 {
font:700 17px/1.3 var(--title-font,"Space Grotesk",sans-serif);
color:#0c2461; margin:0 0 9px; letter-spacing:-.01em;
}
.yg-rel__body p { font-size:14.5px; line-height:1.7; color:#51617f; margin:0; }
@media (max-width:575px) { .yg-rel { grid-template-columns:1fr; } }
/* FAQ answer bodies on service pages: multi-paragraph answers + bulleted detail lists
(used where several Q&A sections were merged into one accordion) */
.tp-faq-body p + p { margin-top:.9em; }
.tp-faq-list { list-style:none; margin:14px 0 0; padding:0; }
.tp-faq-list li { position:relative; padding-left:20px; margin-bottom:9px; line-height:1.7; }
.tp-faq-list li:last-child { margin-bottom:0; }
.tp-faq-list li::before {
content:""; position:absolute; left:0; top:.63em;
width:6px; height:6px; border-radius:50%; background:#0303B8;
}
.tp-faq-list li strong { color:#0c2461; font-weight:600; }
.yg-srv__split { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,60px); align-items:center; }
.yg-srv__split > * { min-width:0; }
.yg-srv__figure { position:relative; border-radius:22px; overflow:hidden; }
.yg-srv__figure img { width:100%; max-width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
/* match the intro slider''s ratio on desktop */
@media (min-width:992px) { .yg-srv__figure img { aspect-ratio:3/2; } }
.yg-srv__figure--tall img { aspect-ratio:3/4; }
/* ---- a figure holding more than one photograph ----
The single image above is what gives the figure its shape, so once the image is
inside a slider the frame has to carry that shape instead: same ratios, same
radius. The slide images then simply fill it, which means their own aspect-ratio
rule has to be switched off or it fights the frame. */
.yg-srv__figure .yg-srv__swiper { aspect-ratio:1/1; border-radius:22px; overflow:hidden; }
@media (min-width:992px) { .yg-srv__figure .yg-srv__swiper { aspect-ratio:3/2; } }
.yg-srv__figure--tall .yg-srv__swiper { aspect-ratio:3/4; }
.yg-srv__figure .yg-srv__swiper .swiper-wrapper,
.yg-srv__figure .yg-srv__swiper .swiper-slide { height:100%; }
.yg-srv__figure .yg-srv__swiper img {
width:100%; height:100%; aspect-ratio:auto; object-fit:cover; display:block; border-radius:0;
}
/* numbered process steps */
.yg-srv__steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; counter-reset:ygstep; }
.yg-srv__step {
position:relative; background:#fff; border:1px solid var(--s-line); border-radius:20px;
padding:28px 24px 24px; counter-increment:ygstep;
transition:border-color .3s var(--s-ease), transform .3s var(--s-ease);
}
.yg-srv__step:hover { border-color:rgba(3,3,184,.35); transform:translateY(-4px); }
.yg-srv__step::before {
content:counter(ygstep,decimal-leading-zero);
display:block; margin-bottom:14px;
font:800 13px/1 var(--s-title); letter-spacing:.16em; color:var(--s-blue);
}
.yg-srv__step h4 { font:700 17px/1.3 var(--s-title); color:var(--s-navy); margin:0 0 8px; }
.yg-srv__step p { font-size:14px; line-height:1.65; color:var(--s-body); margin:0; }
/* metal chips */
.yg-srv__metals { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.yg-srv__metal {
display:flex; gap:14px; align-items:flex-start;
background:#fff; border:1px solid var(--s-line); border-radius:16px; padding:18px 20px;
transition:border-color .25s var(--s-ease), transform .25s var(--s-ease);
}
.yg-srv__metal:hover { border-color:rgba(3,3,184,.35); transform:translateX(4px); }
.yg-srv__swatch { flex:none; width:34px; height:34px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(12,36,97,.12); }
.yg-srv__metal strong { display:block; font:700 15px/1.3 var(--s-title); color:var(--s-navy); margin-bottom:4px; }
.yg-srv__metal span { display:block; font-size:13.5px; line-height:1.6; color:var(--s-body); }
/* technique cards */
.yg-srv__tech { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.yg-srv__techcard {
position:relative; overflow:hidden; background:#fff; border:1px solid var(--s-line);
border-radius:20px; padding:30px 26px; transition:border-color .3s var(--s-ease);
}
.yg-srv__techcard::before {
content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--s-blue);
transform:scaleY(0); transform-origin:top; transition:transform .4s var(--s-ease);
}
.yg-srv__techcard:hover { border-color:rgba(3,3,184,.35); }
.yg-srv__techcard:hover::before { transform:scaleY(1); }
.yg-srv__techcard h4 { font:700 18px/1.3 var(--s-title); color:var(--s-navy); margin:0 0 10px; }
.yg-srv__techcard p { font-size:14.5px; line-height:1.7; color:var(--s-body); margin:0; }
/* benefits on blue */
.yg-srv__benefits { background:var(--s-blue); border-radius:26px; padding:clamp(30px,4vw,54px); color:#fff; }
.yg-srv__benefits .tp-section-title { color:#fff; }
.yg-srv__blist { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px 32px; margin-top:32px; }
.yg-srv__bitem { display:flex; gap:14px; align-items:flex-start; }
.yg-srv__bcheck {
flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
background:rgba(255,255,255,.16); color:#fff; margin-top:2px;
}
.yg-srv__bitem strong { display:block; font:700 15.5px/1.35 var(--s-title); color:#fff; margin-bottom:5px; }
.yg-srv__bitem span { display:block; font-size:14px; line-height:1.65; color:rgba(255,255,255,.82); }
/* industry tiles */
.yg-srv__inds { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; }
.yg-srv__ind {
background:#fff; border:1px solid var(--s-line); border-radius:18px; padding:24px 22px;
transition:border-color .3s var(--s-ease), transform .3s var(--s-ease);
}
.yg-srv__ind:hover { border-color:rgba(3,3,184,.35); transform:translateY(-4px); }
.yg-srv__indic {
width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
background:rgba(3,3,184,.07); color:var(--s-blue);
}
.yg-srv__ind h3 { font:700 16px/1.3 var(--s-title); color:var(--s-navy); margin:0 0 7px; }
.yg-srv__ind p { font-size:13.5px; line-height:1.6; color:var(--s-body); margin:0; }
/* factors strip */
.yg-srv__factors { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); border:1px solid var(--s-line); border-radius:20px; overflow:hidden; background:#fff; }
.yg-srv__factor { padding:26px 24px; border-right:1px solid var(--s-line); }
.yg-srv__factor:last-child { border-right:0; }
.yg-srv__factor h4 { font:700 16px/1.3 var(--s-title); color:var(--s-navy); margin:0 0 8px; display:flex; align-items:center; gap:9px; }
.yg-srv__factor h4::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--s-blue); flex:none; }
.yg-srv__factor p { font-size:14px; line-height:1.65; color:var(--s-body); margin:0; }
@media (max-width:991px) {
.yg-srv__split { grid-template-columns:1fr; }
.yg-srv__factor { border-right:0; border-bottom:1px solid var(--s-line); }
.yg-srv__factor:last-child { border-bottom:0; }
}
@media (prefers-reduced-motion:reduce) {
.yg-srv__step, .yg-srv__metal, .yg-srv__techcard, .yg-srv__techcard::before, .yg-srv__ind { transition:none; }
}
/* =====================================================================
yg-foot — footer (theme blue, matches the CTA / hero card language)
===================================================================== */
.yg-foot { background:#f3f7fd; padding:0 clamp(8px,1.8vw,22px) clamp(8px,1.8vw,22px); }
.yg-foot__panel {
position:relative; overflow:hidden; isolation:isolate;
background:#0303B8; color:rgba(255,255,255,.8);
border-radius:clamp(22px,2.4vw,32px);
padding:clamp(34px,4.4vw,64px) clamp(22px,3.4vw,58px) clamp(18px,2vw,26px);
}
/* cap the content width inside the full-bleed card */
.yg-foot__panel > * { max-width:1240px; margin-left:auto; margin-right:auto; }
.yg-foot__panel::after {
content:""; position:absolute; right:-70px; bottom:-90px; width:320px; height:320px;
border:1px solid rgba(255,255,255,.14); border-radius:50%; pointer-events:none;
}
/* --- top row: contact + flags --- */
.yg-foot__top {
display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap;
padding-bottom:clamp(24px,3vw,38px); border-bottom:1px solid rgba(255,255,255,.18);
}
.yg-foot__eyebrow {
display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
font:700 12px/1 var(--title-font,"Space Grotesk",sans-serif);
letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.yg-foot__eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:#fff; }
.yg-foot__title {
font:800 clamp(1.35rem,1rem + 1.5vw,2.1rem)/1.16 var(--title-font,"Space Grotesk",sans-serif);
letter-spacing:-.02em; color:#fff; margin:0;
}
.yg-foot__contact { display:flex; gap:10px; flex-wrap:wrap; }
.yg-foot__pill {
display:inline-flex; align-items:center; gap:10px;
background:#fff; color:#0303B8; text-decoration:none;
font:600 14.5px/1 var(--title-font,"Space Grotesk",sans-serif);
padding:14px 24px; border-radius:999px;
transition:transform .25s cubic-bezier(.34,1.5,.64,1);
}
.yg-foot__pill--ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); }
.yg-foot__pill:hover { transform:translateY(-3px); color:#0303B8; }
.yg-foot__pill--ghost:hover { background:rgba(255,255,255,.2); color:#fff; }
/* --- link columns --- */
.yg-foot__grid {
display:grid; grid-template-columns:1.6fr repeat(3,1fr) 1.2fr; gap:clamp(22px,2.6vw,40px);
padding:clamp(28px,3.4vw,46px) 0;
}
.yg-foot__logo { height:64px; width:auto; margin-bottom:18px; }
.yg-foot__desc { font-size:13.5px; line-height:1.7; margin:0 0 20px; max-width:33ch; color:rgba(255,255,255,.75); }
.yg-foot__social { display:flex; gap:9px; }
.yg-foot__social a {
width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
background:rgba(255,255,255,.12); color:#fff; font-size:14px; text-decoration:none;
transition:background .25s ease, color .25s ease, transform .25s ease;
}
.yg-foot__social a:hover { background:#fff; color:#0303B8; transform:translateY(-3px); }
.yg-foot__col h3 {
font:700 11.5px/1 var(--title-font,"Space Grotesk",sans-serif);
letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 16px;
}
.yg-foot__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.yg-foot__col a { font-size:14px; color:rgba(255,255,255,.75); text-decoration:none; }
.yg-foot__col a:hover { color:#fff; }
.yg-foot__addr { font-size:13.5px; line-height:1.75; color:rgba(255,255,255,.75); }
.yg-foot__addr strong {
display:block; color:#fff; margin-bottom:16px;
font:700 11.5px/1 var(--title-font,"Space Grotesk",sans-serif); letter-spacing:.16em; text-transform:uppercase;
}
/* --- inline language flags --- */
.yg-flags { display:flex; align-items:center; gap:9px; }
.yg-flags__btn {
width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer; overflow:hidden;
background:none; border:0; opacity:.5; filter:saturate(.7);
transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.5,.64,1), filter .25s ease, box-shadow .25s ease;
}
.yg-flags__btn img { width:100%; height:100%; object-fit:cover; display:block; }
.yg-flags__btn:hover { opacity:1; filter:none; transform:translateY(-2px) scale(1.08); }
.yg-flags__btn.is-active { opacity:1; filter:none; box-shadow:0 0 0 2px #fff; }
.yg-flags__btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
/* flags row above the bottom bar, aligned right */
.yg-foot__flagsrow { display:flex; justify-content:flex-end; padding-bottom:16px; }
@media (max-width:480px) { .yg-foot__flagsrow { justify-content:flex-start; } }
/* --- bottom bar --- */
.yg-foot__bottom {
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
padding-top:clamp(16px,2vw,22px); border-top:1px solid rgba(255,255,255,.18);
}
.yg-foot__copy { margin:0; font-size:12.5px; color:rgba(255,255,255,.62); }
.yg-foot .ex-footer__bottom-links .disc { margin:0; font-size:12.5px; color:rgba(255,255,255,.62); }
.yg-foot .ex-footer__bottom-links .disc a { color:#fff; text-decoration:none; transition:opacity .2s ease; }
.yg-foot .ex-footer__bottom-links .disc a:hover { text-decoration:underline; text-underline-offset:3px; }
/* "Cookie preferences" - added to the footer by yg-consent.js so consent can be
taken back. It is appended next to the credit line, so it needs its own spacing
rather than inheriting the .disc paragraph's. */
.yg-foot .ex-footer__bottom-links .yg-consent-open {
display:inline-block; margin-top:6px;
font-size:12.5px; color:rgba(255,255,255,.62); text-decoration:none;
transition:color .2s ease;
}
.yg-foot .ex-footer__bottom-links .yg-consent-open:hover {
color:#fff; text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:1199px) { .yg-foot__grid { grid-template-columns:1.5fr 1fr 1fr; row-gap:32px; } }
@media (max-width:767px) {
.yg-foot__grid { grid-template-columns:1fr 1fr; }
.yg-foot__brandcol, .yg-foot__addr { grid-column:1 / -1; }
.yg-foot__top { align-items:flex-start; }
}
@media (max-width:480px) {
.yg-foot__grid { grid-template-columns:1fr; }
.yg-foot__bottom { flex-direction:column; align-items:flex-start; }
/* on a phone the two pills shared one row, which squeezed the phone
number onto two lines; stack them full-width instead */
.yg-foot__contact { width:100%; flex-direction:column; align-items:stretch; }
.yg-foot__pill { width:100%; justify-content:center; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce) {
.yg-foot__pill, .yg-foot__social a, .yg-flags__btn { transition:none; }
}
/* ===== section title (tp-section-title) — universal: 40px, theme blue ===== */
.tp-section-title { font-size:40px; color:#0303B8; }
@media (max-width:1199px) { .tp-section-title { font-size:34px; } }
@media (max-width:767px) { .tp-section-title { font-size:28px; } }
/* product-page lead paragraph: same blue title treatment, a step smaller than a
real section heading so it doesn't outrank the h2s further down the page */
.tp-services-details-wrap h3.tp-section-title { font-size:30px; line-height:1.32; }
@media (max-width:1199px) { .tp-services-details-wrap h3.tp-section-title { font-size:26px; } }
@media (max-width:767px) { .tp-services-details-wrap h3.tp-section-title { font-size:23px; } }
/* ===== section eyebrow (tp-section-sub-title) — universal redesign ===== */
.tp-section-sub-title {
display:inline-flex; align-items:center; gap:9px;
font-family:var(--title-font,"Space Grotesk",sans-serif);
font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
color:#0303B8;
background:rgba(3,3,184,.06);
border:1px solid rgba(3,3,184,.16);
border-radius:999px; line-height:1; padding:10px 18px 10px 15px;
}
.tp-section-sub-title::before {
content:""; flex:none; width:7px; height:7px; border-radius:50%;
background:#0303B8; box-shadow:0 0 0 3px rgba(3,3,184,.16);
}
/* on dark/blue backgrounds */
.tp-section-sub-title-sec,
.tp-bg-black .tp-section-sub-title, .tp-bg-blue .tp-section-sub-title,
.yg-old .tp-section-sub-title {
color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28);
}
.tp-section-sub-title-sec::before,
.tp-bg-black .tp-section-sub-title::before, .tp-bg-blue .tp-section-sub-title::before,
.yg-old .tp-section-sub-title::before { background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.22); }
/* solid variant */
.tp-section-sub-title-trd {
color:#fff; background:#0303B8; border-color:transparent;
}
.tp-section-sub-title-trd::before { background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.tp-section-sub-title-land { font-size:13.5px; }
@media (max-width:574.98px) {
.tp-section-sub-title { font-size:11.5px; letter-spacing:.14em; padding:9px 15px 9px 13px; gap:8px; }
}
/* ===== yg-aslider — hakkımızda image slider ===== */
.yg-aslider { position:relative; width:100%; min-width:0; }
.yg-aslider__sw { width:100%; max-width:100%; overflow:hidden; border-radius:20px; }
.yg-aslider .swiper-slide { width:100%; max-width:100%; height:auto; border-radius:20px; overflow:hidden; background:#eef2f9; }
.yg-aslider .swiper-slide img {
width:100%; max-width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block;
transform:scale(1.06); transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
/* desktop: fixed 1 : 1.5 height-to-width (landscape 3:2) at every desktop size */
@media (min-width:992px) { .yg-aslider .swiper-slide img { aspect-ratio:3/2; } }
.yg-aslider .swiper-slide-active img { transform:scale(1); }
/* controls */
.yg-aslider__ui {
display:flex; align-items:center; gap:14px; margin-top:20px;
}
.yg-aslider__btn {
flex:none; width:46px; height:46px; border-radius:50%; cursor:pointer;
display:grid; place-items:center;
background:#fff; border:1px solid rgba(12,36,97,.16); color:#0c2461;
transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.yg-aslider__btn:hover { background:#0303B8; border-color:#0303B8; color:#fff; transform:translateY(-2px); }
.yg-aslider__btn.swiper-button-disabled { opacity:.35; pointer-events:none; }
/* progress rail doubles as pagination */
.yg-aslider__rail {
position:relative; flex:1; height:3px; border-radius:999px;
background:rgba(12,36,97,.12); overflow:hidden;
}
.yg-aslider__rail .swiper-pagination-progressbar-fill {
position:absolute; inset:0; background:#0303B8; transform-origin:left top;
}
.yg-aslider__count {
flex:none; font:600 13px/1 var(--title-font,"Space Grotesk",sans-serif);
color:#0c2461; letter-spacing:.06em; min-width:52px; text-align:right;
}
.yg-aslider__count b { color:#0303B8; font-weight:700; }
@media (max-width:991px) { .yg-aslider .swiper-slide { width:100%; max-width:100%; height:auto; border-radius:20px; overflow:hidden; background:#eef2f9; } }
@media (max-width:575px) { .yg-aslider .swiper-slide { width:100%; max-width:100%; height:auto; border-radius:20px; overflow:hidden; background:#eef2f9; } .yg-aslider__btn { width:42px; height:42px; } }
@media (prefers-reduced-motion:reduce) {
.yg-aslider .swiper-slide, .yg-aslider .swiper-slide img, .yg-aslider__btn { transition:none; }
.yg-aslider .swiper-slide img { transform:none; }
}
/* ===== yg-pgrid — homepage product-group mosaic (after hero) ===== */
.yg-pgrid { padding:clamp(70px,8vw,110px) 0 0; }
/* when the grid is the last section on a page, it needs its own closing space —
elsewhere the following section supplies it */
.yg-pgrid--last { padding-bottom:clamp(70px,8vw,110px); }
.yg-pgrid__head { text-align:center; max-width:820px; margin:0 auto clamp(28px,3.6vw,48px); }
.yg-pgrid__grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:225px; gap:14px; }
.yg-tile { position:relative; display:block; overflow:hidden; border-radius:18px; isolation:isolate; border:1px solid #e4eaf4; transition:border-color .3s ease; }
.yg-tile:hover { border-color:rgba(3,3,184,.35); }
.yg-tile::after {
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:#0303B8;
clip-path:circle(0px at 13% 86%);
transition:clip-path .55s cubic-bezier(.65,0,.35,1);
}
.yg-tile:hover::after { clip-path:circle(150% at 13% 86%); }
.yg-tile img {
width:100%; height:100%; object-fit:cover; display:block;
transform:scale(1.02);
transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.yg-tile:hover img { transform:scale(1.08); }
/* white pill button carrying the product-group name */
.yg-tile__btn {
position:absolute; left:18px; bottom:18px; z-index:2; overflow:hidden;
display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
background:#0303B8; color:#fff;
font:600 13.5px/1 var(--title-font,"Space Grotesk",sans-serif); letter-spacing:.01em;
padding:12px 19px; border-radius:999px; transform-origin:left bottom;
transition:font-weight .35s ease, letter-spacing .45s cubic-bezier(.34,1.5,.64,1),
padding .45s cubic-bezier(.34,1.5,.64,1),
transform .55s cubic-bezier(.34,1.5,.64,1);
}
/* light sweeps across the pill as it grows */
.yg-tile__btn::before {
content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:-1;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
transform:skewX(-18deg); transition:left .7s cubic-bezier(.22,.61,.36,1);
}
.yg-tile:hover .yg-tile__btn::before { left:130%; }
.yg-tile__btn svg { flex:none; transition:transform .5s cubic-bezier(.34,1.6,.64,1); }
.yg-tile:hover .yg-tile__btn {
transform:scale(2);
font-weight:800; letter-spacing:.03em; padding:12px 22px;
}
.yg-tile:hover .yg-tile__btn svg { transform:translateX(5px) scale(1.15); }
/* mosaic spans (mirrors the reference layout) */
.yg-tile--a { grid-column:1/8; grid-row:1/3; }
.yg-tile--b { grid-column:8/13; grid-row:1/2; }
.yg-tile--c { grid-column:8/13; grid-row:2/3; }
.yg-tile--d { grid-column:1/6; grid-row:3/4; }
.yg-tile--e { grid-column:1/6; grid-row:4/5; }
.yg-tile--f { grid-column:6/13; grid-row:3/5; }
@media (max-width:991px) {
.yg-pgrid__grid { grid-auto-rows:200px; }
.yg-tile--a { grid-column:1/13; grid-row:auto; }
.yg-tile--b { grid-column:1/7; grid-row:auto; }
.yg-tile--c { grid-column:7/13; grid-row:auto; }
.yg-tile--d { grid-column:1/7; grid-row:auto; }
.yg-tile--e { grid-column:7/13; grid-row:auto; }
.yg-tile--f { grid-column:1/13; grid-row:auto; }
}
@media (max-width:575px) {
.yg-pgrid__grid { grid-auto-rows:190px; gap:12px; }
.yg-tile--a, .yg-tile--b, .yg-tile--c, .yg-tile--d, .yg-tile--e, .yg-tile--f { grid-column:1/13; }
.yg-tile__btn { left:14px; bottom:14px; padding:11px 16px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce) { .yg-tile img, .yg-tile__btn, .yg-tile__btn::before, .yg-tile__btn svg, .yg-tile::after { transition:none; } }
/* footer credit line */
.yg-old .ex-footer__bottom-links .disc {
margin:0; font-size:13px; color:rgba(255,255,255,.62);
}
.yg-old .ex-footer__bottom-links .disc a {
color:rgba(255,255,255,.85); text-decoration:none;
transition:color .2s var(--ease);
}
.yg-old .ex-footer__bottom-links .disc a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* ===== yg-cta — homepage contact call-to-action ===== */
.yg-cta { padding:0 0 110px; }
.yg-cta__card {
position:relative; overflow:hidden; border-radius:28px; background:#0303B8; color:#fff;
padding:clamp(34px,4.4vw,62px);
display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(26px,3.4vw,54px); align-items:center;
}
.yg-cta__card::after {
content:""; position:absolute; right:-60px; bottom:-70px; width:300px; height:300px;
border:1px solid rgba(255,255,255,.14); border-radius:50%; pointer-events:none;
}
.yg-cta__eyebrow {
display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
font:700 12px/1 var(--title-font,"Space Grotesk",sans-serif);
letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.75);
}
.yg-cta__eyebrow::before { content:""; width:22px; height:2px; background:#fff; }
.yg-cta__title {
font:800 clamp(1.5rem,1rem + 1.7vw,2.35rem)/1.15 var(--title-font,"Space Grotesk",sans-serif);
letter-spacing:-.02em; color:#fff; margin:0 0 14px;
}
.yg-cta__text { color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.75; margin:0; max-width:52ch; }
.yg-cta__side { position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; }
.yg-cta__row {
display:flex; align-items:center; gap:14px; padding:14px 18px;
background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:16px;
color:#fff; text-decoration:none;
transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.yg-cta__row:hover { background:#fff; color:#0303B8; border-color:#fff; transform:translateX(4px); }
.yg-cta__ic {
position:relative; flex:none; width:46px; height:46px; border-radius:15px;
display:grid; place-items:center; color:#fff;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
transition:background .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease,
color .3s ease, transform .35s cubic-bezier(.34,1.4,.64,1), border-radius .3s ease;
}
/* soft inner highlight so the tile reads as glass, not a flat square */
.yg-cta__ic::after {
content:""; position:absolute; inset:1px; border-radius:14px; pointer-events:none;
background:linear-gradient(160deg, rgba(255,255,255,.22), transparent 55%);
opacity:1; transition:opacity .3s ease;
}
.yg-cta__ic svg { position:relative; z-index:1; }
.yg-cta__row:hover .yg-cta__ic {
background:#0303B8; border-color:#0303B8; color:#fff;
border-radius:50%; transform:rotate(-8deg) scale(1.05);
}
.yg-cta__row:hover .yg-cta__ic::after { opacity:0; }
/* only the text spans stack — the icon tile keeps its centering grid */
.yg-cta__row > span > span, .yg-cta__row > span:not(.yg-cta__ic) { display:block; }
.yg-cta__row .yg-cta__ic { display:grid; place-items:center; }
.yg-cta__lbl { font:600 11px/1 var(--title-font,"Space Grotesk",sans-serif); letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-bottom:5px; }
.yg-cta__val { font:600 15.5px/1.3 var(--title-font,"Space Grotesk",sans-serif); }
.yg-cta__btn {
display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-top:6px;
background:#fff; color:#0303B8; text-decoration:none; border-radius:999px; padding:14px 28px;
font:600 15px/1 var(--title-font,"Space Grotesk",sans-serif);
transition:transform .25s ease;
}
.yg-cta__btn:hover { transform:translateY(-2px); color:#0303B8; }
@media (max-width:991px) { .yg-cta { padding-bottom:80px; } .yg-cta__card { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .yg-cta__row, .yg-cta__btn, .yg-cta__ic { transition:none; } }
/* ===== third-level menu (Ürünler > kategori > ürün) ===== */
.tp-header-menu ul li .sub-menu li.yg-has-sub { position:relative; }
/* chevron marking a category that opens a flyout */
.tp-header-menu .sub-menu li.yg-has-sub > a::after {
content:"\f054"; font-family:"Font Awesome 6 Pro"; font-weight:900; font-size:9px;
position:absolute; right:14px; top:50%; transform:translateY(-50%);
opacity:.45; color:currentColor; transition:opacity .2s ease, right .2s ease;
}
.tp-header-menu .sub-menu li.yg-has-sub:hover > a::after { opacity:1; right:11px; color:#fff; }
/* the flyout itself */
.tp-header-menu ul li .sub-menu li.yg-has-sub > .sub-menu {
left:calc(100% + 6px); top:-8px; width:max-content; min-width:225px; max-width:280px;
padding:8px; border-radius:14px;
box-shadow:0 24px 55px rgba(6,19,58,.16), 0 3px 10px rgba(6,19,58,.06);
opacity:0; visibility:hidden; transform:translateX(-6px);
transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.tp-header-menu ul li .sub-menu li.yg-has-sub:hover > .sub-menu {
top:-8px; opacity:1; visibility:visible; transform:none;
}
/* flip to the left when the flyout would leave the viewport */
.tp-header-menu ul li .sub-menu li.yg-has-sub.yg-flip > .sub-menu { left:auto; right:calc(100% + 6px); }
.tp-header-menu ul li .sub-menu li.yg-has-sub.yg-flip > a::after { content:"\f053"; right:auto; left:14px; }
.tp-header-menu ul li .sub-menu li.yg-has-sub.yg-flip:hover > a::after { left:11px; }
.tp-header-menu .sub-menu li.yg-has-sub > .sub-menu li a { white-space:nowrap; }
/* mobile menu: category groups inside the Ürünler accordion */
.yg-mmenu__subcat {
margin:14px 0 6px; padding-left:34px;
font:700 11.5px/1.3 var(--title-font,"Space Grotesk",sans-serif);
letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.yg-mmenu__subcat:first-child { margin-top:4px; }
/* ===== yg-rp — recent posts card (blog detail sidebar) ===== */
.yg-rp { background:#f3f7fd; border-radius:22px; padding:26px 20px; }
.yg-rp__title {
display:flex; align-items:center; gap:10px; padding-left:6px; margin:0 0 16px;
font:700 17px/1.2 var(--title-font,"Space Grotesk",sans-serif); color:#0c2461;
}
.yg-rp__dot { width:8px; height:8px; border-radius:50%; background:#0303B8; flex:none; }
.yg-rp__list { display:flex; flex-direction:column; gap:6px; }
.yg-rp__item {
display:flex; align-items:center; gap:14px; padding:10px; border-radius:16px; text-decoration:none;
transition:background .25s ease, transform .25s ease;
}
.yg-rp__item:hover { background:#fff; transform:translateX(4px); }
.yg-rp__thumb { flex:none; width:60px; height:60px; border-radius:14px; overflow:hidden; }
.yg-rp__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease, ease); }
.yg-rp__item:hover .yg-rp__thumb img { transform:scale(1.09); }
.yg-rp__body { min-width:0; }
.yg-rp__name {
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
font:600 14.5px/1.35 var(--title-font,"Space Grotesk",sans-serif); color:#0c2461;
transition:color .2s ease;
}
.yg-rp__item:hover .yg-rp__name { color:#0303B8; }
.yg-rp__date { display:block; margin-top:5px; font:500 12px/1 var(--body-font,"Inter",sans-serif); color:#8794ac; }
.yg-rp__arw {
margin-left:auto; flex:none; color:#0303B8;
opacity:0; transform:translate(-6px,6px);
transition:opacity .25s ease, transform .25s ease;
}
.yg-rp__item:hover .yg-rp__arw { opacity:1; transform:none; }
@media (max-width:991px) { .yg-rp { margin-top:40px; } }
@media (prefers-reduced-motion:reduce) { .yg-rp__item, .yg-rp__thumb img, .yg-rp__name, .yg-rp__arw { transition:none !important; } }
/* ===== yg-consent — KVKK cookie banner ===== */
.yg-consent {
position:fixed; left:18px; bottom:18px; z-index:9500;
max-width:390px; background:#fff; border-radius:18px;
box-shadow:0 22px 55px rgba(6,19,58,0.22), 0 3px 10px rgba(6,19,58,0.10);
padding:20px 22px;
opacity:0; transform:translateY(16px); pointer-events:none;
transition:opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.yg-consent.is-show { opacity:1; transform:none; pointer-events:auto; }
.yg-consent__text { margin:0 0 14px; font-family:var(--body-font, "Inter", sans-serif); font-size:13.5px; line-height:1.6; color:#51617f; }
.yg-consent__text a { color:#0303B8; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.yg-consent__btns { display:flex; gap:9px; }
.yg-consent__btn {
flex:1; padding:11px 0; border-radius:999px; cursor:pointer;
font-family:var(--title-font, "Space Grotesk", sans-serif); font-weight:600; font-size:13.5px;
transition:background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.yg-consent__accept { border:none; background:#0303B8; color:#fff; }
.yg-consent__accept:hover { background:#02027e; }
.yg-consent__deny { background:none; border:1px solid rgba(12,36,97,0.25); color:#0c2461; }
.yg-consent__deny:hover { background:rgba(12,36,97,0.06); }
.yg-consent__btn:active { transform:scale(0.97); }
@media (max-width:480px) { .yg-consent { left:12px; right:12px; bottom:12px; max-width:none; } }
@media (prefers-reduced-motion:reduce) { .yg-consent { transition:none; } }
/* ===== header bar + its clearance =====
is position:absolute over the page, so has to carry the header's
exact height as top padding. Any surplus shows up as a strip of page background
between the bar and the hero — which is what the three values below remove: the
clearance was a flat 140/110 against real header heights of 126/110/72.
Padding, not margin: a top margin here collapses through and ScrollSmoother
stops counting it, which cut the last ~140px of scroll and hid the footer.
These live here rather than in each page's inline