/*
 * SMANJA v22.2.0 — Yayasan Ultimate Section Background System
 * Loaded after v22.1. Gives every major homepage section its own visual atmosphere
 * while preserving one institutional navy/blue/gold design language.
 */
body.smanja-v222{
  --sj222-ink:#15344d;
  --sj222-navy:#063553;
  --sj222-blue:#0874ad;
  --sj222-teal:#0b8b8a;
  --sj222-gold:#e7b53c;
  --sj222-line:rgba(20,75,108,.12);
  --sj222-soft-shadow:0 14px 38px rgba(9,48,76,.075);
  --sj222-deep-shadow:0 20px 52px rgba(5,42,68,.16);
  background:
    radial-gradient(circle at 8% 3%,rgba(25,135,188,.06),transparent 24rem),
    radial-gradient(circle at 92% 18%,rgba(231,181,60,.05),transparent 22rem),
    linear-gradient(180deg,#f8fbfd 0%,#f5f8fa 46%,#f9fbfc 100%)!important;
}
body.smanja-v222 .sj9-home{position:relative;background:transparent!important}
body.smanja-v222 .sj9-home:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(20,75,108,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(20,75,108,.022) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);opacity:.55}
body.smanja-v222 .sj9-home>*{position:relative;z-index:1}

/* Shared premium section shell */
body.smanja-v222 .sj222-priority-section,
body.smanja-v222 .sj222-news-section,
body.smanja-v222 .sj222-agenda-section,
body.smanja-v222 .sj222-service-section,
body.smanja-v222 .sj222-gallery-section,
body.smanja-v222 .sj222-teacher-section,
body.smanja-v222 .sj222-resource-section,
body.smanja-v222 .sj222-network-section,
body.smanja-v222 .sj222-facilities-section,
body.smanja-v222 .sj13-school,
body.smanja-v222 .sj13-journey,
body.smanja-v222 .sj13-berseri,
body.smanja-v222 .sj22-quotes,
body.smanja-v222 .sj222-contact-section,
body.smanja-v222 .sj222-map-section{
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
}
body.smanja-v222 .sj222-priority-section:before,
body.smanja-v222 .sj222-news-section:before,
body.smanja-v222 .sj222-agenda-section:before,
body.smanja-v222 .sj222-gallery-section:before,
body.smanja-v222 .sj222-teacher-section:before,
body.smanja-v222 .sj222-resource-section:before,
body.smanja-v222 .sj222-network-section:before,
body.smanja-v222 .sj222-facilities-section:before,
body.smanja-v222 .sj13-school:before,
body.smanja-v222 .sj13-journey:before{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(2px)
}

