/* SSP — térbeli előnézet, 2026-10-10.
   Az eredeti stíluslapok UTÁN töltendő. Az arculati színek, a világos
   lila vászon, a logók, a videófátyol és a médiaméretek változatlanok. */
:root{
  --depth-panel:inset 0 1px 0 rgba(255,255,255,.23),inset 0 -2px 0 rgba(0,0,0,.28),0 5px 0 #0b1721,0 10px 12px -5px rgba(20,31,45,.35),8px 22px 32px -14px rgba(54,40,83,.34),-4px -4px 12px rgba(255,255,255,.38);
  --depth-panel-lift:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.28),0 6px 0 #0b1721,0 15px 18px -6px rgba(20,31,45,.38),10px 27px 36px -13px rgba(54,40,83,.36);
  --depth-small:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.2),0 2px 0 rgba(5,15,25,.7),0 4px 7px rgba(7,18,29,.2);
  --depth-button:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.2),0 3px 0 #08131d,0 7px 12px -4px rgba(13,24,40,.36);
  --depth-title:0 1px 0 rgba(0,0,0,.52),0 2px 0 rgba(0,0,0,.26),0 4px 6px rgba(0,0,0,.28);
  --depth-canvas-title:0 1px 0 #fff,0 2px 0 #b4aacb,0 3px 0 #b4aacb,0 6px 8px rgba(57,44,84,.22);
}

/* A folyószöveg finom kontaktárnyéka nem homályosítja el a betűformát. */
body{text-shadow:0 1px 1px rgba(0,0,0,.24)}
svg{text-shadow:none}
h1,h2,h3,h4,.h2,.bn,.pn,.amount,.mono,.brand-full,.spot-benefit,
.portfolio-index-card strong,.contact-card .val{ text-shadow:var(--depth-title) }
.hero-copy > :is(h1,h2,.h2),
section > .wrap > :is(h1,h2,h3,.h2,.claim),
.fb-szoveg > :is(h2,.h2),.inquiry-aside > h3{
  text-shadow:var(--depth-canvas-title);
}
.hero-copy > :is(.kicker,.lede,.eyebrow),
section > .wrap > :is(.lede,.eyebrow,.map-hint,.offer-footnote,.portfolio-note,.pricing-terms,.pricing-free,.tl-szam,p:not([class])),
.fb-szoveg > :is(.lede,.eyebrow),.fb-jegyzet,
.inquiry-aside > :is(ol,p),.inquiry-aside .contact-email,
.promo-filters > :is(label,p),.promo-empty,[data-case-count]{
  text-shadow:0 -1px 0 rgba(255,255,255,.65),0 1px 1px rgba(57,44,84,.17);
}
/* A cikkek és videólapok sötét felületén a világos betű kap mélységet. */
:is(.bp,.watch-page,.workshop) > .wrap.bp-wrap > :is(h1,h2,h3),
.bp > .wrap > :is(h1,h2,h3),.watch-page > .wrap > :is(h1,h2,h3){
  text-shadow:var(--depth-title);
}
.bp > .wrap > :is(p,.eyebrow),.watch-page > .wrap > :is(p,.eyebrow),
.workshop > .wrap.bp-wrap > .eyebrow{text-shadow:0 1px 1px rgba(0,0,0,.24)}

