/* =====================================================================
   Qrmen site: ek stiller (site.css'ten sonra yüklenir; ona dokunmaz)
   1) Okunabilirlik   2) Üst menü   3) Banner/pop-up/çerez   4) Sayfa bileşenleri
   5) Ana sayfa ek bölümleri (sektörler, tema galerisi, çoklu dil, fiyatlar)
   ===================================================================== */

/* ---------- 1) Okunabilirlik: gövde metinleri en az 12-14 px ---------- */
.header nav{font-size:13.5px;gap:22px}
.login{font-size:13px}
.button{font-size:13.5px}
.button.small{font-size:12.5px;padding:11px 18px}
.eyebrow{font-size:11px;letter-spacing:1.8px}
.section-heading p{font-size:16px;line-height:1.7}
.hero-secondary{font-size:14px}
.micro{font-size:12.5px}
.hero-proof strong{font-size:12px}
.hero-proof small{font-size:11px}
.reference-strip p{font-size:11px}
.steps p,.feature-grid p{font-size:14px;line-height:1.7}
.split-heading>p{font-size:15px}
.demo-copy>p{font-size:15px;line-height:1.7}
.demo-caption p{font-size:13px}
.demo-checks{font-size:12px}
.demo-disclosure{font-size:11.5px}
.price-card>p{font-size:13.5px}
.price-card ul{font-size:13.5px}
.price-card .button{font-size:13px}
.pricing-control{font-size:12px}
.pricing-bottom{font-size:13.5px}
.section-footnote{font-size:12.5px}
.real-layout p{font-size:15px;line-height:1.7}
.real-cards a div>span:last-child{font-size:12px}
.faq-section>div>p{font-size:14px}
summary{font-size:15px}
details p{font-size:14px;line-height:1.75}
.final-cta .eyebrow{font-size:11px}
.final-cta>small{font-size:12px}
.footer-top p{font-size:13.5px}
.footer-top>div>strong{font-size:13px}
.footer-top>div>a:not(.brand){font-size:13.5px}
.footer-top .text-link{font-size:13.5px}
.footer-bottom{font-size:12px;gap:14px;flex-wrap:wrap}
.footer-legal{display:inline-flex;gap:16px;flex-wrap:wrap}
.footer-legal a:hover,.footer-top a:hover{color:var(--green)}
form label{font-size:12.5px}
form small{font-size:11.5px}
.success-note{font-size:12px}
.language-pills>*{font-size:12px}
.feature-grid h3{font-size:18px}
@media(max-width:850px){
  .steps p{font-size:13.5px}
  .demo-copy>p{font-size:14px}
  .micro{font-size:12px}
  .hero-secondary{font-size:13px}
  .hero-proof strong{font-size:11.5px}.hero-proof small{font-size:10.5px}
  .hero-copy>.eyebrow{font-size:10px;letter-spacing:1.4px}
  .demo-checks{font-size:11.5px}
  .sector-tabs button{font-size:12px}
  .demo-caption p{font-size:12px}
  .split-heading>p{font-size:14px}
}
@media(max-width:560px){
  .hero h1{width:auto;max-width:100%;font-size:clamp(34px,11.5vw,46px);letter-spacing:-2px}
  .hero h1 em{letter-spacing:-1.5px}
  .hero-buttons .button{font-size:12.5px;padding:14px 14px}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px}
  .footer-top>div:first-child,.footer-top>div:last-child{grid-column:1/-1}
}

