/* bs.css – Booking Sisters termékoldal, az alap.css után töltődik. 2026-10-23
   A foglaló vendég-/admin-felületének tokenjeivel (primary-dark #2D3429, primary #4E5B51, accent #D99A6B, soft #F4E9E8). */
:root {
  --bs-sotet: #2D3429;
  --bs-zold: #4E5B51;
  --bs-akcent: #D99A6B;
  --bs-akcent-tinta: #8C5530;
  --bs-puha: #F4E9E8;
  --bs-tinta: #23281F;
  --bs-halvany: #545B50;
  --bs-vonal: #E3E0D8;
  --bs-feher: #FFFFFF;
  --bs-sh-1: 0 1px 2px rgba(30, 36, 28, .05), 0 4px 14px -6px rgba(30, 36, 28, .10);
  --bs-sh-2: 0 2px 6px rgba(30, 36, 28, .06), 0 18px 40px -18px rgba(30, 36, 28, .28);
  --bs-sh-3: 0 30px 70px -24px rgba(10, 14, 9, .55);
  --szin-vonal: #E3E0D8;
}
body { font-size: 16.5px; }
h1, h2 { font-weight: 400; letter-spacing: -.005em; }
h3 { font-family: var(--betu-torzs); font-weight: 600; font-size: 1.08rem; line-height: 1.35; }
.szakasz-bevezeto p, .bevezeto-szoveg { color: var(--bs-halvany); font-size: 1.05rem; }
.felirat { color: var(--bs-akcent-tinta); }
.hos .felirat, .ajanlat .felirat, .sotet .felirat { color: var(--bs-akcent); }
.kozep { text-align: center; margin-left: auto; margin-right: auto; }

