:root {
    --bezs: #ece4d6;
    --sotet: #1c1915;
    --krem: #f6f1e8;
    --kiemelt: #c2412d;
    --kiemelt-vilagos: #f08a6f;
    --halvany: #6b6358;
    --halvany-sotet: #a79d8f;
    --halvany-meleg: #cfc5b4;
    --vonal: #cfc5b4;
    --vonal-sotet: #3a352e;
    --mezo-sotet: #2a2621;
    --kijelolt-sor: #e3d9c7;
    --foglalt: #5a534a;
    --oldal-szel: clamp(16px, 3vw, 40px);
    --kartya-kor: clamp(12px, 1.4vw, 24px);
    --kartya-res: clamp(8px, 1vw, 16px);
    --szakasz-res: clamp(80px, 11vw, 160px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
    margin: 0;
    background: var(--bezs);
    color: var(--sotet);
    font-family: 'Instrument Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.75; }
input, button { font-family: inherit; }
input::placeholder { color: #8a8175; }
[hidden] { display: none !important; }

.kitolto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kep-kartya { position: relative; overflow: hidden; border-radius: var(--kartya-kor); }
.kezirat { font-family: 'Yellowtail', cursive; line-height: 1; }
.kiemelt-szin { color: var(--kiemelt); }
.halvany { color: var(--halvany); }
.halvany-sotet { color: var(--halvany-sotet); }
.felirat { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.cim-nagy {
    margin: 0;
    font-family: 'Anybody';
    font-weight: 900;
    font-stretch: 140%;
    font-size: clamp(56px, 8vw, 120px);
    line-height: 0.82;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.pill {
    display: inline-block;
    border-radius: 99px;
    padding: 12px 20px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 15px;
}
.pill-kiemelt {
    background: var(--kiemelt);
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pill-feher { background: #fff; color: var(--sotet); }
.pill-keret { border-color: currentColor; }
.pill-sotet { background: var(--sotet); color: var(--krem); }
.pill-nagy { padding: 16px 26px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.gombsor { display: flex; gap: 10px; flex-wrap: wrap; }

.cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--krem);
    color: var(--sotet);
    border-radius: 99px;
    padding: 10px 10px 10px 26px;
    font-weight: 600;
    font-size: 16px;
}
.cta-nyil {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--kiemelt);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.cta-kicsi { padding-left: 24px; align-self: flex-start; }
.cta-kicsi .cta-nyil { width: 44px; height: 44px; }

.fejlec {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    color: var(--krem);
    transition: background 0.3s, color 0.3s;
}
.fejlec.gorgetett { background: rgba(236, 228, 214, 0.94); color: var(--sotet); }
.fejlec-belso {
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px var(--oldal-szel);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.fejlec-menu {
    display: flex;
    gap: 28px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fejlec-logo { font-family: 'Yellowtail', cursive; font-size: clamp(34px, 4vw, 46px); line-height: 1; text-align: center; }
.fejlec-jobb { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.nyelvvalto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    min-width: 44px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
/* mobilon a középre tett logó mellé nem fér ki a menü és a gombok, ezért a logó balra kerül */
@media (max-width: 899px) {
    .fejlec-belso { grid-template-columns: 1fr auto; }
    .fejlec-menu { display: none; }
    .fejlec-logo { text-align: left; }
}

.hero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    background: var(--sotet);
    color: var(--krem);
    overflow: hidden;
}
.hero-arnyek {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 25, 21, 0.55) 0%, rgba(28, 25, 21, 0) 30%, rgba(28, 25, 21, 0) 45%, rgba(28, 25, 21, 0.8) 100%);
    pointer-events: none;
}
.hero-tartalom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--oldal-szel) clamp(24px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 28px);
}
.hero-felso { display: flex; flex-direction: column; gap: 10px; }
.hero-alcim { margin: 0; font-size: clamp(18px, 1.6vw, 22px); max-width: 520px; line-height: 1.4; font-weight: 500; }
.hero-also { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
/* a HTML-ben "Averlo hair studio" a sorrend (a keresőnek ez a főcím), a kiírás fordított */
.hero-nev {
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
    font-family: 'Anybody';
    font-weight: 900;
    font-stretch: 150%;
    font-size: clamp(64px, 13vw, 220px);
    line-height: 0.8;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.hero-alnev {
    font-family: 'Yellowtail', cursive;
    font-weight: 400;
    font-stretch: normal;
    font-size: clamp(34px, 4.4vw, 72px);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 0.12em 0.08em;
}

.bemutato { max-width: 1440px; margin: 0 auto; padding: var(--szakasz-res) var(--oldal-szel); }
.bemutato-szoveg {
    margin: 0;
    font-family: 'Anybody';
    font-weight: 700;
    font-stretch: 110%;
    font-size: clamp(34px, 5vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}
.jelveny {
    float: right;
    position: relative;
    width: clamp(92px, 12vw, 160px);
    height: clamp(92px, 12vw, 160px);
    shape-outside: circle(50%);
    margin: 0 0 8px clamp(12px, 2vw, 32px);
}
.jelveny-kor { width: 100%; height: 100%; animation: forgas 18s linear infinite; }
.jelveny-kor text { font-family: 'Anybody'; font-weight: 800; font-size: 8.6px; letter-spacing: 0.8px; fill: var(--sotet); }
.jelveny-kozep {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: var(--kiemelt);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Yellowtail', cursive;
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1;
}
.jelveny-kozep span { transform: translate(-0.12em, 0.04em); }
@keyframes forgas { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .jelveny-kor { animation: none; }
    html { scroll-behavior: auto; }
}

.barber { padding: 0 var(--kartya-res) var(--kartya-res); }
.barber-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--kartya-res); }
.barber-kep { min-height: clamp(420px, 46vw, 680px); }
.barber-szoveg {
    background: var(--sotet);
    color: var(--krem);
    border-radius: var(--kartya-kor);
    padding: clamp(28px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}
.barber-kicker { font-size: clamp(40px, 4vw, 60px); color: var(--kiemelt-vilagos); }
.barber-kozep { display: flex; flex-direction: column; gap: 20px; }
.barber-cim {
    font-family: 'Anybody';
    font-weight: 900;
    font-stretch: 110%;
    font-size: clamp(36px, 4.4vw, 72px);
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
}
.barber-kozep p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--halvany-meleg); max-width: 480px; }

.csempek {
    padding: 0 var(--kartya-res);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--kartya-res);
}
.csempe {
    position: relative;
    display: block;
    height: clamp(460px, 48vw, 720px);
    border-radius: var(--kartya-kor);
    overflow: hidden;
    color: var(--krem);
    container-type: inline-size;
}
.csempe:hover { opacity: 1; }
.csempe-arnyek {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 25, 21, 0.25) 0%, rgba(28, 25, 21, 0.35) 45%, rgba(28, 25, 21, 0.9) 100%);
}
.csempe-tartalom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(20px, 2.4vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.csempe-cim {
    font-family: 'Anybody';
    font-weight: 900;
    font-stretch: 130%;
    font-size: clamp(22px, 8cqi, 68px);
    line-height: 0.9;
    text-transform: uppercase;
    overflow-wrap: break-word;
    hyphens: auto;
}
.csempe-szoveg { font-size: 16px; line-height: 1.5; max-width: 380px; }
.csempe .felirat { letter-spacing: 0.08em; }

.arak { max-width: 1440px; margin: 0 auto; padding: var(--szakasz-res) var(--oldal-szel); }
.arak-sor { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); align-items: flex-start; }
.arlista { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.arlista-fej { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.arlista-info { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 420px; font-size: 14px; }
.cimkek { display: flex; gap: 8px; flex-wrap: wrap; }
.cimke {
    border: 1px solid var(--sotet);
    border-radius: 99px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.cimke-sotet { background: var(--sotet); color: var(--krem); }
.szolg-lista { border-top: 2px solid var(--sotet); }
.szolg {
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--sotet);
    border: none;
    border-bottom: 1px solid var(--vonal);
    padding: 20px 12px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 4px 14px;
    align-items: center;
    cursor: pointer;
}
.szolg:hover, .szolg[aria-pressed="true"] { background: var(--kijelolt-sor); }
.szolg-pipa {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--sotet);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.szolg[aria-pressed="true"] .szolg-pipa { border-color: var(--kiemelt); background: var(--kiemelt); }
.szolg[aria-pressed="true"] .szolg-pipa::after { content: '✓'; }
.szolg-szoveg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.szolg-nev {
    font-family: 'Anybody';
    font-weight: 800;
    font-stretch: 110%;
    font-size: clamp(19px, 1.8vw, 25px);
    text-transform: uppercase;
    line-height: 1.05;
    text-wrap: pretty;
}
.szolg-ido { font-size: 14px; color: var(--halvany); }
.szolg-ar { font-family: 'Anybody'; font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); white-space: nowrap; }

.foglalo {
    flex: 1 1 400px;
    min-width: 0;
    position: sticky;
    top: 96px;
    background: var(--sotet);
    color: var(--krem);
    border-radius: clamp(16px, 1.6vw, 28px);
    padding: clamp(22px, 3vw, 40px);
}
.foglalo-belso { display: flex; flex-direction: column; gap: 24px; }
.foglalo-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.foglalo-cim { font-size: 44px; }
.foglalo-honap { font-size: 13px; color: var(--halvany-sotet); text-transform: uppercase; letter-spacing: 0.06em; }
.napok {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--kiemelt) var(--mezo-sotet);
}
.nap {
    flex: 0 0 56px;
    padding: 10px 0;
    background: transparent;
    color: var(--krem);
    border: 1px solid var(--vonal-sotet);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}
.nap-rovid { font-size: 11px; font-weight: 600; text-transform: uppercase; }
.nap-szam { font-family: 'Anybody'; font-weight: 800; font-size: 22px; line-height: 1.1; }
.nap:disabled { opacity: 0.35; cursor: not-allowed; }
.nap.valasztott, .ido.valasztott { background: var(--krem); color: var(--sotet); border-color: var(--krem); }
.foglalo-ures { margin: 0; color: var(--halvany-sotet); }
.idopontok { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ido {
    min-height: 44px;
    background: transparent;
    color: var(--krem);
    border: 1px solid var(--vonal-sotet);
    border-radius: 99px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.ido:disabled { color: var(--foglalt); text-decoration: line-through; cursor: not-allowed; }
.osszesito {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--vonal-sotet);
    padding-top: 18px;
    font-size: 15px;
}
.osszesito > div { display: flex; justify-content: space-between; gap: 16px; }
.osszesito > div > span:last-child { text-align: right; }
.osszesito-ar { align-items: baseline; }
.osszesito-osszeg { font-family: 'Anybody'; font-weight: 900; font-size: 34px; }
.osszesito .osszesito-megj { justify-content: flex-end; font-size: 13px; color: var(--halvany-sotet); }
.mezok { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.mezok input {
    background: var(--mezo-sotet);
    border: 1px solid var(--vonal-sotet);
    border-radius: 12px;
    color: var(--krem);
    padding: 15px;
    font-size: 16px;
    outline: none;
    min-width: 0;
}
.mezok input:focus { border-color: var(--kiemelt-vilagos); }
.mezo-szeles { grid-column: 1 / -1; }
.foglalo-hiba { margin: 0; color: var(--kiemelt-vilagos); font-size: 15px; line-height: 1.5; }
.kuldes {
    min-height: 58px;
    border-radius: 99px;
    background: var(--kiemelt);
    color: #fff;
    border: 1px solid var(--kiemelt);
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 20px;
}
.kuldes:disabled { background: transparent; color: var(--foglalt); border-color: var(--vonal-sotet); cursor: not-allowed; }
.kesz-cimke { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kiemelt-vilagos); }
.kesz-koszonet { font-size: 56px; }
.kesz-reszletek { margin: 0; font-size: 16px; line-height: 1.6; color: var(--halvany-meleg); }
.kesz-uj {
    align-self: flex-start;
    background: var(--krem);
    color: var(--sotet);
    border: none;
    border-radius: 99px;
    padding: 14px 24px;
    font-weight: 600;
    cursor: pointer;
}

.szeles { padding: 0 var(--kartya-res); }
.szeles-kep {
    position: relative;
    height: clamp(480px, 60vw, 820px);
    border-radius: var(--kartya-kor);
    overflow: hidden;
    color: var(--krem);
}
.szeles-arnyek { position: absolute; inset: 0; background: rgba(28, 25, 21, 0.35); }
.szeles-tartalom {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
    padding: 24px;
}
.szeles-kicsi { font-size: clamp(40px, 5vw, 72px); }
.szeles-nagy {
    font-family: 'Anybody';
    font-weight: 900;
    font-stretch: 140%;
    font-size: clamp(48px, 9vw, 100px);
    line-height: 0.82;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    max-width: 1200px;
}

.galeria { max-width: 1440px; margin: 0 auto; padding: var(--szakasz-res) var(--oldal-szel) 0; }
.galeria-fej { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.galeria-alcim { font-size: 34px; }
.galeria-racs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    grid-auto-rows: clamp(220px, 24vw, 340px);
    grid-auto-flow: dense;
    gap: var(--kartya-res);
    margin-top: 40px;
}
.galeria-racs .kep-kartya { border-radius: 18px; }
.galeria-racs .kep-kartya:nth-child(6n + 1), .galeria-racs .kep-kartya:nth-child(6n + 4) { grid-row: span 2; }

.nyitva { max-width: 1440px; margin: 0 auto; padding: var(--szakasz-res) var(--oldal-szel); }

/* horgonyra ugrásnál a szakasz felső térköze ne kerüljön a fejléc alá, hanem rögtön a tartalom */
.arak, .galeria, .nyitva { scroll-margin-top: calc(var(--szakasz-res) * -1); }
.nyitva-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.nyitva-kartya {
    background: var(--kiemelt);
    color: #fff;
    border-radius: clamp(16px, 1.6vw, 28px);
    padding: clamp(24px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}
.nyitva-felso { display: flex; flex-direction: column; gap: 16px; }
.nyitva-cim { font-size: 44px; }
.nyitva-cim-nagy {
    font-family: 'Anybody';
    font-weight: 900;
    font-stretch: 120%;
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 0.95;
    text-transform: uppercase;
}
.nyitva-felso .felirat { font-size: 15px; letter-spacing: 0.06em; }
.nyitva-sor {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 17px;
    font-weight: 500;
}
.terkep { position: relative; min-height: 460px; border-radius: clamp(16px, 1.6vw, 28px); overflow: hidden; background: var(--kijelolt-sor); }
.terkep iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(0.25); }
.terkep-helyorzo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    text-align: center;
}
.terkep-cim {
    font-family: 'Anybody';
    font-weight: 800;
    font-stretch: 110%;
    font-size: clamp(22px, 2.4vw, 32px);
    text-transform: uppercase;
    line-height: 1;
}
.terkep-link { font-size: 15px; font-weight: 600; text-decoration: underline; }
.terkep-megj { font-size: 13px; color: var(--halvany); max-width: 340px; line-height: 1.4; }

.tortenet { padding: var(--kartya-res) var(--kartya-res) 0; }
.tortenet-kep {
    position: relative;
    height: clamp(520px, 64vw, 860px);
    border-radius: var(--kartya-kor);
    overflow: hidden;
    color: var(--krem);
}
.tortenet-arnyek { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 25, 21, 0.75) 0%, rgba(28, 25, 21, 0.15) 70%); }
.tortenet-tartalom {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: clamp(28px, 5vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    max-width: 760px;
}
.tortenet-cim {
    font-family: 'Anybody';
    font-weight: 900;
    font-stretch: 140%;
    font-size: clamp(48px, 7vw, 120px);
    line-height: 0.82;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}
.tortenet-tartalom p { margin: 0; font-size: 18px; line-height: 1.55; max-width: 460px; }

.lablec { background: var(--sotet); color: var(--krem); margin-top: var(--kartya-res); }
.lablec-belso {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 112px) var(--oldal-szel) 28px;
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 6vw, 80px);
}
.lablec-fej {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 28px;
    border-bottom: 1px solid var(--vonal-sotet);
    padding-bottom: clamp(32px, 4vw, 56px);
}
.lablec-nev { display: flex; flex-direction: column; gap: 14px; }
.lablec-logo { font-family: 'Yellowtail', cursive; font-size: clamp(88px, 14vw, 200px); line-height: 0.8; }
.lablec-tag {
    font-family: 'Anybody';
    font-weight: 800;
    font-stretch: 120%;
    font-size: clamp(18px, 2vw, 26px);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--halvany-meleg);
}
.lablec-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(28px, 4vw, 48px); }
.lablec-oszlop { display: flex; flex-direction: column; gap: 14px; min-width: 0; font-size: 16px; line-height: 1.3; }
.lablec-cimke { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--halvany-sotet); }
.lablec-halvany { color: var(--halvany-meleg); }
.lablec-nyitva { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.lablec-linkek { display: flex; gap: 20px; flex-wrap: wrap; }
.lablec-link { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.lablec-link:hover { opacity: 0.75; }

.suti {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 70;
    max-width: 520px;
    margin-left: auto;
    background: var(--sotet);
    color: var(--krem);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 12px 40px rgba(28, 25, 21, 0.35);
}
.suti-cim { margin: 0 0 8px; font-family: 'Anybody'; font-weight: 800; font-stretch: 120%; font-size: 18px; text-transform: uppercase; }
.suti-szoveg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--halvany-meleg); }
.suti-gombok { display: flex; gap: 8px; margin-top: 18px; }
/* az elutasítás ugyanolyan könnyen elérhető, mint az elfogadás */
.suti-gomb { flex: 1; background: transparent; color: var(--krem); border-color: var(--krem); }
.suti-elfogad { background: var(--krem); color: var(--sotet); }

