/**
 * ========================================
 * STYLE.CSS - Elit Hardver Weboldal
 * ========================================
 *
 * Ez a fájl tartalmazza az összes CSS stílust a weboldalhoz.
 * Oktató célból részletes magyarázatokkal ellátva.
 *
 * FONTOS CSS FOGALMAK:
 * - CSS változók (Custom Properties): újrafelhasználható értékek
 * - Box Model: margin, border, padding, content
 * - Flexbox: modern elrendezési rendszer
 * - Grid: kétdimenziós layout
 * - Responsive design: mobilra optimalizált megjelenés
 * - Pseudo-osztályok: :hover, :focus, :active
 * - Pseudo-elemek: ::before, ::after
 */

/* ========================================
   CSS VÁLTOZÓK (Custom Properties)
   ======================================== */
/**
 * :root - A legfelsőbb szintű elem (html elem)
 * CSS változók deklarálása -- előtaggal
 * Előnyök:
 * - Központi színséma kezelés
 * - Könnyű téma váltás (sötét/világos mód)
 * - var(--név) függvénnyel bárhol használható
 */
:root {
  /* Háttér színek */
  --bg: #f8f9fa;           /* Oldal háttérszín (világosszürke) */
  --panel: #ffffff;        /* Kártyák, panelek háttere (fehér) */
  --panel-2: #f1f3f5;      /* Alternatív panel szín (világosabb szürke) */

  /* Szöveg színek */
  --text: #212529;         /* Fő szövegszín (majdnem fekete) */
  --muted: #6c757d;        /* Másodlagos szöveg (szürke, kevésbé hangsúlyos) */

  /* Kiemelő színek */
  --accent: #4361ee;       /* Elsődleges hangsúly szín (kék) - linkek, gombok */
  --accent-2: #3f37c9;     /* Másodlagos hangsúly (sötétebb kék) - hover állapot */
  --success: #06ffa5;      /* Siker színe (zöld/ciánkék) */
  --danger: #ff006e;       /* Figyelmeztetés/hiba (piros) */

  /* Vizuális effektek */
  --radius: 14px;          /* Lekerekített sarkok sugara (border-radius) */
  --shadow: 0 10px 30px rgba(0,0,0,.1);  /* Árnyék effect (box-shadow) */
}

/* ========================================
   BOX-SIZING RESET
   ======================================== */
/**
 * Box-sizing: border-box
 *
 * ALAPÉRTELMEZETT (content-box):
 * - width = tartalom szélessége
 * - padding és border HOZZÁADÓDIK a szélességhez
 * - Példa: width:100px + padding:10px = 120px teljes szélesség
 *
 * BORDER-BOX (amit mi használunk):
 * - width = teljes szélesség (tartalom + padding + border)
 * - Példa: width:100px + padding:10px = 100px teljes szélesség
 * - Sokkal könnyebb számolni a layoutot!
 *
 * * (csillag): univerzális selector, minden elemre érvényes
 * ::before és ::after: pseudo-elemek (generált tartalom)
 */
* {
  box-sizing: border-box;  /* Minden elemre alkalmazzuk */
}

html {
  box-sizing: border-box;  /* HTML elemen is */
}

*, *:before, *:after {
  box-sizing: border-box;  /* Biztonsági tripla ellenőrzés */
}

/* ========================================
   HTML ÉS BODY ALAPBEÁLLÍTÁSOK
   ======================================== */
/**
 * HTML elem - A gyökér (root) elem
 * height: 100% - teljes viewport magasság
 * scroll-padding-top: offset anchor linkekhez, hogy a sticky header ne takarja el
 */
html {
  height: 100%;  /* 100% magasság = böngésző ablak teljes magassága */
  scroll-padding-top: 100px;  /* Offset anchor navigációhoz (header magasság + extra) */
}

/**
 * BODY - Flexbox layout a sticky footer megvalósításához
 *
 * Flexbox alapok:
 * - display: flex - flexbox konténer aktiválása
 * - flex-direction: column - függőleges elrendezés (fentről lefelé)
 * - min-height: 100% - legalább teljes képernyő magas
 *
 * Cél: A footer mindig az oldal alján legyen, még rövid tartalom esetén is
 */
body {
  min-height: 100%;        /* Minimum teljes képernyő magasság */
  display: flex;           /* Flexbox aktiválása */
  flex-direction: column;  /* Elemek egymás alatt (header, main, footer) */
}

/**
 * BODY - Vizuális stílusok
 */
body {
  margin: 0;  /* Alapértelmezett böngésző margó eltávolítása */

  /* Font-family stack (fallback fontok):
   * 1. system-ui - Az operációs rendszer alapértelmezett fontja
   * 2. -apple-system - Apple rendszerek (macOS, iOS)
   * 3. Segoe UI - Windows
   * 4. Roboto - Android
   * 5. Arial, Noto Sans - Univerzális fallback
   */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";

  /* Színek CSS változókból */
  background: var(--bg);   /* Háttérszín: világosszürke */
  color: var(--text);      /* Szövegszín: majdnem fekete */

  /* Tipográfia */
  line-height: 1.6;        /* Sorköz (1.6x a betűméret) - olvashatóság */

  /* overflow-x: hidden - Vízszintes görgetés letiltása
   * Megakadályozza, hogy túlnyúló tartalom vízszintes scrollbar-t hozzon létre
   */
  overflow-x: hidden;
}

/* ========================================
   SEGÉDOSZTÁLYOK (Utility Classes)
   ======================================== */
/**
 * .container - Központosított tartalom konténer
 *
 * width: min(1100px, 92%)
 * - min() függvény: a két érték közül a KISEBBet választja
 * - Desktop: 1100px széles (fix szélesség)
 * - Mobil: 92% széles (viewport 92%-a, 8% margó marad)
 *
 * margin-inline: auto
 * - Logikai tulajdonság (nyelv-független)
 * - Ugyanaz mint: margin-left: auto; margin-right: auto;
 * - Eredmény: vízszintesen középre igazított konténer
 */
.container {
  width: min(1100px, 92%);  /* Reszponzív szélesség: max 1100px vagy 92% */
  margin-inline: auto;      /* Vízszintes középre igazítás */
}

/**
 * main elem - Főtartalom
 *
 * flex: 1
 * - Flexbox tulajdonság (rövidítés: flex-grow flex-shrink flex-basis)
 * - flex: 1 = flex-grow: 1 (kitölti a szabad helyet)
 * - Eredmény: A main elem kitölti a header és footer közötti teret
 * - Ez biztosítja, hogy a footer mindig az oldal alján legyen
 */
main {
  flex: 1;  /* Kitölti a rendelkezésre álló helyet (sticky footer) */
}

/* ========================================
   FEJLÉC ÉS NAVIGÁCIÓ
   ======================================== */
/**
 * .site-header - Oldal fejléce
 *
 * position: sticky
 * - Hibrid pozicionálás: relative + fixed
 * - Görgetéskor az elem "ragad" a megadott pozícióhoz (top: 0)
 * - Előny: A navigáció mindig látható marad görgetéskor is
 *
 * z-index: 1000
 * - Rétegzési sorrend (magasabb érték = előrébb van)
 * - 1000: Biztosítja, hogy a header minden más elem felett legyen
 *
 * background: rgba(255,255,255,.9)
 * - RGBA szín: Red, Green, Blue, Alpha (átlátszóság)
 * - .9 = 90% opacitás (10% átlátszó)
 *
 * backdrop-filter: blur(8px)
 * - Modern CSS tulajdonság
 * - Elmossa a header mögötti tartalmat (üveg effektus)
 */
.site-header {
  position: sticky;          /* Ragadós pozicionálás */
  top: 0;                    /* A viewport tetejéhez ragad */
  z-index: 1000;             /* Minden más elem fölött */
  background: rgba(255,255,255,.9);  /* 90% opacitású fehér háttér */
  backdrop-filter: blur(8px);  /* Elmosó effekt (glass morphism) */
  border-bottom: 1px solid rgba(0,0,0,.1);  /* Finom elválasztó vonal */
}

/**
 * .header-inner - Fejléc belső konténer
 *
 * display: flex + justify-content: space-between
 * - Logo balra, navigáció jobbra
 * - space-between: elemek széthúzása a konténer széléhez
 *
 * align-items: center
 * - Függőleges középre igazítás a flexbox tengelyen
 */
.header-inner {
  display: flex;                      /* Flexbox layout */
  align-items: center;                /* Függőleges középre igazítás */
  justify-content: space-between;     /* Logo balra, menü jobbra */
  padding: 14px 0;                    /* Függőleges térköz */
}

/**
 * .logo - Weboldal logója (link)
 *
 * display: flex
 * - Logo kép és szöveg egymás mellett
 *
 * text-decoration: none
 * - Link alapértelmezett aláhúzás eltávolítása
 *
 * letter-spacing: .2px
 * - Betűköz: 0.2 pixel távolság a betűk között
 * - Növeli az olvashatóságot és eleganciát
 */