/* ===== Logó ===== */
.logo { gap: 10px; font-size: 1.45rem; font-weight: 400; letter-spacing: .01em; }
.logo img { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.lablec .logo { color: var(--bs-feher); margin-bottom: 8px; }
.fejlec { background: rgba(246, 245, 241, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.fomenu a { font-size: 15px; }
.fomenu a[aria-current="page"] { text-decoration: none; background: var(--bs-puha); }
.gomb-fo { box-shadow: 0 6px 18px -8px rgba(140, 85, 48, .55); }
.gomb-fo:hover { filter: none; background: #CF8C5B; }
.gomb-sotet:hover { background: #3a4335; }
.gomb-kicsi { min-height: 44px; padding: 10px 18px; font-size: 15px; }

/* ===== Hős ===== */
.hos { position: relative; overflow: hidden; padding: 44px 0 0; background: radial-gradient(120% 90% at 90% 0%, #4E5B51 0%, #2D3429 52%, #262c23 100%); }
.hos-racs { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.hos h1 { font-size: 2.35rem; font-size: clamp(2.35rem, 7.2vw, 4rem); line-height: 1.04; margin-bottom: .4em; }
.hos-osszefoglalo { color: #E9E5DC; font-size: 1.08rem; }
.hos-pipak { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14px; }
.hos-pipak li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(246, 245, 241, .08); border: 1px solid rgba(246, 245, 241, .18); color: #F1EEE7; }
.hos-pipak svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--bs-akcent); }
.hos-megjegyzes { margin: 14px 0 0; font-size: 14px; color: #D7D2C6; }
.hos .gomb-masodlagos { border-color: rgba(246, 245, 241, .55); }
.hos .gomb-masodlagos:hover { background: rgba(246, 245, 241, .08); }

/* Eszköz-makettek (valódi képernyőképek) */
.eszkozok { position: relative; padding: 0 0 26px; }
.bongeszo { position: relative; margin: 0 0 0 0; border-radius: 12px 12px 0 0; background: #fff; box-shadow: var(--bs-sh-3); overflow: hidden; }
.bongeszo-fej { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: #ECEAE4; border-bottom: 1px solid #DDD9D0; }
.bongeszo-fej i { width: 9px; height: 9px; border-radius: 50%; background: #CFCAC0; }
.bongeszo-fej span { margin-left: 10px; flex: 1; height: 14px; max-width: 260px; border-radius: 7px; background: #F8F7F3; font: 500 10px/14px var(--betu-torzs); color: #5C6157; padding: 0 8px; overflow: hidden; white-space: nowrap; }
.bongeszo img { width: 100%; height: auto; }
.telefon { position: absolute; right: 4%; bottom: 0; width: 34%; max-width: 230px; min-width: 120px; padding: 7px; border-radius: 30px; background: #12150F; box-shadow: var(--bs-sh-3); }
.telefon img { width: 100%; height: auto; border-radius: 24px; }
.telefon::before { content: ""; position: absolute; top: 13px; left: 50%; width: 26%; height: 5px; margin-left: -13%; border-radius: 3px; background: #12150F; z-index: 1; }
.hos .eszkozok { margin-bottom: 0; padding-bottom: 0; }
.hos .bongeszo { width: 92%; }

/* ===== Bizalmi sáv ===== */
.bizalom { padding: 20px 0; background: var(--bs-feher); border-bottom: 1px solid var(--bs-vonal); }
.bizalom ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--bs-sotet); }
.bizalom li { display: flex; align-items: center; gap: 9px; line-height: 1.3; }
.ikon-kor { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--bs-puha); color: var(--bs-akcent-tinta); }
.ikon-kor svg { width: 18px; height: 18px; }

/* ===== Kártyák, rácsok ===== */
.kartya { border-color: var(--bs-vonal); box-shadow: var(--bs-sh-1); border-radius: 16px; }
.kartya .ikon-kor { margin-bottom: 14px; }
.kartya p { color: var(--bs-halvany); }
.racs-2, .racs-3, .racs-4 { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.problema .kartya { background: #FBFAF7; }
.problema h3 { font-size: 1.02rem; }
.oszlop-cim { font-family: var(--betu-cim); font-size: 1.5rem; font-weight: 400; margin: 0 0 6px; }
.pillerek .kartya { position: relative; padding-top: 26px; }
.pillerek .szam { font: 400 2.6rem/1 var(--betu-cim); color: var(--bs-akcent); display: block; margin-bottom: 6px; }

/* Kép + szöveg blokk */
.kepszoveg { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.kepszoveg .eszkozok { max-width: 640px; }
.pipalista { margin: 16px 0 22px; padding: 0; list-style: none; }
.pipalista li { position: relative; padding: 6px 0 6px 32px; }
.pipalista li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: var(--bs-puha) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%238C5530' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sotet .pipalista li::before { background-color: rgba(246, 245, 241, .12); }

/* Képkártya (funkciók) */
.kepkartya { margin: 0; overflow: hidden; padding: 0; }
.kepkartya img { width: 100%; height: auto; border-bottom: 1px solid var(--bs-vonal); background: #fff; }
.kepkartya figcaption, .kepkartya .kepkartya-szoveg { padding: 18px 20px 20px; }
.kepkartya h3 { margin-bottom: 6px; }
.kepkartya p { margin: 0; }

/* Modulcsoportok (funkciók oldal) */
.modulcsoport { margin: 0 0 36px; }
.modulcsoport h2 { margin-bottom: 14px; }
.modullista { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.modullista li { padding: 16px 18px; background: var(--bs-feher); border: 1px solid var(--bs-vonal); border-radius: 14px; box-shadow: var(--bs-sh-1); }
.szakasz-alt .modullista li { background: var(--szin-hatter); }
.modullista strong { display: block; margin-bottom: 2px; }
.modullista p { margin: 0; font-size: 15px; color: var(--bs-halvany); }
.csomagjel { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 600 11.5px/1.7 var(--betu-torzs); letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.csomagjel-a { background: #E6F2E9; color: #256B3C; }
.csomagjel-s { background: #FCEFE0; color: #8A4A12; }
.csomagjel-p { background: #E8EDF9; color: #304B8F; }
.csomagjel-m { background: #ECEAE4; color: #3A4035; }
.megjegyzes { font-size: 14px; color: var(--bs-halvany); }
.jelmagyarazat { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 26px; padding: 0; list-style: none; font-size: 14px; }

/* ===== Árak ===== */
.arkartyak { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; padding: 0; list-style: none; }
.arkartya { position: relative; display: flex; flex-direction: column; padding: 26px 22px 24px; background: var(--bs-feher); border: 1px solid var(--bs-vonal); border-radius: 20px; box-shadow: var(--bs-sh-2); }
.arkartya h3 { font: 400 1.9rem/1.1 var(--betu-cim); margin: 0 0 4px; }
.arkartya-kinek { margin: 0 0 16px; color: var(--bs-halvany); font-size: 15px; }
.ar { margin: 0 0 4px; font: 600 2.1rem/1.1 var(--betu-torzs); letter-spacing: -.01em; color: var(--bs-sotet); }
.ar small { font-size: 15px; font-weight: 400; color: var(--bs-halvany); letter-spacing: 0; }
.ar-megj { margin: 0 0 18px; font-size: 13.5px; color: var(--bs-halvany); }
.arkartya .pipalista { margin-top: 0; font-size: 15px; flex: 1 1 auto; }
.arkartya .gomb { width: 100%; }
.arkartya-kiemelt { border: 2px solid var(--bs-sotet); }
.cimke-kiemelt { position: absolute; top: -13px; left: 22px; padding: 4px 12px; border-radius: 999px; background: var(--bs-sotet); color: var(--bs-feher); font: 600 12.5px/1.4 var(--betu-torzs); }
.kombo { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; border-radius: 22px; background: radial-gradient(120% 120% at 100% 0%, #4E5B51 0%, #2D3429 60%); color: var(--bs-feher); box-shadow: var(--bs-sh-2); }
.kombo h2, .kombo h3 { color: var(--bs-feher); }
.kombo p { color: #E4DFD5; }
.kombo .ar { color: var(--bs-feher); }
.kombo .ar small, .kombo .ar-megj { color: #D7D2C6; }
.kombo-arak { padding: 20px; border-radius: 16px; background: rgba(246, 245, 241, .07); border: 1px solid rgba(246, 245, 241, .16); }
.alapito { margin-top: 18px; padding: 22px; border-radius: 18px; background: var(--bs-puha); border: 1px solid #EAD5D2; }
.alapito h3 { margin-bottom: 6px; }
.alapito p:last-child { margin-bottom: 0; }
.apro { font-size: 13.5px; color: var(--bs-halvany); }
.kombo .apro { color: #CFC9BC; }
.ajanlo-doboz { display: grid; grid-template-columns: 1fr; gap: 6px 18px; padding: 22px; border-radius: 18px; background: var(--bs-feher); border: 1px dashed #C9B49F; }
.ajanlo-doboz h3 { margin: 0; }
.ajanlo-doboz p { margin: 0; }

/* Összehasonlító táblázat: mobilon soronként kártya (modulnév felül, alatta 3 csomag) */
.osszevet { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: var(--bs-feher); border: 1px solid var(--bs-vonal); border-radius: 16px; overflow: hidden; }
.osszevet caption { text-align: left; padding: 0 0 12px; font-size: 14px; color: var(--bs-halvany); }
.osszevet thead th { position: sticky; top: 64px; z-index: 2; background: var(--bs-sotet); color: var(--bs-feher); font-weight: 600; padding: 12px 8px; text-align: center; font-size: 14px; }
.osszevet thead th:first-child { text-align: left; }
.osszevet th[scope="row"] { text-align: left; font-weight: 400; padding: 11px 12px; }
.osszevet td { text-align: center; padding: 11px 6px; }
.osszevet tbody tr:nth-child(even) th, .osszevet tbody tr:nth-child(even) td { background: #FAF9F6; }
.osszevet tbody th, .osszevet tbody td { border-top: 1px solid #EEECE6; }
.osszevet .csoportsor th { background: var(--bs-puha) !important; font-weight: 600; color: var(--bs-sotet); padding: 10px 12px; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; }
.van, .nincs { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
.van { background: #E6F2E9; color: #256B3C; }
.van svg { width: 15px; height: 15px; }
.nincs { color: #8C9188; }
@media (max-width: 640px) {
  .osszevet, .osszevet tbody { display: block; border: 0; border-radius: 0; background: transparent; }
  .osszevet thead { display: block; position: sticky; top: 64px; z-index: 3; }
  .osszevet thead tr { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 12px; overflow: hidden; }
  .osszevet thead th { position: static; padding: 10px 4px; font-size: 13px; }
  .osszevet thead th:first-child { display: none; }
  .osszevet tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; background: var(--bs-feher); border-bottom: 1px solid var(--bs-vonal); }
  .osszevet tbody tr:nth-child(even) th, .osszevet tbody tr:nth-child(even) td { background: transparent; }
  .osszevet tbody th[scope="row"] { grid-column: 1 / -1; padding: 12px 12px 2px; border-top: 0; font-weight: 600; font-size: 14.5px; }
  .osszevet tbody td { padding: 4px 4px 12px; border-top: 0; }
  .osszevet .csoportsor { display: block; background: transparent; border: 0; }
  .osszevet .csoportsor th { display: block; margin-top: 18px; border-radius: 10px; }
}

/* ===== Demo / galéria ===== */
.video-keret { margin: 0 0 28px; }
.video-keret video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #1c211a; box-shadow: var(--bs-sh-2); }
.video-keret figcaption, .kepsor figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--bs-halvany); }
.kepsor { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 0; padding: 0; list-style: none; }
.kepsor figure { margin: 0; }
.kepsor img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--bs-vonal); box-shadow: var(--bs-sh-1); background: #fff; }
.demo-kartyak .kartya { display: flex; flex-direction: column; }
.demo-kartyak .kartya p { flex: 1 1 auto; }

/* ===== Esettanulmány-teaser ===== */
.referencia { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.referencia li { padding: 18px 20px; border-radius: 16px; background: rgba(246, 245, 241, .07); border: 1px solid rgba(246, 245, 241, .16); }
.referencia strong { display: block; font: 400 1.4rem/1.2 var(--betu-cim); color: var(--bs-feher); }
.referencia span { font-size: 14px; color: #D7D2C6; }
.sotet { background: radial-gradient(120% 120% at 0% 0%, #4E5B51 0%, #2D3429 55%); color: var(--bs-feher); }
.sotet p { color: #E4DFD5; }
.sotet a:not(.gomb) { color: var(--bs-feher); }

/* ===== Űrlap ===== */
.urlap-keret { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.urlap { padding: 24px 18px; background: var(--bs-feher); border: 1px solid var(--bs-vonal); border-radius: 20px; box-shadow: var(--bs-sh-2); }
.urlap fieldset { margin: 0 0 18px; padding: 0; border: 0; }
.urlap legend { padding: 0; margin: 0 0 8px; font-weight: 600; }
.mezo { margin: 0 0 16px; }
.mezo label, .mezo .cimke { display: block; margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.mezo .sugo { display: block; margin: -2px 0 6px; font-size: 13.5px; color: var(--bs-halvany); font-weight: 400; }
.kotelezo { color: #9B2C2C; }
.urlap input[type="text"], .urlap input[type="email"], .urlap input[type="tel"], .urlap input[type="url"], .urlap select, .urlap textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #CFCBC1; border-radius: 12px; background: #FDFCFA;
  font: 400 16px/1.4 var(--betu-torzs); color: var(--bs-tinta);
}
.urlap textarea { min-height: 110px; resize: vertical; }
.urlap input:focus, .urlap select:focus, .urlap textarea:focus { border-color: var(--bs-zold); outline: 3px solid rgba(217, 154, 107, .55); outline-offset: 1px; }
.urlap [aria-invalid="true"] { border-color: #9B2C2C; background: #FBECEB; }
.hiba-uzenet { display: block; margin-top: 6px; font-size: 14px; color: #9B2C2C; font-weight: 600; }
.hiba-uzenet[hidden] { display: none; }
.valasztok { display: flex; flex-wrap: wrap; gap: 8px; }
.valaszto { position: relative; }
.valaszto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.valaszto span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 15px; border: 1.5px solid #CFCBC1; border-radius: 999px; background: #FDFCFA; font-size: 15px; cursor: pointer; }
.valaszto input:checked + span { background: var(--bs-sotet); border-color: var(--bs-sotet); color: var(--bs-feher); }
.valaszto input:focus-visible + span { outline: 3px solid var(--bs-akcent); outline-offset: 2px; }
.pipa-mezo { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; font-size: 15px; }
.pipa-mezo input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--bs-sotet); }
.mezen-kivul { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.urlap .gomb { width: 100%; min-height: 52px; font-size: 17px; }
.urlap-hiba { padding: 12px 14px; margin: 0 0 16px; border-radius: 12px; background: #FBECEB; color: #7A2020; font-weight: 600; }
.urlap-hiba[hidden] { display: none; }
.ajanlokod-jel { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 18px; border-radius: 12px; background: #E6F2E9; color: #1E5631; font-size: 15px; }
.ajanlokod-jel[hidden] { display: none; }
.oldalsav-lepesek { margin: 0; padding: 0; list-style: none; counter-reset: l; }
.oldalsav-lepesek li { counter-increment: l; position: relative; padding: 0 0 18px 48px; }
.oldalsav-lepesek li::before { content: counter(l); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--bs-sotet); color: var(--bs-feher); font: 600 15px/34px var(--betu-torzs); text-align: center; }
.oldalsav-lepesek strong { display: block; }

/* ===== Aloldal-hős ===== */
.aloldal-hos { padding: 40px 0 44px; }
.aloldal-hos h1 { font-size: 2.2rem; font-size: clamp(2.2rem, 6.4vw, 3.4rem); }
.aloldal-hos .hos-osszefoglalo { max-width: 46em; }

/* ===== Előnézeti jelzés (csak noindex-építésben látszik, az epit.ps1 kapcsolja) ===== */
.elonezet-jel { margin: 0; padding: 8px 16px; background: #FCEFE0; color: #6E3A0E; font-size: 13.5px; text-align: center; }

/* ===== Szövegoldal ===== */
.szovegoldal h2 { font-family: var(--betu-cim); font-weight: 400; }
.cegadat-hiany { padding: 2px 6px; border-radius: 6px; background: #FCEFE0; color: #6E3A0E; font-weight: 600; }
.figyelmeztetes { padding: 14px 16px; border-radius: 12px; background: #FCEFE0; color: #6E3A0E; font-size: 15px; }

/* ===== Lábléc ===== */
.lablec { background: #1F241C; }
.lablec p { color: #CFC9BC; }

/* ===== Nagyobb kijelző ===== */
@media (min-width: 640px) {
  .bizalom ul { grid-template-columns: repeat(4, 1fr); }
  .racs-2 { grid-template-columns: 1fr 1fr; }
  .kepsor { grid-template-columns: repeat(2, 1fr); }
  .modullista { grid-template-columns: 1fr 1fr; }
  .referencia { grid-template-columns: 1fr 1fr; }
  .urlap { padding: 30px 28px; }
}
@media (min-width: 761px) {
  .hos { padding-top: 72px; }
  .racs-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .racs-4 { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .arkartyak { grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
  .kombo { grid-template-columns: 1.2fr 1fr; padding: 40px; align-items: center; }
  .ajanlo-doboz { grid-template-columns: 1fr auto; align-items: center; padding: 26px 30px; }
}
@media (min-width: 1000px) {
  .hos-racs { grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: end; }
  .hos-tartalom { padding-bottom: 80px; }
  .hos .bongeszo { width: 100%; }
  .kepszoveg { grid-template-columns: 1fr 1.1fr; gap: 56px; }
  .kepszoveg.fordit > :first-child { order: 2; }
  .racs-4 { grid-template-columns: repeat(4, 1fr); }
  .modullista { grid-template-columns: repeat(3, 1fr); }
  .urlap-keret { grid-template-columns: 1fr 1.35fr; gap: 48px; }
  .urlap-keret > aside { position: sticky; top: 96px; }
}

/* ===== 2026-10-25: kompaktabb méretek – a nyitókép egy képernyőn elférjen ===== */
body { font-size: 16px; }
h2 { font-size: 1.6rem; font-size: clamp(1.6rem, 3.1vw, 2.2rem); }
.hos h1 { font-size: 2.1rem; font-size: clamp(2.1rem, 4.3vw, 3.05rem); line-height: 1.06; }
.hos-osszefoglalo, .szakasz-bevezeto p, .bevezeto-szoveg { font-size: 1rem; }
.gomb { padding: 11px 22px; font-size: 15px; }
.hos-pipak { margin-top: 16px; font-size: 13px; }
.hos-pipak li { padding: 6px 11px; }
a[href^="tel:"] { white-space: nowrap; }
@media (min-width: 761px) {
  .szakasz { padding: 64px 0; }
  .hos { padding-top: 40px; }
  .fejlec .racs { min-height: 58px; }
}
@media (min-width: 1000px) {
  .hos-racs { gap: 40px; }
  .hos-tartalom { padding-bottom: 44px; }
}

/* ===== Élő makett: mozgó egér, kattintás (elo.js) ===== */
.elo-reteg { position: absolute; pointer-events: none; overflow: hidden; z-index: 2; }
.elo-kurzor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -2px 0 0 -3px; opacity: 0; transition: transform .34s cubic-bezier(.3, .7, .2, 1), opacity .2s; will-change: transform; }
.elo-kurzor.lat { opacity: 1; }
.elo-kurzor svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.elo-kurzor.nyom svg { transform: scale(.86); transition: transform .08s; }
.elo-hullam { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(217, 154, 107, .95); background: rgba(217, 154, 107, .22); animation: elo-hullam .5s ease-out forwards; }
@keyframes elo-hullam { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.elo-kijelzo { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 3 / 5; background: #fff; }
.elo-kijelzo img { display: block; border-radius: 0; transition: transform .75s cubic-bezier(.15, .85, .25, 1); will-change: transform; }
.elo-ujj { position: absolute; left: 58%; top: 80%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(45, 52, 41, .28); border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; z-index: 2; }
.elo-ujj.megy { animation: elo-ujj .62s cubic-bezier(.3, .6, .2, 1) forwards; }
@keyframes elo-ujj { 0% { opacity: 0; top: 80%; transform: scale(.8); } 15% { opacity: 1; top: 80%; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; top: 34%; transform: scale(.9); } }
.hang-kapcsolo { position: fixed; left: 14px; bottom: 14px; z-index: 1300; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 11px; border: 1px solid var(--bs-vonal, rgba(0, 0, 0, .12)); border-radius: 999px; background: rgba(255, 255, 255, .94); color: #2D3429; font: 600 13px/1 var(--betu-torzs); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); cursor: pointer; }
.hang-kapcsolo svg { width: 18px; height: 18px; }
.hang-kapcsolo[hidden] { display: none; }
@media (max-width: 760px) { html.msav-be .hang-kapcsolo { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.video-hang-gomb { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px 0 12px; border: 0; border-radius: 999px; background: rgba(45, 52, 41, .9); color: #fff; font: 600 14px/1 var(--betu-torzs); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer; }
.video-hang-gomb svg { width: 18px; height: 18px; }
.video-hang-gomb:hover { background: #2D3429; }
.video-hang-gomb[hidden] { display: none; }
.bongeszo .video-hang-gomb { top: 38px; }