/* Online marketing (3.7) – Figma 004 - OnlineBiznisz - Online marketing (34:0). A weboldal.css közös .wo-* osztályaira épül. */

/* ---------- Hero (34:220 + 82:7) ---------- */
.mk .mk-hero { padding-top: max(40px, calc(var(--header-h) - 35px)); padding-bottom: 87px; }
.mk .mk-hero .wo-hero-txt { margin-top: 118px; }
.mk .mk-hero .wo-hero-cim { max-width: 670px; }
.mk .wo .mk-hero-p, .mk .mk-hero-p { margin-top: 30px !important; color: var(--contrast); }
.mk .mk-hero-enis { margin-top: 16px !important; color: var(--contrast) !important; font-size: 26px; line-height: 26px; }
.mk .mk-hero-p2 { margin-top: 16px !important; color: var(--contrast); }
.mk .mk-hero-zold { margin-top: 16px !important; color: var(--accent) !important; font-size: clamp(24px, 1.67vw, 32px); line-height: 1.34; }
.mk .mk-kep-hero { width: 132.6%; aspect-ratio: 1; margin-left: -20.24%; }
.mk .mk-kep-hero img { left: -0.63%; top: -0.03%; width: 115.76%; }
/* A kis fekete buborék háttere #111, amit a lighten keverés eltüntetne: külön, keverés nélkül, SVG-ként (saját árnyékkal) kerül rá. */
.mk .mk-kep-hero img.mk-buborek { left: 1.47%; top: 6.91%; width: 42.77%; mix-blend-mode: normal; }

/* ---------- Mennyit ér egy feliratkozód (103:53 + 34:34) ---------- */
.mk .mk-felir { padding-bottom: 100px; }
.mk .mk-kep-felir { width: 122.9%; aspect-ratio: 577.7 / 713.7; margin-left: -16.6%; }
.mk .mk-kep-felir img { left: 0; top: 0; width: 104.14%; }
.mk .mk-felir .wo-txt { margin-top: 75px; }
.mk .mk-felir .wo-serif-cim { margin-bottom: 14px; }
.mk .mk-felir .mk-kerdes + .wo-szurke { margin-top: 0; }
.mk .mk-sor-22 { margin-top: 6px; }
.mk .mk-sarga { color: var(--yellow); font-weight: 700; }
.mk .mk-lista-sarga { gap: 16px; }
.mk .mk-lista-sarga li::before { background-image: url(/wp-content/uploads/ob/marketing/pont-sarga.svg); }

/* ---------- Jól hangzik, de hogyan lesz ebből valóság? (34:55) ---------- */
.mk .mk-munka { padding-bottom: 89px; }
.mk .mk-munka::before { display: none; }
.mk .mk-munka-cim { max-width: 938px; margin: 0 auto !important; text-align: center; color: var(--contrast); font-weight: 700; font-size: clamp(30px, 2.24vw, 43px); line-height: 1.163; text-wrap: wrap; }
.mk .mk-lepesek-ket { margin-top: 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.mk .mk-lepes-szeles { margin-top: 41px; }
.mk .mk-lepes-szeles .wo-lepes-tart { max-width: none; }
.mk .mk-lepes-cim-szurke { color: var(--wo-szurke); }
.mk .mk-lista-ket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 10px; padding-left: 10px; }
.mk .mk-lista-ket .wo-lista { padding-left: 0; }
.mk .wo-lista li::before { background-image: url(/wp-content/uploads/ob/marketing/pont-zold.svg); }
.mk .mk-lista-sarga li::before { background-image: url(/wp-content/uploads/ob/marketing/pont-sarga.svg); }
.mk .mk-zold-b { color: var(--accent); }
.mk .mk-zold-b strong { color: var(--accent); }

/* ---------- Szoftverek, Rudi fotóval (37:38) ---------- */
.mk .mk-szoft { padding-bottom: 103px; }
.mk .mk-szoft-racs { position: relative; min-height: 837px; }
.mk .mk-szoft-txt { position: relative; z-index: 2; max-width: 791px; padding-top: 117px; display: flex; flex-direction: column; }
.mk .mk-szoft-cim { color: var(--contrast); font-weight: 700; font-size: clamp(36px, 3.02vw, 58px); line-height: 1.103; text-wrap: wrap; }
.mk .mk-szoft-al { margin-top: 20px !important; color: var(--contrast); font-weight: 500; font-size: clamp(20px, 1.25vw, 24px); line-height: 1.375; max-width: 750px; }
.mk .mk-tagek { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 20px; max-width: 704px; list-style: none; padding: 0; }
.mk .mk-tagek li { margin: 0; padding: 16px 28px; background: #202020; border-radius: 3px; color: var(--yellow); font-weight: 500; font-size: 19px; line-height: 33px; white-space: nowrap; filter: drop-shadow(0 4px 20px rgba(255, 213, 118, .06)); }
.mk .mk-szoft-meg { margin-top: 30px !important; max-width: 570px; color: var(--contrast); font-weight: 700; }
.mk .mk-foto { position: absolute; z-index: 1; left: 44.96%; top: 0; width: 68.03%; aspect-ratio: 795.9 / 837; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 73.44%, transparent 95.31%); mask-image: linear-gradient(to bottom, #000 0, #000 73.44%, transparent 95.31%); pointer-events: none; }
.mk .mk-foto img { position: absolute; left: 1.97%; top: 3.84%; width: 74.47%; height: auto; max-width: none; opacity: .9; }

/* ---------- Specialisták (127:51), a foglaló után ---------- */
.mk .mk-spec { padding-top: 15px; padding-bottom: 140px; }
.mk .mk-racs-spec { grid-template-columns: minmax(0, 600fr) minmax(0, 570fr); }
.mk .mk-spec .wo-txt { margin-top: 105px; }
.mk .mk-spec-cim { color: var(--contrast); font-weight: 700; font-size: clamp(36px, 3.02vw, 58px); line-height: 1.103; margin-right: -70px !important; margin-bottom: 6px !important; text-wrap: wrap; }
.mk .mk-spec .wo-h3, .mk .mk-spec .wo-feher { max-width: 570px; }
.mk .mk-kep-spec { width: 94.3%; aspect-ratio: 537.5 / 538.3; }
.mk .mk-kep-spec img { left: -12.33%; top: -11.57%; width: 124.67%; }

@media (max-width: 1024px) {
	.mk .mk-hero .wo-hero-txt, .mk .mk-felir .wo-txt, .mk .mk-spec .wo-txt { margin-top: 0; }
	.mk .mk-kep-hero, .mk .mk-kep-felir, .mk .mk-kep-spec { width: min(100%, 520px); margin: 0 auto; }
	.mk .mk-racs-spec { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.mk .mk-spec-cim { margin-right: 0 !important; }
	.mk .mk-lepesek-ket, .mk .mk-lista-ket { grid-template-columns: minmax(0, 1fr); }
	.mk .mk-lepesek-ket { gap: 24px; }
	.mk .mk-lepes-szeles { margin-top: 24px; }
	.mk .mk-szoft-racs { min-height: 0; }
	.mk .mk-szoft-txt { padding-top: 0; }
	.mk .mk-foto { position: relative; left: auto; width: min(100%, 560px); margin: 32px auto 0; }
	.mk .mk-felir, .mk .mk-spec { padding-bottom: 72px; }
}
@media (max-width: 640px) {
	.mk .mk-tagek { gap: 12px; }
	.mk .mk-tagek li { padding: 10px 18px; font-size: 17px; line-height: 27px; }
}