/* ============================================================ AI Brandépítés — landing mobilréteg aibrandepites.hu MIÉRT: a 16 landing közül tízen kilógott tartalom a 375 px-es nézetablakon. A `body{overflow-x:hidden}` ezt csak ELREJTETTE: a görgetés eltűnt, de a cím, a szöveg, a kép és a fejlécgomb jobb széle levágódott. Ez a lap azt javítja, hogy minden látható elem TÉNYLEGESEN elférjen. HOL: minden landing oldalon, UTOLSÓKÉNT betöltve, hogy a saját lapokat is felül tudja írni. Hatóköre a body.landing-brand-2026. MIT NEM CSINÁL: nem rejt el tartalmat, nem távolít el CTA-t, nem rendezi át a blokkokat. Csak méretet és tördelést szabályoz. ============================================================ */ @media (max-width: 767px) { /* ---------- 1. Alapvédelem ---------- A rács- és flexelemek alapértelmezett min-width:auto értéke megakadályozza, hogy a hosszú tartalom zsugorodjon. Ez a leggyakoribb oka a kilógásnak. */ body.landing-brand-2026 *, body.landing-brand-2026 *::before, body.landing-brand-2026 *::after { min-width: 0; } body.landing-brand-2026 img, body.landing-brand-2026 svg:not(.icon), body.landing-brand-2026 video, body.landing-brand-2026 canvas, body.landing-brand-2026 iframe, body.landing-brand-2026 picture { max-width: 100%; height: auto; } /* Hosszú, tördelhetetlen szöveg (URL, kódrészlet) ne feszítse szét */ body.landing-brand-2026 p, body.landing-brand-2026 li, body.landing-brand-2026 td, body.landing-brand-2026 th, body.landing-brand-2026 h1, body.landing-brand-2026 h2, body.landing-brand-2026 h3 { overflow-wrap: break-word; } /* ---------- 2. Fejléc ---------- 375 px-en a logó + témakapcsoló + CTA + hamburger együtt 404 px-et kért 343 px helyett, ezért a hamburger a képernyőn kívülre esett. Egyik elemet sem rejtjük el: mindegyik kisebb lesz, és a köz szűkül. */ body.landing-brand-2026 .header-inner { gap: 8px; } body.landing-brand-2026 .header-actions { gap: 8px; flex-shrink: 1; } body.landing-brand-2026 .logo { flex-shrink: 1; min-width: 0; } body.landing-brand-2026 .logo-text { font-size: .95rem; line-height: 1.15; } body.landing-brand-2026 .logo-icon, body.landing-brand-2026 .logo-icon img { width: 28px; height: 28px; } body.landing-brand-2026 .theme-toggle { width: 32px; height: 32px; padding: 0; flex-shrink: 0; } body.landing-brand-2026 .header-actions .btn-primary, body.landing-brand-2026 .header-cta { padding: .45rem .7rem; font-size: .72rem; letter-spacing: 0; white-space: nowrap; } body.landing-brand-2026 .mobile-menu-toggle { flex-shrink: 0; margin-left: 0; } /* A keresőmező mobilon amúgy is rejtett, de a helyfoglalása maradhatott */ body.landing-brand-2026 .search-box { display: none; } /* ---------- 3. Táblázatok ---------- A háromoszlopos összehasonlító tábla 170 px-rel lógott ki. Előbb megpróbáljuk beszorítani; ami így sem fér el, az a SAJÁT dobozán belül görgethető, nem az oldalon. */ body.landing-brand-2026 .comparison-table-wrap, body.landing-brand-2026 .table-wrap, body.landing-brand-2026 .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Az `!important` itt tudatos és szűk körű. Az oldalak saját lapjai nagyobb specificitású szabályokat hoznak, például `body.landing-brand-2026 .comparison-table-wrap table{min-width:520px}` (0,2,2), amit egy általános `… table` (0,1,1) nem tud felülírni. Mivel ez a lap korrekciós rétegként utolsóként tölt be, és csak a beszorító tulajdonságokra vonatkozik, ez a helyes eszköz — az alternatíva oldalankénti szelektorok vadászata lenne. */ body.landing-brand-2026 table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: fixed; font-size: .74rem; } body.landing-brand-2026 table th, body.landing-brand-2026 table td { padding: .5rem .35rem; word-break: break-word; } body.landing-brand-2026 table th:first-child, body.landing-brand-2026 table td:first-child { width: 44%; } /* ---------- 4. Dekoratív, abszolút pozicionált elemek ---------- Ezek nem hordoznak tartalmat, de kifeszítik a viewportot. */ body.landing-brand-2026 .orb, body.landing-brand-2026 .glow, body.landing-brand-2026 .blob, body.landing-brand-2026 .hero::before, body.landing-brand-2026 .hero::after { max-width: 100%; right: auto; } body.landing-brand-2026 .orb { width: 260px; height: 260px; } /* ---------- 5. Hero-illusztrációk és lebegő kártyák ---------- */ /* A Mac-ablak makett kerete content-box-szal 2-3 px-rel tullogott. */ /* A Mac-ablak makett 2-3 px-rel tullogott: a szulo .hero-visual flex-konteneren nem ervenyesult a zsugorodas. A nezetablakhoz kotott felso korlat garantaltan befer, tartalmat nem rejt el. */ body.landing-brand-2026 .hero-visual, body.landing-brand-2026 .mac-window, body.landing-brand-2026 .mac-bar, body.landing-brand-2026 .mac-content, body.landing-brand-2026 .mac-dots { box-sizing: border-box !important; max-width: calc(100vw - 40px) !important; min-width: 0 !important; /* A makett ~1 fokkal el van forgatva. A forgatas a befoglalo dobozt szelesebbe teszi a layout-doboznal, ezert 2 px-rel a bal szel ele lógott. Mobilon a dontes nem ad hozza semmit. */ transform: none !important; } body.landing-brand-2026 .hero-visual, body.landing-brand-2026 .hero-right, body.landing-brand-2026 .mac-window, body.landing-brand-2026 .code-editor, body.landing-brand-2026 .product-mockup { max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; } body.landing-brand-2026 .float-card { position: static !important; width: auto !important; max-width: 100% !important; box-sizing: border-box; margin: 12px 0 0 !important; inset: auto !important; transform: none !important; } /* Végső háló: bármely abszolút pozicionált elem, amit a fenti nevesített szabályok nem fognak meg, ne feszíthesse ki a lapot. */ body.landing-brand-2026 [style*="position:absolute"], body.landing-brand-2026 [style*="position: absolute"] { max-width: 100%; } /* ---------- 6. Kétoszlopos osszehasonlító sávok ---------- A vibe-code oldalon a "prompt nélkül / a csomaggal" páros egymás mellett maradt, és 49 px-rel kilógott. */ body.landing-brand-2026 .compare-cols, body.landing-brand-2026 .vs-grid, body.landing-brand-2026 .two-col { grid-template-columns: 1fr; display: grid; } /* ---------- 7. Fix alsó CTA-sáv ---------- */ body.landing-brand-2026 .mobile-cta-bar { max-width: 100%; left: 0; right: 0; } }