/* ---------- 2) Üst menü: 6 bağlantı için daha erken mobil menü ---------- */
.header{position:relative;z-index:40}
.header nav a.on{color:var(--green)}
@media(max-width:1120px){
  .header nav{position:absolute;top:90px;left:20px;right:20px;background:#fafbf5;border:1px solid #dfe5d4;padding:22px;display:none;flex-direction:column;align-items:flex-start;border-radius:10px;box-shadow:0 15px 30px #0001;gap:18px;font-size:15px}
  .header nav.open{display:flex}
  .menu-toggle{display:block;border:0;background:none;font-size:22px;padding:5px;cursor:pointer}
  .header .login{display:none}
}

/* ---------- 3) Banner, pop-up, çerez bildirimi ---------- */
.pm-banner{position:relative;height:42px;overflow:hidden}
.pm-banner-item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 16px;font-size:13.5px;font-weight:500;text-align:center;opacity:0;transform:translateY(100%);transition:opacity .6s,transform .6s}
.pm-banner-item.on{opacity:1;transform:none;z-index:2}
.pm-banner-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-overlay{position:fixed;inset:0;z-index:90;background:rgba(20,44,36,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s}
.pm-overlay[hidden]{display:none}
.pm-overlay.show{opacity:1}
.pm-modal{position:relative;background:var(--bg);border-radius:18px;max-width:430px;width:100%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.3);transform:scale(.96);transition:transform .25s}
.pm-overlay.show .pm-modal{transform:none}
.pm-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:22px;line-height:1;cursor:pointer;z-index:2}
.pm-cover{width:100%;max-height:230px;object-fit:cover;display:block}
.pm-body{padding:28px;text-align:center}
.pm-body h3{font-size:24px;letter-spacing:-.6px;margin-bottom:8px}
.pm-body p{color:var(--muted);font-size:15px;margin-bottom:20px}
.pm-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:860px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(20,44,36,.18);padding:16px 20px;display:flex;gap:20px;align-items:center;justify-content:space-between}
.pm-cookie[hidden]{display:none}
.pm-cookie p{font-size:13.5px;color:#4a4f46;line-height:1.6}
.pm-cookie p a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:4px}
@media(max-width:640px){.pm-cookie{flex-direction:column;align-items:stretch;text-align:left}.pm-cookie .button{width:100%}}

