*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:#17385f}header{height:78px;display:flex;align-items:center;gap:25px;padding:8px 5vw;position:sticky;top:0;background:#fffd;backdrop-filter:blur(10px);z-index:20;border-bottom:1px solid #e4edf2}header img,footer img{width:210px}nav{display:flex;gap:20px;margin-left:auto}a{text-decoration:none;color:inherit;font-weight:800}.cta{background:#ef5c51;color:#fff;padding:13px 20px;border-radius:99px;display:inline-block}.hero{min-height:570px;background:linear-gradient(135deg,#fff9e9,#edf9ff);display:grid;grid-template-columns:1.1fr .7fr;align-items:center;padding:55px 8vw;gap:30px}.hero h1{font-size:clamp(45px,6vw,80px);line-height:.98;margin:14px 0}.hero em{color:#ef5c51;font-style:normal}.hero p{font-size:21px;max-width:650px;line-height:1.6}.hero>img{width:min(390px,90%);justify-self:center}.head{text-align:center;max-width:850px;margin:0 auto 38px}.head>b,.support>div>b{color:#ef5c51;letter-spacing:.08em}.head h2{font-size:clamp(32px,4vw,52px);margin:10px 0}.head p{color:#607386;font-size:18px;line-height:1.65}.check,.demo,.apps,.info{padding:85px 7vw}.checkgrid{max-width:1050px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:13px}.checkgrid label{display:flex;align-items:center;gap:16px;border:2px solid #e0e9ef;border-radius:18px;padding:17px;background:#fff;cursor:pointer;font-weight:750}.checkgrid label:has(input:checked){border-color:#44aa93;background:#effcf8}.checkgrid input{width:22px;height:22px}.checkgrid i{font-style:normal;font-size:27px;min-width:50px;text-align:center}.bridge{max-width:900px;margin:30px auto 0;text-align:center;background:#17385f;color:white;padding:20px;border-radius:18px;font-size:19px}.demo{background:#fff8e8}.theater{max-width:1080px;margin:auto;position:relative}.screen{height:560px;background:#fff;border:10px solid #17385f;border-radius:26px;box-shadow:0 24px 50px #17385f26;overflow:hidden}.slide{display:none;height:100%;padding:40px 50px 30px 230px;position:relative}.slide.active{display:block;animation:pop .35s ease}@keyframes pop{from{opacity:.2;transform:scale(.98)}to{opacity:1;transform:none}}.guide{position:absolute;left:18px;bottom:20px;width:190px;max-height:260px;object-fit:contain}.speech{background:#fff;border:3px solid #17385f;border-radius:24px;padding:16px 20px;font-size:19px;line-height:1.4;position:absolute;left:165px;top:22px;max-width:450px}.board{margin-top:95px;text-align:center}.board h3{font-size:25px;margin:0 0 22px;color:#ef5c51}.five{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.five div{background:#eef8fb;padding:15px 7px;border-radius:14px;min-height:145px}.five b{display:block;background:#ffc84a;width:35px;height:35px;line-height:35px;border-radius:50%;margin:auto}.five span,.five strong{display:block;margin-top:10px}.five strong{font-size:14px}.paths{display:grid;grid-template-columns:1fr 1fr;gap:25px}.paths div{background:#eef8fb;border-radius:18px;padding:28px;font-size:21px;line-height:1.7}.paths span{display:block;margin-top:12px;color:#ef5c51;font-weight:800}.area{width:360px;height:220px;margin:auto;display:grid;grid-template-columns:5fr 1fr;grid-template-rows:5fr 1fr;border:4px solid #17385f}.area i{display:grid;place-items:center;border:1px solid #17385f;font-style:normal;font-size:27px;font-weight:900;background:#dff6ef}.formula{font-size:23px;margin-top:18px}.fraction{display:flex;align-items:center;justify-content:center;gap:20px}.fraction div{min-width:125px}.fraction span{display:grid;place-items:center;background:#dff6ef;border:3px solid #44aa93;height:85px;font-size:28px;font-weight:900}.fraction small{display:block;margin-top:7px}.fraction strong{font-size:30px;color:#ef5c51}.storytext{font-size:22px}.bar{display:flex;max-width:520px;margin:25px auto 10px}.bar i{flex:1;background:#dff6ef;border:3px solid #44aa93;padding:25px;font-style:normal;font-size:25px;font-weight:900}.para{width:360px;height:180px;margin:auto;background:#75c5d7;clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);position:relative}.para:after{content:'';position:absolute;width:4px;height:230px;background:#17385f;transform:rotate(-53deg);left:180px;top:-25px}.prev,.next{position:absolute;top:48%;width:52px;height:52px;border:0;border-radius:50%;background:#ef5c51;color:#fff;font-size:35px;cursor:pointer}.prev{left:-25px}.next{right:-25px}.dots{text-align:center;margin-top:17px}.dots i{display:inline-block;width:11px;height:11px;border-radius:50%;background:#c7d3dc;margin:4px;cursor:pointer}.dots i.on{background:#ef5c51}.apps{background:#f5fbfd}.appgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1050px;margin:auto}.appgrid article{background:#fff;border-radius:22px;padding:27px;border:1px solid #dfeaf0}.appgrid img{height:70px;max-width:270px;object-fit:contain}.appgrid h3{font-size:25px;margin:15px 0 8px}.appgrid p{color:#607386;line-height:1.6}.support{padding:80px 9vw;background:#17385f;color:#fff;display:grid;grid-template-columns:1fr .5fr;align-items:center}.support h2{font-size:45px;margin:10px 0}.support p{font-size:18px;line-height:1.65;color:#d9e7f2}.support>img{width:320px;justify-self:center}.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}.tri span{background:#fff;color:#17385f;border-radius:16px;padding:18px;text-align:center;font-size:27px}.tri b,.tri small{display:block;font-size:14px;margin-top:7px}.infogrid{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.infogrid article{border:1px solid #dfeaf0;border-radius:20px;padding:22px}.infogrid h3{color:#ef5c51}.fly{padding:70px 9vw;display:grid;grid-template-columns:1fr .8fr;gap:45px;align-items:center;background:#fff8e8}.fly h2{font-size:38px}.fly p{font-size:18px;line-height:1.7}.fly img{width:100%;max-height:430px;object-fit:cover;object-position:top;border-radius:24px}.trial{padding:65px 10vw;background:#ffc84a;display:flex;align-items:center;justify-content:center;gap:50px}.trial img{width:220px}.trial h2{font-size:55px;line-height:1;margin:8px 0}.trial em{font-style:normal;color:#ef5c51}footer{background:#102d50;color:#fff;padding:28px 6vw;display:flex;align-items:center;justify-content:space-between}footer img{background:#fff;border-radius:8px;padding:5px}
@media(max-width:800px){header nav{display:none}header{justify-content:space-between}header img{width:170px}.hero{grid-template-columns:1fr;text-align:center;padding:40px 6vw}.hero>img{order:-1;width:180px}.check,.demo,.apps,.info{padding:60px 5vw}.checkgrid,.appgrid,.infogrid{grid-template-columns:1fr}.screen{height:650px}.slide{padding:25px 18px 160px}.guide{width:130px;left:10px;bottom:10px}.speech{left:115px;right:10px;top:auto;bottom:28px;font-size:15px}.board{margin-top:5px}.five{grid-template-columns:1fr 1fr}.five div{min-height:100px}.paths{grid-template-columns:1fr;gap:10px}.area,.para{width:260px}.fraction{gap:7px;flex-wrap:wrap}.fraction div{min-width:90px}.prev{left:-8px}.next{right:-8px}.support,.fly{grid-template-columns:1fr;text-align:center}.support>img{width:180px}.tri{grid-template-columns:1fr}.trial{flex-direction:column;text-align:center}.trial img{width:150px}.trial h2{font-size:45px}footer{flex-direction:column;gap:15px;text-align:center}}
.source{max-width:96%;max-height:520px;object-fit:contain}.mapi{position:absolute;left:28px;bottom:20px;display:flex;align-items:center;gap:12px;max-width:760px}.mapi img{width:95px;height:95px;object-fit:contain}.mapi p{margin:0;background:#fff;border:3px solid var(--navy);border-radius:20px;padding:13px 17px;font-size:17px;line-height:1.45}.appcard{border:1px solid var(--line);background:#fff;border-radius:22px;padding:24px;text-align:left;cursor:pointer;color:var(--ink)}.appcard img{width:100%;height:72px;object-fit:contain;object-position:left}.appcard span{color:var(--red);font-weight:950}.appviewer{display:none;max-width:1000px;margin:28px auto 0;border:1px solid var(--line);border-radius:25px;padding:20px;background:#fff}.appviewer.open{display:block}.viewerTop{display:flex;justify-content:space-between;align-items:center;font-weight:950;color:var(--red)}.viewerTop button{border:0;background:var(--navy);color:#fff;border-radius:50%;width:36px;height:36px}.appviewer>img{display:block;max-width:100%;max-height:570px;margin:15px auto;object-fit:contain}.cycle{background:#f4f9fc}.cyclegrid{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.cyclegrid article{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}.cyclegrid article>b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#ffd166}.cyclegrid p{font-size:14px;line-height:1.55;color:var(--muted)}.record{max-width:900px;margin:28px auto 0;background:var(--navy);color:#fff;border-radius:24px;padding:24px;display:flex;align-items:center;gap:22px}.record img{width:120px}.record span{color:#ffd166;font-weight:950}.record p{color:#dce9f5;line-height:1.6}@media(max-width:820px){.source{max-height:410px}.mapi{left:12px;right:12px;bottom:12px}.mapi img{width:70px;height:70px}.mapi p{font-size:14px}.cyclegrid{display:flex;overflow:auto}.cyclegrid article{min-width:72vw}.record{align-items:flex-start}.record img{width:85px}}

/* V5.4 readability + official MAPI artwork */
.screen{height:650px}
.slide{padding:24px 28px 150px}
.source{max-width:98%;max-height:500px;display:block;margin:0 auto}
.mapi{
  left:28px;right:28px;bottom:18px;max-width:none;
  align-items:flex-end;gap:18px;z-index:5
}
.mapi img{width:125px;height:125px;flex:0 0 125px}
.mapi p{
  flex:1;
  font-size:clamp(25px,2.35vw,36px);
  line-height:1.28;
  font-weight:850;
  padding:20px 28px;
  border-width:4px;
  border-radius:26px;
  box-shadow:0 10px 28px #17385f24
}

/* Kartu Siswa: strong contrast instead of pale text on pale background */
.record{
  background:#fff8df !important;
  color:#17385f !important;
  border:3px solid #ffc84a;
  box-shadow:0 14px 35px #17385f18
}
.record img{width:145px;height:145px;object-fit:contain}
.record span{color:#ef6a2f !important;font-size:18px;letter-spacing:.06em}
.record h3{color:#17385f !important;font-size:27px;margin:7px 0 8px}
.record p{color:#315579 !important;font-size:17px;line-height:1.6;margin:0}

/* Backpack MAPI as the site's key visual */
.hero>img{width:min(430px,92%);filter:drop-shadow(0 18px 18px #17385f1b)}
.trial img{width:240px;filter:drop-shadow(0 12px 12px #17385f18)}

@media(max-width:820px){
  .screen{height:700px}
  .slide{padding:16px 12px 175px}
  .source{max-height:485px}
  .mapi{left:10px;right:10px;bottom:10px;gap:8px}
  .mapi img{width:78px;height:78px;flex-basis:78px}
  .mapi p{font-size:20px;padding:15px 16px;border-width:3px}
  .record{flex-direction:column;align-items:center;text-align:center}
  .record img{width:110px;height:110px}
  .record h3{font-size:23px}
}

/* V5.5 Google Maps + WhatsApp */
.contactBtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.contactBtns a{display:inline-flex;align-items:center;justify-content:center;padding:12px 15px;border-radius:999px;font-weight:950;font-size:13px}
.mapBtn{background:#173f70;color:#fff}
.waBtn{background:#25D366;color:#073d20}
.floatingWA{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:8px;background:#25D366;color:#073d20;padding:14px 18px;border-radius:999px;font-weight:950;box-shadow:0 12px 32px #0c4d2738}
.floatingWA span{font-size:14px}
@media(max-width:820px){.floatingWA{right:12px;bottom:12px;padding:13px}.floatingWA span{display:none}.contactBtns{flex-direction:column}.contactBtns a{width:100%}}

/* V5.7 — use the exact hanamaru mark used inside the SANSU app */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-copy{position:relative;z-index:3}
.hero>img{position:relative;z-index:3}

/* First: hanamaru appears boldly in the center, using the same 💮 mark as the app. */
.hero-hanamaru-intro{
  position:absolute;
  z-index:20;
  left:50%;
  top:44%;
  width:min(44vw,470px);
  height:min(44vw,470px);
  display:grid;
  place-items:center;
  font-size:min(34vw,360px);
  line-height:1;
  transform:translate(-50%,-50%) rotate(-8deg);
  filter:drop-shadow(0 18px 28px rgba(32,72,103,.22));
  pointer-events:none;
  animation:hero-hanamaru-intro 2.15s cubic-bezier(.2,.85,.25,1.1) both;
}

/* Then it remains faintly behind the main copy. */
.hero-hanamaru-watermark{
  position:absolute;
  z-index:1;
  left:34%;
  top:50%;
  font-size:min(43vw,470px);
  line-height:1;
  opacity:0;
  transform:translate(-50%,-50%) rotate(-8deg);
  pointer-events:none;
  animation:hero-hanamaru-watermark 1s ease 1.45s forwards;
}

@keyframes hero-hanamaru-intro{
  0%   {opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(-20deg)}
  18%  {opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(-8deg)}
  38%  {opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}
  64%  {opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}
  100% {opacity:0;transform:translate(-61%,-50%) scale(.76) rotate(-8deg)}
}
@keyframes hero-hanamaru-watermark{
  from{opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-8deg)}
  to{opacity:.105;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}
}
@media (prefers-reduced-motion:reduce){
  .hero-hanamaru-intro{display:none}
  .hero-hanamaru-watermark{animation:none;opacity:.105}
}
@media(max-width:820px){
  .hero-hanamaru-intro{top:31%;font-size:min(66vw,310px)}
  .hero-hanamaru-watermark{left:50%;top:55%;font-size:min(78vw,370px)}
}

/* V5.8 — mobile kamishibai layout
   Desktop remains unchanged. On phones the material and MAPI dialogue
   become two compact stacked zones instead of a tall fixed theater. */
@media(max-width:820px){
  .demo{padding-left:14px;padding-right:14px}
  .theater{width:100%;max-width:100%;padding:0 2px}
  .screen{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto;
    overflow:hidden;
    border-radius:22px;
    padding:0;
  }
  .slide{
    position:relative !important;
    inset:auto !important;
    display:none !important;
    height:auto !important;
    min-height:0 !important;
    padding:12px 10px 14px !important;
    flex-direction:column;
    justify-content:flex-start;
    gap:10px;
  }
  .slide.active{display:flex !important}
  .source{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    margin:0 auto !important;
    border-radius:12px;
  }
  .mapi{
    position:relative !important;
    left:auto !important;right:auto !important;bottom:auto !important;
    width:100%;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:68px 1fr;
    align-items:center;
    gap:8px;
    margin:0 !important;
  }
  .mapi img{
    width:68px !important;height:68px !important;
    flex-basis:auto !important;
    object-fit:contain;
    align-self:end;
  }
  .mapi p{
    width:100%;
    margin:0 !important;
    padding:13px 14px !important;
    border-width:3px !important;
    border-radius:18px !important;
    font-size:clamp(17px,4.7vw,21px) !important;
    line-height:1.25 !important;
    font-weight:850;
  }
  .prev,.next{
    top:44% !important;
    width:44px !important;height:44px !important;
    font-size:29px !important;
    z-index:10;
  }
  .prev{left:-5px !important}
  .next{right:-5px !important}
  .dots{margin-top:12px}
  .dots button{width:10px;height:10px;margin:4px}
}
@media(max-width:420px){
  .mapi{grid-template-columns:58px 1fr}
  .mapi img{width:58px !important;height:58px !important}
  .mapi p{font-size:17px !important;padding:11px 12px !important}
}

/* V5.9 — logo-style WhatsApp floating button */
.floatingWA.waLogoBtn{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:90;
  width:64px;
  height:64px;
  padding:0;
  border-radius:50% 50% 50% 18%;
  background:#25D366;
  display:grid;
  place-items:center;
  box-shadow:0 12px 30px rgba(20,105,58,.28);
  animation:wa-pop .65s cubic-bezier(.2,.9,.3,1.25) .8s both, wa-float 3.2s ease-in-out 1.5s infinite;
  overflow:visible;
}
.floatingWA.waLogoBtn svg{width:42px;height:42px;display:block}
.waBubble{fill:none;stroke:#fff;stroke-width:4;stroke-linejoin:round}
.waPhone{fill:#fff;transform:scale(.72);transform-origin:center}
.waTip{
  position:absolute;
  right:76px;
  top:50%;
  transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  background:#173f70;
  color:#fff;
  padding:9px 13px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  box-shadow:0 8px 20px rgba(23,63,112,.2);
}
.waLogoBtn:hover .waTip{opacity:1;transform:translateY(-50%) translateX(0)}
@keyframes wa-pop{from{opacity:0;transform:scale(.35) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes wa-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.floatingWA.waLogoBtn{animation:none}}
@media(max-width:820px){
  .floatingWA.waLogoBtn{right:14px;bottom:14px;width:56px;height:56px}
  .floatingWA.waLogoBtn svg{width:37px;height:37px}
  .waTip{display:none}
}