/* Az ingyenes bemutató foglaló oldala.
   Önálló, keretrendszer nélküli stílus: az oldal hirdetési céloldal is, ezért
   nem húzzuk be a Semantic UI-t egyetlen űrlap kedvéért. */

:root {
    --szoveg: #1d2b36;
    --halvany: #5d6b78;
    --keret: #d8dee4;
    --kiemelt: #0f7b6c;
    --kiemelt-sotet: #0b5f54;
    --hatter: #f5f7f9;
    --hiba: #c0392b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--szoveg);
    background: var(--hatter);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

.fejlec {
    background: #fff;
    border-bottom: 1px solid var(--keret);
    padding: 16px 24px;
}
.fejlec_logo img { display: block; height: 40px; width: auto; }

.bemutato {
    max-width: 1040px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.bevezeto h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 16px;
}
.alcim { font-size: 1.05rem; color: var(--halvany); margin: 0 0 24px; }
.ervek { margin: 0; padding-left: 20px; color: var(--halvany); }
.ervek li { margin-bottom: 8px; }

.urlap_doboz {
    background: #fff;
    border: 1px solid var(--keret);
    border-radius: 10px;
    padding: 28px;
}

.mezo { margin-bottom: 18px; }
.mezo_par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 6px;
}
.kotelezo { color: var(--hiba); }
.opcionalis { font-weight: 400; font-size: 0.85em; color: var(--halvany); }

input, select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--keret);
    border-radius: 6px;
    font: inherit;
    color: inherit;
    background: #fff;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--kiemelt);
    box-shadow: 0 0 0 3px rgba(15, 123, 108, 0.15);
}
textarea { resize: vertical; }

.sugo { font-size: 0.82rem; color: var(--halvany); margin: 6px 0 0; }

.gomb {
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-radius: 6px;
    background: var(--kiemelt);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.gomb:hover:not(:disabled) { background: var(--kiemelt-sotet); }
.gomb:disabled { opacity: 0.6; cursor: default; }

.hiba { color: var(--hiba); font-size: 0.85rem; margin: 6px 0 0; min-height: 1em; }
.hiba.altalanos { text-align: center; }

.adatvedelem { font-size: 0.8rem; color: var(--halvany); margin: 14px 0 0; text-align: center; }
.adatvedelem a { color: var(--halvany); }

.koszonjuk { text-align: center; padding: 16px 0; }
.koszonjuk h2 { margin: 0 0 10px; }

.rejtett { display: none; }

.lablec {
    border-top: 1px solid var(--keret);
    padding: 20px 24px;
    text-align: center;
    color: var(--halvany);
    font-size: 0.9rem;
    background: #fff;
}
.lablec a { color: var(--kiemelt); }

@media (max-width: 860px) {
    .bemutato { grid-template-columns: 1fr; gap: 28px; padding: 28px 16px 48px; }
    .bevezeto h1 { font-size: 1.6rem; }
    .mezo_par { grid-template-columns: 1fr; gap: 0; }
    .urlap_doboz { padding: 20px; }
}