.logo {
  display: flex;              /* Kép és szöveg egymás mellett */
  align-items: center;        /* Függőleges középre igazítás */
  text-decoration: none;      /* Link aláhúzás eltávolítása */
  color: var(--text);         /* Szövegszín: sötét */
  font-size: 1.15rem;         /* Betűméret: 1.15x az alapértelmezett */
  font-weight: 800;           /* Extra vastag betűtípus (800 = extra bold) */
  letter-spacing: .2px;       /* Betűköz növelése */
}

/**
 * .logo img - Logo kép
 *
 * Descendant selector (leszármazott választó)
 * - .logo img = minden img elem ami .logo-n belül van
 *
 * border-radius: 6px
 * - Lekerekített sarkok 6 pixel sugárral
 */
.logo img {
  width: 32px;           /* Szélesség: 32 pixel */
  height: 32px;          /* Magasság: 32 pixel */
  margin-right: 10px;    /* Térköz a szöveg előtt */
  border-radius: 6px;    /* Lekerekített sarkok */
}

/**
 * ========================================
 * MOBIL MENÜ GOMBOK
 * ========================================
 *
 * Ezek a gombok csak mobil nézetben jelennek meg (media query aktiválja őket)
 * Desktop nézetben: display: none (rejtve)
 */
.mobile-menu-toggle {
  display: none;         /* Alapértelmezetten rejtve (desktop nézet) */
  background: none;      /* Nincs háttér */
  border: none;          /* Nincs keret */
  font-size: 1.5rem;     /* Nagy betűméret (hamburger ikon) */
  cursor: pointer;       /* Mutató kurzor (kattintható) */
  padding: 10px;         /* Térköz a könnyebb kattintáshoz */
  color: var(--text);    /* Szövegszín */
  margin-left: auto;     /* Jobbra igazítás */
}

.mobile-menu-close {
  display: none;         /* Alapértelmezetten rejtve */
}

/* ========================================
   NAVIGÁCIÓS MENÜ
   ======================================== */
/**
 * .main-nav ul - Navigációs lista
 *
 * list-style: none
 * - Eltávolítja a felsorolás alapértelmezett bullet pontjait
 *
 * display: flex + gap: 8px
 * - Flexbox: elemek vízszintesen egymás mellett
 * - gap: 8px távolság az elemek között (modern CSS, IE nem támogatja)
 *
 * margin: 0; padding: 0
 * - Böngésző alapértelmezett margó/padding eltávolítása
 */
.main-nav ul {
  list-style: none;   /* Bullet pontok eltávolítása */
  display: flex;      /* Vízszintes elrendezés */
  gap: 8px;           /* 8px távolság a menüpontok között */
  margin: 0;          /* Nincs külső térköz */
  padding: 0;         /* Nincs belső térköz */
}

/**
 * .main-nav a - Navigációs linkek
 *
 * display: block
 * - A link teljes területe kattintható (nem csak a szöveg)
 * - Lehetővé teszi a padding használatát
 *
 * border-radius: 10px
 * - Lekerekített sarkok (modern megjelenés)
 */
.main-nav a {
  display: block;         /* Blokk elem (teljes terület kattintható) */
  text-decoration: none;  /* Aláhúzás eltávolítása */
  color: var(--text);     /* Szövegszín: sötét */
  padding: 10px 14px;     /* Belső térköz: 10px fel/le, 14px jobbra/balra */
  border-radius: 10px;    /* Lekerekített sarkok */
}

/**
 * :hover és .active pseudo-osztályok
 *
 * :hover - Egér rámutatásakor
 * .active - Aktív oldal jelzése (JavaScript adja hozzá)
 *
 * linear-gradient(180deg, ...)
 * - Lineáris színátmenet 180 fokos szögben (fentről lefelé)
 * - 180deg = függőleges gradiens
 * - var(--panel) → var(--panel-2): fehér → világosszürke
 */
.main-nav a:hover,
.main-nav a.active {
  /* Finom gradiens háttér (fentről lefelé) */
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--shadow);  /* Árnyék effekt (kiemelés) */
}

/* ========================================
   LEGÖRDÜLŐ MENÜ (Dropdown)
   ======================================== */
/**
 * .has-dropdown - Legördülő menüpontot tartalmazó lista elem
 *
 * position: relative
 * - Referencia pont a dropdown pozicionálásához
 * - A gyermek elem (dropdown) ehhez képest helyezkedik el (absolute)
 */
.has-dropdown {
  position: relative;  /* Referencia pont a dropdown-hoz */
}

/**
 * .has-dropdown > a - Legördülő menüpont linkje
 *
 * > (child combinator): csak közvetlen gyermek
 * - .has-dropdown > a: csak a közvetlen link gyermek
 * - NEM a dropdown-on belüli linkek
 *
 * padding-right: 34px
 * - Extra hely jobbra a nyíl ikonnak
 */
.has-dropdown > a {
  padding-right: 34px;  /* Hely a nyíl ikonnak */
}

/**
 * ::after pseudo-elem - Generált tartalom
 *
 * Pseudo-elemek:
 * - ::before: elem ELŐTT generált tartalom
 * - ::after: elem UTÁN generált tartalom
 *
 * content: "▾"
 * - Lefelé mutató nyíl karakter (Unicode)
 * - Ez a tartalom a HTML-ben nem létezik, CSS generálja
 *
 * position: absolute + right: 12px
 * - Abszolút pozicionálás (relative szülőhöz képest)
 * - Jobbra igazítva, 12px távolságra a széltől
 */
.has-dropdown > a::after {
  content: "▾";           /* Generált tartalom: lefelé nyíl */
  position: absolute;     /* Abszolút pozicionálás */
  right: 12px;            /* 12px távolság a jobb széltől */
}

/**
 * .dropdown - Legördülő menü konténer
 *
 * display: none
 * - Alapértelmezetten rejtve
 * - :hover eseményre megjelenik (lásd később)
 *
 * position: absolute
 * - Kiveszi a normal flow-ból
 * - top: 100%: közvetlenül a szülő elem ALATT kezdődik
 * - left: 0: a szülő bal széléhez igazítva
 *
 * z-index: 1000
 * - Magas rétegzési sorrend (más tartalom fölött)
 */
.main-nav .has-dropdown .dropdown {
  display: none;              /* Alapértelmezetten rejtve */
  position: absolute;         /* Abszolút pozicionálás */
  top: 100%;                  /* Szülő elem alatt (100% = szülő teljes magassága) */
  left: 0;                    /* Bal széléhez igazítva */
  background: var(--panel);   /* Fehér háttér */
  border-radius: 10px;        /* Lekerekített sarkok */
  box-shadow: var(--shadow);  /* Árnyék (mélység érzet) */
  min-width: 200px;           /* Minimum szélesség */
  z-index: 1000;              /* Minden más elem fölött */
}

/**
 * Dropdown belső elemek formázása
 */
.main-nav .dropdown li {
  margin: 0;  /* Lista elemek margójának eltávolítása */
}

.main-nav .dropdown a {
  padding: 12px 16px;   /* Nagyobb térköz a dropdown linkekben */
  display: block;       /* Teljes szélesség kattintható */
  white-space: nowrap;  /* Szöveg nem törik új sorba */
}

/**
 * Dropdown megjelenítése
 *
 * :hover pseudo-osztály
 * - Egér rámutatáskor aktiválódik
 * - .has-dropdown:hover .dropdown = ha a .has-dropdown fölött van az egér,
 *   akkor a benne lévő .dropdown legyen display: block
 */
.main-nav .has-dropdown:hover .dropdown {
  display: block;  /* Megjelenítés hover-re */
}

/**
 * .active osztály
 * - JavaScript adja hozzá mobilon, amikor a menüpont aktív
 * - Mobilon kattintásra nyílik/záródik a dropdown
 */
.main-nav .has-dropdown.active .dropdown {
  display: block;  /* Megjelenítés aktív állapotban */
}



/* ========================================
   OKTATÓ DOBOZOK (Intro Section, Details/Summary)
   ======================================== */
/**
 * .intro-section - Oktató doboz (használva storage, ram, psu oldalakon)
 *
 * border-left: 4px solid var(--accent)
 * - Bal oldali színes accent vonal (kék)
 * - Vizuális kiemelés, figyelemfelhívás
 *
 * box-shadow: 0 4px 12px rgba(0,0,0,0.05)
 * - Árnyék effekt:
 *   - 0 = vízszintes eltolás (nincs)
 *   - 4px = függőleges eltolás (lefelé)
 *   - 12px = blur (elmosás mértéke)
 *   - rgba(0,0,0,0.05) = 5% átlátszatlan fekete
 */