body:has(.modal[open]) { overflow: hidden; }
.modal {
    width: min(720px, calc(100vw - 32px));
    max-height: min(85vh, 900px);
    padding: 0;
    border: none;
    border-radius: clamp(16px, 1.6vw, 28px);
    background: var(--krem);
    color: var(--sotet);
    overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(28, 25, 21, 0.6); }
.modal-fej {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px clamp(20px, 3vw, 36px);
    background: var(--krem);
    border-bottom: 1px solid var(--vonal);
}
.modal-cim {
    margin: 0;
    font-family: 'Anybody';
    font-weight: 900;
    font-stretch: 130%;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1;
    text-transform: uppercase;
}
.modal-bezar {
    background: var(--sotet);
    color: var(--krem);
    border: none;
    border-radius: 99px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
}
.modal-tartalom { padding: 8px clamp(20px, 3vw, 36px) 32px; font-size: 16px; line-height: 1.6; }
.modal-tartalom h3 { margin: 28px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--halvany); }
.modal-tartalom a { text-decoration: underline; }
.adatlista { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 8px 20px; margin: 16px 0 0; }
.adatlista dt { color: var(--halvany); }
.adatlista dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .adatlista { grid-template-columns: 1fr; gap: 2px; }
    .adatlista dd { margin-bottom: 10px; }
}

