/*
 * SMANJA v22.2.1 — Yayasan Ultimate Page Canvas
 * Correction for v22.2.0: the visual variation belongs to the PAGE BACKGROUND,
 * not to each individual section. Section surfaces return to v22.1 styling.
 */
body.smanja-v2221{
  --sj2221-navy:#073b5b;
  --sj2221-blue:#0a78b5;
  --sj2221-gold:#e5b43d;
  --sj2221-teal:#0b8b87;
  --sj2221-ink:#153b55;
  --sj2221-line:rgba(11,93,137,.10);
  background:#f6fafc!important;
}

/* =========================================================
   PAGE CANVAS — one page, several atmospheres
   ========================================================= */
body.smanja-v2221 .sj9-home{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse 58% 11% at 9% 4%,rgba(30,141,193,.12),transparent 72%),
    radial-gradient(ellipse 52% 10% at 93% 18%,rgba(229,180,61,.10),transparent 72%),
    radial-gradient(ellipse 62% 12% at 8% 39%,rgba(22,151,133,.095),transparent 72%),
    radial-gradient(ellipse 58% 11% at 94% 59%,rgba(97,111,197,.085),transparent 72%),
    radial-gradient(ellipse 64% 12% at 10% 80%,rgba(38,128,174,.085),transparent 72%),
    linear-gradient(180deg,
      #f6fbfd 0%,
      #f6fbfd 11%,
      #eef7fb 17%,
      #f9fbfc 27%,
      #fffaf0 38%,
      #f4faf7 50%,
      #f6f4fc 62%,
      #eef7fb 75%,
      #f7fafb 86%,
      #eef7f2 100%)!important;
  overflow:hidden;
}
body.smanja-v2221 .sj9-home:before,
body.smanja-v2221 .sj9-home:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
}
body.smanja-v2221 .sj9-home:before{
  background-image:
    linear-gradient(rgba(11,93,137,.020) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,93,137,.020) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  opacity:.48;
}
body.smanja-v2221 .sj9-home:after{
  z-index:-1;
  background:
    radial-gradient(circle at 4% 16%,rgba(255,255,255,.90) 0 1px,transparent 2px),
    radial-gradient(circle at 96% 46%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 8% 70%,rgba(255,255,255,.82) 0 1px,transparent 2px);
  background-size:56px 56px,70px 70px,62px 62px;
  opacity:.36;
}

/* Keep the page breathing around the sections. */
body.smanja-v2221 .sj9-home>.container,
body.smanja-v2221 .sj9-home>.sj9-container,
body.smanja-v2221 .sj9-home>.sj154-topflow,
body.smanja-v2221 .sj9-home>.sj15-banner-only,
body.smanja-v2221 .sj9-home>.sj172-ticker-band{position:relative;z-index:1}

/* =========================================================
   HERO / TICKER — integrated with page canvas, not section BG
   ========================================================= */
body.smanja-v2221 .sj15-banner-only{
  padding:18px 0 15px!important;
  background:transparent!important;
}
body.smanja-v2221 .sj15-banner-slider{
  box-shadow:0 22px 55px rgba(5,48,76,.16),0 1px 0 rgba(255,255,255,.8) inset!important;
}
body.smanja-v2221 .sj172-ticker-band{
  padding:8px 0!important;
  background:transparent!important;
}
body.smanja-v2221 .sj172-ticker{
  border:1px solid rgba(11,92,137,.12)!important;
  box-shadow:0 12px 28px rgba(8,56,87,.09)!important;
}

/* =========================================================
   SECTION SURFACES — restore clean v22.1 cards.
   Background atmosphere now comes from the page behind them.
   ========================================================= */
body.smanja-v2221 .sj222-priority-section,
body.smanja-v2221 .sj222-news-section,
body.smanja-v2221 .sj222-agenda-section,
body.smanja-v2221 .sj222-service-section,
body.smanja-v2221 .sj222-gallery-section,
body.smanja-v2221 .sj222-teacher-section,
body.smanja-v2221 .sj222-resource-section,
body.smanja-v2221 .sj222-network-section,
body.smanja-v2221 .sj222-facilities-section,
body.smanja-v2221 .sj222-contact-section,
body.smanja-v2221 .sj222-map-section{
  position:relative;
}

/* Neutral cards: preserve readability and let the page BG show around them. */
body.smanja-v2221 .sj222-priority-section,
body.smanja-v2221 .sj222-news-section,
body.smanja-v2221 .sj222-agenda-section,
body.smanja-v2221 .sj222-service-section,
body.smanja-v2221 .sj222-teacher-section,
body.smanja-v2221 .sj222-resource-section,
body.smanja-v2221 .sj222-network-section,
body.smanja-v2221 .sj222-facilities-section{
  background:rgba(255,255,255,.91)!important;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  border-color:rgba(12,89,130,.10)!important;
  box-shadow:0 14px 34px rgba(9,48,76,.065)!important;
}