.intro-section {
  background: var(--panel);     /* Fehér háttér */
  padding: 20px 24px;           /* Belső térköz: 20px fel/le, 24px jobbra/balra */
  margin-bottom: 24px;          /* Térköz az elem alatt */
  border-radius: var(--radius); /* Lekerekített sarkok (14px) */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);  /* Finom árnyék */
  border-left: 4px solid var(--accent);     /* Bal oldali kék accent vonal */
}

/**
 * .intro-section címsor (h2)
 *
 * margin-top: 0
 * - Felső margó eltávolítása (padding már van a szülőn)
 *
 * rem egység:
 * - root em = gyökér (html) betűmérethez viszonyítva
 * - 1.3rem = 1.3x a html elem betűmérete (általában 16px × 1.3 = 20.8px)
 */
.intro-section h2 {
  margin-top: 0;              /* Nincs felső margó */
  color: var(--accent);       /* Kék szín (hangsúly) */
  font-size: 1.3rem;          /* 1.3x az alapértelmezett betűméret */
  margin-bottom: 12px;        /* Térköz a bekezdés előtt */
}

.intro-section p {
  margin-bottom: 10px;  /* Térköz a bekezdések között */
  line-height: 1.6;     /* Sorköz (olvashatóság) */
}

.intro-section ul {
  margin-top: 8px;      /* Térköz a lista előtt */
  margin-bottom: 10px;  /* Térköz a lista után */
}

.intro-section li {
  margin-bottom: 3px;  /* Kis térköz a lista elemek között */
  line-height: 1.1;    /* Tömörebb sorköz a listában */
}

/* ========================================
   DETAILS/SUMMARY (HTML5 összecsukható elem)
   ======================================== */
/**
 * <details> és <summary> elemek
 *
 * HTML5 natív összecsukható tartalom:
 * - <details>: a konténer
 * - <summary>: a kattintható fejléc
 * - Alapértelmezetten a böngésző kezeli a nyitás/zárást
 *
 * cursor: pointer
 * - Egér kurzor mutatóvá válik (kattintható jelzés)
 *
 * transition: color 0.3s ease
 * - Színváltozás animálása
 * - 0.3s = 300 milliszekundum időtartam
 * - ease = easing function (lassabban indul/végződik)
 *
 * user-select: none
 * - Szöveg kijelölés letiltása
 * - Gombszerű elemeken ajánlott (nem szükséges kijelölni)
 */
.intro-section summary,
.manufacturer-notice summary {
  cursor: pointer;        /* Mutató kurzor (kattintható) */
  font-size: 1.2rem;      /* Nagyobb betűméret */
  font-weight: 700;       /* Félkövér (700 = bold) */
  color: var(--accent);   /* Kék szín */
  padding: 0;             /* Nincs belső térköz */
  margin-bottom: 20px;    /* Térköz az összecsukható tartalom előtt */
  transition: color 0.3s ease;  /* Színváltozás animáció */
  user-select: none;      /* Szöveg kijelölés letiltása */
}

/**
 * :hover állapot - Summary hover
 *
 * Sötétebb kék színre vált, amikor az egér fölé kerül
 */
.intro-section summary:hover,
.manufacturer-notice summary:hover {
  color: var(--accent-2);  /* Sötétebb kék hover állapotban */
}

/**
 * .manufacturer-notice - Gyártók oldal oktató doboza
 * Azonos stílus mint az .intro-section
 */
.manufacturer-notice {
  background: var(--panel);
  padding: 20px 24px;
  margin-bottom: 24px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-left: 4px solid var(--accent);
}

/* ========================================
   VIDEÓ LEJÁTSZÓ (HTML5 <video> elem)
   ======================================== */
/**
 * .video-section - Videó szekció konténer
 */
.video-section {
  margin: 2rem 0;  /* 2rem = 2x az alapértelmezett betűméret (kb. 32px) */
}

/**
 * .video-container - Videó doboz (padding és stílusok)
 */
.video-container {
  background: var(--panel);     /* Fehér háttér */
  padding: 24px;                /* Belső térköz */
  border-radius: var(--radius); /* Lekerekített sarkok */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);  /* Árnyék */
  border-left: 4px solid var(--accent);     /* Kék accent vonal */
}

/**
 * <video> elem formázása
 *
 * width: 100% + max-width: 100%
 * - width: 100% = konténer teljes szélessége
 * - max-width: 100% = nem nő túl a szülő konténeren
 *
 * height: auto
 * - Magasság automatikus (aspect ratio megőrzése)
 * - Arány megtartása szélesség alapján
 *
 * display: block
 * - Blokk elem (inline-block helyett)
 * - Eltávolítja az inline elem alatti kis részt (baseline gap)
 *
 * background: #000
 * - Fekete háttér (videó betöltés alatt látszik)
 */
.video-container video {
  width: 100%;              /* Teljes szélesség */
  max-width: 100%;          /* Maximum szélesség korlát */
  height: auto;             /* Magasság automatikus (aspect ratio) */
  border-radius: var(--radius);  /* Lekerekített sarkok */
  display: block;           /* Blokk elem (gap eltávolítása) */
  background: #000;         /* Fekete háttér (betöltés alatt) */
}

/**
 * .video-caption - Videó alatt magyarázó szöveg
 *
 * text-align: center
 * - Szöveg középre igazítása
 */
.video-caption {
  margin-top: 16px;         /* Térköz a videó alatt */
  margin-bottom: 0;         /* Nincs alsó margó */
  color: var(--muted);      /* Szürke szín (kevésbé hangsúlyos) */
  font-size: 0.95rem;       /* Kisebb betűméret */
  line-height: 1.5;         /* Sorköz */
  text-align: center;       /* Középre igazított szöveg */
}

/* ========================================
   HERO SECTION (Flexbox demo)
   ======================================== */
/**
 * .hero-section - Fő bemutató szekció (storage.html)
 *
 * FLEXBOX LAYOUT:
 * - display: flex - Flexbox konténer
 * - flex-direction: column - Mobil: függőleges elrendezés (fentről lefelé)
 * - gap: 24px - Modern CSS: térköz a flex elemek között
 *
 * LINEAR GRADIENT:
 * - linear-gradient(135deg, ...)
 * - 135deg = átlós gradiens (bal felső saroktól jobb alsóig)
 * - var(--panel) → var(--panel-2): fehér → világosszürke
 */
.hero-section {
  display: flex;                    /* Flexbox aktiválása */
  flex-direction: column;           /* Mobil: függőleges elrendezés */
  gap: 24px;                        /* 24px térköz az elemek között */
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));  /* Átlós gradiens */
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);   /* Erősebb árnyék (mélység) */
  border-left: 4px solid var(--accent);
}

/**
 * .hero-image - Kép konténer
 *
 * flex: 0 0 50%
 * - Rövidítés: flex-grow flex-shrink flex-basis
 * - 0 = nem nő (flex-grow: 0)
 * - 0 = nem zsugorodik (flex-shrink: 0)
 * - 50% = alapméret 50% (desktop nézetben)
 *
 * justify-content: center + align-items: center
 * - Kép középre igazítása vízszintesen ÉS függőlegesen
 */
.hero-image {
  flex: 0 0 50%;               /* 50% szélesség, nem rugalmas */
  display: flex;               /* Flexbox a kép középre igazításához */
  align-items: center;         /* Függőleges középre igazítás */
  justify-content: center;     /* Vízszintes középre igazítás */
}

.hero-image img {
  max-width: 100%;             /* Nem nő túl a konténeren */
  height: auto;                /* Aspect ratio megőrzése */
  border-radius: 8px;          /* Lekerekített sarkok */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /* Árnyék a képen */
}

/**
 * .hero-content - Szöveges tartalom konténer
 */
.hero-content {
  flex: 0 0 50%;               /* 50% szélesség (desktop) */
  display: flex;
  flex-direction: column;      /* Tartalom függőlegesen egymás alatt */
}

.hero-content p {
  margin-bottom: 20px;
  line-height: 1.6;            /* Sorköz (olvashatóság) */
}

/**
 * .hero-specs-container - Specifikációk konténer (teljes szélesség)
 *
 * flex: 1 1 100%
 * - 1 = növekedhet (flex-grow)
 * - 1 = zsugorodhat (flex-shrink)
 * - 100% = teljes szélesség
 */
.hero-specs-container {
  flex: 1 1 100%;              /* Teljes szélesség, rugalmas */
  width: 100%;
}

/**
 * .hero-specs - Specifikációk lista (Flexbox)
 *
 * flex-wrap: wrap
 * - Elemek új sorba törnek, ha nincs hely
 * - Reszponzív chippek (tag-ek)
 */
.hero-specs {
  list-style: none;            /* Bullet pontok eltávolítása */
  padding: 0;
  margin: 0;
  display: flex;               /* Flexbox: elemek egymás mellett */
  flex-wrap: wrap;             /* Új sorba törés, ha szűk a hely */
  gap: 12px;                   /* Térköz a chippek között */
}