/* A nagy tárgyak vastagsága: felső fényél, alsó perem és vetett árnyék. */
.sticker,.card,.badge,.note,.logo-card,.step,.phase,.case,.tier,.tier.is-main,.contact-card,
.nope-box,.list,.faq details,.tl-kartya,.tl-elem.is-featured .tl-kartya,.tl-ures,.fbk,.fb-uzenet,
.fb-tartalek:only-child,.service-card,.portfolio-case,.portfolio-index-card,
.project-form,.promo-spotlight-panel,.promo-preview,.promo-card,
.map-grid > .block,.map-grid .plaza,.house,.work-tabs,
.bp > .wrap,.watch-page > .wrap,.workshop > .wrap.bp-wrap{
  box-shadow:var(--depth-panel);
}
.bp > .wrap,.watch-page > .wrap,.workshop > .wrap.bp-wrap{border-radius:16px}
.spot{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 0 #08131d,0 30px 90px rgba(0,0,0,.55)}
.top{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 #08131d,0 8px 18px rgba(32,25,50,.18)}
.visit-counter{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 8px rgba(32,25,50,.16)}
.subnav{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 #08131d,0 8px 14px rgba(32,25,50,.18)}
footer{box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 -4px 16px rgba(32,25,50,.14)}

/* Címkék, jelzések és a már meglevő ↗ gomb: új dekorációs réteg nélkül. */
.tag,.short-name,.case-badges span,.case-flow li,.promo-meta span,
.map-grid .ref-jel,.map-grid .store-tag,.has-video .live,.tg,.tl-ev span,
.list .mk,.checklist .n,.phase .meta .num,.promo-play,.promo-total,
.map-grid .block::after,.promo-spotlight-label > span,
.work-tabs a[aria-current="page"]{box-shadow:var(--depth-small)}
.eyebrow::before,.dot,.visit-dot{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 3px rgba(0,0,0,.2)}
.spot-head,.case-head,.house .roof{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(0,0,0,.18)}

/* A média eredeti tartalma és vágása megmarad; csak a keret emelkedik. */
.watch-media,.spot-video,.plaza-film video,.bp-yt,.bp-native-video video,
.bp-abra img{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 0 #08131d,0 8px 16px -5px rgba(0,0,0,.35)}

/* Kézbe vehető gombok, belesüllyesztett beviteli mezők. */
.btn,.btn.btn-promo,.spot-cta .btn,.cta-top,.burger,.theme-btn,.lang,
.spot-close,.case-filters button,.bp-masol-gomb,.bp-lep,
.top-nav > a.nav-promo{box-shadow:var(--depth-button)}
.project-form input:not([type="hidden"]),.project-form select,
.project-form textarea,.promo-filters select,.bp-masol-ertek{
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.18);
}
.map-grid > .block[aria-pressed="true"]{
  box-shadow:var(--depth-panel),inset 0 0 0 2px var(--bc);
}
.case-filters button[aria-pressed="true"]{box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.25)}

@media (hover:hover) and (pointer:fine){
  .map-grid > .block:is(:hover,:focus-visible),a.badge:is(:hover,:focus-visible),
  .portfolio-index-card:is(:hover,:focus-visible),.promo-preview:is(:hover,:focus-visible),
  .tl-kartya:hover,.tl-elem.is-featured .tl-kartya:hover{transform:translateY(-4px);box-shadow:var(--depth-panel-lift)}
  .map-grid > .block[aria-pressed="true"]:is(:hover,:focus-visible){
    box-shadow:var(--depth-panel-lift),inset 0 0 0 2px var(--bc);
  }
  :is(.btn,.cta-top,.burger,.lang,.spot-close,.case-filters button,.bp-masol-gomb,.bp-lep):not([disabled]):not([aria-disabled="true"]):hover{
    box-shadow:var(--depth-button);transform:translateY(-2px);
  }
}
:is(.btn,.cta-top,.burger,.lang,.spot-close,.case-filters button,.bp-masol-gomb,.bp-lep):not([disabled]):not([aria-disabled="true"]):active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.22),0 1px 0 #08131d,0 2px 4px rgba(0,0,0,.18);
}
.btn[aria-disabled="true"],.btn[aria-disabled="true"]:hover,
.project-form [disabled]{box-shadow:none;transform:none}

/* A szolgáltatások kompakt, egymás alatti ovális sorok. */
.service-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
.service-grid > .service-card{
  display:grid;grid-template-columns:112px minmax(0,1fr) auto;
  column-gap:22px;row-gap:3px;align-items:center;
  padding:13px 28px;border-radius:999px;
}
.service-card > .service-number{display:none}
.service-card > .eyebrow{
  grid-column:1;grid-row:1 / 3;margin:0;color:var(--c-ssp);
  font-size:10.5px;letter-spacing:.06em;line-height:1.3;
}
.service-card > .eyebrow::before{width:10px;height:10px;flex:0 0 auto}
.service-card > h3{
  grid-column:2;grid-row:1;font-size:17px;line-height:1.2;
  margin:0;max-width:none;
}
.service-card > p:not(.eyebrow){
  grid-column:2;grid-row:2;font-size:12.5px;line-height:1.45;
  margin:0;max-width:none;
}
.service-card > .btn{
  grid-column:3;grid-row:1 / 3;align-self:center;justify-self:end;
  margin:0;max-width:220px;width:auto;min-height:44px;
  border-radius:999px;padding:8px 14px;font-size:12px;line-height:1.25;
}
@media(max-width:800px){
  .service-grid > .service-card{
    grid-template-columns:minmax(0,1fr) 44px;
    column-gap:14px;row-gap:3px;padding:15px 32px;
  }
  .service-card > .eyebrow{grid-column:1;grid-row:1;font-size:10px}
  .service-card > h3{grid-column:1;grid-row:2;font-size:16px}
  .service-card > p:not(.eyebrow){grid-column:1;grid-row:3;font-size:12px;line-height:1.4}
  .service-card > .btn{
    grid-column:2;grid-row:1 / 4;justify-content:center;
    width:44px;min-height:44px;padding:0;gap:0;
  }
  .service-action-label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
}