/* ---------- 4) İç sayfa bileşenleri ---------- */
.pg-hero{padding:64px 0 36px;text-align:center}
.pg-crumbs{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.pg-crumbs a:hover{color:var(--green)}
.pg-hero h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-2px;line-height:1.08;font-weight:600}
.pg-hero h1 em{font-family:var(--serif);font-weight:400;color:var(--green);letter-spacing:-1.5px}
.pg-hero p{font-size:17px;color:var(--muted);max-width:680px;margin:18px auto 0;line-height:1.7}
.pg-body{padding-bottom:96px}
.prose{max-width:780px;margin:0 auto;font-size:16.5px;line-height:1.85;color:#3b4038}
.prose h2{font-size:28px;letter-spacing:-.8px;margin:48px 0 12px;line-height:1.25}
.prose h3{font-size:21px;letter-spacing:-.4px;margin:32px 0 8px}
.prose p{margin:0 0 18px}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:24px;margin:0 0 18px}.prose li{margin:6px 0}
.prose img{border-radius:14px;margin:22px 0;max-width:100%;height:auto}
.prose blockquote{border-left:3px solid var(--green);margin:24px 0;padding:4px 0 4px 20px;color:var(--muted);font-style:italic}
.prose table{border-collapse:collapse;width:100%;margin:22px 0;font-size:15px}.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}.prose th{background:#f3f4ec}
.prose hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.prose iframe{max-width:100%;border:0;border-radius:12px}
.pg-cta{max-width:780px;margin:56px auto 0;padding:34px;border-radius:20px;background:var(--green-light);text-align:center}
.pg-cta h3{font-size:24px;letter-spacing:-.6px;margin-bottom:8px}.pg-cta p{color:var(--muted);margin-bottom:20px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.th-card,.rf-card,.bl-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.th-card:hover,.rf-card:hover,.bl-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(37,42,37,.09)}
.th-card .im,.bl-card .im{aspect-ratio:16/10;background:#e8eee4;overflow:hidden}
.th-card .im img,.bl-card .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.th-card:hover .im img,.bl-card:hover .im img{transform:scale(1.04)}
.th-card .tx,.bl-card .tx,.rf-card .tx{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.th-card h3,.bl-card h3,.rf-card h3{font-size:18px;letter-spacing:-.4px;line-height:1.3}
.th-card p,.bl-card p,.rf-card p{font-size:14px;color:var(--muted);line-height:1.65}
.th-card .go,.bl-card .go,.rf-card .go{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:700;color:var(--green)}
.rf-card .lg{height:130px;display:grid;place-items:center;background:#f4f5ee;border-bottom:1px solid var(--line)}
.rf-card .lg img{max-height:84px;max-width:70%;object-fit:contain}
.rf-card .lg span{font-family:var(--serif);font-size:30px;color:var(--green)}
.bl-meta{font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.bl-meta b{color:var(--green);font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 30px}
.chips a{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 16px;font-size:13.5px;font-weight:600;color:#4a4f46;transition:.2s}
.chips a:hover{border-color:var(--green);color:var(--green)}.chips a.on{background:var(--green);border-color:var(--green);color:#fff}
.bl-search{display:flex;gap:10px;max-width:520px;margin:0 auto 26px}
.bl-search input{flex:1;border:1px solid var(--line);border-radius:10px;padding:13px 16px;font-size:15px;background:#fff}
.pager{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;font-size:14px;padding:0 12px;background:#fff}
.pager .on{background:var(--green);border-color:var(--green);color:#fff}.pager a:hover{border-color:var(--green)}.pager .dis{opacity:.4}
.feat-post{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-bottom:36px}
.feat-post .im{min-height:300px;background:#e8eee4}.feat-post .im img{width:100%;height:100%;object-fit:cover;display:block}
.feat-post .tx{padding:34px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.feat-post h2{font-size:30px;letter-spacing:-1px;line-height:1.2}.feat-post p{color:var(--muted);font-size:15.5px;line-height:1.7}
.sec-title{font-size:30px;letter-spacing:-1px;margin:56px 0 22px}
.post-head{max-width:820px;margin:0 auto;text-align:center;padding:56px 0 26px}
.post-head h1{font-size:clamp(30px,4.6vw,48px);letter-spacing:-1.6px;line-height:1.12}
.post-cover{max-width:980px;margin:0 auto 38px;border-radius:22px;overflow:hidden;aspect-ratio:16/8;background:#e8eee4}.post-cover img{width:100%;height:100%;object-fit:cover}
.empty-state{text-align:center;color:var(--muted);padding:60px 0;font-size:16px}
@media(max-width:900px){.cards,.cards.two{grid-template-columns:1fr 1fr}.feat-post{grid-template-columns:1fr}}
@media(max-width:600px){.cards,.cards.two{grid-template-columns:1fr}.pg-hero{padding:44px 0 26px}}

/* ---------- 5) Ana sayfa ek bölümleri ---------- */
.ref-row{display:flex;align-items:center;justify-content:space-around;gap:22px 34px;flex-wrap:wrap}
.ref-row a{display:flex;align-items:center;gap:10px;color:#6c7164;font-weight:700;font-size:15px;transition:color .2s}
.ref-row a:hover{color:var(--green)}
.ref-row img{height:38px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.8;transition:.2s}
.ref-row a:hover img{filter:none;opacity:1}
.mini-logos img{background:#fff}
.mx-sek{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mx-sk{border-radius:26px;padding:28px;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--c);position:relative;overflow:hidden;color:#fff;transition:transform .2s}
.mx-sk:hover{transform:translateY(-4px)}
.mx-sk:before{content:"";position:absolute;right:-34px;top:-34px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14)}
.mx-sk h3{font-size:21px;margin:0 0 4px;letter-spacing:-.6px;position:relative}.mx-sk p{font-size:14.5px;opacity:.92;position:relative;line-height:1.55}
.mx-sk a{position:relative;margin-top:14px;font-weight:700;font-size:13.5px;display:inline-flex;gap:6px;align-items:center;color:#fff}
.mx-tgal{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mx-th{display:flex;flex-direction:column;gap:10px;text-align:center}
.mx-th .im{aspect-ratio:9/13;border-radius:22px;overflow:hidden;background:#16181a;padding:5px;box-shadow:0 18px 36px rgba(37,42,37,.22);transition:transform .2s}
.mx-th:hover .im{transform:translateY(-6px)}
.mx-th .im img{width:100%;height:100%;object-fit:cover;border-radius:17px;display:block}
.mx-th b{font-family:'Manrope',Arial,sans-serif;font-size:15px}.mx-th a{font-size:13px;color:var(--green);font-weight:700}
.mx-gnote{text-align:center;margin-top:30px;font-size:14.5px}.mx-gnote a{color:var(--green);font-weight:700}
.mx-two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.mx-seg{display:inline-flex;background:#f1f1ea;border:1px solid var(--line);border-radius:99px;padding:4px;gap:2px;margin-top:22px;flex-wrap:wrap}
.mx-seg button{border:0;background:transparent;color:var(--muted);padding:10px 20px;border-radius:99px;font-weight:700;font-size:14px;cursor:pointer}.mx-seg button.on{background:var(--ink);color:#fff}
.mx-tr{background:#fff;border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:0 30px 60px rgba(37,42,37,.09)}
.mx-tr .ro{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}.mx-tr .ro:last-child{border:0}.mx-tr .ro b{font-family:'Manrope',Arial,sans-serif;font-size:16px}.mx-tr .ro small{display:block;color:var(--muted);font-size:13px}.mx-tr .ro s{text-decoration:none;font-weight:800;color:var(--green)}
.mx-price{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;padding-top:10px}
.mx-pc{position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;display:flex;flex-direction:column}
.mx-pc.hot{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 30px 60px rgba(23,78,60,.32);transform:translateY(-10px)}
.mx-pc .bd2{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#3a1e08;font-size:11px;font-weight:800;border-radius:99px;padding:5px 14px;white-space:nowrap;letter-spacing:.3px}
.mx-pc h3{font-size:19px;letter-spacing:-.5px}.mx-pc .d{opacity:.74;font-size:14px;min-height:44px;margin-top:4px;line-height:1.6}
.mx-pc .p{font-family:var(--serif);font-size:42px;letter-spacing:-1.5px;margin:12px 0 2px;line-height:1.1}.mx-pc .p small{font-family:'DM Sans',Arial,sans-serif;font-size:14px;opacity:.65;letter-spacing:0}
.mx-pc ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:11px;font-size:14px}.mx-pc li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.mx-pc li:before{content:"";width:16px;height:16px;flex:none;margin-top:3px;border-radius:50%;background:var(--green-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174e3c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.mx-pc.hot li:before{background-color:rgba(255,255,255,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.mx-pc .mx-cta{margin-top:auto}.mx-pc .mx-cta .button{width:100%;justify-content:center;text-align:center}
.mx-pc.hot .mx-cta .button{background:#fff;color:var(--green);border-color:#fff}
.mx-addons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
.mx-ad{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}
.mx-ad h4{font-family:'Manrope',Arial,sans-serif;font-size:15.5px;letter-spacing:-.3px}.mx-ad b{display:inline-block;margin:6px 0 8px;font-size:12.5px;color:var(--green);background:var(--green-light);border-radius:99px;padding:3px 10px}
.mx-ad p{font-size:13.5px;color:var(--muted);line-height:1.6}
.mx-subhead{text-align:center;margin-top:64px}.mx-subhead h3{font-size:26px;letter-spacing:-.8px}.mx-subhead p{color:var(--muted);margin-top:8px;font-size:15px}
@media(max-width:1000px){.mx-price,.mx-addons{grid-template-columns:repeat(2,1fr)}.mx-tgal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.mx-sek,.mx-two{grid-template-columns:1fr}.mx-pc.hot{transform:none}}
@media(max-width:600px){.mx-price,.mx-addons{grid-template-columns:1fr}.mx-pc{padding:24px}.mx-tgal{gap:14px}}
.seo-note{max-width:780px;margin:0 auto;color:var(--muted);font-size:14.5px;line-height:1.8}

/* ---------- Ana sayfa: modül listesi, sektör kartları, WhatsApp rozeti ---------- */
.mx-mods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mx-mod{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 20px 22px;transition:transform .2s,box-shadow .2s}
.mx-mod:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(37,42,37,.08)}
.mx-mod h3{font-size:16px;letter-spacing:-.3px;margin-bottom:6px;display:flex;gap:9px;align-items:flex-start;line-height:1.35}
.mx-mod h3:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:7px;flex:none}
.mx-mod p{font-size:14px;color:var(--muted);line-height:1.65}
.mx-sek{grid-template-columns:repeat(3,1fr)}
.mx-sk{padding:0;min-height:0;justify-content:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line)}
.mx-sk:before{display:none}
.mx-sk-im{height:150px;background-size:cover;background-position:center;background-color:#e8eee4}
.mx-sk-tx{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.mx-sk h3{color:var(--ink);font-size:21px}
.mx-sk p{color:var(--muted);opacity:1;font-size:14.5px;line-height:1.65}
.mx-sk ul{list-style:none;padding:14px 0 0;margin:auto 0 0;display:grid;gap:8px;font-size:14px;border-top:1px solid var(--line)}
.mx-sk li{display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.mx-sk li:before{content:"✓";color:var(--green);font-weight:800;font-size:13px}
.wa-pill{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:13px;font-weight:600;color:#3d6a4e;border:1px solid #cfe0d2;background:#f1f8f2;border-radius:99px;padding:8px 15px}
.wa-pill:hover{background:#e5f3e8}
@media(max-width:1000px){.mx-mods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.mx-sek{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mx-mods,.mx-sek{grid-template-columns:1fr}}

/* ---------- Referans şeridi: kayan marka yazıları ---------- */
.reference-strip{padding:30px 0 34px}
.reference-strip .wrap p{margin-bottom:26px}
.ref-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ref-track{display:flex;width:max-content;align-items:center;animation:refslide var(--dur,40s) linear infinite}
.ref-marquee:hover .ref-track,.ref-marquee:focus-within .ref-track{animation-play-state:paused}
.ref-track>.rw{flex:none;margin:0 clamp(30px,4.6vw,64px)}
@keyframes refslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rw{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;color:#6c7164;line-height:1;white-space:nowrap;transition:color .2s}
.rw:hover{color:var(--green)}
.rw small{display:block;font-size:9px;letter-spacing:2.5px;margin-top:8px;font-weight:600}
.rw-serif{font:22px var(--serif);letter-spacing:.5px}
.rw-bii{flex-direction:row;align-items:baseline;font-family:'Manrope',Arial,sans-serif;font-size:36px;letter-spacing:-2px;font-weight:700}
.rw-bii span{font-weight:400;font-size:24px;letter-spacing:-1px}
.rw-init{flex-direction:row;gap:9px;font:30px var(--serif)}
.rw-init span{font-family:'DM Sans',Arial,sans-serif;font-size:9px;letter-spacing:2px;line-height:1.7;max-width:84px;white-space:normal;text-align:left;font-weight:600}
.rw-ital{font:italic 28px var(--serif)}
.rw-ital2{font:italic 25px var(--serif)}
.rw-caps{font:700 17px 'Manrope',Arial,sans-serif;letter-spacing:5px}
@media(prefers-reduced-motion:reduce){
  .ref-marquee{-webkit-mask-image:none;mask-image:none}
  .ref-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:22px}
  .ref-track>.rw[aria-hidden="true"]{display:none}
}

/* ---------- Örnek (demo) menüler ---------- */
.mx-demos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mx-demo{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.mx-demo:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(37,42,37,.1)}
.mx-demo .im{height:190px;background-size:cover;background-position:center;background-color:#e8eee4;position:relative}
.mx-demo .bdg{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--green);font-size:10.5px;font-weight:800;letter-spacing:1.4px;border-radius:99px;padding:5px 11px}
.mx-demo .tx{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.mx-demo h3{font-size:19px;letter-spacing:-.4px}.mx-demo p{font-size:14px;color:var(--muted);line-height:1.6}
.mx-demo .go{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:700;color:var(--green)}
.mx-sk-link{margin-top:6px;font-size:13.5px;font-weight:700;color:var(--green)}
.mx-sk-link:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.mx-demos{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mx-demos{grid-template-columns:1fr}}