/**
 * .hero-specs li - Specifikáció chip/tag
 *
 * flex: 0 0 auto
 * - Nem rugalmas, tartalom szélessége szerint
 */
.hero-specs li {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);  /* Áttetsző fehér háttér */
  border-radius: 6px;
  border-left: 3px solid var(--accent);   /* Kék accent */
  flex: 0 0 auto;              /* Tartalom szélessége szerint */
}

.hero-specs li strong {
  color: var(--accent);        /* Kék szín a címkékre */
  font-weight: 600;            /* Semi-bold */
}

/* ========================================
   MEDIA QUERY - Desktop layout (min-width: 721px)
   ======================================== */
/**
 * @media (min-width: 721px)
 * - Media query: CSS szabályok bizonyos képernyőméret felett
 * - min-width: 721px = legalább 721px széles képernyő (tablet és desktop)
 * - Mobil-first megközelítés: alapértelmezett mobil, desktop külön
 *
 * DESKTOP VÁLTOZTATÁSOK:
 * - flex-direction: row = kép és tartalom egymás mellett (vízszintesen)
 * - calc(50% - 16px) = 50% szélesség MÍNUSZ 16px (gap kompenzáció)
 * - order: 3 = elem sorrendjének megváltoztatása (specs utolsó)
 */
@media (min-width: 721px) {
  .hero-section {
    flex-direction: row;       /* Desktop: vízszintes elrendezés */
    flex-wrap: wrap;           /* Elemek új sorba törnek (specs) */
    align-items: flex-start;   /* Elemek felső élhez igazítva */
  }

  .hero-image {
    flex: 0 0 calc(50% - 16px);  /* 50% szélesség - gap kompenzáció */
  }

  .hero-content {
    flex: 0 0 calc(50% - 16px);  /* 50% szélesség - gap kompenzáció */
  }

  .hero-specs-container {
    flex: 1 1 100%;            /* Teljes szélesség (új sor) */
    order: 3;                  /* Sorrend: kép(1), tartalom(2), specs(3) */
    margin-top: 24px;          /* Térköz felül */
  }
}

/* ========================================
   SAMSUNG PANEL (CSS Grid demo)
   ======================================== */
/**
 * .samsung-panel - Samsung SSD bemutató panel (storage.html)
 *
 * CSS GRID LAYOUT:
 * - display: grid - Grid konténer aktiválása
 * - grid-template-columns: 1fr 1fr - Két egyenlő oszlop
 *   - 1fr = 1 frakció (fraction unit)
 *   - Rendelkezésre álló hely egyenlő elosztása
 * - gap: 32px - Térköz az oszlopok között
 *
 * GRID vs FLEXBOX:
 * - Grid: Kétdimenziós layout (sorok ÉS oszlopok)
 * - Flexbox: Egydimenziós layout (vagy sorok, vagy oszlopok)
 */
.samsung-panel {
  display: grid;                        /* Grid layout aktiválása */
  grid-template-columns: 1fr 1fr;       /* 2 egyenlő oszlop (50%-50%) */
  gap: 32px;                            /* 32px térköz az oszlopok között */
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border-left: 4px solid var(--accent);
}

/**
 * .samsung-panel-image - Kép konténer (bal oldali grid cella)
 */
.samsung-panel-image {
  display: flex;               /* Flexbox a kép középre igazításához */
  align-items: center;         /* Függőleges középre */
  justify-content: center;     /* Vízszintes középre */
}

.samsung-panel-image img {
  max-width: 100%;             /* Reszponzív kép */
  height: auto;                /* Aspect ratio megőrzése */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/**
 * .samsung-panel-content - Tartalom konténer (jobb oldali grid cella)
 */
.samsung-panel-content {
  display: flex;
  flex-direction: column;      /* Tartalom függőlegesen */
}

.samsung-panel-content p {
  margin-bottom: 20px;
  line-height: 1.6;
  width: 100%;
}

.samsung-panel-specs {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.samsung-panel-specs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.samsung-panel-specs li {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
  flex: 0 0 auto;
}

.samsung-panel-specs li strong {
  color: var(--accent);
  font-weight: 600;
}

/* Mobile responsive for Samsung panel */
@media (max-width: 768px) {
  .samsung-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .samsung-panel-specs {
    grid-column: 1;
  }
}

/* Usage recommendations 5 column layout */
.usage-recommendations-container {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.usage-recommendations-container .usage-recommendation {
  flex: 0 0 calc(20% - 12.8px);
  background: var(--panel-2);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-left: 4px solid var(--success);
}

.usage-recommendations-container .usage-recommendation h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
}

.usage-recommendations-container .usage-recommendation p {
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 0.9rem;
}

/* Mobile responsive for 5 column layout */
@media (max-width: 1200px) {
  .usage-recommendations-container .usage-recommendation {
    flex: 0 0 calc(25% - 12px);
  }
}

@media (max-width: 900px) {
  .usage-recommendations-container .usage-recommendation {
    flex: 0 0 calc(33.333% - 10.67px);
  }
}

@media (max-width: 600px) {
  .usage-recommendations-container .usage-recommendation {
    flex: 0 0 calc(50% - 8px);
  }
}

@media (max-width: 400px) {
  .usage-recommendations-container .usage-recommendation {
    flex: 0 0 100%;
    }
  }

/* Range slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--panel-2);
  border-radius: 5px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

output {
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
  color: var(--accent);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.9rem;
  color: var(--muted);
}

.range-labels span {
  flex: 1;
  text-align: center;
}

input[type="datetime-local"], input[type="month"], input[type="week"] {
  padding: 8px;
  border: 1px solid var(--panel-2);
  border-radius: 4px;
}

/* Hide datalist dropdown arrow */
input[list]::-webkit-list-button {
  display: none;
  opacity: 0;
}

progress {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--panel-2);
}

progress::-webkit-progress-bar {
  background: var(--panel-2);
  border-radius: 5px;
}

progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 5px;
}

.budget-meter-bar {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #ddd;
  position: relative;
}

.budget-meter-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--meter-width, 0%);
  height: 100%;
  background: var(--meter-color, red);
  border-radius: 5px;
  transition: width 0.3s, background 0.3s;
}

input[type="image"] {
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.required {
  color: red;
  font-weight: bold;
}

/* Contact Page Layout */
.contact-wrapper {
  display: grid;
  grid-template-columns: 33% 67%;
  gap: 32px;
  margin-top: 32px;
}

/* Company Info Styling */
.company-info {
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  padding: 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--accent);
  height: fit-content;
  position: sticky;
  top: 80px;
}

.company-info h2 {
  margin-top: 0;
  color: var(--accent);
  font-size: 1.8rem;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--accent);
}

.company-info .info-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.company-info .info-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.company-info .info-section h3 {
  color: var(--accent-2);
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 600;
}

.company-info .info-section p {
  margin: 8px 0;
  line-height: 1.6;
}

.company-info .info-section p strong {
  color: var(--text);
  font-weight: 600;
  min-width: 120px;
  display: inline-block;
}

/* Contact Form Container */
.contact-form-container {
  background: var(--panel);
  padding: 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.contact-form-container h2 {
  margin-top: 0;
  color: var(--accent);
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.contact-form-container > p {
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Form Section Headers */
.contact-form h3 {
  color: var(--accent-2);
  font-size: 1.3rem;
  margin-top: 32px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--panel-2);
}

.contact-form h3:first-of-type {
  margin-top: 0;
}

.contact-form h4 {
  color: var(--accent);
  font-size: 1.1rem;
  margin-top: 24px;
  margin-bottom: 12px;
}

/* Consent Section Styling */
.consent-section {
  background: var(--panel-2);
  padding: 20px;
  border-radius: var(--radius);
  margin: 32px 0 24px 0;
  border-left: 4px solid var(--accent);
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.6;
}

.consent-label input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.consent-label a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}

.consent-label a:hover {
  color: var(--accent-2);
}

/* Form Actions (Buttons) */
.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.form-actions .btn {
  flex: 1;
  min-width: 200px;
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}

.form-actions .btn-primary {
  background: var(--accent);
  color: white;
}

.form-actions .btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
}

.form-actions .btn-secondary {
  background: var(--panel-2);
  color: var(--text);
  border: 2px solid var(--muted);
}

.form-actions .btn-secondary:hover {
  background: var(--muted);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
}

/* Responsive Design for Contact Page */
@media (max-width: 968px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .company-info {
    position: static;
  }

  .form-actions .btn {
    min-width: 150px;
  }
}

@media (max-width: 600px) {
  .contact-form-container {
    padding: 20px;
  }

  .company-info {
    padding: 20px;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
    min-width: auto;
  }
}
.m2-comparison-flex {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin: 20px 0;
}