.lablec-also {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    border-top: 1px solid var(--vonal-sotet);
    padding-top: 24px;
    font-size: 13px;
    color: var(--halvany-sotet);
}

/* lemondó oldal: egy kártya, a levélben küldött linkről nyílik */
.egyszeru { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.egyszeru-kartya {
    width: 100%;
    max-width: 520px;
    background: var(--krem);
    border-radius: 24px;
    padding: clamp(24px, 5vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.egyszeru-logo { font-family: 'Yellowtail', cursive; font-size: 44px; line-height: 1; }
.egyszeru-kartya h1 {
    margin: 0;
    font-family: 'Anybody';
    font-weight: 900;
    font-stretch: 120%;
    font-size: clamp(26px, 5vw, 34px);
    line-height: 1;
    text-transform: uppercase;
}
.egyszeru-kartya p { margin: 0; line-height: 1.55; }
.egyszeru-adatok { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; padding: 16px 0; border-top: 1px solid var(--vonal); border-bottom: 1px solid var(--vonal); }
.egyszeru-adatok dt { color: var(--halvany); }
.egyszeru-adatok dd { margin: 0; }
.egyszeru-gomb { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; }
.egyszeru-megj { font-size: 14px; color: var(--halvany); }

.kesz-naptar { display: flex; flex-wrap: wrap; gap: 8px; }
.kesz-naptar-link {
    border: 1px solid var(--vonal-sotet);
    border-radius: 99px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--krem);
}
.cf-turnstile { min-height: 65px; }