/* keszi-raktarkontener.hu – 2026-10-16. A régi (2021-es) oldal kinézetét követi:
   fekete fejléc „Menü” gombbal, piros átfedésű nyitókép, Raleway betű, fehér kártyák,
   vörösesbarna „Egyéb tudnivalók” sáv, fekete lábléc. Saját képek, saját ikonok. */

@font-face { font-family: "Raleway"; font-style: normal; font-weight: 200 800; font-display: swap;
	src: url(../fonts/raleway-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 200 800; font-display: swap;
	src: url(../fonts/raleway-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--piros: #ce1b28;
	--piros-2: #b71824;
	--fekete: #111;
	--szoveg: #555;
	--sotet: #333;
	--keret: #e3e3e3;
	--hatter: #f6f6f6;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	font-size: 16.5px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--szoveg);
	background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--piros); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--sotet); font-weight: 400; line-height: 1.3; text-transform: uppercase; margin: 0 0 .6em; }
h1 { font-size: clamp(30px, 5vw, 58px); font-weight: 300; }
h2 { font-size: clamp(22px, 2.8vw, 32px); font-weight: 300; }
h3 { font-size: 19px; }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; color: var(--sotet); }

.keret { width: min(1100px, 100% - 40px); margin-inline: auto; }
.ikon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.17em; }
.ugras { position: absolute; left: -9999px; top: 8px; background: var(--piros); color: #fff; padding: 8px 14px; z-index: 200; }
.ugras:focus { left: 8px; }

/* ------------------------------------------------------------------ gombok */
.gomb {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: 0 26px; height: 46px; border: 0; border-radius: 3px; cursor: pointer;
	font: inherit; font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
	background: var(--piros); color: #fff !important; text-decoration: none !important; white-space: nowrap;
	transition: background .2s ease;
}
.gomb:hover { background: var(--piros-2); }
.gomb-keret { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.gomb-keret:hover { background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------ fejléc (régi: fekete sáv) */
.fejlec {
	position: sticky; top: 0; z-index: 100;
	height: 52px; background: var(--fekete); color: #fff;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 18px; font-size: 14px;
}
.fejlec a { color: #fff; }
.fejlec-elerhetoseg { display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fejlec-elerhetoseg span { opacity: .6; }
.menu-gomb { background: none; border: 0; color: #fff; font: inherit; font-size: 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; }
.menu-gomb .ikon { width: 22px; height: 22px; }

/* oldalról beúszó menü, mint a régin */
.menu-panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 300; width: min(320px, 85vw);
	background: var(--piros); color: #fff; padding: 70px 30px 30px;
	transform: translateX(100%); transition: transform .3s ease; visibility: hidden;
}
.menu-panel a { display: block; color: #fff; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .25); font-size: 17px; text-transform: uppercase; letter-spacing: .04em; }
.menu-panel a[aria-current="page"] { font-weight: 700; }
.menu-panel a:hover { text-decoration: none; opacity: .85; }
.menu-panel .menu-tel { margin-top: 24px; border: 0; font-weight: 700; text-transform: none; }
.menu-zar { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.menu-zar .ikon { width: 26px; height: 26px; }
.menu-takaro { position: fixed; inset: 0; z-index: 250; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .3s ease; }
body.menu-nyitva .menu-panel { transform: none; visibility: visible; }
body.menu-nyitva .menu-takaro { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------------ nyitókép (régi: #banner) */
.banner {
	position: relative; isolation: isolate; overflow: hidden;
	color: rgba(255, 255, 255, .9); text-align: center;
	padding: clamp(60px, 9vw, 120px) 0 clamp(60px, 8vw, 100px);
	background: #111;
}
.banner-kep { position: absolute; inset: 0; z-index: -2; }
.banner-kep img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.banner::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(150, 18, 28, .88) 0%, rgba(90, 14, 22, .80) 50%, rgba(17, 17, 17, .78) 100%);
}
.banner h1 { color: #fff; margin-bottom: .35em; }
.banner, .aloldal-fej { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.banner .gomb { text-shadow: none; }
.banner-alcim { font-size: clamp(17px, 1.8vw, 21px); margin: 0 auto 2.2em; max-width: 46em; }
.banner-helyek { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 900px; margin: 0 auto; }
.banner-hely h2 { color: #fff; font-size: clamp(22px, 2.8vw, 34px); margin-bottom: .4em; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.banner-hely a { color: #fff; display: block; font-size: 18px; }
.banner-hely a.tel { font-weight: 700; font-size: 21px; }
.uj-cimke { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 3px 9px; border-radius: 3px; background: #fff; color: var(--piros); vertical-align: middle; white-space: nowrap; }
.banner-gombok { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 2.4em; }

/* ------------------------------------------------------------------ fő szakasz (régi: .wrapper) */
.wrapper {
	padding: clamp(56px, 7vw, 90px) 0;
	background:
		repeating-linear-gradient(115deg, rgba(0, 0, 0, .025) 0 2px, transparent 2px 46px),
		linear-gradient(180deg, #fafafa, #f1f1f1);
}
.kozep-fej { text-align: center; max-width: 900px; margin: 0 auto 50px; }
.kozep-fej h2 { margin-bottom: .8em; }

.kiemelesek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }
.kiemeles { background: #fff; padding: 44px 30px 36px; text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.kiemeles .ikon { width: 84px; height: 84px; color: #111; margin: 0 auto 18px; }
.kiemeles h3 { font-weight: 400; }
.kiemeles p { margin: 0; }

.jellemzok { max-width: 900px; margin: 0 auto; }
.jellemzok p { margin-bottom: 1.1em; }
.jellemzok .kiemelt { text-align: center; font-weight: 700; color: var(--sotet); margin-top: 1.6em; }

/* ------------------------------------------------------------------ „Egyéb tudnivalók” (régi: #cta) */
.cta {
	position: relative; isolation: isolate; color: #fff; text-align: center;
	padding: clamp(60px, 8vw, 110px) 0;
	/* konténer-hullámlemez, CSS-ből */
	background:
		linear-gradient(rgba(120, 40, 30, .55), rgba(60, 20, 18, .65)),
		repeating-linear-gradient(90deg, #8b3a2e 0 22px, #6f2c23 22px 30px, #9b4536 30px 34px, #8b3a2e 34px 56px);
}
.cta h2 { color: #fff; }
.cta p { font-weight: 600; margin: 0 auto 1.1em; max-width: 46em; }

/* ------------------------------------------------------------------ aloldalak */
.aloldal-fej { background: #111; color: rgba(255, 255, 255, .85); text-align: center; padding: clamp(46px, 6vw, 80px) 0; position: relative; isolation: isolate; overflow: hidden; }
.aloldal-fej::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(150, 18, 28, .9), rgba(17, 17, 17, .82)), url(../img/kontener-fal-960.webp) center / cover; }
.aloldal-fej h1 { color: #fff; font-size: clamp(28px, 4vw, 46px); margin-bottom: .3em; }
.aloldal-fej p { margin: 0; }
.tartalom { padding: clamp(50px, 6vw, 80px) 0; }

table.arak { width: 100%; border-collapse: collapse; margin: 0 0 24px; background: #fff; }
table.arak th, table.arak td { border: 1px solid #ddd; text-align: left; padding: 12px 14px; }
table.arak th { background: var(--fekete); color: #fff; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: .05em; }
table.arak tr:nth-child(even) td { background: #f3f3f3; }
table.arak td.ar { font-weight: 700; color: var(--sotet); white-space: nowrap; }
.megjegyzes-doboz { background: #fff; border-left: 4px solid var(--piros); padding: 16px 20px; margin: 0 0 24px; }

ul.lista { padding-left: 1.2em; margin: 0 0 1.4em; }
ul.lista li { margin-bottom: .4em; }

.gyik { max-width: 900px; margin: 40px auto 0; }
.gyik h2 { text-align: center; }
.gyik details { background: #fff; border: 1px solid var(--keret); margin-bottom: 8px; }
.gyik summary { cursor: pointer; list-style: none; padding: 14px 46px 14px 18px; font-weight: 600; color: var(--sotet); position: relative; }
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--piros); }
.gyik details[open] summary::after { content: "–"; }
.gyik details > div { padding: 0 18px 14px; }

/* kapcsolat */
.kapcsolat-racs { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.telephely-doboz { background: #fff; padding: 26px 28px; margin-bottom: 24px; border-top: 3px solid var(--piros); }
.telephely-doboz h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.telephely-doboz .uj-cimke { background: var(--piros); color: #fff; }
.telephely-doboz p { margin: 0 0 4px; }
.telephely-doboz .terkep { margin-top: 14px; border: 1px solid var(--keret); background: #eee; }
.telephely-doboz .terkep iframe { display: block; width: 100%; height: 220px; border: 0; }
.urlap-doboz { background: #fff; padding: 30px; }
.urlap label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; color: var(--sotet); text-transform: uppercase; letter-spacing: .04em; }
.urlap .mezo { margin-bottom: 16px; }
.urlap .ket-mezo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.urlap input, .urlap select, .urlap textarea {
	width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 3px;
	border: 1px solid #ccc; background: #fff; color: var(--sotet);
}
.urlap input:focus, .urlap select:focus, .urlap textarea:focus { outline: 0; border-color: var(--piros); box-shadow: 0 0 0 3px rgba(206, 27, 40, .15); }
.urlap textarea { min-height: 160px; resize: vertical; }
.urlap .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.urlap .hozzajarulas { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; text-transform: none; letter-spacing: 0; color: var(--szoveg); }
.urlap .hozzajarulas input { width: auto; margin-top: 5px; }
.uzenet-doboz { padding: 12px 16px; margin-bottom: 18px; font-weight: 600; }
.uzenet-doboz.ok { background: #dcfce7; color: #14532d; }
.uzenet-doboz.hiba { background: #fee2e2; color: #7f1d1d; }

.jogi { max-width: 900px; margin: 0 auto; }
.jogi h2 { font-size: 21px; margin-top: 1.6em; }
.jogi ul { padding-left: 1.2em; }

/* ------------------------------------------------------------------ lábléc (régi: fekete) */
.lablec { background: var(--fekete); color: rgba(255, 255, 255, .55); padding: 60px 0 40px; font-size: 15px; }
.lablec a { color: rgba(255, 255, 255, .8); }
.lablec a:hover { color: #fff; }
.lablec-racs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.lablec h3 { color: #fff; font-size: 15px; letter-spacing: .06em; }
.lablec p { margin: 0 0 6px; }
.lablec-also { text-align: center; padding-top: 22px; font-size: 13px; }

.hivo-sav { display: none; }

/* ------------------------------------------------------------------ reszponzív */
@media (max-width: 900px) {
	.kiemelesek { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.kapcsolat-racs { grid-template-columns: 1fr; }
	.lablec-racs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	body { font-size: 16px; padding-bottom: 60px; }
	.keret { width: calc(100% - 32px); }
	.fejlec-elerhetoseg .email, .fejlec-elerhetoseg span { display: none; }
	.banner-helyek { grid-template-columns: 1fr; gap: 26px; }
	.urlap .ket-mezo, .lablec-racs { grid-template-columns: 1fr; }
	.urlap-doboz, .telephely-doboz { padding: 22px 18px; }
	.banner-gombok .gomb { flex: 1 1 100%; }
	.hivo-sav {
		display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--piros-2);
	}
	.hivo-sav a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 6px; background: var(--piros); color: #fff; font-weight: 700; font-size: 15px; line-height: 1.15; text-decoration: none; }
	.hivo-sav small { display: block; font-weight: 500; font-size: 11.5px; opacity: .9; }
	.hivo-sav .ikon { width: 20px; height: 20px; }
}