.m2-comparison-flex figure {
  flex: 0 0 50%;
  margin: 0;
}

.m2-comparison-flex .m2-comparison-text {
  flex: 0 0 50%;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .m2-comparison-flex {
    flex-direction: column;
    gap: 20px;
  }
  
  .m2-comparison-flex figure,
  .m2-comparison-flex .m2-comparison-text {
    flex: 1 1 100%;
  }
}

.storage-types {
  margin-bottom: 48px;
}

.storage-comparison {
  margin-bottom: 32px;
}

.interface-types {
  margin-bottom: 32px;
}

.interface-item {
  background: var(--panel);
  padding: 24px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-left: 4px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.interface-item-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.interface-item-image {
  flex: 0 0 30%;
  max-width: 30%;
}

.interface-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1/1;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.interface-item-text {
  flex: 1;
  min-width: 0;
}

.interface-item h4 {
  margin-top: 0;
  color: var(--accent);
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.interface-item-text ul {
  margin: 12px 0 0 0;
  padding-left: 20px;
}

.usage-guide {
  margin-bottom: 32px;
}

.usage-recommendation {
  background: var(--panel-2);
  padding: 20px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  border-left: 4px solid var(--success);
}

.usage-recommendation h4 {
  margin-top: 0;
  color: var(--accent-2);
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.usage-recommendation p {
  margin-bottom: 0;
}

.selection-tips {
  background: var(--panel);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.selection-tips h3 {
  margin-top: 0;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
}

.selection-tips ul {
  margin: 16px 0 0 0;
  padding-left: 20px;
}

.selection-tips li {
  margin-bottom: 8px;
}

/* Storage page responsive design */
@media (max-width: 768px) {
  .hero-section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  
  .hero-content h2 {
    font-size: 1.5rem;
  }
  
  .interface-item,
  .usage-recommendation,
  .selection-tips {
    padding: 16px;
  }
  
  .interface-item-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .interface-item-image {
    flex: 1;
    max-width: 100%;
  }
}

/* Négyzet alakú képek alaplap oldalon */
.square-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin: 10px auto;
  display: block;
}


/* Hero Section */
.hero {
  padding: 3rem 2rem;
  background: var(--panel);
  color: var(--text);
  margin: 2rem 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-text h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-text p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: var(--muted);
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Buttons */
.btn {
  display: inline-block;
  background: #007bff;
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.3s ease;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}








}

/* Hero Button Container */
.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Button Variants */
.btn-primary {
  background: var(--accent);
  color: white;
}

.btn-primary:hover {
  background: var(--accent-2);
  box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.btn-secondary:hover {
  background: var(--accent);
  color: white;
  box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
}

/* SEO Content Section */
.seo-content {
  margin: 3rem 2rem;
}

.seo-content h2 {
  color: var(--accent);
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  text-align: left;
}

.seo-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 0;
  text-align: justify;
}

/* Hero Animations */
.hero-text {
  animation: slideInLeft 0.8s ease-out;
}

.hero-image {
  animation: slideInRight 0.8s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Form Styling - Compact */
.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.form-group {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

input[type="color"] {
  height: 40px;
  padding: 0;
}

/* Color Picker with Icon */
.color-picker-wrapper {
  margin-bottom: 1rem;
}

.color-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-input-container input[type="color"] {
  flex: 1;
  cursor: pointer;
}

.color-icon {
  font-size: 1.5rem;
  pointer-events: none;
}

/* Password Input with Toggle Visibility */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
  width: 100%;
  padding-right: 45px; /* Space for the eye button */
}

.password-toggle {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--muted);
  transition: color 0.2s;
}

.password-toggle:hover {
  color: var(--accent);
}

.password-toggle:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.eye-icon {
  user-select: none;
  pointer-events: none;
}

input[type="range"] {
  width: 100%;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #666;
}

.range-labels span {
  flex: 1;
  text-align: center;
}

/* ============================================
   FIELDSET és LEGEND - Űrlap csoportosítás
   ============================================
   A <fieldset> elem űrlap mezők logikai csoportosítására szolgál,
   a <legend> elem pedig a csoport címét adja meg.

   Szemantikai előnyök:
   - Akadálymentesség: képernyőolvasók számára strukturált
   - Logikai csoportosítás: kapcsolódó mezők együtt
   - Vizuális hierarchia: kerettel elkülönített szakaszok
*/

fieldset {
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 1.5rem 1.5rem 2rem 1.5rem;
  margin-bottom: 2rem;
}

legend {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
}

.contact-form-container {
  padding: 1rem;
  overflow: hidden; /* Prevent content overflow */
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ============================================
   DIALOG - HTML5 natív modal ablak
   ============================================
   A <dialog> elem HTML5-ben natív modal funkcionalitást biztosít.
   Előnyök:
   - Automatikus háttér elsötétítés (::backdrop)
   - Billentyűzet kezelés (ESC bezárja)
   - Fókusz kezelés (modal nyitáskor átkerül a dialog-ra)
   - Akadálymentesség (screen reader támogatás)

   Használat JavaScripttel:
   - dialog.showModal() - modal ablakként megjelenítés
   - dialog.show() - nem-modal megjelenítés
   - dialog.close() - bezárás
*/

.success-dialog {
  border: none;
  border-radius: 8px;
  padding: 0;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Backdrop - a háttér elsötétítése */
.success-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}

.dialog-content {
  padding: 2rem;
  text-align: center;
}

.dialog-content h2 {
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.dialog-content p {
  margin: 1rem 0;
  line-height: 1.6;
}

.dialog-content button {
  margin-top: 1.5rem;
  min-width: 120px;
}

/* Grid Layout */
.grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
  width: 100%;
}

.two-cols {
  grid-template-columns: repeat(2, 1fr);
}

.three-cols {
  grid-template-columns: repeat(3, 1fr);
}

/* Cards */
.card {
  background: var(--panel);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

/* GPU Showcase Styles */
.gpu-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
  background: var(--panel);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  align-items: center;
  border-left: 4px solid var(--accent);
}

.gpu-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.gpu-info h3 {
  color: var(--accent);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

figure h4 {
  color: var(--accent);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.gpu-info ul {
  margin: 0;
  padding-left: 1.5rem;
}

.gpu-info li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* CEO Quote Blockquote Styles */
.ceo-quote {
  background: var(--panel);
  border: 2px solid var(--panel-2);
  padding: 2rem;
  margin: 2rem 0;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: grid;
  grid-template-columns: 33% 67%;
  gap: 2rem;
  align-items: start;
}

.quote-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ceo-portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.quote-author {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: center;
}

.quote-author strong {
  font-size: 1.2rem;
  color: var(--text);
}

.quote-author span {
  font-size: 0.95rem;
  color: var(--muted);
}

.quote-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2rem;
}

.quote-content p {
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text);
  margin: 0 0 1rem 0;
  line-height: 1.7;
  position: relative;
}

.quote-content p::before {
  content: '"';
  font-size: 4rem;
  color: var(--accent);
  opacity: 0.3;
  position: absolute;
  left: -1.5rem;
  top: -1rem;
}

.quote-content cite {
  display: block;
  text-align: right;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: normal;
  margin-top: 0.5rem;
  padding-right: 2rem;
}

.card h2 {
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

/* Logo Styles */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  height: 80px;
}

.manufacturer-logo {
  max-width: 120px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ========================================
   TÁBLÁZATOK (HTML Table Elements)
   ======================================== */
/**
 * .table-container - Táblázat wrapper konténer
 *
 * overflow-x: auto
 * - Vízszintes görgetés engedélyezése
 * - Ha a táblázat szélesebb mint a konténer, görgethető lesz
 * - Mobil eszközökön fontos (kis képernyő)
 *
 * -webkit-overflow-scrolling: touch
 * - iOS Safari optimalizáció
 * - Simább görgetés élmény iOS eszközökön
 * - Momentum scrolling (lendülettel görget)
 */
.table-container {
  margin: 2rem 0;                      /* Térköz felül és alul */
  overflow-x: auto;                    /* Vízszintes görgetés engedélyezése */
  border-radius: var(--radius);        /* Lekerekített sarkok */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);  /* Árnyék */
  -webkit-overflow-scrolling: touch;   /* iOS smooth scrolling */
}

/**
 * MEDIA QUERY - Mobil táblázat beállítások
 *
 * Negatív margin trükk:
 * - margin: 2rem -1rem = felül/alul 2rem, oldalt -1rem (kilóg a konténerből)
 * - padding: 0 1rem = oldalt visszatesszük 1rem térközt
 * - Eredmény: A táblázat teljes szélességben kitölti a mobilképernyőt
 */
@media (max-width: 768px) {
  .table-container {
    margin: 2rem -1rem;    /* Kilóg a container-ből (teljes szélesség) */
    padding: 0 1rem;       /* Belső térköz visszaadása */
  }
}

/* ========================================
   ÖSSZEHASONLÍTÓ TÁBLÁZATOK
   ======================================== */
/**
 * .comparison-table - Általános összehasonlító táblázat
 * Használva: RAM, Storage oldalakon
 *
 * border-collapse: collapse
 * - Táblázat cellák szegélyei összeolvadnak
 * - collapse: egy vonal a cellák között
 * - separate (alapértelmezett): dupla vonalak
 *
 * table-layout: fixed
 * - Fix táblázat elrendezés
 * - Oszlopok egyenlő szélességűek (vagy CSS szerint)
 * - Gyorsabb renderelés (böngésző nem vár a teljes tartalomra)
 */
.comparison-table {
  width: 100%;                    /* Teljes szélesség */
  border-collapse: collapse;      /* Cellák összeolvadó szegélyekkel */
  background: var(--panel);       /* Fehér háttér */
  border-radius: var(--radius);   /* Lekerekített sarkok */
  overflow: hidden;               /* Lekerekített sarkok megjelenítése */
  table-layout: fixed;            /* Fix oszlopszélesség */
}

/**
 * .psu-table - Tápegység táblázat
 * PSU oldal specifikus táblázat (80 PLUS tanúsítványok)
 * Azonos stílusok mint .comparison-table
 */
.psu-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  table-layout: fixed;
}

/* ========================================
   TÁBLÁZAT CAPTION (Címke/Leírás)
   ======================================== */
/**
 * <caption> elem - Táblázat címe/leírása
 *
 * HTML struktúra:
 * <table>
 *   <caption>DDR4 és DDR5 memóriák összehasonlítása</caption>
 *   <thead>...</thead>
 *   <tbody>...</tbody>
 * </table>
 *
 * caption-side: top
 * - Caption pozíciója (top = felül, bottom = alul)
 * - Alapértelmezett: top
 *
 * AKADÁLYMENTESSÉG:
 * - A caption segíti a képernyőolvasókat
 * - Elmagyarázza a táblázat tartalmát látássérült felhasználóknak
 */
.comparison-table caption,
.psu-table caption {
  background: var(--accent);   /* Kék háttér */
  color: white;                /* Fehér szöveg */
  padding: 1rem;               /* Belső térköz */
  font-size: 1.2rem;           /* Nagyobb betűméret */
  font-weight: 600;            /* Semi-bold */
  text-align: center;          /* Középre igazítás */
  caption-side: top;           /* Caption a táblázat tetején */
}

/* ========================================
   TÁBLÁZAT FEJLÉC (<th> elemek)
   ======================================== */
/**
 * <th> elemek - Táblázat fejléc cellák (Table Header)
 *
 * HTML struktúra:
 * <thead>
 *   <tr>
 *     <th>Tulajdonság</th>
 *     <th>DDR4</th>
 *     <th>DDR5</th>
 *   </tr>
 * </thead>
 *
 * vertical-align: bottom
 * - Függőleges igazítás: cella aljához
 * - Több soros fejlécek esetén hasznos
 */
.comparison-table th,
.psu-table th {
  background: var(--accent);   /* Kék háttér */
  color: white;                /* Fehér szöveg */
  padding: 1rem;               /* Belső térköz */
  text-align: center;          /* Középre igazítás */
  font-weight: 600;            /* Semi-bold */
  border: none;                /* Nincs szegély */
  vertical-align: bottom;      /* Alsó élhez igazítás */
}

/* ========================================
   TÁBLÁZAT CELLÁK (<td> elemek)
   ======================================== */
/**
 * <td> elemek - Táblázat adatcellák (Table Data)
 *
 * HTML struktúra:
 * <tbody>
 *   <tr>
 *     <td>Sebesség</td>
 *     <td>2133-3200 MHz</td>
 *     <td>4800-6400 MHz</td>
 *   </tr>
 * </tbody>
 *
 * vertical-align: middle
 * - Tartalom függőlegesen középre igazítva
 */
.comparison-table td,
.psu-table td {
  padding: 1rem;                        /* Belső térköz */
  border-bottom: 1px solid var(--panel-2);  /* Alsó szegély (elválasztó vonal) */
  vertical-align: middle;               /* Függőleges középre igazítás */
  text-align: left;                     /* Balra igazított szöveg */
}

/**
 * :last-child pseudo-osztály
 * - Utolsó elem kiválasztása
 * - tr:last-child td = utolsó sor cellái
 * - border-bottom: none = nincs alsó szegély az utolsó soron
 */
.comparison-table tr:last-child td,
.psu-table tr:last-child td {
  border-bottom: none;  /* Utolsó sor: nincs alsó szegély */
}

/**
 * :nth-child(even) pseudo-osztály
 * - Páros elemek kiválasztása
 * - even = páros (2., 4., 6., ...)
 * - odd = páratlan (1., 3., 5., ...)
 *
 * Zebra csíkozás (alternáló sorok):
 * - Páros sorok: világosszürke háttér
 * - Páratlan sorok: fehér háttér (alapértelmezett)
 * - Jobb olvashatóság
 */
.comparison-table tr:nth-child(even),
.psu-table tr:nth-child(even) {
  background: var(--panel-2);  /* Páros sorok: világosszürke háttér */
}

/**
 * Listák a táblázatban (<ul>, <li>)
 * Gyakran használt előnyök/hátrányok felsorolásához
 */
.comparison-table ul,
.psu-table ul {
  margin: 0;              /* Nincs külső margó */
  padding-left: 1.2rem;   /* Baloldali térköz (bullet pontoknak) */
}

.comparison-table li,
.psu-table li {
  margin-bottom: 0.3rem;  /* Kis térköz a lista elemek között */
}

/* PSU table specific column widths */
.psu-table th:nth-child(1) {
  width: 20%;
  vertical-align: bottom;
  text-align: center;
}

.psu-table td:nth-child(1) {
  width: 20%;
  vertical-align: bottom;
  text-align: left;
}

.psu-table th:nth-child(2),
.psu-table td:nth-child(2) {
  width: 40%;
}

.psu-table th:nth-child(3),
.psu-table td:nth-child(3) {
  width: 30%;
}

.psu-table th:nth-child(5),
.psu-table td:nth-child(5) {
  width: 25%;
}

.cert-logo {
  height: 40px;
}

.mobile-sections {
  display: none;
}

/* Tips Section */
.tips-section {
  margin: 2rem 0;
}

.tip-card {
  background: var(--panel);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 1rem;
  border-left: 4px solid var(--accent);
}

.tip-card h4 {
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 1rem;
}

.card p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.card-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.card-link:hover {
  text-decoration: underline;
}

/* Download Section */
.download-section {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
  padding: 3rem 2rem;
  margin: 3rem 0;
  border-radius: var(--radius);
  color: white;
  box-shadow: var(--shadow);
}

.download-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.download-content h2 {
  color: white;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.download-content > p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  opacity: 0.95;
}

.download-features {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  border-radius: var(--radius);
  margin: 2rem 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.download-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  text-align: left;
}

.download-features li {
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}

.download-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: bold;
  color: var(--success);
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  padding: 1rem 2rem;
  margin-top: 1rem;
  background: white;
  color: var(--accent);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  background: var(--panel);
}

.download-icon {
  font-size: 1.3rem;
  display: inline-block;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.download-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0;
}

/* ========================================
   FOOTER (Sticky Footer megvalósítás)
   ======================================== */
/**
 * .site-footer - Oldal lábléc
 *
 * STICKY FOOTER MŰKÖDÉSE:
 * 1. <body> elem: display: flex + flex-direction: column
 * 2. <main> elem: flex: 1 (kitölti a szabad helyet)
 * 3. <footer> elem: automatikusan az aljára kerül
 *
 * Eredmény:
 * - Rövid tartalom esetén is a footer az oldal alján marad
 * - Hosszú tartalom esetén a footer a tartalom után következik
 * - Nincs szükség JavaScript-re!
 *
 * margin-top: 4rem
 * - Nagy térköz a tartalom és a footer között
 * - Vizuális elválasztás
 */
.site-footer {
  background: var(--panel-2);  /* Világosszürke háttér */
  padding: 2rem 0;             /* Függőleges térköz (felül/alul) */
  margin-top: 4rem;            /* Nagy térköz a tartalom után */
  text-align: left;            /* Szöveg balra igazítása */
  color: var(--text);          /* Sötét szövegszín (WCAG AA kontrasztarány) */
  font-size: 0.9rem;           /* Kisebb betűméret */
}

/**
 * Footer linkek
 */
.site-footer a {
  color: var(--accent);        /* Kék szín */
  text-decoration: none;       /* Nincs aláhúzás */
  font-weight: 600;            /* Semi-bold */
}

.site-footer a:hover {
  text-decoration: underline;  /* Aláhúzás hover-re */
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero {
    padding: 2rem 1rem;
    margin: 1rem 0;
  }
  
  .hero-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .hero-text h1 {
    font-size: 2rem;
  }
  
  .hero-buttons {
    justify-content: center;
  }
  
  .two-cols {
    grid-template-columns: 1fr;
  }
  
  .three-cols {
    grid-template-columns: 1fr;
  }
  
  .gpu-showcase {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* CEO Quote responsive */
  .ceo-quote {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .ceo-portrait {
    width: 100px;
    height: 100px;
  }

  .quote-content p {
    font-size: 1.1rem;
  }

  .quote-content p::before {
    font-size: 3rem;
    left: -1rem;
    top: -0.5rem;
  }
  
  .card {
    padding: 1.5rem;
  }
  
  /* General comparison table - stays visible on mobile with compact styling */
  .comparison-table th,
  .comparison-table td {
    padding: 0.5rem 0.4rem;
    font-size: 0.8rem;
  }

  .table-wrapper {
    overflow-x: auto;
  }

  .comparison-table {
    table-layout: auto;
    min-width: 100%;
  }

  .comparison-table th:nth-child(1) {
    vertical-align: bottom;
    text-align: center;
  }

  .comparison-table td {
    word-break: break-word;
  }

  .comparison-table td:nth-child(1) {
    min-width: 100px;
    vertical-align: bottom;
    text-align: left;
  }

  .comparison-table td:nth-child(2) {
    min-width: 80px;
  }

  .comparison-table td:nth-child(3) {
    min-width: 80px;
  }

  .comparison-table td:nth-child(4) {
    min-width: 60px;
  }

  .comparison-table td:nth-child(5) {
    min-width: 100px;
  }

  .comparison-table ul {
    font-size: 0.75rem;
    padding-left: 1rem;
  }

  .comparison-table li {
    margin-bottom: 0.2rem;
  }

  /* PSU table - hide on mobile and show fallback cards */
  .psu-table {
    display: none;
  }

  .mobile-sections {
    display: block;
  }

   .cert-section {
     margin-bottom: 1rem;
     border: 1px solid var(--panel-2);
     border-radius: var(--radius);
     padding: 1rem;
     background: var(--panel);
     text-align: center;
   }

   .cert-logo {
     margin-bottom: 1rem;
   }

   .cert-details {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.5rem;
     align-items: center;
   }

   .detail-row {
     display: contents;
   }

   .label {
     font-weight: bold;
     color: var(--accent);
     text-align: left;
   }

   .value {
     text-align: right;
   }

   /* PSU table mobile-specific styling */
   .psu-table th:nth-child(4),
   .psu-table td:nth-child(4) {
     width: 10%;
   }

   .psu-table th:nth-child(5),
   .psu-table td:nth-child(5) {
     width: 35%;
   }
}

/* Additional tip card styling */
.tip-card {
    padding: 1rem;
  }

  /* Download section mobile */
  .download-section {
    padding: 2rem 1.5rem;
  }

  .download-features ul {
    columns: 1;
  }
}

/* M.2 vs mSATA összehasonlítás */
.m2-comparison {
  margin-bottom: 32px;
  background: var(--panel);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-left: 4px solid var(--accent);
}

.comparison-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.comparison-image {
  flex: 0 0 25%;
  max-width: 25%;
}

.comparison-text {
  flex: 1;
  min-width: 0;
}

.comparison-text ul {
  margin: 12px 0 0 0;
  padding-left: 20px;
}

 /* JavaScript stílusok - mobil menü működéséhez */
@media (max-width: 768px) {
  .main-nav.active {
    display: block;
  }
  
  .comparison-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .comparison-image {
    flex: 1;
    max-width: 100%;
  }
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Dropdown toggle button - hidden by default */
.dropdown-toggle-btn {
  display: none;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 75%;
    max-width: 350px;
    height: 100vh;
    background: var(--panel);
    z-index: 999;
    visibility: hidden;
    transform: translateX(100%);
    transition: all 0.3s ease;
    box-shadow: -5px 0 25px rgba(0,0,0,0.2);
    overflow-y: auto;
  }
  .main-nav.active {
    visibility: visible;
    transform: translateX(0);
  }
  .main-nav.active ul {
    flex-direction: column;
    align-items: stretch;
    padding: 70px 16px 30px 16px;
    gap: 0;
  }
  .main-nav.active > ul > li {
    border-bottom: 1px solid var(--panel-2);
  }
  .main-nav.active a {
    padding: 10px 12px;
    width: 100%;
    border-radius: 0;
  }
  .main-nav.active .has-dropdown > a {
    padding-right: 50px;
    position: relative;
  }
  .main-nav.active .has-dropdown > a::after {
    display: none;
  }
  .main-nav.active .dropdown-toggle-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text);
    cursor: pointer;
    padding: 12px 16px;
    line-height: 1;
    font-weight: 300;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .main-nav.active .dropdown-toggle-btn:hover {
    color: var(--accent);
  }
  .main-nav.active .has-dropdown .dropdown {
    position: static;
    box-shadow: none;
    background: var(--panel-2);
    border-radius: 0;
    min-width: auto;
    margin: 0;
    padding: 0;
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .main-nav.active .has-dropdown.active .dropdown {
    display: block;
    max-height: 500px;
  }
  .main-nav.active .has-dropdown .dropdown li {
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .main-nav.active .has-dropdown .dropdown li:last-child {
    border-bottom: none;
  }
  .main-nav.active .has-dropdown .dropdown a {
    padding: 8px 12px 8px 28px;
    font-size: 0.95rem;
  }
  .mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2.5rem;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    display: block;
    line-height: 1;
    font-weight: 300;
    padding: 0;
    transition: color 0.3s ease;
  }
  .mobile-menu-close:hover {
    color: var(--accent);
  }
 }

/* Manufacturer page styles */
.intro-text {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  color: var(--muted);
}

/* Page table of contents (belső hivatkozások) */
.page-toc {
  margin: 1.5rem 0;
}

.page-toc h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.page-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-toc li {
  margin: 0;
}

.page-toc a {
  color: var(--accent);
  text-decoration: none;
}

.page-toc a:hover {
  text-decoration: underline;
}

.manufacturer-notice {
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  padding: 24px;
  margin: 2rem 0;
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow);
}

.manufacturer-notice h3 {
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.2rem;
}

.manufacturer-notice ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

.manufacturer-notice li {
  margin-bottom: 8px;
}

/* Manufacturer carousel styles */
.manufacturer-category {
  margin-bottom: 3rem;
}

.manufacturer-category h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.carousel-arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  z-index: 10;
}

.carousel-arrow:hover {
  background: var(--accent);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

.carousel-arrow:active {
  transform: scale(0.95);
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: var(--panel-2);
  border-color: var(--muted);
  color: var(--muted);
}

.carousel-arrow:disabled:hover {
  transform: none;
  background: var(--panel-2);
  color: var(--muted);
}

.manufacturer-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--panel-2);
  scroll-behavior: smooth;
  flex: 1;
}

