/*
 * SD Negeri Tanjung 2 — Public Pages Design System V1.10.2
 * Penyegaran seluruh halaman publik
 * Pengembang : Hasan Basri | cvbcd.ID
 */
:root{
  --ui-radius-xl:32px;--ui-radius-lg:24px;--ui-radius-md:16px;
  --ui-shadow:0 24px 70px rgba(10,37,70,.10);
  --ui-shadow-soft:0 12px 36px rgba(10,37,70,.075);
  --ui-line:rgba(20,54,88,.12);
}
html{scroll-padding-top:104px}
body.public-page{background:#f6f9fc;overflow-x:hidden}
body.public-page .container{width:min(1240px,calc(100% - 40px))}
body.public-page .topbar,body.public-page .top,body.public-page .topline{
  background:linear-gradient(90deg,#071f3c,#0c3967);color:#e7f1fb;border:0
}
body.public-page .topbar .container,body.public-page .top .container,body.public-page .topline .container{min-height:36px}
body.public-page .header{
  background:rgba(255,255,255,.94)!important;backdrop-filter:blur(18px) saturate(1.35);
  border-bottom:1px solid rgba(18,54,91,.10)!important;box-shadow:0 10px 35px rgba(8,35,66,.045)
}
body.public-page .head,body.public-page .head-inner,body.public-page .navwrap{min-height:78px}
body.public-page .brand img{filter:drop-shadow(0 7px 12px rgba(8,45,85,.12))}
body.public-page .brand strong{font-weight:900;letter-spacing:-.015em}
body.public-page .brand small{font-size:11.5px}
body.public-page .portal-global-nav{display:flex;align-items:center;gap:3px;white-space:nowrap}
body.public-page .portal-global-nav>a,
body.public-page .portal-more>summary{
  min-height:40px;display:flex;align-items:center;padding:0 11px;border-radius:11px;
  text-decoration:none;font-size:12.5px;font-weight:800;color:#31516f;cursor:pointer;list-style:none
}
body.public-page .portal-global-nav>a:hover,
body.public-page .portal-global-nav>a.active,
body.public-page .portal-more[open]>summary,
body.public-page .portal-more>summary:hover{background:#edf5fc;color:#075fae}
body.public-page .portal-more{position:relative}
body.public-page .portal-more>summary::-webkit-details-marker{display:none}
body.public-page .portal-more>summary:after{content:'⌄';font-size:13px;margin-left:6px;transform:translateY(-1px)}
body.public-page .portal-more-menu{
  position:absolute;z-index:120;right:0;top:48px;width:270px;padding:9px;background:#fff;
  border:1px solid #dbe5ee;border-radius:18px;box-shadow:0 24px 60px rgba(8,35,66,.18);display:grid;gap:3px
}
body.public-page .portal-more-menu a{padding:11px 12px;border-radius:11px;text-decoration:none;color:#36546f;font-weight:800;font-size:12.5px}
body.public-page .portal-more-menu a:hover{background:#edf6ff;color:#075fae}
body.public-page .hero{isolation:isolate}
body.public-page .hero:before,body.public-page .hero:after{pointer-events:none}
body.public-page .hero-grid{min-height:430px;padding-top:68px;padding-bottom:88px}
body.public-page .hero h1{letter-spacing:-.045em;text-wrap:balance}
body.public-page .hero p{max-width:720px}
body.public-page .eyebrow{letter-spacing:.02em;text-transform:none}
body.public-page .hero-card,body.public-page .summary-card{border:1px solid rgba(255,255,255,.42);box-shadow:0 28px 80px rgba(3,25,50,.23)}
body.public-page .portal-subnav{position:relative;z-index:9;margin-top:-34px;margin-bottom:8px}
body.public-page .portal-subnav .container{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:9px;background:rgba(255,255,255,.96);border:1px solid #dce6ee;border-radius:20px;box-shadow:var(--ui-shadow-soft)}
body.public-page .portal-subnav .container::-webkit-scrollbar{display:none}
body.public-page .portal-subnav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:12px;text-decoration:none;color:#36536e;font-size:12px;font-weight:850}
body.public-page .portal-subnav a:hover{background:var(--page-soft,#edf6ff);color:var(--page-accent,#0d68ba)}
body.public-page .portal-subnav .dot{width:8px;height:8px;border-radius:50%;background:var(--page-accent,#0d68ba);box-shadow:0 0 0 5px color-mix(in srgb,var(--page-accent,#0d68ba) 12%,transparent)}
body.public-page .section{padding:74px 0}
body.public-page .section-head{margin-bottom:30px}
body.public-page .section-head h2,body.public-page .section h2{letter-spacing:-.032em;text-wrap:balance}
body.public-page .card,body.public-page .panel,body.public-page .stat,body.public-page .service,
body.public-page .commit,body.public-page .domain,body.public-page .program-card,body.public-page .indicator,
body.public-page .plan-card,body.public-page .staff-card,body.public-page .class-card{
  border-color:var(--ui-line)!important;box-shadow:var(--ui-shadow-soft);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
body.public-page .card:hover,body.public-page .service:hover,body.public-page .commit:hover,
body.public-page .domain:hover,body.public-page .program-card:hover,body.public-page .staff-card:hover,
body.public-page .class-card:hover{transform:translateY(-3px);box-shadow:var(--ui-shadow)}
body.public-page .btn{box-shadow:none;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
body.public-page .btn:hover{transform:translateY(-2px);filter:saturate(1.06);box-shadow:0 13px 26px rgba(10,45,85,.15)}
body.public-page .footer{background:linear-gradient(145deg,#061c35,#0a3158)!important}
body.public-page .footer-grid{gap:42px}
body.public-page .copy{opacity:.82}

/* Layanan: cerah, humanis, seperti pusat layanan publik */
body.page-layanan{--page-accent:#087fb5;--page-soft:#e7f7fb}
body.page-layanan .hero{background:linear-gradient(120deg,#063a63 0%,#087faa 57%,#21a6a1 115%)}
body.page-layanan .hero:before{background:radial-gradient(circle,#fff 0 2px,transparent 3px);background-size:24px 24px;width:420px;height:260px;right:1%;top:8%;border-radius:0;opacity:.14}
body.page-layanan .hero-card{border-radius:30px;transform:rotate(1deg)}
body.page-layanan .jump-grid{border-radius:24px;padding:10px}
body.page-layanan .profile-grid>.card:first-child{background:linear-gradient(145deg,#fff,#f0fbfd)}
body.page-layanan .staff-card{border-radius:28px}
body.page-layanan .staff-photo{aspect-ratio:1/1;background:linear-gradient(145deg,#dff4f7,#e7f0fb)}
body.page-layanan .status{border-radius:30px;background:linear-gradient(145deg,#06375c,#0c86aa)}
body.page-layanan .event{border-left:5px solid #0a94aa}

/* Data Sekolah: dashboard transparansi, hijau-teal */
body.page-data{--page-accent:#087e68;--page-soft:#e8f8f3}
body.page-data .hero{background:linear-gradient(135deg,#e9fff7 0%,#f7fffc 56%,#ddf4ff 100%);color:#123e3a;border-bottom:1px solid #d4eee7}
body.page-data .hero:before{background:linear-gradient(135deg,#13a68422,#1694cf18);width:520px;height:520px;right:-220px;top:-270px}
body.page-data .hero h1,body.page-data .hero h2{color:#083f3a}
body.page-data .hero p{color:#4e716e}
body.page-data .eyebrow{background:#fff;border-color:#cfe9e2;color:#087b67}
body.page-data .btn.ghost{color:#0c6258;border-color:#9bcfc4;background:#ffffffaa}
body.page-data .hero-card{background:#073f3b;color:#fff;border:0;box-shadow:0 28px 70px rgba(5,72,65,.22)}
body.page-data .hero-card h2,body.page-data .hero-card p,body.page-data .hero-mini small{color:#e7f7f3}
body.page-data .hero-mini{background:#ffffff14;border-color:#ffffff20}
body.page-data .hero-mini strong{color:#fff}
body.page-data .quick-grid{border-top:4px solid #0a8b73}
body.page-data .section.alt{background:#f0faf7}
body.page-data .stat{border-top:4px solid #0b8d75!important}
body.page-data .bar{background:linear-gradient(#4fd0ae,#087d68)}
body.page-data .class-card:before{background:#0a8b73}

/* Akademik: editorial-indigo dengan ritme jadwal */
body.page-akademik{--page-accent:#5c4bd4;--page-soft:#f0edff}
body.page-akademik .hero{background:linear-gradient(122deg,#221859 0%,#4434a1 53%,#2664ba 115%)}
body.page-akademik .hero:after{content:'';position:absolute;inset:auto -100px -180px auto;width:520px;height:520px;border:90px solid #ffffff0c;border-radius:50%;background:transparent}
body.page-akademik .summary-card{border-radius:32px;background:linear-gradient(145deg,#fff,#f6f4ff)}
body.page-akademik .section.alt{background:#f3f1ff}
body.page-akademik .subject-card,body.page-akademik .program-card{border-top:4px solid #6654d8!important}
body.page-akademik .schedule-card,body.page-akademik .achievement-card{border-left:4px solid #6654d8!important}
body.page-akademik .tabs button.active{background:#5c4bd4!important}

/* Prioritas: dashboard kebijakan, navy-amber */
body.page-prioritas{--page-accent:#d88900;--page-soft:#fff5df}
body.page-prioritas .hero{background:linear-gradient(125deg,#111f3d 0%,#153f6e 56%,#8b5a00 150%)}
body.page-prioritas .hero:before{background:repeating-radial-gradient(circle at center,#f6b92822 0 2px,transparent 3px 24px);width:430px;height:430px;right:-90px;top:-40px;border-radius:50%}
body.page-prioritas .hero-card,body.page-prioritas .summary-card{border-radius:30px;border-top:6px solid #f2ad1e}
body.page-prioritas .section.alt{background:#fff8e9}
body.page-prioritas .program-card{border-left:5px solid #dfa020!important}
body.page-prioritas .progress>span,.page-prioritas .bar>span{background:linear-gradient(90deg,#e39a0b,#ffca4c)!important}
body.page-prioritas .badge{background:#fff0c8;color:#7f5200}

/* PBD: analitik ringan, biru-cyan */
body.page-pbd{--page-accent:#0876b9;--page-soft:#eaf7ff}
body.page-pbd .hero{background:linear-gradient(135deg,#eaf8ff 0%,#f8fcff 50%,#dff0ff 100%);color:#12395b;border-bottom:1px solid #cfe3f1}
body.page-pbd .hero h1{color:#0b3b62}
body.page-pbd .hero p{color:#52738d}
body.page-pbd .eyebrow{background:#fff;border-color:#cfe3ef;color:#0a6ea9}
body.page-pbd .summary-card,body.page-pbd .hero-card{background:linear-gradient(145deg,#073c64,#0c73a8);color:#fff;border:0}
body.page-pbd .summary-card h3,body.page-pbd .summary-card strong,body.page-pbd .hero-card h3{color:#fff}
body.page-pbd .summary-card p,body.page-pbd .hero-card p{color:#dceff8}
body.page-pbd .section.alt{background:#edf8fd}
body.page-pbd .cycle-card,body.page-pbd .indicator,body.page-pbd .plan-card{border-top:4px solid #0b86bd!important}
body.page-pbd .cycle-number{background:#0b78ad!important}

/* Aman & Nyaman: lembut, menenangkan, hijau */
body.page-aman{--page-accent:#188663;--page-soft:#eaf8f1}
body.page-aman .hero{background:linear-gradient(125deg,#0d5c4b 0%,#16856b 60%,#5ab395 125%)}
body.page-aman .hero:before{background:linear-gradient(135deg,#ffffff10,#ffffff00);width:600px;height:600px;right:-280px;top:-260px;border:80px solid #ffffff0c}
body.page-aman .hero-card{border-radius:40px 40px 40px 10px;background:#fff;color:#173d35}
body.page-aman .shield{background:#e5f7ef!important;color:#147556!important}
body.page-aman .section.alt{background:#edf9f3}
body.page-aman .domain{border-radius:28px;border-top:4px solid #27a17c!important}
body.page-aman .commit{border-left:5px solid #28a27d!important}
body.page-aman .report-wrap{gap:24px}
body.page-aman .report-wrap>.panel:first-child{border-top:6px solid #168663!important}
body.page-aman .report-wrap>.panel:last-child{background:linear-gradient(145deg,#f2fbf7,#fff)}

/* PIP: berbeda jelas, civic-purple */
body.page-pip{--page-accent:#4458c7;--page-soft:#edf0ff}
body.page-pip .header{border-bottom:0!important}
body.page-pip .hero{background:linear-gradient(125deg,#26317d,#4b55bc 58%,#7c4bb1 115%)}
body.page-pip .hero:before{content:'';position:absolute;width:420px;height:420px;border:70px solid #ffffff0d;border-radius:50%;right:-150px;top:-150px}
body.page-pip .hero-art{filter:drop-shadow(0 26px 35px rgba(21,24,79,.24))}
body.page-pip .section:nth-of-type(even){background:#f0f1ff}
body.page-pip .target-card,body.page-pip .step-card,body.page-pip .service-card{border-top:4px solid #5666d7!important}

/* Privasi: dokumentasi minimal dan profesional */
body.page-privasi{--page-accent:#526579;--page-soft:#eef2f5;background:#eef3f7}
body.page-privasi .header{background:linear-gradient(135deg,#1c2d3e,#4d6478)!important;padding-bottom:88px}
body.page-privasi .card{max-width:960px;border-radius:32px;padding:clamp(24px,5vw,52px);box-shadow:0 28px 80px rgba(21,42,61,.14)}
body.page-privasi .card h2{padding-top:12px;border-top:1px solid #e1e8ee}
body.page-privasi .card h2:first-child{border:0;padding-top:0}
body.page-privasi .item{border-left:4px solid #63798c}
body.page-privasi .note{background:#f1f5f8;border-color:#52697d}

@media(max-width:1100px){
  body.public-page .portal-global-nav>a:nth-of-type(n+6){display:none}
  body.public-page .portal-global-nav{margin-left:auto}
}
@media(max-width:860px){
  body.public-page .container{width:min(100% - 28px,1240px)}
  body.public-page .portal-global-nav{display:none!important}
  body.public-page .hero-grid{min-height:auto;padding:54px 0 72px}
  body.public-page .portal-subnav{margin-top:-28px}
  body.page-data .hero-grid,body.page-pbd .hero-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  body.public-page{padding-bottom:72px}
  body.public-page .container{width:min(100% - 22px,1240px)}
  body.public-page .topbar .container,body.public-page .top .container,body.public-page .topline .container{font-size:10px;gap:8px}
  body.public-page .brand img{width:46px;height:46px}
  body.public-page .brand strong{font-size:14px}
  body.public-page .head,body.public-page .head-inner,body.public-page .navwrap{min-height:68px}
  body.public-page .hero-grid{padding:42px 0 62px;gap:24px}
  body.public-page .hero h1{font-size:clamp(34px,12vw,50px)!important}
  body.public-page .hero p{font-size:14px!important}
  body.public-page .hero-card,body.public-page .summary-card{border-radius:24px;transform:none!important}
  body.public-page .portal-subnav .container{border-radius:16px;padding:7px}
  body.public-page .portal-subnav a{padding:10px 12px}
  body.public-page .section{padding:58px 0}
  body.public-page .section-head{align-items:flex-start}
  body.public-page .footer{padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){body.public-page *{transition:none!important;scroll-behavior:auto!important}}