/* Do not repaint the established identity sections from v22.1. */
body.smanja-v2221 .sj13-school.sj221-school-profile,
body.smanja-v2221 .sj13-journey,
body.smanja-v2221 .sj13-berseri,
body.smanja-v2221 .sj221-quotes,
body.smanja-v2221 .sj222-gallery-section,
body.smanja-v2221 .sj222-contact-section,
body.smanja-v2221 .sj222-map-section{
  box-shadow:0 16px 38px rgba(9,48,76,.075)!important;
}

/* Schoolboard is a main dashboard card, not a coloured section backdrop. */
body.smanja-v2221 .sj13-schoolboard{
  background:rgba(255,255,255,.90)!important;
  border:1px solid rgba(11,93,137,.10)!important;
  box-shadow:0 16px 38px rgba(8,57,87,.07)!important;
}

/* Shortcuts float on the canvas. */
body.smanja-v2221 .sj154-shortcuts{
  background:rgba(255,255,255,.90)!important;
  border:1px solid rgba(11,93,137,.10)!important;
  box-shadow:0 12px 30px rgba(9,48,76,.06)!important;
}

/* Slightly stronger boundaries for dark identity blocks. */
body.smanja-v2221 .sj13-berseri,
body.smanja-v2221 .sj221-quotes,
body.smanja-v2221 .sj222-gallery-section,
body.smanja-v2221 .sj222-contact-section{
  outline:1px solid rgba(255,255,255,.06);
  outline-offset:-1px;
}

/* =========================================================
   PAGE-LEVEL DEPTH / DIVIDERS
   ========================================================= */
body.smanja-v2221 .sj9-section,
body.smanja-v2221 .sj13-school,
body.smanja-v2221 .sj13-journey,
body.smanja-v2221 .sj13-berseri,
body.smanja-v2221 .sj221-quotes,
body.smanja-v2221 .sj9-contact,
body.smanja-v2221 .sj9-map{
  scroll-margin-top:86px;
}
body.smanja-v2221 .sj9-section:where(:not(.sj222-gallery-section)){
  -webkit-backdrop-filter:saturate(108%);
  backdrop-filter:saturate(108%);
}

/* Elegant outer glow appears on the canvas, not inside a specific section. */
body.smanja-v2221 .sj9-home .sj9-section:nth-of-type(4n+1){box-shadow:0 16px 36px rgba(14,84,123,.065)}
body.smanja-v2221 .sj9-home .sj9-section:nth-of-type(4n+2){box-shadow:0 16px 36px rgba(161,119,31,.055)}
body.smanja-v2221 .sj9-home .sj9-section:nth-of-type(4n+3){box-shadow:0 16px 36px rgba(28,120,105,.055)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:991.98px){
  body.smanja-v2221 .sj9-home{
    background:
      radial-gradient(ellipse 80% 8% at 5% 6%,rgba(30,141,193,.10),transparent 72%),
      radial-gradient(ellipse 75% 8% at 95% 38%,rgba(229,180,61,.08),transparent 72%),
      radial-gradient(ellipse 85% 9% at 5% 72%,rgba(22,151,133,.07),transparent 72%),
      linear-gradient(180deg,#f7fbfd 0%,#eef7fb 28%,#fffaf3 46%,#f5f7fc 68%,#eef7f2 100%)!important;
  }
}
@media(max-width:767.98px){
  body.smanja-v2221 .sj15-banner-only{padding:10px 0 9px!important}
  body.smanja-v2221 .sj172-ticker-band{padding:6px 0!important}
  body.smanja-v2221 .sj9-home:before{background-size:32px 32px;opacity:.28}
  body.smanja-v2221 .sj222-priority-section,
  body.smanja-v2221 .sj222-news-section,
  body.smanja-v2221 .sj222-agenda-section,
  body.smanja-v2221 .sj222-service-section,
  body.smanja-v2221 .sj222-teacher-section,
  body.smanja-v2221 .sj222-resource-section,
  body.smanja-v2221 .sj222-network-section,
  body.smanja-v2221 .sj222-facilities-section{background:rgba(255,255,255,.95)!important}
}
@media(max-width:520px){
  body.smanja-v2221 .sj9-home{
    background:linear-gradient(180deg,#f7fbfd 0%,#eef7fb 31%,#fffaf3 51%,#f4f8fb 72%,#eef7f2 100%)!important;
  }
  body.smanja-v2221 .sj9-home:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.smanja-v2221 .sj9-home *{scroll-behavior:auto!important}
}