.manufacturer-carousel::-webkit-scrollbar {
  height: 8px;
}

.manufacturer-carousel::-webkit-scrollbar-track {
  background: var(--panel-2);
  border-radius: 4px;
}

.manufacturer-carousel::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.manufacturer-carousel::-webkit-scrollbar-thumb:hover {
  background: var(--accent-2);
}

.manufacturer-item {
  flex: 0 0 280px;
  background: var(--panel);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  border-left: 4px solid var(--accent);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.manufacturer-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.manufacturer-item h3 {
  color: var(--accent);
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.manufacturer-item .category-tag {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.manufacturer-item p {
  margin: 0;
  line-height: 1.5;
  font-size: 0.95rem;
  color: var(--text);
}

.manufacturer-item a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  margin-top: 8px;
  display: inline-block;
  transition: color 0.2s;
}

.manufacturer-item a:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

main h2 {
  color: var(--accent);
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--panel-2);
  font-size: 1.6rem;
}

main h2:first-of-type {
  margin-top: 2rem;
}

/**
 * ========================================
 * STYLE.CSS FÁJL VÉGE - ÖSSZEFOGLALÓ
 * ========================================
 *
 * Ez a CSS fájl oktató célból lett részletes kommentekkel ellátva.
 * A fájl többi része (amit nem kommenteltem külön) ugyanazokat a CSS
 * koncepciókat használja, amelyeket fent részletesen elmagyaráztam:
 *
 * FONTOSABB CSS KONCEPCIÓK A FÁJLBAN:
 *
 * 1. CSS VÁLTOZÓK (Custom Properties)
 *    - :root szelektor, --változó-név
 *    - var(--változó-név) használata
 *    - Színséma központosítása
 *
 * 2. BOX MODEL
 *    - box-sizing: border-box (szélesség tartalmazza a padding-et és border-t)
 *    - margin, padding, border, content
 *
 * 3. FLEXBOX LAYOUT
 *    - display: flex
 *    - flex-direction: row/column
 *    - justify-content, align-items
 *    - flex-wrap, gap
 *    - flex: grow shrink basis
 *
 * 4. CSS GRID LAYOUT
 *    - display: grid
 *    - grid-template-columns, grid-template-rows
 *    - gap, grid-gap
 *    - fr egység (fraction)
 *    - auto-fit, minmax()
 *
 * 5. POSITIONING
 *    - position: static, relative, absolute, fixed, sticky
 *    - top, right, bottom, left
 *    - z-index (rétegzés)
 *
 * 6. PSEUDO-OSZTÁLYOK
 *    - :hover, :focus, :active
 *    - :first-child, :last-child
 *    - :nth-child(even/odd/n)
 *
 * 7. PSEUDO-ELEMEK
 *    - ::before, ::after
 *    - content tulajdonság
 *    - Generált tartalom
 *
 * 8. MEDIA QUERIES (Responsive Design)
 *    - @media (max-width: 768px) - mobil
 *    - @media (min-width: 769px) - tablet/desktop
 *    - Mobil-first vs Desktop-first megközelítés
 *
 * 9. TRANSITIONS ÉS ANIMATIONS
 *    - transition: property duration easing-function
 *    - transform: translate, scale, rotate
 *    - @keyframes animációk
 *
 * 10. MODERN CSS FÜGGVÉNYEK
 *     - calc() - matematikai számítások
 *     - min(), max(), clamp() - értékek korlátozása
 *     - var() - változók használata
 *     - rgba(), hsla() - átlátszó színek
 *
 * 11. SPECIFICITÁS (CSS Selector Priority)
 *     - Inline style: 1000 pont
 *     - ID selector (#id): 100 pont
 *     - Class/pseudo-class (.class, :hover): 10 pont
 *     - Element selector (div, p): 1 pont
 *
 * 12. TÁBLÁZATOK
 *     - <table>, <caption>, <thead>, <tbody>, <tr>, <th>, <td>
 *     - border-collapse: collapse
 *     - table-layout: fixed
 *     - caption-side: top/bottom
 *
 * 13. AKADÁLYMENTESSÉG (Accessibility)
 *     - aria-label attribútumok
 *     - :focus látható stílusok
 *     - caption elemek a táblázatokhoz
 *     - Kontrasztos színek
 *
 * EGYÉB RÉSZEK A FÁJLBAN:
 * - Card komponensek (.card) - Flexbox/Grid layout
 * - Grid rendszerek (.two-cols, .three-cols) - CSS Grid
 * - Manufacturer carousel - Flexbox + overflow scroll
 * - Form elemek - Input, button, select stílusok
 * - Hover effektek - Transitions, transform
 * - Mobil navigáció - Position absolute, z-index
 *
 * MOBIL-FIRST DESIGN:
 * A CSS alapértelmezetten mobil eszközökre van optimalizálva,
 * majd media query-kkel (@media) nagyobb képernyőkre igazítva.
 *
 * BÖNGÉSZŐ KOMPATIBILITÁS:
 * - Modern CSS tulajdonságok (Grid, Flexbox, CSS változók)
 * - Vendor prefix-ek (-webkit-) Safari/Chrome számára
 * - Fallback stílusok régebbi böngészőkhöz
 *
 * TELJESÍTMÉNY OPTIMALIZÁCIÓ:
 * - CSS változók: gyors téma váltás
 * - will-change: transform - animációs optimalizáció
 * - contain: layout - render optimalizáció
 *
 * ========================================
 * TOVÁBBI TANULÁSI FORRÁSOK:
 * ========================================
 * - MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
 * - CSS Tricks: https://css-tricks.com/
 * - Can I Use: https://caniuse.com/ (böngésző támogatás ellenőrzése)
 * - Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 * - Grid Guide: https://css-tricks.com/snippets/css/complete-guide-grid/
 */

/* ========================================
   BLOG OLDAL STÍLUSOK
   ======================================== */
/**
 * Blog specifikus stílusok
 * - Blog layout (80% tartalom, 20% sidebar)
 * - Blog kártya stílusok
 * - Breadcrumbs navigáció
 * - Blog post tartalom
 * - Kód blokkok
 * - Demo és info boxok
 * - Összehasonlító táblázatok
 */

/* Blog layout - 75/25 elosztás */
.blog-layout {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.blog-main {
  flex: 0 0 75%;
  max-width: 75%;
}

.blog-sidebar {
  flex: 0 0 25%;
  max-width: 25%;
  position: sticky;
  top: 2rem;
  align-self: flex-start;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* Blog cikk kártya (főoldalon) */
.blog-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
  transition: transform 0.3s, box-shadow 0.3s;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,.15);
}

.blog-card h2 {
  color: var(--accent);
  margin-bottom: 0.75rem;
  font-size: 1.8rem;
}

.blog-card h2 a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s;
}

