/* VYSESTORE.ID - Entry loader & welcome community popup */
.vyse-entry-loader{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#f9f7ff,#f4efff 68%,#ede6ff);transition:opacity .24s ease,visibility .24s ease}
.vyse-entry-loader.is-exiting{opacity:0;visibility:hidden;pointer-events:none}
.vyse-entry-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:#23143a}
.vyse-entry-logo-wrap{width:84px;height:84px;display:grid;place-items:center;margin-bottom:7px;border-radius:23px;background:#fff;box-shadow:0 12px 45px #6e38ca24;animation:vyseEntryFloat 1.35s ease-in-out infinite alternate}
.vyse-entry-logo-wrap img{display:block;width:64px;height:64px;object-fit:contain}
.vyse-entry-content strong{font-size:21px;font-weight:850;letter-spacing:-.65px}
.vyse-entry-content>span{font-size:12px;color:#756b85}
.vyse-entry-progress{width:154px;height:5px;overflow:hidden;border-radius:100px;margin-top:14px;background:#ddd0f8}
.vyse-entry-progress i{display:block;width:45%;height:100%;border-radius:100px;background:linear-gradient(90deg,#6d37d3,#b78aff);animation:vyseEntryLoad .85s ease-in-out infinite alternate}
@keyframes vyseEntryFloat{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes vyseEntryLoad{from{transform:translateX(-80%)}to{transform:translateX(220%)}}
.vyse-promo-overlay[hidden],.vyse-promo-custom-art[hidden],.vyse-promo-button[hidden]{display:none!important}
.vyse-promo-overlay{position:fixed;inset:0;z-index:99990;background:rgba(13,8,25,.67);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;overscroll-behavior:contain;animation:vysePromoIn .22s ease-out}
.vyse-promo-dialog{position:relative;width:min(100%,410px);margin:auto;background:#fff;color:#191226;border-radius:18px;box-shadow:0 26px 84px rgba(14,8,39,.33);overflow:hidden;flex:none}
.vyse-promo-close-top{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;display:grid;place-items:center;background:rgba(25,13,50,.74);color:#fff;border:1px solid #ffffff50;border-radius:50%;cursor:pointer}
.vyse-promo-close-top:hover{background:rgba(16,7,35,.95)}
.vyse-promo-art{position:relative;min-height:355px;aspect-ratio:4 / 5;overflow:hidden;background:#2b1064}
.vyse-promo-illustration{position:absolute;inset:0;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:22px 22px 16px;background:radial-gradient(circle at 0 20%,#884aff 0,transparent 43%),radial-gradient(circle at 99% 78%,#b751ee 0,transparent 48%),linear-gradient(135deg,#260c65,#5923aa 50%,#260b67);color:white}
.vyse-promo-illustration:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.45;background-image:linear-gradient(135deg,transparent 46%,#a280ee30 47%,#a280ee30 49%,transparent 50%),linear-gradient(35deg,transparent 70%,#ede1ff20 71%,transparent 72%);background-size:52px 52px,82px 82px}
.vyse-promo-light{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;border:2px solid #d3b6ff30;transform:rotate(-28deg)}
.vyse-promo-light-a{width:300px;height:300px;top:-125px;right:-130px}.vyse-promo-light-b{width:380px;height:380px;bottom:-230px;left:-90px}
.vyse-promo-art-top{display:flex;align-items:center;gap:8px;min-width:0}.vyse-promo-art-top img{width:30px;height:30px;object-fit:contain;flex:none}.vyse-promo-art-top b{font-weight:900;letter-spacing:-.5px;font-size:15px}.vyse-promo-art-top span{font-size:8px;border:1px solid #fff7;border-radius:50px;padding:4px 6px;margin-left:auto;font-weight:800;letter-spacing:.6px}
.vyse-promo-art-center{text-align:center;max-width:100%;text-shadow:0 2px 11px #150d52aa;display:flex;align-items:center;flex-direction:column;gap:10px;margin:18px 0 12px}
.vyse-promo-art-center small{background:#fff1;box-shadow:0 0 0 1px #fff4;border-radius:50px;padding:7px 13px;font-size:10px;font-weight:850;letter-spacing:1px}
.vyse-promo-art-center strong{font-size:clamp(24px,6vw,35px);line-height:1.04;font-weight:950;letter-spacing:-1.2px;color:#fff}
.vyse-promo-art-center em{display:inline-block;font-style:normal;color:#ffe975;text-shadow:0 2px 15px #2b105e}
.vyse-promo-art-center p{font-size:11px;line-height:1.6;color:#f4eafe;margin:0;font-weight:650}
.vyse-promo-phone{width:min(77%,275px);padding:7px 9px 9px;margin-top:1px;text-align:left;background:linear-gradient(#fcfaff,#f3ebff);border:3px solid #d9c5ff;box-shadow:0 9px 32px #190b4fbb;border-radius:15px;transform:rotate(-3deg);color:#39236b;display:grid;gap:6px;text-shadow:none}
.vyse-promo-phone-header{display:flex;align-items:center;gap:6px;font-size:9px;padding:2px 0 4px;border-bottom:1px solid #ded6ee}.vyse-promo-phone-header b{flex:1;font-weight:800}.vyse-promo-phone-header small{letter-spacing:1px}.vyse-promo-phone-dot{width:15px;height:15px;flex:none;border-radius:50%;background:linear-gradient(135deg,#5f35c1,#b786f3)}
.vyse-promo-phone-alert{display:flex;align-items:center;gap:7px;background:#fff;padding:5px 7px;border:1px solid #eee4ff;border-radius:7px}.vyse-promo-phone-alert>span{width:21px;height:21px;display:grid;place-items:center;flex:none;border-radius:7px;background:#eee2ff;color:#7545d8;font-size:13px}.vyse-promo-phone-alert div{display:grid;gap:1px}.vyse-promo-phone-alert b{font-size:8px}.vyse-promo-phone-alert small{font-size:7px;color:#857b92}
.vyse-promo-social-pills{display:flex;justify-content:center;gap:8px}.vyse-promo-social-pills span{font-size:9px;letter-spacing:.8px;font-weight:900;border-radius:100px;background:#ffffff23;border:1px solid #ffffff6b;padding:8px 13px}
.vyse-promo-art-bottom{text-align:center;color:#eaddff;font-size:9px;font-weight:800;letter-spacing:1.2px;margin-top:11px}.vyse-promo-art-bottom span{color:#ffcc72}
.vyse-promo-custom-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#260c65;display:block}
.vyse-promo-body{padding:17px 17px 14px;text-align:center}
.vyse-promo-body h2{font-size:17px;font-weight:800;letter-spacing:-.45px;margin:0 0 5px;line-height:1.3;color:#1f1438}
.vyse-promo-body p{font-size:12px;line-height:1.7;color:#6e637d;margin:0 auto 14px;max-width:345px}
.vyse-promo-actions{display:grid;gap:9px}
.vyse-promo-button{min-height:42px;border-radius:11px;background:#7140d7;color:white;display:flex;justify-content:center;align-items:center;gap:9px;text-decoration:none;font-size:13px;font-weight:800;box-shadow:0 3px 10px #5e24a323;transition:filter .15s ease,transform .15s ease}
.vyse-promo-button:hover{filter:brightness(1.07);transform:translateY(-1px)}
.vyse-promo-wa{background:linear-gradient(105deg,#7140d7,#642fca)}.vyse-promo-tg{background:linear-gradient(105deg,#8462ec,#7041d8)}.vyse-promo-fallback{background:#7140d7}
.vyse-promo-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}
.vyse-promo-hide-label{display:flex;gap:7px;align-items:center;min-height:30px;cursor:pointer;color:#5e556f;font-size:12px;text-align:left}
.vyse-promo-hide-label input{accent-color:#7545d8;width:16px;height:16px;margin:0;cursor:pointer}
.vyse-promo-close-bottom{background:#fff;border:1px solid #d8d6e6;border-radius:10px;padding:7px 15px;font-size:12px;color:#5d546c;cursor:pointer}
.vyse-promo-close-bottom:hover{background:#f8f5ff}
body.vyse-promo-open{overflow:hidden}
@keyframes vysePromoIn{from{opacity:0}to{opacity:1}}
@media(max-width:450px){.vyse-promo-overlay{padding:9px}.vyse-promo-dialog{width:min(100%,370px);border-radius:16px}.vyse-promo-art{min-height:330px;aspect-ratio:4/5}.vyse-promo-illustration{padding:18px 16px 14px}.vyse-promo-art-center strong{font-size:clamp(23px,7.5vw,31px)}.vyse-promo-body{padding:15px 13px 13px}.vyse-promo-body p{font-size:11.5px}}
@media(max-height:700px){.vyse-promo-overlay{align-items:flex-start}.vyse-promo-art{min-height:220px;aspect-ratio:1/.74}.vyse-promo-art-center{margin:10px 0 5px;gap:6px}.vyse-promo-phone{display:none}.vyse-promo-art-center strong{font-size:25px}.vyse-promo-body{padding-top:12px}.vyse-promo-button{min-height:38px}}
@media(prefers-reduced-motion:reduce){.vyse-entry-logo-wrap,.vyse-entry-progress i,.vyse-promo-overlay{animation:none}.vyse-promo-button{transition:none}}
.dark-mode .vyse-promo-body{background:#fff;color:#191226}

/* Loader menunggu data beranda siap, bukan memakai hitung mundur tetap. */
.vyse-entry-logo-wrap{position:relative;isolation:isolate}
.vyse-entry-logo-wrap::before{content:"";position:absolute;inset:-10px;border:2px solid rgba(126,74,214,.22);border-top-color:#8e5cee;border-radius:31px;animation:vyseEntryOrbit 2.2s linear infinite;pointer-events:none}
.vyse-entry-logo-wrap::after{content:"";position:absolute;z-index:-1;inset:-18px;border-radius:50%;background:radial-gradient(circle,#ae79fa2e,transparent 70%);animation:vyseEntryPulse 2s ease-in-out infinite alternate;pointer-events:none}
@keyframes vyseEntryOrbit{to{transform:rotate(360deg)}}
@keyframes vyseEntryPulse{from{opacity:.45;transform:scale(.94)}to{opacity:1;transform:scale(1.12)}}
.vyse-entry-progress i{transition:width .3s ease,transform .3s ease}
.vyse-entry-loader.is-ready .vyse-entry-progress i{width:100%;transform:none;animation:none}
.vyse-entry-loader.is-exiting{transition:opacity .42s ease,visibility .42s ease}
body.vyse-entry-loading #site-header,body.vyse-entry-loading .home-shell,body.vyse-entry-loading #site-footer{opacity:0;pointer-events:none}
body:not(.vyse-entry-loading) #site-header,body:not(.vyse-entry-loading) .home-shell,body:not(.vyse-entry-loading) #site-footer{transition:opacity .38s ease}
@media(prefers-reduced-motion:reduce){
  .vyse-entry-logo-wrap::before,.vyse-entry-logo-wrap::after{animation:none}
  .vyse-entry-loader.is-exiting,body:not(.vyse-entry-loading) #site-header,body:not(.vyse-entry-loading) .home-shell,body:not(.vyse-entry-loading) #site-footer{transition:none}
}


/* ===== Animasi loading berjalan: selalu aktif sampai halaman siap ===== */
.vyse-entry-loader{
  background:radial-gradient(circle at 22% 20%,rgba(183,143,251,.17),transparent 35%),
    radial-gradient(circle at 80% 78%,rgba(135,77,231,.16),transparent 38%),
    linear-gradient(145deg,#fbf9ff,#f1eaff 68%,#eae0ff);
  background-size:115% 115%;
  animation:vyseLoaderBackdrop 7s ease-in-out infinite alternate;
}
.vyse-entry-content{gap:9px}
.vyse-entry-logo-wrap{
  width:92px;height:92px;border-radius:26px;margin:0 0 13px;
  box-shadow:0 16px 46px rgba(103,47,189,.19);
  animation:vyseEntryFloat 1.45s ease-in-out infinite alternate;
}
.vyse-entry-logo-wrap img{width:70px;height:70px}
.vyse-entry-logo-wrap::before{
  inset:-12px;border:3px solid rgba(116,69,216,.16);
  border-top-color:#8b5cf6;border-right-color:#a67ef2;
  border-radius:36px;animation:vyseEntryOrbit 1.35s linear infinite;
}
.vyse-entry-logo-wrap::after{
  z-index:-1;inset:-25px;border:1px dashed rgba(117,69,216,.24);
  background:radial-gradient(circle,rgba(174,121,250,.25),transparent 72%);
  animation:vyseEntryOrbitReverse 5s linear infinite;
}
.vyse-entry-progress{
  width:180px;height:7px;margin-top:13px;border-radius:20px;
  background:#dcd0f3;position:relative;
  box-shadow:inset 0 1px 2px rgba(78,42,128,.08);
}
.vyse-entry-progress i{
  width:42%;height:100%;border-radius:20px;
  background:linear-gradient(90deg,#7943d8,#c3a0ff,#7943d8);
  box-shadow:0 0 13px rgba(136,79,233,.5);
  animation:vyseProgressRun 1.35s ease-in-out infinite;
  transform:translateX(-110%);
}
.vyse-entry-dots{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:2px;height:17px}
.vyse-entry-dots span{width:6px;height:6px;background:#9660e8;border-radius:50%;animation:vyseDotBounce 1s ease-in-out infinite}
.vyse-entry-dots span:nth-child(2){animation-delay:.16s}
.vyse-entry-dots span:nth-child(3){animation-delay:.32s}
.vyse-entry-loader.is-ready .vyse-entry-dots span{animation:none;opacity:1;background:#7545d8}
.vyse-entry-loader.is-ready .vyse-entry-progress i{width:100%;transform:none;animation:none;box-shadow:0 0 13px #9661e970}
@keyframes vyseLoaderBackdrop{from{background-position:0 0}to{background-position:100% 100%}}
@keyframes vyseEntryOrbitReverse{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes vyseProgressRun{0%{transform:translateX(-110%)}55%{transform:translateX(133%)}100%{transform:translateX(235%)}}
@keyframes vyseDotBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
@media(max-width:450px){
  .vyse-entry-logo-wrap{width:82px;height:82px}
  .vyse-entry-logo-wrap img{width:62px;height:62px}
  .vyse-entry-progress{width:160px}
}
@media(prefers-reduced-motion:reduce){
  .vyse-entry-loader,.vyse-entry-logo-wrap,.vyse-entry-logo-wrap::before,
  .vyse-entry-logo-wrap::after,.vyse-entry-progress i,.vyse-entry-dots span{animation:none!important}
  .vyse-entry-progress i{width:55%;transform:none}
}


/* === VYSESTORE Popup v2 — compact responsive layout (desktop + mobile) === */
.vyse-promo-overlay {
  padding:18px 20px;
  align-items:center;
  background:rgba(13,9,24,.76);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.vyse-promo-dialog {
  width:min(100%,390px);
  max-height:calc(100dvh - 36px);
  max-height:calc(100vh - 36px); /* fall back for older browsers */
  max-height:calc(100dvh - 36px);
  border-radius:19px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c8b8e8 transparent;
  box-shadow:0 25px 90px rgba(16,7,37,.42);
}
.vyse-promo-art {
  width:100%;
  min-height:0;
  aspect-ratio:733/884;
  background:#4c0d95;
  border-radius:0;
  overflow:hidden;
}
.vyse-promo-custom-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#4c0d95;
}
.vyse-promo-close-top {
  position:absolute;
  top:10px;
  right:10px;
  z-index:10;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(18,6,42,.77);
  color:#fff;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 3px 12px #1b0a4d4a;
}
.vyse-promo-close-top:focus-visible,
.vyse-promo-close-bottom:focus-visible,
.vyse-promo-button:focus-visible,
.vyse-promo-hide-label input:focus-visible {outline:3px solid #bb96fa;outline-offset:2px;}
.vyse-promo-body {
  background:#fff;
  text-align:center;
  padding:16px 18px 15px;
}
/* Title stays accessible as the dialog's name, without adding an oversized headline below the poster. */
.vyse-promo-body h2 {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
  padding:0;
}
.vyse-promo-body p {
  max-width:340px;
  font-size:13px;
  font-weight:430;
  color:#5b6174;
  line-height:1.55;
  letter-spacing:-.1px;
  margin:0 auto 13px;
}
.vyse-promo-actions {display:grid;gap:9px}
.vyse-promo-button {
  min-height:44px;
  border-radius:12px;
  padding:9px 14px;
  font-size:13px;
  font-weight:760;
  letter-spacing:-.1px;
  box-shadow:none;
}
.vyse-promo-button svg{width:21px;height:21px;flex:none}
.vyse-promo-wa,.vyse-promo-tg {background:linear-gradient(105deg,#7940e6,#6124c0)}
.vyse-promo-wa:hover,.vyse-promo-tg:hover{filter:brightness(1.07)}
.vyse-promo-bottom {
  margin-top:11px;
  gap:10px;
  min-height:39px;
}
.vyse-promo-hide-label {font-size:12px;color:#55566b;gap:8px;line-height:1.3}
.vyse-promo-hide-label input {width:17px;height:17px;flex:none}
.vyse-promo-close-bottom {font-size:12px;padding:8px 17px;border-radius:12px;white-space:nowrap}
@media(max-width:450px) {
  .vyse-promo-overlay {padding:12px 19px}
  .vyse-promo-dialog {
    width:min(100%,360px);
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    border-radius:18px;
  }
  .vyse-promo-art {min-height:0;aspect-ratio:733/884}
  .vyse-promo-body {padding:13px 16px 12px}
  .vyse-promo-body p {font-size:12px;line-height:1.52;margin-bottom:12px}
  .vyse-promo-actions {gap:8px}
  .vyse-promo-button {min-height:42px;font-size:12.5px}
  .vyse-promo-bottom {margin-top:10px}
  .vyse-promo-close-top {top:8px;right:8px;width:34px;height:34px}
}
/* Short mobile viewports scroll inside the card. Do not squash or crop the poster. */
@media(max-height:700px) {
  .vyse-promo-overlay {padding-top:10px;padding-bottom:10px;align-items:center}
  .vyse-promo-art {min-height:0;aspect-ratio:733/884}
  .vyse-promo-dialog {max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
  .vyse-promo-body {padding-top:12px}
  .vyse-promo-button {min-height:41px}
}
@media(prefers-reduced-motion:reduce) {
  .vyse-promo-dialog,.vyse-promo-overlay {animation:none;transition:none}
}