@media (max-width:480px){
  :root{--depth-canvas-title:0 1px 0 #fff,0 2px 0 #b4aacb,0 4px 6px rgba(57,44,84,.2)}
}
@media (prefers-reduced-motion:reduce){
  .map-grid > .block:is(:hover,:focus-visible),a.badge:is(:hover,:focus-visible),
  .portfolio-index-card:is(:hover,:focus-visible),.promo-preview:is(:hover,:focus-visible),
  .tl-kartya:hover,.tl-elem.is-featured .tl-kartya:hover,
  :is(.btn,.cta-top,.burger,.lang,.spot-close,.case-filters button,.bp-masol-gomb,.bp-lep):is(:hover,:active){transform:none!important}
}
@media (forced-colors:active){
  body,*{text-shadow:none!important;box-shadow:none!important}
}
@media print{
  body,*{text-shadow:none!important;box-shadow:none!important}
}

/* A single scrollable timeline panel, with posts separated by rules. */
.fb-idovonal{display:block;max-height:720px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--c-ssp) var(--surface);background:var(--surface);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--depth-panel);padding:0 18px}
.fb-idovonal:focus-visible{outline:3px solid var(--c-ssp);outline-offset:5px}
.fb-idovonal-fej{padding:20px 0 17px;border-bottom:1px solid var(--edge);color:var(--ink)}
.fb-idovonal-fej strong{display:block;font-size:17px;color:var(--c-ssp)}
.fb-status{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--muted)}
.fb-idovonal .fbk{border:0;border-radius:0;border-bottom:1px solid var(--edge);box-shadow:none!important;background:transparent;grid-template-columns:120px minmax(0,1fr);overflow:hidden}
.fb-idovonal .fbk:not(:has(.fbk-kep)){grid-template-columns:1fr}
.fb-idovonal .fbk-kep{top:18px;width:112px;height:112px;max-height:calc(100% - 36px);border:1px solid var(--edge);border-radius:10px;background:var(--plaza);box-shadow:none}
.fb-idovonal .fbk-torzs{padding:18px 0 18px 14px;min-height:148px}
.fb-idovonal .fbk:not(:has(.fbk-kep)) .fbk-torzs{padding-left:0;min-height:0}
.fb-idovonal .fbk-datum{display:block;color:var(--muted)}
.fb-idovonal .fbk-szoveg{white-space:pre-line;font-size:13.5px}
.fb-idovonal-teljes{display:block;padding:19px 0;color:var(--c-ssp);font-size:13px;font-weight:700;text-decoration:none}
@media(max-width:540px){.fb-idovonal{max-height:640px;padding:0 15px}.fb-idovonal .fbk{grid-template-columns:82px minmax(0,1fr)}.fb-idovonal .fbk-kep{width:74px;height:100px}.fb-idovonal .fbk-torzs{padding-left:10px;min-height:136px}.fb-idovonal .fbk-szoveg{font-size:13px}}

/* 2026-10-10: olvasható Facebook-gomb és további lime kiemelések. */
:root{--ssp-lime-text-shadow:0 1px 1px rgba(0,0,0,.55),0 0 9px rgba(141,210,63,.16)}
.fb-alatta .btn{
  background:var(--surface);color:var(--c-ssp);
  border-color:color-mix(in srgb,var(--c-ssp) 58%,var(--surface));
  text-shadow:var(--ssp-lime-text-shadow);
}
.fb-alatta .btn:is(:hover,:focus-visible){background:#203a4b;color:#adf163}
.fb-alatta .btn:focus-visible{outline:3px solid #152836;outline-offset:4px}
.fb-idovonal .fbk-link{color:var(--c-ssp);text-underline-offset:4px}
.fb-idovonal .fbk-link:is(:hover,:focus-visible){text-decoration:underline}

/* A világos vásznon a lime felirat sötét címkealapot kap. */
.hero-copy > .eyebrow,section > .wrap:not(.bp-wrap) > .eyebrow,.fb-szoveg > .eyebrow{
  max-width:100%;padding:6px 12px;border-radius:999px;
  background:var(--surface);color:var(--c-ssp);
  border:1px solid color-mix(in srgb,var(--c-ssp) 32%,var(--surface));
  line-height:1.4;text-shadow:var(--ssp-lime-text-shadow);box-shadow:var(--depth-small);
}
/* Az alkalmazáscsempék neve a már meglévő saját márkatokent használja.
   A csempe felülete, videója, leírása és elrendezése változatlan. */
.map-grid > .block > .bn{
  color:var(--bc,var(--ink));text-shadow:var(--depth-title);
}