.fn{--ink:#12312D;--muted:#5B7571;--violet:#7B54F2;--teal:#2BB5C9;--deep:#2F8F84;--grad:linear-gradient(135deg,#7B54F2 0%,#2BB5C9 100%);--line:#E4DEF6;--glass:rgba(255,255,255,.62);
  --head:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;--body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;max-width:1120px;margin:0 auto;padding:clamp(14px,3vw,28px);border-radius:32px;color:var(--ink);font:400 15px/1.6 var(--body);
  background:radial-gradient(900px 420px at 0 0,#CFF6E5 0,transparent 60%),radial-gradient(800px 480px at 100% 100%,#DCD0FA 0,transparent 60%),linear-gradient(160deg,#E3F8EE 0%,#EFF1FB 50%,#E8E0FB 100%)}
.fn *,.fn *::before,.fn *::after{box-sizing:border-box}
.fn [hidden]{display:none!important}
.fn h1,.fn h2,.fn h3{font-family:var(--head);font-stretch:85%;color:var(--ink);margin:0;line-height:1.08;letter-spacing:-.03em}
.fn h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:800}
.fn h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700}
.fn h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.fn p{margin:0}
.fn :focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.fn .fn-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.fn .fn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fn .fn-eyebrow{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#3B5C58;margin-bottom:12px}
.fn .fn-sub{color:var(--muted)}
.fn .fn-first-gap{margin-top:18px}

/* top bar */
.fn-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 6px 14px;font-size:.78rem;color:var(--muted)}
.fn .fn-logo{font:800 .95rem var(--head);font-stretch:85%;color:var(--ink);letter-spacing:-.01em}

/* panel kaca */
.fn .fn-panel{margin-top:18px;padding:clamp(20px,3.5vw,32px);background:var(--glass);border:1px solid rgba(255,255,255,.9);border-radius:28px;box-shadow:0 14px 40px rgba(110,90,200,.08)}
.fn .fn-panel--tight{margin-top:0}
.fn .fn-panel h2{margin-bottom:6px}

/* hero */
.fn .fn-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(22px,4vw,48px);align-items:center;padding:clamp(24px,4.5vw,52px);border-radius:30px;border:1px solid rgba(255,255,255,.8);overflow:hidden;
  background:radial-gradient(500px 300px at 90% 0,rgba(255,255,255,.55),transparent 70%),linear-gradient(120deg,#BDF2DD 0%,#CFD9F6 55%,#D8C9F8 100%);box-shadow:0 20px 50px rgba(110,90,200,.12)}
.fn .fn-spark{position:absolute;top:22px;right:28px;width:76px;height:76px;pointer-events:none}
.fn .fn-hero__copy,.fn .fn-hero .fn-card{position:relative}
.fn .fn-lead{margin-top:18px;max-width:54ch;color:#3F5F5B}
.fn .fn-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.fn .fn-pills span{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);font-size:.78rem;font-weight:600;color:var(--ink)}
.fn .fn-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:24px}
.fn .fn-note{font-size:.85rem;color:var(--muted)}