.blog-card h2 a:hover {
  color: var(--accent-2);
}

.blog-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.blog-card p {
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.read-more {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.read-more:hover {
  color: var(--accent-2);
}

.read-more::after {
  content: " →";
}

/* Breadcrumbs navigáció */
.breadcrumbs {
  background: var(--panel-2);
  padding: 1rem 0;
  margin-bottom: 2rem;
  border-radius: var(--radius);
}

.breadcrumbs nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.breadcrumbs a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumbs a:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

.breadcrumbs .separator {
  color: var(--muted);
}

.breadcrumbs .current {
  color: var(--text);
  font-weight: 500;
}

/* Blog post tartalom */
.blog-post {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow);
}

.blog-post h1 {
  color: var(--accent);
  margin-bottom: 1rem;
  font-size: 2.2rem;
}

.blog-post .blog-meta {
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--panel-2);
  margin-bottom: 2rem;
}

.blog-post h2 {
  color: var(--accent);
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.blog-post h3 {
  color: var(--accent-2);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.3rem;
}

.blog-post h4 {
  color: var(--text);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.blog-post p {
  line-height: 1.8;
  margin-bottom: 1rem;
}

.blog-post ul,
.blog-post ol {
  margin-left: 2rem;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.blog-post li {
  margin-bottom: 0.5rem;
}

/* Kód blokkok */
.code-block {
  background: #2d2d2d;
  color: #f8f8f2;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  position: relative;
}

.code-block code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre;
  background: transparent;
  padding: 0;
  color: #f8f8f2;
}

.code-block-header {
  background: #1e1e1e;
  color: var(--muted);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code-wrapper {
  margin: 1.5rem 0;
}

.code-wrapper .code-block {
  margin-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.copy-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.4rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.3s;
}

.copy-btn:hover {
  background: var(--accent-2);
}

.copy-btn.copied {
  background: var(--success);
}

/* Kód blokkok code elemei - specifikusabb szelektorral */
.blog-post .code-wrapper .code-block code,
.code-wrapper .code-block code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: #f8f8f2;
  font-size: 0.9rem;
}

/* Inline code - csak bekezdésekben, listákban és címsorokban */
.blog-post p code,
.blog-post li code,
.blog-post h1 code,
.blog-post h2 code,
.blog-post h3 code,
.blog-post h4 code,
.blog-post .info-box code,
.blog-post .warning-box code {
  background: #f4f4f4;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  color: #c7254e;
}

/* Info box */
.info-box {
  background: #e7f3ff;
  border-left: 4px solid var(--accent);
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.info-box h4 {
  color: var(--accent);
  margin-bottom: 0.5rem;
  margin-top: 0;
}

/* Warning box */
.warning-box {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.warning-box h4 {
  color: #856404;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

/* Demo box - élő példák */
.demo-box {
  background: var(--panel);
  border: 2px solid var(--panel-2);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.demo-box h4 {
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.demo-content {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

/* Összehasonlító táblázat */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.comparison-table th,
.comparison-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--panel-2);
}

.comparison-table th {
  background: var(--accent);
  color: white;
  font-weight: 600;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table tr:hover {
  background: var(--panel-2);
}

/* Sidebar widget */
.sidebar-widget {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}

.sidebar-widget h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--accent);
}

.sidebar-widget ul {
  list-style: none;
  padding: 0;
}

.sidebar-widget li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--panel-2);
}

.sidebar-widget li:last-child {
  border-bottom: none;
}

.sidebar-widget a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s;
}

.sidebar-widget a:hover {
  color: var(--accent);
}

/* Reszponzív design - mobilon egymás alatt */
@media (max-width: 768px) {
  .blog-layout {
    flex-direction: column;
  }

  .blog-main,
  .blog-sidebar {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .blog-post {
    padding: 1.5rem;
  }

  .blog-post h1 {
    font-size: 1.8rem;
  }

  .comparison-table {
    font-size: 0.85rem;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.75rem;
  }
}