/* IMLoket Website Optimization V2 — trust, contact, legal, conversion */
.trust-section{padding:76px 5vw 68px;background:linear-gradient(180deg,#f7fbf8 0%,#fff 100%)}
.trust-wrap{max-width:1180px;margin:0 auto}.trust-heading{text-align:center;max-width:760px;margin:0 auto 28px}.trust-heading h2{margin:8px 0 10px}.trust-heading p{color:#64748b;line-height:1.75}.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.trust-card{background:#fff;border:1px solid #e4eee8;border-radius:18px;padding:20px;box-shadow:0 10px 28px rgba(19,75,44,.05)}.trust-card .trust-icon{width:42px;height:42px;border-radius:12px;background:#eaf8f0;color:#0b8b50;display:grid;place-items:center;margin-bottom:14px}.trust-card .ui-icon{width:21px;height:21px}.trust-card h3{margin:0 0 7px;font-size:17px}.trust-card p{margin:0;color:#667085;line-height:1.65;font-size:14px}.trust-contact{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}.contact-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid #dce9e2;border-radius:999px;padding:8px 11px;color:#174b34;text-decoration:none;font-size:12px;font-weight:700;background:#fff;transition:.18s ease}.contact-chip:hover{transform:translateY(-2px);border-color:#9ed4b7;background:#f6fcf8}.contact-chip .ui-icon{width:15px;height:15px}.social-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;justify-content:center}.social-link{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 14px;background:#123e2c;color:#fff;text-decoration:none;font-weight:750;font-size:13px}.social-link:hover{filter:brightness(1.07);transform:translateY(-2px)}
.footer-links{grid-template-columns:repeat(4,minmax(0,1fr))!important}.footer-links a{word-break:break-word}.footer-contact{font-style:normal}.footer-contact a{display:block}.footer-legal{display:flex;gap:14px;flex-wrap:wrap}.footer-legal a{color:inherit;text-decoration:none}.footer-legal a:hover{text-decoration:underline}
.mobile-download-bar{display:none}
.legal-page{max-width:960px;margin:0 auto;padding:54px 5vw 80px}.legal-page h1{font-size:clamp(30px,5vw,48px);margin:0 0 8px}.legal-page .legal-updated{color:#6b7280;margin-bottom:28px}.legal-page article{background:#fff;border:1px solid #e5ece8;border-radius:20px;padding:28px;box-shadow:0 12px 30px rgba(20,70,43,.05)}.legal-page h2{margin-top:28px;font-size:21px}.legal-page h2:first-child{margin-top:0}.legal-page p,.legal-page li{color:#4b5563;line-height:1.8}.legal-page ul{padding-left:20px}.legal-page a{color:#08794a}.legal-back{display:inline-flex;margin-bottom:20px;color:#08794a;font-weight:700;text-decoration:none}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr)}.footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){.trust-section{padding:58px 20px}.trust-grid{grid-template-columns:1fr}.footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 18px;align-items:start}.footer-links>div{min-width:0}.footer-links b{display:block;margin-bottom:8px}.footer-links a{line-height:1.5}.footer-contact a{overflow-wrap:anywhere}.mobile-download-bar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:80;align-items:center;justify-content:space-between;gap:12px;background:rgba(15,67,42,.96);backdrop-filter:blur(10px);color:#fff;padding:10px 12px;border-radius:16px;box-shadow:0 16px 38px rgba(6,54,31,.25)}.mobile-download-bar span{font-size:12px;line-height:1.35}.mobile-download-bar b{display:block;font-size:13px}.mobile-download-bar a{white-space:nowrap;background:#fff;color:#0b7046;text-decoration:none;font-weight:800;font-size:12px;padding:9px 12px;border-radius:11px}.legal-page{padding:36px 18px 90px}.legal-page article{padding:20px}}

/* =========================================================
   IMLoket V2.2 — Mobile horizontal overflow guard
   ========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

@supports (overflow:clip){
  html,
  body{
    overflow-x:clip;
  }
}

body,
main,
header,
footer,
section,
.footer-main,
.footer-links,
.trust-section,
.trust-wrap{
  min-width:0;
  max-width:100%;
}

img,
svg,
video,
canvas{
  max-width:100%;
}

.footer-main,
.footer-links,
.footer-links>div,
.footer-contact,
.mobile-download-bar{
  box-sizing:border-box;
}

.footer-links>div,
.footer-links a,
.footer-contact,
.footer-contact a{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media(max-width:640px){
  .footer-main{
    overflow-x:hidden;
  }

  .footer-links{
    width:100%;
    max-width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .mobile-download-bar{
    width:auto;
    max-width:calc(100% - 24px);
  }

  /* Elemen dekoratif boleh keluar secara visual, tapi tidak boleh
     memperlebar viewport / membuat halaman bisa digeser horizontal. */
  .hero,
  .hero-art,
  .why,
  .partner,
  .final,
  .faq,
  .trust-section{
    overflow-x:clip;
  }
}

@supports not (overflow:clip){
  @media(max-width:640px){
    .hero,
    .hero-art,
    .why,
    .partner,
    .final,
    .faq,
    .trust-section{
      overflow-x:hidden;
    }
  }
}

/* =========================================================
   IMLoket V2.3 — CTA attention pulse
   ========================================================= */
.hero-primary,
.faq-cta a,
.mobile-download-bar a{
  position:relative;
  isolation:isolate;
  animation:im-cta-attention 4.8s ease-in-out infinite;
  will-change:transform,box-shadow;
}

.hero-primary::after,
.faq-cta a::after,
.mobile-download-bar a::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:2px solid currentColor;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  animation:im-cta-ring 4.8s ease-out infinite;
}

@keyframes im-cta-attention{
  0%,68%,100%{transform:translateY(0) scale(1)}
  72%{transform:translateY(-1px) scale(1.025)}
  76%{transform:translateY(0) scale(1)}
  80%{transform:translateY(-1px) scale(1.018)}
  84%{transform:translateY(0) scale(1)}
}

@keyframes im-cta-ring{
  0%,68%,100%{opacity:0;transform:scale(.98)}
  72%{opacity:.34;transform:scale(1)}
  82%{opacity:0;transform:scale(1.12)}
}

.faq-cta a,
.faq-cta a::after{animation-delay:.8s}

.mobile-download-bar a,
.mobile-download-bar a::after{animation-delay:1.35s}

@media(prefers-reduced-motion:reduce){
  .hero-primary,
  .faq-cta a,
  .mobile-download-bar a,
  .hero-primary::after,
  .faq-cta a::after,
  .mobile-download-bar a::after{
    animation:none!important;
  }
}

/* =========================================================
   IMLoket V2.3.2 — Mobile "Daftar Jadi Mitra" attention
   ========================================================= */

/* Hero: tombol Daftar Jadi Mitra */
.hero-secondary{
  position:relative;
  isolation:isolate;
  animation:im-daftar-attention 5.2s ease-in-out infinite;
}

/* Mobile menu: tombol Daftar Jadi Mitra */
.mobile-menu-cta{
  position:relative;
  isolation:isolate;
  overflow:visible;
  animation:im-daftar-attention 5.2s ease-in-out .9s infinite;
}

.hero-secondary::after,
.mobile-menu-cta::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:2px solid rgba(7,155,85,.42);
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  animation:im-daftar-ring 5.2s ease-out infinite;
}

.mobile-menu-cta::after{
  border-color:rgba(7,155,85,.55);
  animation-delay:.9s;
}

@keyframes im-daftar-attention{
  0%,66%,100%{
    transform:translateY(0) scale(1);
  }
  71%{
    transform:translateY(-1px) scale(1.03);
  }
  76%{
    transform:translateY(0) scale(1);
  }
  81%{
    transform:translateY(-1px) scale(1.02);
  }
  86%{
    transform:translateY(0) scale(1);
  }
}

@keyframes im-daftar-ring{
  0%,66%,100%{
    opacity:0;
    transform:scale(.98);
  }
  71%{
    opacity:.42;
    transform:scale(1);
  }
  84%{
    opacity:0;
    transform:scale(1.11);
  }
}

@media(max-width:640px){
  /* Supaya efek ring tidak terpotong di area CTA hero. */
  .hero .cta{
    overflow:visible;
  }

  /* Tombol Daftar dibuat sedikit lebih menonjol di HP. */
  .hero-secondary{
    box-shadow:0 8px 20px rgba(7,155,85,.12);
  }

  .mobile-menu-cta{
    box-shadow:0 8px 20px rgba(7,155,85,.16);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-secondary,
  .mobile-menu-cta,
  .hero-secondary::after,
  .mobile-menu-cta::after{
    animation:none!important;
  }
}


/* IMLoket 2026-10-11 — support contact + Trust/FAQ rhythm optimization */
/* Reduce the compounded whitespace between adjacent Trust and FAQ sections. */
.trust-section{padding-bottom:40px}
.trust-section + .faq{padding-top:36px}
.trust-contact .contact-chip[href^="mailto:"]{overflow-wrap:anywhere}

@media(max-width:900px){
  .trust-section{padding-bottom:34px}
  .trust-section + .faq{padding-top:32px}
}

@media(max-width:640px){
  .trust-section{padding-bottom:30px}
  .trust-section + .faq{padding-top:28px}
  .trust-contact{gap:7px}
  .contact-chip{max-width:100%}
}