/* Landing page Mexa — mengikuti desain referensi MSAI (2026-10-24).
   Semua kelas berawalan lx- agar tidak mengganggu style.css / mexa-ui.css. */
.lx{--lx-red:#d9232e;--lx-navy:#22405f;--lx-ink:#2b2f36;--lx-muted:#6b7280;max-width:1760px;margin:0 auto;background:#fff;color:var(--lx-ink);font-family:Poppins,system-ui,sans-serif;overflow-x:clip;position:relative}
.lx img{max-width:100%}
.lx-red{color:var(--lx-red)}
.lx button{font-family:inherit;cursor:pointer}

/* Header */
.lx-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;height:auto;min-height:58px;padding:12px 20px;background:#fff;box-shadow:0 1px 10px rgba(20,30,50,.08)}
.lx-logo{text-decoration:none;line-height:1;display:block}
.lx-logo img{height:27px;width:auto;max-width:150px;display:block}
.lx-nav{display:flex;gap:34px;align-items:center}
.lx-nav a,.lx-nav button{color:var(--lx-red);font-weight:700;font-size:15px;text-decoration:none;background:none;border:0;padding:4px 2px}
.lx-nav a:hover,.lx-nav button:hover{text-decoration:underline}
.lx-head-actions{display:flex;align-items:center;gap:12px;flex:none}
.lx-nav a,.lx-nav button{white-space:nowrap}
.lx-header .profile{background:none;border:0;padding:0;width:36px;height:36px}
.lx-header .profile svg{width:36px;height:36px;display:block}
.lx-header .menu{background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:auto;height:auto;min-width:36px;min-height:32px;flex:none;padding:6px}
.lx-header .menu span{display:block;flex:none;width:24px;height:3px;border-radius:2px;background:var(--lx-red)}
.lx-header #menu-panel{position:absolute;top:100%;right:12px;background:#fff;border-radius:12px;box-shadow:0 12px 32px rgba(20,30,50,.18);padding:10px;min-width:190px;display:flex;flex-direction:column}
.lx-header #menu-panel[hidden]{display:none}
.lx-header #menu-panel a,.lx-header #menu-panel button{color:var(--lx-ink);text-decoration:none;background:none;border:0;text-align:left;font-size:15px;font-weight:600;padding:9px 10px;border-radius:8px}
.lx-header #menu-panel a:hover,.lx-header #menu-panel button:hover{background:#f3f4f6}

/* Hero */
.lx-hero{position:relative;overflow:hidden;aspect-ratio:100/58.7}
.lx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;pointer-events:none}
.lx-hero-shade{position:absolute;inset:0;background:linear-gradient(110deg,rgba(246,252,255,.8) 0%,rgba(248,253,255,.6) 30%,rgba(255,255,255,.08) 62%,transparent 85%);pointer-events:none}
.lx-hero-copy{position:absolute;left:6.85%;top:29%;max-width:62%}
.lx-hero-kicker{color:#fff;font-weight:700;font-size:clamp(17px,2.6vw,24px);text-shadow:0 1px 10px rgba(20,30,50,.5);margin:0 0 2px}
.lx-hero-copy h1{color:#fff;font-size:clamp(40px,7vw,68px);line-height:1.02;font-weight:800;margin:0;text-shadow:0 2px 16px rgba(20,30,50,.45)}
.lx-hero-copy h1 .lx-red{text-shadow:none}

/* Tentang / Aku Mexa */
.lx-about{position:relative;display:flex;align-items:flex-start;gap:26px;padding:36px 26px 8px 92px;min-height:clamp(300px,46vw,600px)}
/* Pill sosial: posisi awal di samping section Aku Mexa (seperti desain acuan),
   lalu melayang mengikuti layar saat halaman di-scroll (kelas .is-floating dari landing.js) */
.lx-social{position:absolute;left:12px;top:720px;z-index:60;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:999px;box-shadow:0 12px 32px rgba(20,30,50,.22);padding:7px;visibility:hidden}
.lx-social.is-placed{visibility:visible}
.lx-social.is-floating{position:fixed;left:max(12px,calc(50vw - 868px));top:50%;transform:translateY(-50%)}
.lx-social button{display:block;width:28px;height:28px;border:0;background:none;padding:0;border-radius:50%;cursor:pointer;transition:transform .2s ease}
.lx-social button:hover,.lx-social button.is-active{transform:scale(1.14)}
.lx-social img{width:28px;height:28px;display:block}
.lx-social .lx-social-toggle{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#e5323d,#c9242e);color:#fff;box-shadow:0 6px 14px rgba(201,36,46,.35)}
.lx-social .lx-social-toggle:hover{transform:scale(1.1)}
.lx-social .lx-social-toggle svg{width:16px;height:16px;display:block}
.lx-social .lx-social-toggle .ic-close{display:none}
.lx-social.is-open .lx-social-toggle .ic-share{display:none}
.lx-social.is-open .lx-social-toggle .ic-close{display:block}
.lx-social-list{display:flex;flex-direction:column;gap:10px;max-height:0;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;overflow:hidden;transition:max-height .3s cubic-bezier(.22,.61,.36,1),opacity .25s ease,transform .3s cubic-bezier(.22,.61,.36,1),margin-top .3s cubic-bezier(.22,.61,.36,1),visibility 0s .3s}
.lx-social.is-open .lx-social-list{max-height:160px;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin-top:10px;transition:max-height .3s cubic-bezier(.22,.61,.36,1),opacity .25s ease,transform .3s cubic-bezier(.22,.61,.36,1),margin-top .3s cubic-bezier(.22,.61,.36,1),visibility 0s}
/* Jendela melayang platform (muncul saat ikon pill diklik) */
.lx-pop{position:fixed;left:max(62px,calc(50vw - 816px));top:50%;transform:translateY(-50%);z-index:70;width:300px;max-width:calc(100vw - 78px);background:#fff;border-radius:16px;box-shadow:0 24px 54px rgba(10,15,30,.35);overflow:hidden;animation:lx-pop-in .25s ease both}
.lx-pop[hidden]{display:none}
@keyframes lx-pop-in{from{opacity:0;transform:translateY(-50%) translateX(-10px) scale(.97)}to{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}}
.lx-pop-head{display:flex;align-items:center;gap:10px;background:#111827;color:#fff;padding:11px 14px}
.lx-pop-head img{width:22px;height:22px;display:block}
.lx-pop-head span{flex:1;font-size:14.5px;font-weight:700;letter-spacing:.2px}
.lx-pop-close{background:none;border:0;color:#fff;font-size:22px;line-height:1;padding:2px 6px;cursor:pointer;border-radius:8px}
.lx-pop-close:hover{background:#ffffff22}
.lx-pop-body{padding:16px}
.lx-pop-body p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:#4b5563}
.lx-pop-btn{display:block;text-align:center;background:linear-gradient(180deg,#e5323d,#c9242e);color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;padding:12px 16px;border-radius:10px;box-shadow:0 8px 18px rgba(201,36,46,.3)}
.lx-pop-btn:hover{filter:brightness(1.07)}
.lx-about-copy{max-width:min(430px,57%)}
.lx-greeting{color:var(--lx-red);font-weight:700;font-size:19px;margin:0}
.lx-about-copy h2{font-size:clamp(36px,5.4vw,52px);margin:2px 0 8px;font-weight:800;color:var(--lx-ink)}
.lx-about-copy p{font-size:16.5px;line-height:1.55;margin:0 0 20px}
.lx-cta{background:linear-gradient(180deg,#e5323d,#c9242e);color:#fff;border:0;border-radius:10px;padding:13px 42px;font-size:16px;font-weight:700;box-shadow:0 8px 18px rgba(201,36,46,.35)}
.lx-cta:hover{filter:brightness(1.06)}
.lx-about-copy{position:relative;z-index:2}
.lx-mascot{position:absolute;right:1%;top:0;transform:translateY(-27%);width:32.5%;height:auto;z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 98%);mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 98%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Kenapa Mexa */
.lx-why{padding:40px 26px 10px;text-align:center}
.lx-why h2{font-size:clamp(30px,4.6vw,42px);font-weight:800;margin:0 0 24px}
.lx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.lx-card{display:flex;flex-direction:column;align-items:center;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 6px 18px rgba(20,30,50,.07);padding:26px 18px 22px;background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.lx-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(20,30,50,.12)}
.lx-card svg{width:44px;height:44px;flex:none;margin-bottom:12px}
.lx-card img.lx-card-img{width:44px;height:44px;flex:none;margin-bottom:12px;object-fit:contain}
.lx-card h3{color:var(--lx-red);font-size:17px;margin:0 0 7px}
.lx-card p{color:#4b5563;font-size:14px;line-height:1.55;margin:0}

/* FAQ */
.lx-faq{padding:40px 26px 10px;max-width:820px;margin:0 auto;width:100%}
.lx-faq h2{color:var(--lx-ink);font-size:21px;font-weight:700;margin:0 0 14px}
.lx-faq details{border:1px solid #e5e7eb;border-radius:10px;background:#fff;margin-bottom:10px;box-shadow:0 2px 8px rgba(20,30,50,.04)}
.lx-faq summary{list-style:none;cursor:pointer;padding:13px 42px 13px 16px;position:relative;font-size:14px;color:#374151;font-weight:500}
.lx-faq summary::-webkit-details-marker{display:none}
.lx-faq summary::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid #6b7280;border-bottom:2px solid #6b7280;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.lx-faq details[open ] summary::after{transform:translateY(-30%) rotate(225deg)}
.lx-faq details p{margin:0;padding:0 16px 14px;font-size:13.5px;line-height:1.6;color:#4b5563}

/* Artikel */
.lx-articles{padding:40px 26px 6px}
.lx-articles>h2{text-align:center;color:var(--lx-navy);font-size:clamp(28px,4.4vw,38px);font-weight:800;margin:0 0 26px}
.lx-kabar{color:var(--lx-navy);font-size:20px;font-weight:800;letter-spacing:.4px;margin:0 0 14px}
.lx-featured{display:block;text-decoration:none;color:inherit;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden;background:#fff}
.lx-featured img{width:100%;height:auto;display:block}
.lx-featured-body{display:block;padding:14px 16px 16px}
.lx-featured-body strong{display:block;font-size:17px;line-height:1.45;font-weight:600;color:#1f2937}
.lx-featured:hover .lx-featured-body strong{color:var(--lx-red)}
.lx-featured-body small{display:block;margin-top:6px;color:#6b7280;font-size:12.5px}
.lx-article-list{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.lx-article-row{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;border:1px solid #e5e7eb;border-radius:6px;padding:10px 14px;background:#fff}
.lx-article-row img{width:110px;height:76px;object-fit:cover;object-position:top;border-radius:4px;flex:none}
.lx-article-row strong{display:block;font-size:14.5px;font-weight:600;line-height:1.45;color:#1f2937}
.lx-article-row:hover strong{color:var(--lx-red)}
.lx-article-row small{display:block;margin-top:5px;color:#6b7280;font-size:11.5px;letter-spacing:.4px}
.lx-pager{text-align:right;margin:14px 0 0}
.lx-pager span{display:inline-block;border:1px solid #d1d5db;border-radius:999px;padding:6px 16px;font-size:12.5px;color:#4b5563;background:#fff}

/* YouTube */
.lx-youtube{padding:38px 26px 10px}
.lx-youtube h2{color:var(--lx-navy);font-size:24px;font-weight:800;letter-spacing:.4px;margin:0 0 14px}
.lx-yt-card{position:relative;display:block;border-radius:8px;overflow:hidden;text-decoration:none}
.lx-yt-card svg{width:100%;height:auto;display:block}
.lx-yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lx-yt-play svg{width:76px;height:76px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.lx-yt-label{position:absolute;left:14px;bottom:12px;background:rgba(17,24,39,.78);color:#fff;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px}

/* Footer */
.lx-footer{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:start;padding:36px 26px 44px;border-top:1px solid #e5e7eb;margin-top:34px;font-size:14px;color:#374151}
.lx-footer h3{color:var(--lx-navy);font-size:16px;margin:20px 0 8px}
.lx-foot-col>h3:first-child{margin-top:0}
.lx-footer p{margin:0;line-height:1.65;text-align:justify;text-justify:inter-word}
.lx-footer li,.lx-footer .lx-mail{text-align:left}
.lx-footer ul{list-style:none;margin:0;padding:0}
.lx-footer li{margin:5px 0}
.lx-footer a{color:#374151;text-decoration:none}
.lx-footer a:hover{color:var(--lx-red);text-decoration:underline}
.lx-footer li button{background:none;border:0;padding:0;color:#374151;font-size:14px}
.lx-footer li button:hover{color:var(--lx-red);text-decoration:underline}
.lx-mail{display:inline-flex;align-items:center;gap:8px}
.lx-mail svg{width:18px;height:18px}

@media (max-width:900px){
  .lx-nav{gap:18px}
  .lx-nav a,.lx-nav button{font-size:14px}
}
@media (max-width:760px){
  .lx-logo img{height:21px;max-width:96px}
  .lx-header{padding:10px 12px;gap:10px}
  .lx-nav{display:flex;gap:14px}
  .lx-nav a,.lx-nav button{font-size:13px;padding:4px 0}
  .lx-head-actions{gap:8px}
  .lx-header .profile{width:30px;height:30px}
  .lx-header .profile svg{width:30px;height:30px}
  .lx-header .menu{padding:4px}
  .lx-header .menu span{width:20px}
  .lx-card{padding:18px 14px 16px}
  .lx-card svg{width:36px;height:36px;margin-bottom:9px}
  .lx-card img.lx-card-img{width:36px;height:36px;margin-bottom:9px}
  .lx-card h3{font-size:15.5px}
  .lx-card p{font-size:13px}
  .lx-footer{gap:26px}
  .lx-hero-copy{left:5%;top:24%;max-width:78%}
  .lx-about{flex-wrap:nowrap;padding:26px 16px 0 64px;gap:14px;min-height:280px}
  .lx-social{left:8px;padding:6px}
  .lx-social.is-floating{left:8px}
  .lx-social button,.lx-social img{width:24px;height:24px}
  .lx-social .lx-social-toggle{width:26px;height:26px}
  .lx-social .lx-social-toggle svg{width:14px;height:14px}
  .lx-social-list{gap:8px}
  .lx-social.is-open .lx-social-list{margin-top:8px}
  .lx-pop{left:50px}
  .lx-faq summary{padding-left:28px}
  .lx-featured-body{padding-left:24px}
  .lx-about-copy{flex:1;max-width:60%}
  .lx-about-copy h2{font-size:34px}
  .lx-about-copy p{font-size:14.5px}
  .lx-cta{padding:11px 30px;font-size:15px}
  .lx-cards{grid-template-columns:1fr}
  .lx-why,.lx-faq,.lx-articles,.lx-youtube{padding-left:18px;padding-right:18px}
  .lx-footer{grid-template-columns:1fr;padding:30px 18px 38px}
  .lx-article-row img{width:84px;height:60px}
}
@media (max-width:400px){
  .lx-nav{gap:10px}
  .lx-nav a,.lx-nav button{font-size:12px}
  .lx-logo img{height:19px;max-width:84px}
  .lx-header .profile{width:27px;height:27px}
  .lx-header .profile svg{width:27px;height:27px}
}

/* Desktop: proporsi besar seperti desain semula (perbaikan mobile tidak mengecilkan desktop) */
@media (min-width:1024px){
  .lx-logo img{height:36px;max-width:190px}
  .lx-header{padding:14px 24px}
  .lx-nav{gap:38px}
  .lx-nav a,.lx-nav button{font-size:16px}
  .lx-header .profile{width:38px;height:38px}
  .lx-header .profile svg{width:38px;height:38px}
  .lx-about-copy{max-width:540px}
  .lx-about-copy p{font-size:17.5px}
  .lx-greeting{font-size:20px}
  .lx-cta{font-size:17px;padding:14px 46px}
  .lx-card h3{font-size:18px}
  .lx-card p{font-size:14.5px}
  .lx-faq h2{font-size:23px}
  .lx-faq summary{font-size:15px}
  /* Full screen di PC: hero dibatasi tingginya agar tidak memenuhi layar,
     maskot dibatasi besarnya, ruang sisi diperlega, plus interaksi hover */
  .lx-hero{aspect-ratio:auto;height:min(52vw,84vh)}
  .lx-mascot{width:min(30%,470px)}
  .lx-header{padding-left:44px;padding-right:44px}
  .lx-about{padding-left:104px;padding-right:44px}
  .lx-why,.lx-youtube,.lx-articles{padding-left:44px;padding-right:44px}
  .lx-footer{padding-left:44px;padding-right:44px}
  .lx-slide img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
  .lx-slide:hover img{transform:scale(1.045)}
  .lx-cta:active{transform:scale(.97)}
  .lx-card:hover svg,.lx-card:hover img.lx-card-img{transform:scale(1.1)}
  .lx-card svg,.lx-card img.lx-card-img{transition:transform .3s ease}
}

/* === Animasi & interaksi (2026-10-24) === */
/* Fade-in saat scroll — kelas .lx-reveal hanya ditambahkan oleh landing.js,
   jadi tanpa JS semua konten tetap terlihat. */
.lx-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.lx-reveal.lx-in{opacity:1;transform:none}
img.lx-reveal{transform:translateY(26px) scale(.97)}
img.lx-reveal.lx-in{transform:none}

/* Hover effect tombol & elemen interaktif */
.lx-cta{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.lx-cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 26px rgba(201,36,46,.42);filter:brightness(1.07)}
.lx-cta:active{transform:translateY(0) scale(.99)}
.lx-nav a,.lx-nav button{position:relative;transition:color .2s ease}
.lx-nav a::after,.lx-nav button::after{content:"";position:absolute;left:2px;right:2px;bottom:-2px;height:2px;border-radius:2px;background:var(--lx-red);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.lx-nav a:hover::after,.lx-nav button:hover::after{transform:scaleX(1)}
.lx-social a{transition:transform .25s ease}
.lx-social a:hover{transform:scale(1.16) rotate(5deg)}
.lx-card{transition:transform .3s ease,box-shadow .3s ease}
.lx-card:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(20,30,50,.13)}
.lx-header .profile,.lx-header .menu{transition:transform .2s ease}
.lx-header .profile:hover,.lx-header .menu:hover{transform:scale(1.1)}
.lx-faq summary{transition:background .2s ease}
.lx-faq summary:hover{background:#f9fafb}
.lx-footer a,.lx-footer li button{transition:color .2s ease,padding-left .2s ease}
.lx-footer a:hover{padding-left:4px}

/* Carousel artikel */
.lx-carousel{position:relative;overflow:hidden;border-radius:10px}
.lx-track{display:flex;transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.lx-slide{min-width:100%;display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;transition:box-shadow .3s ease}
.lx-slide img{width:100%;height:320px;object-fit:cover;object-position:center;display:block}
.lx-slide-body{display:block;padding:14px 16px 18px}
.lx-slide-body strong{display:block;font-size:17px;line-height:1.45;font-weight:600;color:#1f2937;transition:color .2s ease}
.lx-slide:hover .lx-slide-body strong{color:var(--lx-red)}
.lx-slide-body small{display:block;margin-top:6px;color:#6b7280;font-size:12.5px}
.lx-car-btn{position:absolute;top:38%;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--lx-navy);font-size:26px;line-height:1;box-shadow:0 6px 16px rgba(20,30,50,.2);display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,transform .2s ease;z-index:3}
.lx-car-btn:hover{background:var(--lx-red);color:#fff;transform:scale(1.1)}
.lx-prev{left:12px}.lx-next{right:12px}
.lx-dots{display:flex;justify-content:center;gap:8px;padding:12px 0 2px}
.lx-dots button{width:9px;height:9px;border-radius:999px;border:0;background:#d3d8e0;padding:0;transition:all .3s ease;cursor:pointer}
.lx-dots button.lx-dot-on{width:26px;background:var(--lx-red)}
@media (max-width:760px){.lx-slide img{height:210px}.lx-car-btn{width:36px;height:36px;font-size:22px}}

@media (prefers-reduced-motion:reduce){
  .lx-reveal{opacity:1;transform:none;transition:none}
  .lx-track{transition:none}
  .lx-cta,.lx-card,.lx-social a,.lx-car-btn,.lx-social-list{transition:none}
}