/* ============================================================
   ClickSambo — Marketing Agencies page
   (/marketing-agencies, /tr/pazarlama-ajanslari, /pt-br/agencias-de-marketing)
   Scoped to <main class="maPage">: header, footer and other pages are untouched.
   Every rule is prefixed with .maPage and every class carries the ma prefix, so the site-wide
   classes in layout.css (.btn, .hero, section .inner, ...) cannot collide and the relative
   specificity of element vs. class rules matches the approved designs. EN and PT-BR have their
   own designs with the same markup and styles; TR uses the EN layout with Turkish copy.
   ============================================================ */
.maPage{color-scheme: light; --font-brand:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif; --navy:#1C2841; --ink:#0F1420; --orange:#F94C10; --orange-d:#D93D08; --orange-soft:rgba(249,76,16,.1); --green:#22B573; --green-d:#17835A; --green-soft:#E9F7F0; --cream:#FFF1E9; --cream-2:#FDF6F1; --cream-d:#EFDCD1; --white:#fff; --line:#ECECF3; --line-2:#F0E2D8; --muted:#51607A; --muted-2:#7C8AA3; --wrap:1120px; --r:20px; --r-sm:12px; --shadow:0 12px 40px rgba(28,40,65,.06); --shadow-lg:0 18px 50px rgba(28,40,65,.09)}
.maPage *{box-sizing:border-box}
.maPage{margin:0; background:var(--cream); color:var(--navy); font-family:var(--font-brand); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased}
/* layout.css sets `*{font-family:Mulish}`, `b,strong{font-weight:700}`, `ol,ul{list-style:none}`,
   zeroes the margins of dl/ul and styles every blockquote as a boxed callout; restore the browser
   defaults the design relies on. */
.maPage blockquote{display:block; position:static; margin:1em 40px; padding:0; border:0; border-radius:0; background:none; color:inherit; font-weight:inherit}
.maPage *{font-family:inherit}
.maPage b,.maPage strong{font-weight:bolder}
.maPage dl,.maPage ul{margin:1em 0}
.maPage ul{list-style:disc; padding-left:40px}
.maPage .maWrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.maPage h1,.maPage h2,.maPage h3{margin:0; font-weight:800; letter-spacing:-.015em; color:var(--navy)}
.maPage h1{font-size:clamp(32px,4.2vw,48px); line-height:1.14}
.maPage h2{font-size:clamp(26px,3vw,36px); line-height:1.2}
.maPage h3{font-size:clamp(19px,1.6vw,21px); line-height:1.25}
.maPage p{margin:0 0 1rem; font-size:16px; line-height:1.7}
.maPage a{color:inherit}
.maPage .maBtn{display:inline-flex; align-items:center; gap:9px; background:var(--orange); color:#fff; text-decoration:none; font-weight:700; padding:14px 26px; border-radius:10px; font-size:1rem; border:0; cursor:pointer; font-family:inherit; transition:background .15s ease, transform .15s ease;}
.maPage .maBtn:hover{background:var(--orange-d); transform:translateY(-1px)}
.maPage .maBtn.maGhost{background:transparent; border:1.6px solid var(--navy); color:var(--navy)}
.maPage .maBtn.maGhost:hover{background:var(--navy); color:#fff}
.maPage .maBtn svg{width:18px; height:18px; flex:none}
.maPage .maHero{position:relative; overflow:hidden; padding:72px 0 82px; background: radial-gradient(760px 420px at 85% 0%, rgba(249,76,16,.09), transparent 62%), radial-gradient(620px 380px at 0% 100%, rgba(34,181,115,.08), transparent 60%), var(--cream);}
.maPage .maHeroGrid{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center}
@media(max-width:940px){
  .maPage .maHeroGrid{grid-template-columns:1fr; gap:40px}
}
.maPage .maEyebrow{margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);}
.maPage .maLede{color:var(--muted); font-size:16px; line-height:1.7; margin-top:20px; max-width:54ch}
.maPage .maActions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap}
.maPage .maMicrocopy{margin:16px 0 0; font-size:.82rem; color:var(--muted-2)}
.maPage section{padding:82px 0}
.maPage section[id]{scroll-margin-top:86px}
.maPage section.maAlt{background:var(--white)}
.maPage .maSechead{max-width:70ch; margin-bottom:40px}
.maPage .maSechead .maEyebrow{margin-bottom:12px}
.maPage .maSechead p{color:var(--muted); margin-top:12px; font-size:16px}
.maPage .maCrumbs{background:var(--cream); border-top:1px solid var(--line-2)}
.maPage .maCrumbs .maWrap{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 24px; flex-wrap:wrap}
.maPage .maCrumbs ol{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; font-size:.84rem; font-weight:700; color:var(--muted-2)}
.maPage .maCrumbs li+li::before{content:"\203A"; margin-right:8px; color:#C9B4A5}
.maPage .maCrumbs a{text-decoration:none}
.maPage .maCrumbs a:hover{color:var(--orange)}
.maPage .maCrumbs [aria-current]{color:var(--navy)}
.maPage .maBand{background:var(--navy)}
.maPage .maBand .maWrap{padding:52px 24px}
.maPage .maFigs{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0}
@media(max-width:860px){
  .maPage .maFigs{grid-template-columns:repeat(2,1fr); row-gap:34px}
}
.maPage .maFig{padding:0 26px; border-left:1px solid rgba(255,255,255,.17)}
.maPage .maFig:first-child{padding-left:0; border-left:0}
@media(max-width:860px){
  .maPage .maFig:nth-child(3){padding-left:0; border-left:0}
}
.maPage .maFig dt{font-size:.86rem; color:#B9C2D2; font-weight:600; margin-bottom:10px; max-width:24ch}
.maPage .maFig dd{margin:0; font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1; color:#fff}
.maPage .maFig dd em{font-style:normal; color:#FF7A47}
.maPage .maFinding{background:var(--cream-2); border:1px solid var(--line-2); border-left:3px solid var(--orange); border-radius:var(--r-sm); padding:26px 28px; margin-bottom:14px; display:grid; grid-template-columns:200px minmax(0,1fr); gap:30px; align-items:start;}
@media(max-width:760px){
  .maPage .maFinding{grid-template-columns:1fr; gap:10px}
}
.maPage .maFinding .maNum{font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:800; color:var(--orange); letter-spacing:-.015em; line-height:1.25; text-wrap:balance}
.maPage .maFinding h3{margin-bottom:8px}
.maPage .maFinding p{margin:0; color:var(--muted); max-width:64ch}
.maPage .maFinding p+p{margin-top:10px}
.maPage .maQuoteline{margin:26px 0 0; padding:22px 26px; background:var(--navy); color:#EAF0FA; border-radius:var(--r-sm); font-size:16px; line-height:1.7;}
.maPage .maQuoteline b{color:#fff}
.maPage .maCallout{background:var(--white); border:1px solid var(--line-2); border-left:3px solid var(--navy); border-radius:var(--r-sm); padding:22px 26px; margin:0 0 30px}
.maPage .maCallout .maK{display:block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:10px}
.maPage .maCallout p{margin:0; font-size:16px; line-height:1.7; color:var(--navy); font-weight:700}
.maPage .maSubhead{margin:34px 0 14px; font-size:18px}
.maPage .maPartner{display:grid; grid-template-columns:1fr .92fr; gap:44px; align-items:start}
@media(max-width:900px){
  .maPage .maPartner{grid-template-columns:1fr; gap:32px}
}
.maPage .maChecklist{list-style:none; margin:22px 0 0; padding:0}
.maPage .maChecklist li{position:relative; padding:0 0 0 34px; margin-bottom:14px; color:var(--muted)}
.maPage .maChecklist li b{color:var(--navy)}
.maPage .maChecklist li::before{content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317835A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center; background-size:13px;}
.maPage .maEarn{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px 32px; box-shadow:var(--shadow-lg)}
.maPage .maEarn h3{font-size:19px; margin-bottom:4px}
.maPage .maEarn .maSub{color:var(--muted-2); font-size:.86rem; margin:0 0 18px}
.maPage .maTier{display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; align-items:center; padding:14px 0}
.maPage .maTier+.maTier{border-top:1px solid var(--line)}
.maPage .maTier .maPct{font-size:1.7rem; font-weight:800; color:var(--orange); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.maPage .maTier .maLbl{font-size:.92rem; color:var(--muted)}
.maPage .maTier .maLbl b{color:var(--navy)}
.maPage .maEarn .maPayout{margin:18px 0 0; padding:14px 16px; background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:.88rem; color:var(--muted)}
.maPage .maEarn .maPayout b{color:var(--navy)}
.maPage .maEarn .maBtn{width:100%; justify-content:center; margin-top:20px}
.maPage .maEarn .maFinenote{margin:14px 0 0; font-size:.76rem; color:var(--muted-2)}
.maPage .maSteps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px}
@media(max-width:860px){
  .maPage .maSteps{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .maPage .maSteps{grid-template-columns:1fr}
}
.maPage .maStep{background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:24px}
.maPage .maStep .maN{width:34px; height:34px; border-radius:10px; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:800; margin-bottom:14px}
.maPage .maStep h3{font-size:17px; margin-bottom:6px}
.maPage .maStep p{margin:0; color:var(--muted); font-size:16px; line-height:1.7}
.maPage details{background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:20px 24px; margin-bottom:12px}
.maPage summary{font-weight:800; cursor:pointer; list-style:none; font-size:17px}
.maPage summary::-webkit-details-marker{display:none}
.maPage summary::after{content:"+"; float:right; color:var(--orange); font-weight:800}
.maPage details[open] summary::after{content:"\2013"}
.maPage details p{margin:12px 0 0; color:var(--muted)}
.maPage .maFinalcta{background:linear-gradient(135deg,#1C2841,#26365A); color:#fff}
.maPage .maFinalcta .maWrap{padding:66px 24px; text-align:center}
.maPage .maFinalcta h2{color:#fff; max-width:20ch; margin:0 auto}
.maPage .maFinalcta p{color:#C2CCDD; max-width:60ch; margin:16px auto 0}
.maPage .maFinalcta .maActions{justify-content:center; margin-top:30px}
.maPage .maFinalcta .maBtn.maGhost{border-color:rgba(255,255,255,.55); color:#fff}
.maPage .maFinalcta .maBtn.maGhost:hover{background:#fff; color:var(--navy)}
.maPage :focus-visible{outline:2px solid var(--orange); outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .maPage *{transition:none !important; animation:none !important}
}
.maPage .maShieldGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media(max-width:760px){
  .maPage .maShieldGrid{grid-template-columns:1fr}
}
.maPage .maShieldCard{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.maPage .maShieldCard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--cream-d)}
.maPage .maShieldCard .maIco{width:52px; height:52px; border-radius:14px; background:var(--navy); color:#fff; display:grid; place-items:center; margin-bottom:18px; transition:background .18s ease, transform .18s ease}
.maPage .maShieldCard:hover .maIco{background:var(--orange); transform:scale(1.05)}
.maPage .maShieldCard .maIco svg{width:26px; height:26px}
.maPage .maShieldCard .maKicker{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-d); margin:0 0 6px}
.maPage .maShieldCard h3{font-size:20px; margin-bottom:10px}
.maPage .maShieldCard p{margin:0; color:var(--muted); font-size:16px; line-height:1.7}
.maPage .maStickyWrap{display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; align-items:start}
@media(max-width:900px){
  .maPage .maStickyWrap{grid-template-columns:1fr; gap:28px}
}
.maPage .maStickySide{position:sticky; top:calc(96px + env(safe-area-inset-top,0px))}
@media(max-width:900px){
  .maPage .maStickySide{position:static; top:auto}
}
.maPage .maStickySide .maEyebrow{margin-bottom:12px}
.maPage .maStickySide p{color:var(--muted); font-size:16px; line-height:1.7; margin-top:14px; max-width:42ch}
.maPage .maSuperList{display:flex; flex-direction:column; gap:16px}
.maPage .maSuperCard{background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r); padding:28px 30px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; transition:border-color .18s ease, background .18s ease}
.maPage .maSuperCard:hover{border-color:var(--cream-d); background:var(--white)}
.maPage .maSuperCard .maN{width:42px; height:42px; border-radius:12px; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.95rem}
.maPage .maSuperCard h3{font-size:19px; margin-bottom:8px}
.maPage .maSuperCard p{margin:0; color:var(--muted); font-size:16px; line-height:1.7}
@media(max-width:520px){
  .maPage .maSuperCard{grid-template-columns:1fr; gap:12px}
}
.maPage .maBandLead{color:#B9C2D2; text-align:center; font-weight:700; margin:0 0 26px; font-size:16px; line-height:1.6}
.maPage .maFigs.maThree{grid-template-columns:repeat(3,1fr)}
.maPage .maFig dd .maU{font-size:.46em; font-weight:700; color:#B9C2D2; letter-spacing:.01em}
@media(max-width:760px){
  .maPage .maFigs.maThree{grid-template-columns:1fr; row-gap:30px}
  .maPage .maFigs.maThree .maFig{padding-left:0; border-left:0}
}
.maPage .maStories{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:820px){
  .maPage .maStories{grid-template-columns:1fr}
}
.maPage .maStory{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.maPage .maStory:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--cream-d)}
.maPage .maStoryTop{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px}
.maPage .maStoryAgency{font-weight:800; font-size:18px; color:var(--navy)}
.maPage .maStoryTag{font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); background:var(--cream-2); border:1px solid var(--line-2); padding:5px 10px; border-radius:999px; white-space:nowrap}
.maPage .maStoryStats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px}
.maPage .maStoryStat{background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:15px 10px; text-align:center}
.maPage .maStoryStat b{display:block; font-size:1.5rem; font-weight:800; color:var(--orange); letter-spacing:-.02em; line-height:1.05}
.maPage .maStoryStat span{display:block; margin-top:6px; font-size:.72rem; color:var(--muted); line-height:1.35}
.maPage .maStory blockquote{margin:0 0 18px; font-size:16px; line-height:1.7; color:var(--navy); font-weight:600; padding-left:16px; border-left:3px solid var(--orange)}
.maPage .maStoryBy{font-size:.88rem; color:var(--muted); margin:0 0 20px}
.maPage .maStoryBy b{color:var(--navy); font-weight:800}
.maPage .maStoryLink{margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--orange-d); text-decoration:none; font-size:.95rem}
.maPage .maStoryLink:hover{gap:11px}
.maPage .maStoryLink svg{width:16px;height:16px}
@media(max-width:400px){
  .maPage .maStoryStats{grid-template-columns:1fr 1fr}
}
@keyframes maFypulse{0%{transform:scale(.9); opacity:.55} 100%{transform:scale(1); opacity:1}}
.maPage .maDashwrap{margin:0}
.maPage .maDash{background:var(--white); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden}
.maPage .maDashBar{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--cream-2); border-bottom:1px solid var(--line-2)}
.maPage .maDashDots{display:flex; gap:6px}
.maPage .maDashDots i{width:10px; height:10px; border-radius:50%; display:block}
.maPage .maDashTitle{font-weight:800; font-size:.9rem; color:var(--navy)}
.maPage .maDashLive{margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--green-d); background:var(--green-soft); padding:5px 10px; border-radius:999px}
.maPage .maDashLive .maDot{width:8px; height:8px; border-radius:50%; background:var(--green); animation:maLivep 1.9s ease-out infinite}
@keyframes maLivep{0%{box-shadow:0 0 0 0 rgba(34,181,115,.5)} 70%{box-shadow:0 0 0 7px rgba(34,181,115,0)} 100%{box-shadow:0 0 0 0 rgba(34,181,115,0)}}
.maPage .maDashBody{padding:18px}
.maPage .maDashHero{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; background:linear-gradient(150deg,#1C2841 0%,#241f35 65%,#2c1c30 100%); border-radius:14px; padding:18px 20px; margin-bottom:16px}
.maPage .maDashHero .maLbl{font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#9FB0C8; margin:0 0 8px}
.maPage .maDashHero .maVal{font-size:2.1rem; font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.maPage .maDashSpark{display:flex; align-items:flex-end; gap:5px; height:46px; flex:none}
.maPage .maDashSpark i{width:9px; border-radius:3px 3px 0 0; background:#3A4A69; display:block}
.maPage .maDashSpark i.maHi{background:var(--orange)}
.maPage .maDashKpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px}
.maPage .maDashKpi{background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:12px 13px}
.maPage .maDashKpi b{display:block; font-size:1.12rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; line-height:1.1}
.maPage .maDashKpi span{display:block; margin-top:4px; font-size:.66rem; color:var(--muted-2); font-weight:700; letter-spacing:.02em}
.maPage .maDashSec{font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2); margin:0 0 8px}
.maPage .maDashRow{display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px; border-radius:10px; transition:background .14s ease}
.maPage .maDashRow:hover{background:var(--cream-2)}
.maPage .maDashIni{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.78rem}
.maPage .maDashName{font-weight:800; font-size:.92rem; color:var(--navy); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.maPage .maDashSub{font-size:.74rem; color:var(--muted-2); margin-top:1px}
.maPage .maDashMetric{text-align:right; white-space:nowrap}
.maPage .maDashMetric b{font-size:.88rem; font-weight:800; color:var(--navy)}
.maPage .maDashMetric .maSt{display:flex; align-items:center; justify-content:flex-end; gap:5px; font-size:.68rem; color:var(--green-d); font-weight:800; margin-top:3px}
.maPage .maDashMetric .maSt .maD{width:7px; height:7px; border-radius:50%; background:var(--green)}
.maPage .maDashFoot{margin:12px 2px 0; font-size:.78rem; color:var(--muted-2); font-weight:700}
.maPage .maDashCap{margin:11px 2px 0; font-size:.72rem; color:var(--muted-2); text-align:center}
@media(max-width:420px){
  .maPage .maDashKpis{grid-template-columns:1fr 1fr}
}
.maPage .maFindingIco{width:52px; height:52px; border-radius:14px; background:var(--navy); color:#fff; display:grid; place-items:center; margin-bottom:16px; transition:background .18s ease, transform .18s ease}
.maPage .maFinding:hover .maFindingIco{background:var(--orange); transform:scale(1.05)}
.maPage .maFindingIco svg{width:26px; height:26px}
.maPage .maShieldCard .maIco.maBrand{background:var(--cream-2); border:1px solid var(--line-2); color:var(--ink)}
.maPage .maShieldCard:hover .maIco.maBrand{background:var(--cream-2); color:var(--orange)}
.maPage .maCrumbUpdated{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; color:var(--muted-2)}
.maPage .maCrumbUpdated svg{width:13px; height:13px; flex:none}
.maPage .maCrumbUpdated time{font-variant-numeric:tabular-nums}
/* Not in the design: below 390px the PT story tag ("Salão de bem-estar · Turquia", nowrap) makes the
   single-column story card wider than the screen (the PT design itself overflows to 386px at 375px).
   For PT only, below 390px, the column may shrink and the tag wraps under the agency name.
   Everywhere else the layout is exactly the design's. */
@media(max-width:389px){
  .maPage:lang(pt) .maStories{grid-template-columns:minmax(0,1fr)}
  .maPage:lang(pt) .maStoryTop{flex-wrap:wrap}
}