/*
 * Promocio-aloldal: "ejszakai aszfalt" - docs/89-promociok.md
 *
 * A design a VIP Kiterjesztett Garancia oldalbol jott (2026-10-04). Teljes
 * szelessegu hos a pecsettel, alatta szuk, olvashato hasab; a sarga (--po-jel)
 * az egyetlen hangos szin, minden mas halk. Minden szin explicit, szandekosan
 * egy (sotet) vilag.
 *
 * MINDEN osztaly po- elotagu, es minden szabaly a .promo-oldal keretre szol:
 * a webshop sajat .cimke / .sor / .zaro osztalyaival es a globalis h1-h3
 * szinevel igy nem utkozik. A szerkesztoben (TinyMCE) a body kapja a
 * .promo-oldal osztalyt, igy ott is ugyanigy nez ki.
 */
.promo-oldal{
  --po-aszfalt:#0C1015;
  --po-aszfalt-2:#141A21;
  --po-aszfalt-3:#1B232C;
  --po-vonal:#283240;
  --po-kreta:#EDF1F6;
  --po-kreta-halk:#95A3B3;
  --po-jel:#FFD400;
  --po-jel-sotet:#C9A500;
  --po-premio:#E2001A;
  --po-kijelzo:"Saira Condensed","Arial Narrow",Arial,sans-serif;
  --po-szoveg:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:dark;
  background:var(--po-aszfalt);
  color:var(--po-kreta);
  font-family:var(--po-szoveg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.promo-oldal *,.promo-oldal *::before,.promo-oldal *::after{box-sizing:border-box}
.promo-oldal h1,.promo-oldal h2,.promo-oldal h3{font-family:var(--po-kijelzo);text-wrap:balance;margin:0;color:inherit;letter-spacing:normal}
.promo-oldal p{margin:0}
.promo-oldal a{color:inherit}
/* a "Mit fed le pontosan?" ugras ne a webshop ragados fejlece ala keruljon */
.promo-oldal [id]{scroll-margin-top:96px}

.promo-oldal .po-sav{padding-inline:20px}
.promo-oldal .po-hasab{max-width:760px;margin-inline:auto}
.promo-oldal .po-szeles{max-width:1120px;margin-inline:auto}

.promo-oldal .po-cimke{
  font-family:var(--po-kijelzo);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--po-jel);
}

/* ---------------------------------------------------------------- hos */
.promo-oldal .po-hos{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #1E2A36 0%, rgba(30,42,54,0) 60%),
    linear-gradient(180deg,#0C1015 0%,#10161D 70%,#0C1015 100%);
  border-bottom:1px solid var(--po-vonal);
  padding-block:clamp(40px,9vw,84px) clamp(36px,7vw,64px);
}
/* fenyszoro-paszma a nedves aszfalton */
.promo-oldal .po-hos::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:180%;
  background:linear-gradient(104deg,rgba(255,212,0,0) 42%,rgba(255,212,0,.13) 50%,rgba(255,212,0,0) 58%);
  transform:translateX(-30%);
  animation:po-pasztaz 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes po-pasztaz{0%,100%{transform:translateX(-32%)}50%{transform:translateX(32%)}}
.promo-oldal .po-hos-racs{position:relative;display:grid;gap:clamp(28px,5vw,48px);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){.promo-oldal .po-hos-racs{grid-template-columns:1.25fr .75fr}}
.promo-oldal .po-hos h1{
  font-size:clamp(42px,8.5vw,78px);font-weight:800;line-height:.95;letter-spacing:-.015em;
  text-transform:uppercase;margin-block:14px 0;
}
.promo-oldal .po-hos h1 em{font-style:normal;color:var(--po-jel);display:block}
.promo-oldal .po-hos-alcim{margin-top:18px;max-width:46ch;font-size:clamp(17px,2.2vw,20px);color:var(--po-kreta-halk)}
.promo-oldal .po-hos-alcim b{color:var(--po-kreta);font-weight:600}

.promo-oldal .po-gombsor{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.promo-oldal .po-gomb{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--po-kijelzo);font-size:17px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;
  padding:14px 24px;border-radius:2px;border:1px solid transparent;
  transition:transform .15s ease,background-color .15s ease;
}
.promo-oldal .po-gomb:focus-visible{outline:3px solid var(--po-jel);outline-offset:3px}
.promo-oldal .po-gomb-fo{background:var(--po-jel);color:#13171C}
.promo-oldal .po-gomb-fo:hover{transform:translateY(-2px);background:#FFE14D}
.promo-oldal .po-gomb-mas{border-color:var(--po-vonal);color:var(--po-kreta)}
.promo-oldal .po-gomb-mas:hover{transform:translateY(-2px);background:var(--po-aszfalt-2)}

/* ------------------------------------------------------------ pecset */
.promo-oldal .po-pecset-hely,.po-pecset-hely{display:flex;justify-content:center}
.po-pecset{
  position:relative;width:min(300px,76vw);aspect-ratio:1;
  display:grid;place-items:center;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.po-pecset svg{width:100%;height:100%;display:block}
.po-pecset .po-gyuru{transform-origin:50% 50%;animation:po-forog 26s linear infinite}
@keyframes po-forog{to{transform:rotate(360deg)}}
.po-pecset-mag{
  position:absolute;inset:18%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:2px;
}
.po-pecset-csillagok{color:#E2001A;font-size:17px;letter-spacing:.22em;line-height:1}
.po-pecset-mag strong{font-family:"Saira Condensed","Arial Narrow",Arial,sans-serif;font-weight:800;text-transform:uppercase;color:#13171C;line-height:.92}
.po-pecset-felso{font-size:clamp(17px,4.6vw,21px)}
.po-pecset-also{font-size:clamp(25px,7vw,33px)}
.po-pecset-al{
  margin-top:5px;font-family:"Saira Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4A3F00;
}

/* ----------------------------------------------------------- szakasz */
.promo-oldal .po-szakasz{padding-block:clamp(48px,8vw,80px)}
.promo-oldal .po-szakasz + .po-szakasz{border-top:1px solid var(--po-vonal)}
.promo-oldal .po-szakasz h2{
  font-size:clamp(28px,4.6vw,40px);font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;margin-block:10px 0;
}
.promo-oldal .po-bevezeto{margin-top:14px;color:var(--po-kreta-halk);max-width:62ch}

/* kiemelt allitas */
.promo-oldal .po-allitas{background:var(--po-aszfalt-2);border-left:3px solid var(--po-jel);padding:clamp(22px,4vw,34px);margin-top:30px}
.promo-oldal .po-allitas p{font-family:var(--po-kijelzo);font-weight:600;font-size:clamp(21px,3.4vw,30px);line-height:1.2;text-transform:uppercase}
.promo-oldal .po-allitas p + p{margin-top:8px;color:var(--po-jel)}
.promo-oldal .po-allitas small{
  display:block;margin-top:16px;font-family:var(--po-szoveg);
  font-size:16px;line-height:1.55;text-transform:none;color:var(--po-kreta-halk);
}

/* lepesek */
.promo-oldal .po-lepesek{display:grid;gap:2px;margin-top:34px;background:var(--po-vonal)}
@media (min-width:720px){.promo-oldal .po-lepesek{grid-template-columns:repeat(3,1fr)}}
.promo-oldal .po-lepes{background:var(--po-aszfalt);padding:26px 24px;min-width:0}
.promo-oldal .po-lepes-szam{font-family:var(--po-kijelzo);font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--po-jel-sotet)}
.promo-oldal .po-lepes h3{margin-top:8px;font-size:23px;font-weight:700;text-transform:uppercase}
.promo-oldal .po-lepes p{margin-top:8px;color:var(--po-kreta-halk);font-size:16px}

/* feltetel-sorok (div, nem dl: a TinyMCE a dl-ben levo div-et kidobja) */
.promo-oldal .po-sorok{margin:30px 0 0;border-top:1px solid var(--po-vonal)}
.promo-oldal .po-sor{display:grid;gap:4px 28px;grid-template-columns:1fr;padding-block:18px;border-bottom:1px solid var(--po-vonal)}
@media (min-width:640px){.promo-oldal .po-sor{grid-template-columns:200px 1fr;align-items:baseline}}
.promo-oldal .po-sor-cim{font-family:var(--po-kijelzo);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--po-jel)}
.promo-oldal .po-sor-szoveg{margin:0;min-width:0}
.promo-oldal .po-sor-szoveg b{font-weight:600}

/* markak */
.promo-oldal .po-markak{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.promo-oldal .po-marka{
  font-family:var(--po-kijelzo);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 18px;border:1px solid var(--po-vonal);background:var(--po-aszfalt-2);
}
.promo-oldal .po-marka .po-jel{color:var(--po-jel)}

/* zaro */
.promo-oldal .po-zaro{
  background:radial-gradient(90% 120% at 50% 0%, #19222C 0%, rgba(25,34,44,0) 70%),var(--po-aszfalt);
  text-align:center;padding-block:clamp(48px,8vw,82px);
}
.promo-oldal .po-zaro h2{font-size:clamp(28px,5vw,44px)}
.promo-oldal .po-zaro .po-bevezeto{margin-inline:auto}
.promo-oldal .po-zaro .po-gombsor{justify-content:center}

.promo-oldal .po-apro{margin-top:26px;padding-top:18px;border-top:1px solid var(--po-vonal);color:var(--po-kreta-halk);font-size:14.5px;line-height:1.55}

/* az elonezet / lejart sav a hos folott */
.promo-oldal .po-jelzo{background:#FFF6DF;color:#6A4B00;font-weight:700;font-size:14px;padding:9px 20px;text-align:center}
.promo-oldal .po-jelzo.lejart{background:#1B232C;color:#EDF1F6;border-bottom:1px solid #283240}

/* a szerkesztoben a [[pecset]] rovidkod lathato legyen */
.promo-oldal .hir-rovidkod{background:#1B232C;border:1px dashed #FFD400;border-radius:6px;padding:8px 12px;font-family:ui-monospace,Menlo,monospace;font-size:13px;color:#FFD400}

@media (prefers-reduced-motion:reduce){
  .promo-oldal .po-hos::before,.po-pecset .po-gyuru{animation:none}
  .promo-oldal .po-gomb{transition:none}
  .promo-oldal .po-gomb-fo:hover,.promo-oldal .po-gomb-mas:hover{transform:none}
}