/* kartu form */
.fn .fn-card{display:grid;gap:12px;padding:clamp(20px,3vw,26px);background:rgba(255,255,255,.82);border:1px solid #fff;border-radius:22px;box-shadow:0 14px 40px rgba(110,90,200,.14);backdrop-filter:blur(8px)}
.fn .fn-card h2{font-size:1.45rem}
.fn label{display:grid;gap:6px;font-weight:600;font-size:.88rem}
.fn input[type=text],.fn input[type=password],.fn input[type=search],.fn select{width:100%;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:400 .95rem var(--body);box-shadow:none}
.fn input::placeholder{color:#8DA29E}
.fn .fn-hint{font-size:.8rem;color:var(--muted);margin-top:-4px}
.fn .fn-msg{min-height:1.3em;font-size:.88rem;font-weight:600}
.fn .fn-msg.is-err{color:#C0264B}
.fn .fn-msg.is-ok{color:var(--deep)}
.fn .fn-alt{font-size:.88rem;color:var(--muted)}
.fn .fn-solo{max-width:440px;margin:0 auto}

/* tombol */
.fn .fn-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 24px;border:1px solid transparent;border-radius:14px;font:700 .92rem/1 var(--body);cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.fn .fn-btn--sm{min-height:36px;padding:0 16px;border-radius:10px;font-size:.78rem}
.fn .fn-btn--primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(123,84,242,.28)}
.fn .fn-btn--primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 26px rgba(123,84,242,.36)}
.fn .fn-btn--primary:disabled{opacity:.6;cursor:wait}
.fn .fn-btn--soft{background:#EEEAFD;color:#5B3FD0;border-color:#DCD4F8}
.fn .fn-btn--soft:hover{background:#E3DDFB;color:#4C32B8}
.fn .fn-link{background:none;border:0;padding:0;color:var(--violet);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* kartu produk */
.fn .fn-pcard{display:flex;flex-direction:column;background:#fff;border:1px solid #EEE9FB;border-radius:20px;padding:8px;box-shadow:0 10px 28px rgba(110,90,200,.09)}
.fn .fn-pimg{position:relative;border-radius:14px;overflow:hidden;background:#EEF;aspect-ratio:4/3}
.fn .fn-pimg img{display:block;width:100%;height:100%;object-fit:cover}
.fn .fn-tag{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.92);font-size:.58rem;font-weight:700;letter-spacing:.1em;color:var(--ink)}
.fn .fn-pbody{display:grid;gap:8px;align-content:start;padding:14px 10px 10px;flex:1}
.fn .fn-kicker{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fn .fn-pdesc{font-size:.82rem;color:var(--muted);line-height:1.5}
.fn .fn-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* slider */
.fn .fn-track{display:flex;gap:16px;margin-top:22px;padding:4px 4px 18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fn .fn-track::-webkit-scrollbar{display:none}
.fn .fn-slide{flex:0 0 min(80%,300px);scroll-snap-align:start}
.fn .fn-sfoot{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;font-size:.76rem;color:var(--muted)}
.fn .fn-arrow{background:none;border:0;padding:2px 4px;color:var(--violet);font-size:1rem;font-weight:700;cursor:pointer}
.fn .fn-dots{display:flex;gap:6px;align-items:center}
.fn .fn-dot{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:#D3CCEE;cursor:pointer;transition:width .2s,background .2s}
.fn .fn-dot.is-on{width:24px;background:var(--deep)}


/* tombol < > slider: sepasang, berjejer, di kanan judul (desktop/mouse) */
.fn .fn-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.fn .fn-snav{display:none;flex:none;gap:10px}
.fn .fn-sbtn{display:inline-grid;place-items:center;width:46px;height:46px;padding:0 0 4px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font:400 1.9rem/1 var(--body);box-shadow:0 6px 18px rgba(80,60,170,.14);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.fn .fn-sbtn:hover{background:var(--grad);color:#fff;border-color:transparent;transform:scale(1.06)}
@media (hover:hover) and (pointer:fine){.fn .fn-snav{display:flex}.fn .fn-track{cursor:grab}}
.fn .fn-track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.fn .fn-slide img{-webkit-user-drag:none;user-select:none}

/* pencarian + grid */
.fn .fn-search{display:flex;align-items:center;gap:14px;padding:6px;background:var(--glass);border:1px solid rgba(255,255,255,.9);border-radius:18px}
.fn .fn-search input{border:0;background:#fff;min-height:46px}
.fn .fn-count{flex:none;padding-right:12px;font-size:.78rem;font-weight:700;color:#7A6A55;white-space:nowrap}
.fn .fn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:18px}
.fn .fn-ncard .fn-pbody{padding-bottom:12px}
.fn .fn-empty{margin-top:18px;padding:22px;background:rgba(255,255,255,.7);border:1px dashed #C9BFF0;border-radius:16px;color:var(--muted)}

/* filter member */
.fn .fn-filters{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;justify-content:space-between;margin-top:16px}
.fn .fn-chips{display:flex;flex-wrap:wrap;gap:8px}
.fn .fn-chip{min-height:36px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:600 .8rem var(--body);cursor:pointer}
.fn .fn-chip.is-on{background:var(--grad);border-color:transparent;color:#fff}
.fn .fn-nsel{min-width:200px}
.fn .fn-bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:14px 20px;margin-bottom:18px;background:var(--glass);border:1px solid rgba(255,255,255,.9);border-radius:20px}
.fn .fn-bar__act{display:flex;gap:8px}

/* langkah */
.fn .fn-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;counter-reset:s}
.fn .fn-steps li{display:grid;gap:8px;padding:20px;background:#fff;border:1px solid #EEE9FB;border-radius:18px;counter-increment:s;box-shadow:0 8px 22px rgba(110,90,200,.07)}
.fn .fn-steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;font:700 .85rem var(--body)}
.fn .fn-steps p{color:var(--muted);font-size:.88rem}

/* harga */
.fn .fn-price{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;margin-top:18px;padding:clamp(22px,4vw,36px);border-radius:28px;border:1px solid rgba(255,255,255,.85);background:linear-gradient(120deg,#C6F1DF 0%,#D9D2F8 100%);box-shadow:0 14px 40px rgba(110,90,200,.1)}
.fn .fn-price h2{font-size:clamp(2rem,5vw,3rem)}
.fn .fn-price ul{margin:0;padding-left:1.1em;display:grid;gap:6px;color:#2F4B47}

/* faq */
.fn .fn-faq{margin-top:18px;padding:clamp(20px,3.5vw,32px)}
.fn .fn-faq details{margin-top:10px;padding:14px 18px;background:var(--glass);border:1px solid rgba(255,255,255,.9);border-radius:16px}
.fn .fn-faq summary{cursor:pointer;font-weight:600}
.fn .fn-faq details p{margin-top:8px;color:var(--muted)}

/* modal + lightbox */
.fn .fn-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(18,49,45,.45);backdrop-filter:blur(6px)}
.fn .fn-modal__box{position:relative;display:grid;gap:14px;width:100%;max-width:460px;max-height:92vh;overflow:auto;padding:28px;background:#fff;border:1px solid #fff;border-radius:26px;box-shadow:0 30px 80px rgba(60,40,140,.3)}
.fn .fn-modal__box>div{display:grid;gap:14px}
.fn .fn-modal form{display:grid;gap:12px}
.fn .fn-x{position:absolute;top:10px;right:12px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.9);font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink)}
.fn .fn-qris{display:grid;justify-items:center;gap:8px;padding:14px;background:#F4F1FD;border-radius:18px}
.fn .fn-qris img{width:100%;max-width:240px;height:auto;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px}
.fn .fn-quote{margin:0;padding:14px 16px;background:#F4F1FD;border-left:4px solid var(--violet);border-radius:10px;font-weight:600}
.fn .fn-lightbox{max-width:520px;gap:12px}
.fn .fn-points{margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:.88rem;color:var(--muted)}
.fn .fn-points:empty{display:none}
.fn-lock{overflow:hidden}

@media (max-width:860px){
  .fn .fn-hero{grid-template-columns:1fr}
  .fn .fn-price{grid-template-columns:1fr}
  .fn .fn-spark{width:52px;height:52px}
}

/* ===== MOBILE: penuh layar, besar, jelas ===== */
@media (max-width:640px){
  .fn{position:relative;left:50%;right:50%;width:100vw;max-width:none;margin-left:-50vw;margin-right:-50vw;min-height:100vh;border-radius:0;overflow-x:clip;font-size:16px;
    padding:14px max(16px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .fn-top{padding:2px 2px 12px;font-size:.78rem}
  .fn .fn-logo{font-size:1.05rem}
  .fn .fn-eyebrow{font-size:.7rem}
  .fn h1{font-size:clamp(2.1rem,10vw,2.8rem)}
  .fn h2{font-size:1.55rem}
  .fn .fn-hero{padding:24px 18px;border-radius:24px;gap:24px}
  .fn .fn-spark{top:14px;right:14px;width:44px;height:44px}
  .fn .fn-lead{font-size:1rem}
  .fn .fn-pills span{font-size:.82rem;padding:8px 14px}
  .fn .fn-cta{display:grid;gap:10px}
  .fn .fn-cta .fn-btn{width:100%}
  .fn .fn-note{text-align:center}
  .fn .fn-panel,.fn .fn-faq{padding:20px 16px;border-radius:22px}
  .fn .fn-card{padding:20px 18px;border-radius:20px}
  .fn input[type=text],.fn input[type=password],.fn input[type=search],.fn select{min-height:52px;font-size:16px}
  .fn .fn-btn{min-height:52px;font-size:1rem}
  .fn .fn-btn--sm{min-height:46px;font-size:.9rem}
  .fn .fn-actions .fn-btn{flex:1 1 0}
  .fn .fn-kicker{font-size:.7rem}
  .fn .fn-tag{font-size:.66rem}
  .fn .fn-pdesc{font-size:.92rem}
  .fn .fn-pbody h3{font-size:1.2rem}
  .fn .fn-slide{flex-basis:84%}
  .fn .fn-sfoot{justify-content:center;text-align:center;font-size:.82rem}
  .fn .fn-grid{grid-template-columns:1fr}
  .fn .fn-search{padding:5px}
  .fn .fn-count{font-size:.8rem;padding-right:10px}
  .fn .fn-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none;width:calc(100% + 32px)}
  .fn .fn-chips::-webkit-scrollbar{display:none}
  .fn .fn-chip{flex:none;min-height:42px;font-size:.88rem}
  .fn .fn-filters{display:grid;gap:12px}
  .fn .fn-nsel{min-width:0}
  .fn .fn-bar{display:grid;gap:12px;padding:16px}
  .fn .fn-bar__act .fn-btn{flex:1}
  .fn .fn-price{padding:24px 18px;border-radius:22px}
  .fn .fn-price .fn-btn{width:100%}
  .fn .fn-faq summary{font-size:1rem;padding:4px 0}
  /* modal & preview: layar penuh */
  .fn .fn-modal{padding:0;align-items:stretch;background:#fff}
  .fn .fn-modal__box{max-width:none;max-height:none;height:100vh;height:100dvh;border-radius:0;box-shadow:none;align-content:start;
    padding:64px max(20px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  .fn .fn-x{top:max(12px,env(safe-area-inset-top));right:14px;width:46px;height:46px;background:#F1EEFB;font-size:1.9rem}
  .fn .fn-qris img{max-width:260px}
  .fn .fn-lightbox .fn-actions{position:sticky;bottom:0;padding-top:8px}
}

@media (prefers-reduced-motion:reduce){
  .fn *{transition:none!important;scroll-behavior:auto!important}
}