Files
felhom.eu/website/biztonsagimentes.html
2026-02-26 13:21:55 +01:00

724 lines
30 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biztonsági mentés — 3-2-1 mentési stratégia otthoni szerverekhez | Felhom.eu</title>
<meta name="description" content="Professzionális 3-2-1 biztonsági mentés otthoni szerverhez. Automatikus backup, offsite mentés, titkosított felhő tárolás. Adataid soha nem vesznek el.">
<meta name="keywords" content="biztonsági mentés, backup, 3-2-1 mentési szabály, offsite backup, adatmentés, otthoni szerver backup, titkosított mentés, automatikus mentés">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://felhom.eu/biztonsagimentes">
<meta property="og:type" content="article">
<meta property="og:url" content="https://felhom.eu/biztonsagimentes">
<meta property="og:title" content="3-2-1 biztonsági mentés otthoni szerverhez">
<meta property="og:description" content="Professzionális szintű adatbiztonság otthon. Automatikus backup, offsite mentés — semmi nem vész el.">
<meta property="og:image" content="https://felhom.eu/assets/og-image.png">
<meta property="og:locale" content="hu_HU">
<meta property="og:site_name" content="Felhom.eu">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="3-2-1 biztonsági mentés otthoni szerverhez">
<meta name="twitter:description" content="Professzionális adatvédelem otthoni szerveredre. Automatikus backup, offsite mentés.">
<meta name="twitter:image" content="https://felhom.eu/assets/og-image.png">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "3-2-1 biztonsági mentési stratégia otthoni szerverekhez",
"description": "Hogyan védd meg az adataidat professzionális mentési stratégiával otthoni környezetben.",
"author": {"@type": "Organization", "name": "Felhom.eu"},
"publisher": {"@type": "Organization", "name": "Felhom.eu", "logo": {"@type": "ImageObject", "url": "https://felhom.eu/assets/logo.png"}},
"mainEntityOfPage": "https://felhom.eu/biztonsagimentes"
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
<script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
<style>
/* ============================================
UNIFIED CSS - felhom.eu
============================================ */
/* --- CSS Variables --- */
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-card: #1c2128;
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--text-muted: #6e7681;
--accent-blue: #0088cc;
--accent-light: #00aaff;
--accent-glow: rgba(0, 136, 204, 0.3);
--border-color: #30363d;
--success-green: #238636;
--warning-orange: #d29922;
}
/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
body::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-image:
linear-gradient(rgba(0, 136, 204, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 136, 204, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
z-index: -1;
}
/* --- Layout --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
/* --- Navigation --- */
nav {
position: fixed;
top: 0; left: 0; right: 0;
padding: 20px 0;
background: rgba(13, 17, 23, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
z-index: 200;
}
nav .container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { height: 40px; width: auto; }
.logo-text { font-size: 1.5rem; font-weight: 700; color: var(--accent-light); letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent-light); }
/* --- Typography with gradient span support --- */
h1 span, h2 span, h3 span, h4 span {
background: linear-gradient(135deg, var(--accent-light), var(--accent-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- Page Header --- */
.page-header { padding: 140px 0 60px; text-align: center; }
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
.page-header p { font-size: 1.1rem; color: var(--text-secondary); max-width: 700px; margin: 0 auto; }
/* --- Section Headers --- */
.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { font-size: 2rem; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
.section-header p { color: var(--text-secondary); font-size: 1.1rem; max-width: 700px; margin: 0 auto; }
/* --- Content Sections --- */
.content-section { padding: 80px 0; }
.content-section.alt-bg { background: var(--bg-secondary); }
/* --- Buttons --- */
.cta-button {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-light));
color: white;
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 20px var(--accent-glow);
}
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-glow); }
/* --- Footer --- */
footer {
padding: 40px 0;
border-top: 1px solid var(--border-color);
text-align: center;
}
footer p { color: var(--text-secondary); font-size: 0.9rem; }
/* --- Info Cards --- */
.info-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 40px;
margin-bottom: 32px;
}
.info-card:last-child { margin-bottom: 0; }
.info-card h3 {
font-size: 1.4rem;
margin-bottom: 20px;
color: var(--text-primary);
}
.info-card p {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.8;
margin-bottom: 16px;
}
.info-card p:last-child { margin-bottom: 0; }
/* --- Boxes --- */
.highlight-box {
background: linear-gradient(135deg, rgba(0, 136, 204, 0.1), rgba(0, 136, 204, 0.05));
border: 1px solid var(--accent-blue);
border-radius: 12px;
padding: 20px 24px;
margin: 20px 0;
}
.highlight-box p { color: var(--text-primary); margin: 0; }
.highlight-box strong { color: var(--accent-light); }
/* --- 3-2-1 Rule Section --- */
.backup-rule {
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: start;
margin-bottom: 40px;
}
.backup-rule:last-child { margin-bottom: 0; }
.rule-number {
font-family: 'JetBrains Mono', monospace;
font-size: 3rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-light), var(--accent-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
min-width: 80px;
text-align: center;
}
.rule-content h3 { font-size: 1.3rem; margin-bottom: 12px; color: var(--text-primary); }
.rule-content p { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; margin-bottom: 12px; }
.rule-content p:last-child { margin-bottom: 0; }
.example-box {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px 20px;
margin-top: 16px;
}
.example-box .label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent-light);
margin-bottom: 8px;
}
.example-box p { margin: 0; font-size: 0.95rem; }
/* --- Methods Grid --- */
.methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.method-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 32px;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.method-card:hover { border-color: var(--accent-blue); transform: translateY(-4px); }
.method-icon { font-size: 2.5rem; margin-bottom: 20px; }
.method-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--text-primary); }
.method-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
.method-pros { list-style: none; margin: 16px 0; }
.method-pros li {
color: var(--text-secondary);
font-size: 0.9rem;
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
}
.method-pros li::before {
content: '✓';
color: var(--success-green);
font-weight: bold;
flex-shrink: 0;
}
.method-cons li::before {
content: '⚠';
color: var(--warning-orange);
}
/* --- Visual Diagram --- */
.backup-diagram {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 40px;
text-align: center;
margin: 48px 0;
}
.backup-diagram h3 { font-size: 1.2rem; margin-bottom: 32px; color: var(--text-secondary); }
.diagram-visual {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.diagram-node {
background: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: 12px;
padding: 20px 28px;
text-align: center;
min-width: 140px;
transition: all 0.3s ease;
}
.diagram-node:hover { border-color: var(--accent-blue); transform: scale(1.05); }
.diagram-node.primary { border-color: var(--accent-light); background: rgba(0, 136, 204, 0.1); }
.diagram-node .icon { font-size: 2rem; margin-bottom: 8px; }
.diagram-node .label { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.diagram-node .sublabel { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.diagram-arrow { font-size: 1.5rem; color: var(--accent-blue); }
/* --- CTA Section --- */
.cta-section { padding: 80px 0; text-align: center; }
.cta-section h2 { font-size: 2rem; font-weight: 700; margin-bottom: 16px; }
.cta-section p { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
/* --- Responsive --- */
@media (max-width: 900px) {
.backup-rule { grid-template-columns: 1fr; gap: 16px; text-align: center; }
.rule-number { font-size: 2.5rem; }
.diagram-visual { flex-direction: column; }
.diagram-arrow { transform: rotate(90deg); }
}
@media (max-width: 600px) {
.page-header { padding: 120px 0 40px; }
.info-card { padding: 24px; }
.content-section { padding: 60px 0; }
}
/* --- Hamburger Button --- */
.hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 200;
-webkit-tap-highlight-color: transparent;
}
.hamburger-box {
width: 28px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hamburger-line {
display: block;
width: 100%;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
/* Hamburger → X animation */
.hamburger.is-active .hamburger-line:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.hamburger.is-active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger.is-active .hamburger-line:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* --- Mobile Menu Overlay --- */
.mobile-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 140;
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-overlay.is-visible {
opacity: 1;
}
/* --- Mobile Nav Styles --- */
@media (max-width: 900px) {
.hamburger {
display: block;
}
.nav-links {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: -280px;
width: 280px;
height: 100vh;
height: 100dvh;
background: var(--bg-secondary);
border-left: 1px solid var(--border-color);
padding: 80px 32px 32px;
gap: 0;
z-index: 150;
transition: right 0.3s ease;
overflow-y: auto;
}
.nav-links.is-open {
right: 0;
}
.nav-links li {
border-bottom: 1px solid var(--border-color);
}
.nav-links a {
display: block;
padding: 16px 0;
font-size: 1.05rem;
}
.mobile-overlay {
display: block;
pointer-events: none;
}
.mobile-overlay.is-visible {
pointer-events: auto;
}
/* Prevent body scroll when menu is open */
body.menu-open {
overflow: hidden;
}
}
</style>
</head>
<body>
<nav>
<div class="container">
<a href="/" class="logo">
<img src="/assets/logo.png" alt="Felhom.eu logo">
<span class="logo-text">felhom.eu</span>
</a>
<ul class="nav-links">
<li><a href="/#szolgaltatasok">Szolgáltatások</a></li>
<li><a href="/alkalmazasok">Alkalmazások</a></li>
<li><a href="/technologiak">Technológiák</a></li>
<li><a href="/biztonsagimentes" class="active">Mentések</a></li>
<li><a href="/gyik">GYIK</a></li>
<li><a href="/kapcsolat">Kapcsolat</a></li>
</ul>
<button class="hamburger" id="hamburger" aria-label="Menü megnyitása" aria-expanded="false">
<span class="hamburger-box">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</span>
</button>
</div>
</nav>
<div class="mobile-overlay" id="mobileOverlay"></div>
<main>
<section class="page-header">
<div class="container">
<h1>Biztonsági <span>Mentés</span></h1>
<p>Az adataid biztonsága az első. Professzionális mentési stratégiával gondoskodunk róla, hogy soha ne veszíts el semmit.</p>
</div>
</section>
<!-- Bevezető -->
<section class="content-section">
<div class="container">
<div class="info-card">
<h3>🤔 Miért fontos ez?</h3>
<p>Amikor valaki felhőszolgáltatást választ legyen az Google Drive, iCloud, vagy bármilyen más az egyik legfontosabb szempont az <strong>adatbiztonság</strong>. Nem az a kérdés, hogy valaki hozzáfér-e az adatainkhoz, hanem hogy <strong>megmaradnak-e</strong>.</p>
<p>A nagy szolgáltatók ezt milliárd dolláros infrastruktúrával oldják meg: több adatközpont, redundáns tárolás, automatikus mentések. De vajon otthoni szerveren is elérhető ugyanez a biztonság?</p>
<div class="highlight-box">
<p><strong>A válasz: igen.</strong> A megfelelő mentési stratégiával az otthoni szervered ugyanolyan biztonságos lehet, mint bármely felhőszolgáltató sőt, te irányítasz mindent.</p>
</div>
</div>
</div>
</section>
<!-- 3-2-1 szabály -->
<section class="content-section alt-bg">
<div class="container">
<div class="section-header">
<h2>A 3-2-1 <span>Mentési Szabály</span></h2>
<p>Az iparági szabvány, amit a professzionális rendszergazdák és vállalatok használnak világszerte</p>
</div>
<div class="backup-rule">
<div class="rule-number">3</div>
<div class="rule-content">
<h3>Három másolat az adataidból</h3>
<p>Mindig legyen legalább három példány minden fontos adatodból: az eredeti, és két biztonsági másolat. Ha az egyik sérül vagy elvész, még mindig van kettő tartalékban.</p>
<div class="example-box">
<div class="label">Példa</div>
<p>A családi fotóid megvannak a szerveren (1), egy külső merevlemezen (2), és egy távoli helyen (3).</p>
</div>
</div>
</div>
<div class="backup-rule">
<div class="rule-number">2</div>
<div class="rule-content">
<h3>Két különböző tárolótípus</h3>
<p>Az adatokat legalább kétféle tárolóeszközön tartsd. A különböző eszközök különböző meghibásodási módokkal rendelkeznek ha az egyik típus elromlik, a másik valószínűleg rendben lesz.</p>
<div class="example-box">
<div class="label">Példa</div>
<p>A szerver belső SSD-jén tárolod az adatokat, de a mentés külső HDD-re vagy NAS-ra kerül.</p>
</div>
</div>
</div>
<div class="backup-rule">
<div class="rule-number">1</div>
<div class="rule-content">
<h3>Egy offsite (távoli) másolat</h3>
<p>Legalább egy másolat legyen fizikailag más helyen. Ez véd a lokális katasztrófák ellen: tűz, vízkár, betörés, vagy akár egy villámcsapás sem veszélyeztetheti az összes adatodat.</p>
<div class="example-box">
<div class="label">Példa</div>
<p>A mentés automatikusan átmásolódik egy barát/rokon szerverére, vagy titkosítva felhőbe kerül.</p>
</div>
</div>
</div>
<div class="backup-diagram">
<h3>Így néz ki a gyakorlatban</h3>
<div class="diagram-visual">
<div class="diagram-node primary">
<div class="icon">🖥️</div>
<div class="label">Szerver</div>
<div class="sublabel">Eredeti adat</div>
</div>
<div class="diagram-arrow"></div>
<div class="diagram-node">
<div class="icon">💾</div>
<div class="label">Helyi backup</div>
<div class="sublabel">Külső HDD/NAS</div>
</div>
<div class="diagram-arrow"></div>
<div class="diagram-node">
<div class="icon">🌍</div>
<div class="label">Offsite backup</div>
<div class="sublabel">Távoli hely</div>
</div>
</div>
</div>
</div>
</section>
<!-- Offsite megoldások -->
<section class="content-section">
<div class="container">
<div class="section-header">
<h2>Offsite <span>Mentési Megoldások</span></h2>
<p>Az "1" a 3-2-1 szabályban a legfontosabb, és sokszor a legelhanyagoltabb</p>
</div>
<div class="methods-grid">
<div class="method-card">
<div class="method-icon">👥</div>
<h3>„Haver rendszer"</h3>
<p>A legegyszerűbb és legolcsóbb megoldás: cserélj mentéseket egy megbízható ismerőssel. Te mentesz az ő szerverére, ő ment a tiédre.</p>
<ul class="method-pros">
<li>Nincs havi díj</li>
<li>Teljes kontroll az adatok felett</li>
<li>Kölcsönös biztonság</li>
<li>End-to-end titkosítás lehetséges</li>
</ul>
<div class="example-box">
<div class="label">Hogyan működik?</div>
<p>Titkosított mentések automatikusan szinkronizálódnak VPN kapcsolaton keresztül.</p>
</div>
</div>
<div class="method-card">
<div class="method-icon">🏢</div>
<h3>Otthon ↔ Iroda</h3>
<p>Ha van munkahelyed vagy saját irodád, használd ki! A két helyszín természetes földrajzi távolságot biztosít.</p>
<ul class="method-pros">
<li>Meglévő infrastruktúra használata</li>
<li>Biztonságos, ismert környezet</li>
<li>Gyors helyreállítás szükség esetén</li>
</ul>
<div class="example-box">
<div class="label">Tipp</div>
<p>Egy kis, csendes mini PC az iroda sarkában tökéletes backup célpont lehet.</p>
</div>
</div>
<div class="method-card">
<div class="method-icon">☁️</div>
<h3>Titkosított felhő backup</h3>
<p>Ha nincs megbízható ismerős vagy második helyszín, a felhő a megoldás. Fontos: az adatokat a feltöltés előtt titkosítjuk!</p>
<ul class="method-pros">
<li>Professzionális infrastruktúra</li>
<li>Földrajzilag elosztott tárolás</li>
<li>Nincs szükség hardverre</li>
</ul>
<ul class="method-pros method-cons">
<li>Havi/éves díj (tárolás méretétől függően)</li>
</ul>
<div class="example-box">
<div class="label">Megjegyzés</div>
<p>Kritikus adatok (dokumentumok, fotók) általában elférnek néhány száz GB-on, ami havi pár száz forint.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Mi hogyan csináljuk -->
<section class="content-section alt-bg">
<div class="container">
<div class="section-header">
<h2>Mi Hogyan <span>Oldjuk Meg?</span></h2>
<p>Minden általunk telepített szerveren alapértelmezetten beállítjuk a mentéseket</p>
</div>
<div class="info-card">
<h3>🔧 Automatizált mentési rendszer</h3>
<p>A szerver automatikusan, ütemezetten készít mentéseket. Nem kell semmire sem emlékezned a rendszer gondoskodik róla.</p>
<p>A mentések inkrementálisak, ami azt jelenti, hogy csak a változások kerülnek mentésre. Ez helyet és időt takarít meg, miközben a teljes visszaállítási lehetőség megmarad.</p>
<div class="highlight-box">
<p><strong>Személyre szabjuk:</strong> Minden ügyfélnél felmérjük a lehetőségeket (van-e haver szerver, iroda, felhő preferencia), és ennek megfelelően állítjuk be az offsite mentést.</p>
</div>
<h3 style="margin-top: 24px;">📊 Monitoring és értesítések</h3>
<p>A mentéseket folyamatosan figyeljük. Ha bármi probléma van sikertelen mentés, tárhelyhiány, kapcsolati probléma azonnal értesítést kapsz, és mi is.</p>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="container">
<h2>Kérdésed van a <span>mentésekről?</span></h2>
<p>Beszéljük át, mi a legjobb megoldás a te helyzetedben. Segítünk megtalálni az egyensúlyt a biztonság és a költségek között.</p>
<a href="/kapcsolat" class="cta-button">Kapcsolatfelvétel →</a>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2026 felhom.eu — Saját felhőd, saját szabályaid</p>
</div>
</footer>
<script>
(function() {
var hamburger = document.getElementById('hamburger');
var navLinks = document.querySelector('.nav-links');
var overlay = document.getElementById('mobileOverlay');
var body = document.body;
if (!hamburger || !navLinks || !overlay) {
console.warn('[mobile-menu] Missing elements:', {
hamburger: !!hamburger,
navLinks: !!navLinks,
overlay: !!overlay
});
return;
}
function openMenu() {
hamburger.classList.add('is-active');
navLinks.classList.add('is-open');
overlay.classList.add('is-visible');
body.classList.add('menu-open');
hamburger.setAttribute('aria-expanded', 'true');
hamburger.setAttribute('aria-label', 'Menü bezárása');
}
function closeMenu() {
hamburger.classList.remove('is-active');
navLinks.classList.remove('is-open');
overlay.classList.remove('is-visible');
body.classList.remove('menu-open');
hamburger.setAttribute('aria-expanded', 'false');
hamburger.setAttribute('aria-label', 'Menü megnyitása');
}
hamburger.addEventListener('click', function() {
if (navLinks.classList.contains('is-open')) {
closeMenu();
} else {
openMenu();
}
});
overlay.addEventListener('click', closeMenu);
navLinks.querySelectorAll('a').forEach(function(link) {
link.addEventListener('click', closeMenu);
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && navLinks.classList.contains('is-open')) {
closeMenu();
}
});
window.addEventListener('resize', function() {
if (window.innerWidth > 900 && navLinks.classList.contains('is-open')) {
closeMenu();
}
});
})();
</script>
</body>
</html>