/* ======================================================
   GLOBAL LAYOUT - FULL DARK
====================================================== */

html{
  scroll-behavior:smooth;
}

html,
body{
  margin:0;
  padding:0;
  background:var(--mjv2-bg);
  color:var(--mjv2-text);
}

body{
  min-height:100vh;
}

/* paksa area wordpress juga ikut gelap */
body,
#page,
.site,
.site-main,
.entry-content,
.post,
.page,
main{
  background:var(--mjv2-bg);
  color:var(--mjv2-text);
}

/* wrapper plugin */
.mjv2-page{
  width:100%;
  min-height:100vh;
  background:var(--mjv2-bg);
  color:var(--mjv2-text);
}

/* container */
.mjv2-container{
  width:min(100%, 1180px);
  margin:0 auto;
  padding-left:18px;
  padding-right:18px;
}

/* section */
.mjv2-section{
  margin-top:var(--mjv2-gap-xl);
}

.mjv2-section:first-child{
  margin-top:0;
}

/* grid helpers */
.mjv2-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:18px;
}

.mjv2-grid-sm{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;
}

.mjv2-grid-lg{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:22px;
}

/* flex helpers */
.mjv2-row{
  display:flex;
  gap:var(--mjv2-gap-md);
}

.mjv2-row-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:var(--mjv2-gap-md);
}

.mjv2-col{
  display:flex;
  flex-direction:column;
  gap:var(--mjv2-gap-md);
}

/* spacing helpers */
.mjv2-mt-0{ margin-top:0 !important; }
.mjv2-mt-sm{ margin-top:var(--mjv2-gap-sm) !important; }
.mjv2-mt-md{ margin-top:var(--mjv2-gap-md) !important; }
.mjv2-mt-lg{ margin-top:var(--mjv2-gap-lg) !important; }

.mjv2-mb-0{ margin-bottom:0 !important; }
.mjv2-mb-sm{ margin-bottom:var(--mjv2-gap-sm) !important; }
.mjv2-mb-md{ margin-bottom:var(--mjv2-gap-md) !important; }
.mjv2-mb-lg{ margin-bottom:var(--mjv2-gap-lg) !important; }

.mjv2-gap-sm{ gap:var(--mjv2-gap-sm) !important; }
.mjv2-gap-md{ gap:var(--mjv2-gap-md) !important; }
.mjv2-gap-lg{ gap:var(--mjv2-gap-lg) !important; }

/* surface helpers */
.mjv2-surface{
  background:var(--mjv2-surface);
  border:1px solid var(--mjv2-border);
  border-radius:var(--mjv2-radius-md);
}

.mjv2-surface-card{
  background:var(--mjv2-card);
  border:1px solid var(--mjv2-border);
  border-radius:var(--mjv2-radius-lg);
  box-shadow:var(--mjv2-shadow);
}

/* divider */
.mjv2-divider{
  width:100%;
  height:1px;
  background:var(--mjv2-border);
  border:0;
  margin:0;
}

/* media */
.mjv2-media{
  width:100%;
  display:block;
}

.mjv2-media img,
.mjv2-media video,
.mjv2-media iframe{
  width:100%;
  height:auto;
  display:block;
}

/* ======================================================
   GLOBAL PAGE LOADER (APP STYLE)
====================================================== */

.mjv2-page-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .22s ease,
    visibility .22s ease;
}

.mjv2-page-loader.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.mjv2-page-loader-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,12,20,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.mjv2-page-loader-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  min-width:120px;
  padding:20px 22px;
  border-radius:22px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;

  background:linear-gradient(
    180deg,
    rgba(18,26,44,.96),
    rgba(10,16,30,.98)
  );

  border:1px solid rgba(110,150,220,.18);

  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.mjv2-page-loader-spinner{
  width:34px;
  height:34px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--mjv2-primary);
  animation:mjv2LoaderSpin .7s linear infinite;
}

@keyframes mjv2LoaderSpin{
  to{
    transform:rotate(360deg);
  }
}

.mjv2-page-loader-text{
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  color:var(--mjv2-text);
}

/* responsive */
@media (max-width:1024px){
  .mjv2-container{
    width:min(100%, 1000px);
  }

  .mjv2-grid{
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:16px;
  }

  .mjv2-grid-lg{
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:18px;
  }
}

@media (max-width:768px){
  .mjv2-container{
    padding-left:16px;
    padding-right:16px;
  }

  .mjv2-section{
    margin-top:28px;
  }

  .mjv2-grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:14px;
  }

  .mjv2-grid-sm{
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:12px;
  }

  .mjv2-grid-lg{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:16px;
  }

  .mjv2-row{
    flex-direction:column;
  }

  .mjv2-page-loader-center{
    min-width:112px;
    padding:18px 20px;
    border-radius:20px;
  }

  .mjv2-page-loader-spinner{
    width:32px;
    height:32px;
  }

  .mjv2-page-loader-text{
    font-size:12px;
  }
}

@media (max-width:480px){
  .mjv2-container{
    padding-left:14px;
    padding-right:14px;
  }

  .mjv2-section{
    margin-top:24px;
  }

  .mjv2-grid,
  .mjv2-grid-sm,
  .mjv2-grid-lg{
    gap:12px;
  }

  .mjv2-page-loader-center{
    min-width:104px;
    padding:16px 18px;
    border-radius:18px;
  }

  .mjv2-page-loader-spinner{
    width:30px;
    height:30px;
    border-width:3px;
  }

  .mjv2-page-loader-text{
    font-size:11px;
  }
}