/* 1. Banner — cold institutional sky; image remains the hero */
body.smanja-v222 .sj15-banner-only{
  padding:20px 0 16px!important;
  background:
    radial-gradient(circle at 82% 15%,rgba(231,181,60,.17),transparent 19rem),
    linear-gradient(135deg,#e8f3f8 0%,#f9fbfc 48%,#eaf4f7 100%)!important;
  border-bottom:1px solid rgba(13,91,132,.08)
}
body.smanja-v222 .sj15-banner-slider{box-shadow:0 22px 54px rgba(5,48,76,.17),0 2px 0 rgba(255,255,255,.9) inset!important}
body.smanja-v222 .sj15-banner-wrap{position:relative}
body.smanja-v222 .sj15-banner-wrap:before{content:"";position:absolute;left:-28px;top:-14px;width:110px;height:110px;border:1px solid rgba(8,116,173,.11);border-radius:50%;box-shadow:0 0 0 18px rgba(8,116,173,.025);pointer-events:none}

/* 2. Running news — strong newsroom ribbon */
body.smanja-v222 .sj172-ticker-band{
  margin-top:0!important;padding:10px 0!important;
  background:linear-gradient(90deg,#052f4b 0%,#074f75 55%,#063a5a 100%)!important;
  border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(1,31,50,.18)
}
body.smanja-v222 .sj172-ticker{background:rgba(255,255,255,.98)!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:0 10px 26px rgba(2,29,47,.18)!important}
body.smanja-v222 .sj92-ticker-label{background:linear-gradient(135deg,#e5ad2d,#f1c861)!important;color:#17344a!important}

/* 3. Top flow and shortcuts — clean civic service layer */
body.smanja-v222 .sj154-topflow{padding-top:18px!important}
body.smanja-v222 .sj154-shortcuts{
  padding:10px!important;border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(236,247,251,.88))!important;
  border:1px solid rgba(15,105,153,.11);box-shadow:var(--sj222-soft-shadow)
}
body.smanja-v222 .sj154-shortcuts>a{background:linear-gradient(145deg,#fff,#f8fcfd)!important}

/* 4. Schoolboard — pale blue data cockpit */
body.smanja-v222 .sj13-schoolboard{
  padding:14px!important;border:1px solid rgba(15,105,153,.11)!important;border-radius:22px!important;
  background:
    radial-gradient(circle at 14% 10%,rgba(32,148,199,.12),transparent 18rem),
    linear-gradient(145deg,#eef7fb 0%,#f8fbfc 48%,#edf5f8 100%)!important;
  box-shadow:var(--sj222-soft-shadow)!important
}
body.smanja-v222 .sj154-schedule{border-radius:14px!important;overflow:hidden!important;box-shadow:0 8px 24px rgba(8,57,87,.07)!important}
body.smanja-v222 .sj17-contact-card{background:linear-gradient(160deg,#ffffff 0%,#edf7fb 100%)!important;border-color:rgba(8,116,173,.14)!important}
body.smanja-v222 .sj17-principal-card{background:linear-gradient(160deg,#fff 0%,#f7fafb 68%,#fff9e8 100%)!important;border-color:rgba(205,159,50,.18)!important}
body.smanja-v222 .sj17-calendar-card{background:linear-gradient(160deg,#fff 0%,#f1f7fb 100%)!important;border-color:rgba(72,124,164,.14)!important}
body.smanja-v222 .sj19-student-info{background:linear-gradient(125deg,#073a5a 0%,#0a5f78 100%)!important;box-shadow:0 18px 40px rgba(6,55,82,.16)!important}

/* 5. Priority — warm alert / announcement */
body.smanja-v222 .sj222-priority-section{
  padding:22px!important;border:1px solid rgba(212,157,40,.22)!important;
  background:
    radial-gradient(circle at 94% 12%,rgba(238,186,67,.18),transparent 14rem),
    linear-gradient(135deg,#fffdf7 0%,#fff8e8 58%,#f8fbfc 100%)!important;
  box-shadow:0 14px 34px rgba(131,91,18,.07)!important
}
body.smanja-v222 .sj222-priority-section:before{width:190px;height:190px;right:-80px;bottom:-110px;background:rgba(231,181,60,.09)}
body.smanja-v222 .sj222-priority-section .sj9-eyebrow{color:#a96f08!important}

/* 6. News — editorial light-blue */
body.smanja-v222 .sj222-news-section{
  padding:23px!important;border:1px solid rgba(42,124,169,.13)!important;border-radius:20px!important;
  background:
    radial-gradient(circle at 3% 95%,rgba(73,161,200,.11),transparent 20rem),
    linear-gradient(145deg,#f8fcfe 0%,#eef7fb 100%)!important;
  box-shadow:var(--sj222-soft-shadow)
}
body.smanja-v222 .sj222-news-section:before{width:240px;height:240px;left:-125px;bottom:-150px;background:rgba(40,141,188,.08)}
body.smanja-v222 .sj222-news-section .sj9-news-card{background:rgba(255,255,255,.96)!important}

/* 7. Profile — pearl / gold institutional */
body.smanja-v222 .sj13-school.sj221-school-profile{
  background:
    radial-gradient(circle at 83% 18%,rgba(231,181,60,.14),transparent 14rem),
    radial-gradient(circle at 8% 90%,rgba(28,134,183,.10),transparent 18rem),
    linear-gradient(135deg,#fff 0%,#f4f9fb 56%,#fffaf0 100%)!important;
  border-color:rgba(20,100,143,.14)!important;box-shadow:0 18px 42px rgba(9,48,76,.09)!important
}
body.smanja-v222 .sj13-school:before{width:230px;height:230px;right:-90px;top:-120px;background:rgba(231,181,60,.08)}
body.smanja-v222 .sj221-emblem{background:linear-gradient(180deg,#fff,#eaf6fa)!important}

/* 8. Education journey — mint-blue learning landscape */
body.smanja-v222 .sj13-journey{
  padding:24px!important;border-radius:20px!important;border:1px solid rgba(42,133,130,.13)!important;
  background:
    radial-gradient(circle at 92% 84%,rgba(26,157,143,.10),transparent 18rem),
    linear-gradient(145deg,#f4fbfa 0%,#edf7fa 100%)!important;
  box-shadow:var(--sj222-soft-shadow)
}
body.smanja-v222 .sj13-journey:before{width:220px;height:220px;right:-110px;bottom:-120px;background:rgba(19,139,137,.07)}
body.smanja-v222 .sj13-steps{background:rgba(255,255,255,.88)!important;border-color:rgba(32,118,128,.13)!important}
body.smanja-v222 .sj13-steps p{background:#f6fbfb!important;border-color:rgba(32,118,128,.12)!important}

/* 9. BERSERI — dark signature section */
body.smanja-v222 .sj13-berseri{
  background:
    radial-gradient(circle at 88% 5%,rgba(231,181,60,.17),transparent 16rem),
    radial-gradient(circle at 10% 100%,rgba(33,176,174,.15),transparent 18rem),
    linear-gradient(125deg,#062f4b 0%,#074a67 55%,#075b68 100%)!important;
  border:1px solid rgba(255,255,255,.09)!important;box-shadow:var(--sj222-deep-shadow)!important
}
body.smanja-v222 .sj13-berseri .sj13-values-grid article{background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;box-shadow:inset 0 1px rgba(255,255,255,.04)!important}

/* 10. Quotes — indigo / blue, visually distinct from BERSERI */
body.smanja-v222 .sj221-quotes{
  background:
    radial-gradient(circle at 88% 12%,rgba(124,172,255,.18),transparent 18rem),
    radial-gradient(circle at 10% 95%,rgba(229,181,60,.13),transparent 16rem),
    linear-gradient(125deg,#15325f 0%,#174d7d 58%,#176f8d 100%)!important;
  box-shadow:0 20px 48px rgba(20,50,95,.18)!important
}

/* 11. Agenda — lavender mist */
body.smanja-v222 .sj222-agenda-section{
  padding:21px!important;border:1px solid rgba(91,103,176,.13)!important;border-radius:20px!important;
  background:
    radial-gradient(circle at 10% 10%,rgba(119,126,205,.10),transparent 17rem),
    linear-gradient(145deg,#f8f8ff 0%,#f1f5fc 100%)!important;
  box-shadow:var(--sj222-soft-shadow)
}
body.smanja-v222 .sj222-agenda-section:before{width:170px;height:170px;left:-80px;top:-80px;background:rgba(101,111,188,.07)}
body.smanja-v222 .sj222-agenda-section .sj9-board{background:rgba(255,255,255,.88)!important;border-color:rgba(91,103,176,.12)!important;box-shadow:none!important}

/* 12. Services — warm ivory civic directory */
body.smanja-v222 .sj222-service-section{
  padding:16px!important;border-radius:20px!important;border:1px solid rgba(196,151,45,.16)!important;
  background:linear-gradient(135deg,#fffaf0 0%,#fffdf8 54%,#f4f9fb 100%)!important;
  box-shadow:var(--sj222-soft-shadow)
}
body.smanja-v222 .sj222-service-section .sj15-service-summary{background:transparent!important}
body.smanja-v222 .sj222-service-section .sj15-service-panel{background:rgba(255,255,255,.78)!important}
body.smanja-v222 .sj222-service-section .sj9-service-card{background:#fff!important;border-color:rgba(195,151,45,.15)!important}

/* 13. Gallery / video — graphite-blue media room */
body.smanja-v222 .sj222-gallery-section{
  padding:22px!important;border:1px solid rgba(255,255,255,.07)!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(29,148,190,.19),transparent 19rem),
    linear-gradient(125deg,#102f43 0%,#173d52 58%,#174b5f 100%)!important;
  box-shadow:var(--sj222-deep-shadow)!important
}
body.smanja-v222 .sj222-gallery-section .sj9-eyebrow{color:#f2c75a!important}
body.smanja-v222 .sj222-gallery-section .sj9-section-head h2,
body.smanja-v222 .sj222-gallery-section .sj15-video-copy h3{color:#fff!important}
body.smanja-v222 .sj222-gallery-section .sj9-text-link{color:#d9eff8!important}
body.smanja-v222 .sj222-gallery-section .sj15-video-copy p{color:#c9dce6!important}
body.smanja-v222 .sj222-gallery-section .sj15-photo-card,
body.smanja-v222 .sj222-gallery-section .sj15-video-card{box-shadow:0 14px 32px rgba(0,0,0,.17)!important}

/* 14. Teachers — soft sage / blue human section */
body.smanja-v222 .sj222-teacher-section{
  padding:22px!important;border:1px solid rgba(56,137,122,.13)!important;
  background:
    radial-gradient(circle at 8% 16%,rgba(72,163,137,.10),transparent 17rem),
    linear-gradient(145deg,#f5fbf8 0%,#eef7f8 100%)!important;
  box-shadow:var(--sj222-soft-shadow)
}
body.smanja-v222 .sj222-teacher-section .sj15-teacher-card{background:linear-gradient(180deg,#fff,#f9fcfb)!important;border-color:rgba(56,137,122,.14)!important}

/* 15. Learning + participation — duo-card cream/cyan backdrop */
body.smanja-v222 .sj222-resource-section{
  padding:18px!important;border-radius:20px!important;border:1px solid rgba(113,128,145,.12)!important;
  background:linear-gradient(120deg,#fff9ef 0%,#f8fbfc 48%,#eef9fa 100%)!important;
  box-shadow:var(--sj222-soft-shadow)
}
body.smanja-v222 .sj222-resource-section .sj9-board:first-child{background:linear-gradient(145deg,#fffdf7,#fff8e9)!important;border-color:rgba(210,162,53,.15)!important}
body.smanja-v222 .sj222-resource-section .sj9-board:last-child{background:linear-gradient(145deg,#f9feff,#edf8fa)!important;border-color:rgba(33,140,151,.14)!important}

/* 16. Network + ads — neutral civic grey-blue */
body.smanja-v222 .sj222-network-section{
  padding:20px!important;border:1px solid rgba(83,112,136,.13)!important;
  background:
    radial-gradient(circle at 96% 90%,rgba(30,117,160,.08),transparent 17rem),
    linear-gradient(145deg,#f5f8fa 0%,#edf3f6 100%)!important;
  box-shadow:var(--sj222-soft-shadow)
}
body.smanja-v222 .sj222-network-section .sj154-related-panel,
body.smanja-v222 .sj222-network-section .sj154-ad-panel{background:rgba(255,255,255,.78)!important;border-radius:14px!important}

/* 17. Contact — strong closing CTA */
body.smanja-v222 .sj222-contact-section{
  border:1px solid rgba(255,255,255,.09)!important;
  background:
    radial-gradient(circle at 80% 15%,rgba(231,181,60,.18),transparent 15rem),
    linear-gradient(120deg,#073653 0%,#075a72 100%)!important;
  color:#fff!important;box-shadow:var(--sj222-deep-shadow)!important
}
body.smanja-v222 .sj222-contact-section .sj9-eyebrow{color:#ffd668!important}
body.smanja-v222 .sj222-contact-section h2,
body.smanja-v222 .sj222-contact-section a{color:#fff!important}
body.smanja-v222 .sj222-contact-section p{color:rgba(255,255,255,.76)!important}
body.smanja-v222 .sj222-contact-section .sj9-button-gold{color:#17344a!important}

/* 18. Map — calm pale cyan */
body.smanja-v222 .sj222-map-section{background:linear-gradient(145deg,#f4fafb,#eaf5f7)!important;border-color:rgba(40,126,145,.13)!important;box-shadow:var(--sj222-soft-shadow)!important}
body.smanja-v222 .sj222-map-section summary{background:linear-gradient(90deg,#eef8fa,#f9fcfd)!important;color:#18526c!important;font-weight:800!important}

/* 19. Facilities — light green / campus environment */
body.smanja-v222 .sj222-facilities-section{
  padding:22px!important;border:1px solid rgba(58,133,104,.14)!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(64,159,120,.11),transparent 18rem),
    linear-gradient(145deg,#f5fbf7 0%,#eef7f2 100%)!important;
  box-shadow:var(--sj222-soft-shadow)!important
}
body.smanja-v222 .sj222-facilities-section .sj154-facility-card{background:linear-gradient(180deg,#fff,#f9fcfa)!important;border-color:rgba(58,133,104,.15)!important}
body.smanja-v222 .sj222-facilities-section .sj154-facility-card:hover{border-color:rgba(58,133,104,.27)!important}

/* Subtle separation and hover polish */
body.smanja-v222 .sj222-news-section,
body.smanja-v222 .sj13-school,
body.smanja-v222 .sj13-journey,
body.smanja-v222 .sj13-berseri,
body.smanja-v222 .sj221-quotes,
body.smanja-v222 .sj222-agenda-section,
body.smanja-v222 .sj222-service-section,
body.smanja-v222 .sj222-gallery-section,
body.smanja-v222 .sj222-teacher-section,
body.smanja-v222 .sj222-resource-section,
body.smanja-v222 .sj222-network-section,
body.smanja-v222 .sj222-contact-section,
body.smanja-v222 .sj222-facilities-section{transition:transform .28s ease,box-shadow .28s ease}
@media (hover:hover) and (pointer:fine){
  body.smanja-v222 .sj222-news-section:hover,
  body.smanja-v222 .sj13-school:hover,
  body.smanja-v222 .sj13-journey:hover,
  body.smanja-v222 .sj222-agenda-section:hover,
  body.smanja-v222 .sj222-teacher-section:hover,
  body.smanja-v222 .sj222-resource-section:hover,
  body.smanja-v222 .sj222-network-section:hover,
  body.smanja-v222 .sj222-facilities-section:hover{transform:translateY(-2px)}
}

/* Responsive — keep the visual rhythm but remove heavy decoration on small screens */
@media(max-width:991.98px){
  body.smanja-v222 .sj13-schoolboard{padding:11px!important;border-radius:18px!important}
  body.smanja-v222 .sj222-priority-section,
  body.smanja-v222 .sj222-news-section,
  body.smanja-v222 .sj13-journey,
  body.smanja-v222 .sj222-agenda-section,
  body.smanja-v222 .sj222-gallery-section,
  body.smanja-v222 .sj222-teacher-section,
  body.smanja-v222 .sj222-resource-section,
  body.smanja-v222 .sj222-network-section,
  body.smanja-v222 .sj222-facilities-section{padding:18px!important}
}
@media(max-width:767.98px){
  body.smanja-v222 .sj15-banner-only{padding:10px 0 10px!important}
  body.smanja-v222 .sj172-ticker-band{padding:7px 0!important}
  body.smanja-v222 .sj154-shortcuts{padding:7px!important;border-radius:14px!important}
  body.smanja-v222 .sj13-schoolboard{padding:8px!important;border-radius:14px!important}
  body.smanja-v222 .sj222-priority-section,
  body.smanja-v222 .sj222-news-section,
  body.smanja-v222 .sj13-journey,
  body.smanja-v222 .sj222-agenda-section,
  body.smanja-v222 .sj222-service-section,
  body.smanja-v222 .sj222-gallery-section,
  body.smanja-v222 .sj222-teacher-section,
  body.smanja-v222 .sj222-resource-section,
  body.smanja-v222 .sj222-network-section,
  body.smanja-v222 .sj222-facilities-section{padding:14px!important;border-radius:15px!important}
  body.smanja-v222 .sj9-home:before{opacity:.25;background-size:30px 30px}
}
@media(max-width:520px){
  body.smanja-v222 .sj222-resource-section{padding:10px!important}
  body.smanja-v222 .sj222-network-section{padding:11px!important}
  body.smanja-v222 .sj222-contact-section{border-radius:15px!important}
}
@media(prefers-reduced-motion:reduce){
  body.smanja-v222 .sj222-news-section,
  body.smanja-v222 .sj13-school,
  body.smanja-v222 .sj13-journey,
  body.smanja-v222 .sj13-berseri,
  body.smanja-v222 .sj221-quotes,
  body.smanja-v222 .sj222-agenda-section,
  body.smanja-v222 .sj222-service-section,
  body.smanja-v222 .sj222-gallery-section,
  body.smanja-v222 .sj222-teacher-section,
  body.smanja-v222 .sj222-resource-section,
  body.smanja-v222 .sj222-network-section,
  body.smanja-v222 .sj222-contact-section,
  body.smanja-v222 .sj222-facilities-section{transition:none!important}
}