:root{--p:#0b2a5b;--s:#f4b400;--a:#155bd7;--bg:#f6f8fc;--card:#fff;--text:#132238;--muted:#6b7280;--r:18px;--shadow:0 10px 30px rgba(15,23,42,.10)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.site-header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(0,0,0,.06)}.nav-wrap{max-width:1500px;margin:auto;min-height:84px;padding:0 28px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:12px;min-width:330px}.brand img{width:54px;height:54px}.brand strong{display:block;font-size:23px;color:var(--p)}.brand small{font-weight:800;font-size:11px;color:var(--a)}.main-nav{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:13px;font-weight:800}.main-nav a{padding:30px 0;position:relative}.main-nav a.active,.main-nav a:hover{color:var(--a)}.main-nav a.active:after{content:"";position:absolute;bottom:16px;left:0;right:0;height:3px;border-radius:3px;background:var(--s)}.menu-toggle{display:none;margin-left:auto;border:0;background:var(--p);color:#fff;border-radius:9px;padding:10px 13px}.hero-slider{position:relative;overflow:hidden;background:#0d1b2a}.hero-slide{display:none}.hero-slide.active{display:block}.hero-slide img{width:100%;height:min(38vw,560px);object-fit:cover}.hero-prev,.hero-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:30px}.hero-prev{left:18px}.hero-next{right:18px}.page-shell{max-width:1420px;margin:auto;padding:28px}.section-card,.section-block,.gallery-block{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--p) 9%,transparent)}.vm-card{display:grid;grid-template-columns:1.15fr 1fr 1.25fr;overflow:hidden}.vm-card>div{padding:28px}.principal{background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p),#fff 18%));color:#fff;display:flex;gap:22px;align-items:center}.principal img{width:150px;height:185px;object-fit:cover;border-radius:15px}.badge{display:inline-block;background:var(--s);color:#111827;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:900}.principal h2{margin:12px 0 6px}.vm-col{border-left:1px solid #e5e7eb}.icon-title,.section-title{display:flex;align-items:center;gap:10px}.icon-title h3,.section-title h2{margin:0}.icon-title{font-size:22px;color:var(--a)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.two-col .section-card{padding:22px}.section-title{padding:0 0 16px}.section-title span{font-size:22px}.section-title h2{font-size:18px;color:var(--p)}.section-title a{margin-left:auto;font-size:12px;font-weight:800;color:var(--a)}.featured-ann{display:grid;grid-template-columns:44% 1fr;gap:18px}.featured-ann img{width:100%;height:240px;object-fit:cover;border-radius:12px}.featured-ann h3{font-size:20px}.more{display:inline-block;margin-top:8px;color:var(--a);font-weight:800}.announcement-list a{display:flex;gap:16px;justify-content:space-between;padding:13px 0;border-bottom:1px solid #edf0f4;font-size:14px}.announcement-list time{color:var(--muted);white-space:nowrap}.section-block{margin-top:22px;padding:22px}.section-title.fancy{background:linear-gradient(90deg,color-mix(in srgb,var(--s) 22%,white),transparent);padding:13px 16px;border-radius:13px;margin-bottom:18px;border-left:5px solid var(--s)}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.news-card{border:1px solid #e4e7ec;border-radius:14px;overflow:hidden;background:#fff;transition:.2s}.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.news-card img{width:100%;height:190px;object-fit:cover;border-radius:5% 5% 0 0}.news-body{padding:16px}.news-body time{color:var(--a);font-size:12px;font-weight:800}.news-body h3{font-size:17px}.news-body p{font-size:13px;line-height:1.65;color:#475569;min-height:105px}.news-body a{font-size:12px;font-weight:800;color:var(--a)}.pagination{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:20px}.pagination>*{border:1px solid #d8dee8;background:#fff;padding:7px 11px;border-radius:9px;font-weight:700;color:var(--p)}.pagination .active{background:var(--s);border-color:var(--s)}.video-section{margin-top:22px;padding:22px;background:linear-gradient(140deg,var(--p),color-mix(in srgb,var(--p),#000 15%));color:#fff}.section-title.inverse h2{color:#fff}.video-layout{display:grid;grid-template-columns:1.65fr 1fr;gap:20px}.video-placeholder{height:420px;background:#06101f;border-radius:15px;overflow:hidden;position:relative}.video-placeholder img{width:100%;height:100%;object-fit:cover}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:2px solid #fff;background:rgba(5,18,42,.72);color:#fff;font-size:30px}.video-list{background:#fff;color:var(--text);border-radius:14px;max-height:470px;overflow-y:auto;padding:8px}.video-item{width:100%;border:0;background:#fff;display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;text-align:left;padding:9px;border-bottom:1px solid #edf0f4;cursor:pointer}.video-item img{width:110px;height:64px;object-fit:cover;border-radius:8px}.video-item span{font-weight:800}.video-item small{color:#64748b}.video-page>*{background:rgba(255,255,255,.94)}.staff-section{margin-top:22px;padding:22px}.section-title.centered{justify-content:center}.carousel-wrap{position:relative}.staff-track{display:flex;gap:15px;overflow:hidden;padding:8px 42px}.staff-card{min-width:190px;flex:1;border:1px solid #e5e7eb;border-radius:14px;padding:10px;text-align:center;background:#fff}.staff-card img{width:100%;height:220px;object-fit:cover;border-radius:10px}.staff-card h3{font-size:14px;margin:10px 0 4px}.staff-card p{font-size:12px;margin:0;color:#64748b}.carousel-prev,.carousel-next{position:absolute;z-index:2;top:42%;width:38px;height:38px;border:0;border-radius:50%;background:var(--p);color:white;font-size:26px}.carousel-prev{left:-4px}.carousel-next{right:-4px}.dots{text-align:center;padding-top:12px}.dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#cbd5e1;margin:3px}.dots .active{background:var(--s)}.gallery-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.gallery-block{padding:20px}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.gallery-grid figure{margin:0}.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:11px}.gallery-grid figcaption{font-size:11px;text-align:center;font-weight:700;padding:6px}.site-footer{margin-top:28px;background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p),#000 15%));color:#fff}.footer-grid{max-width:1420px;margin:auto;padding:30px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}.footer-grid h3{font-size:14px}.footer-grid p{font-size:13px;color:#dbeafe}.map-box{min-height:100px;border-radius:12px;background:#fff;color:#475569;display:flex;align-items:center;justify-content:center}.socials{display:flex;gap:10px}.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--a);font-weight:900}.copyright{border-top:1px solid rgba(255,255,255,.14);padding:14px 30px;text-align:center;font-size:12px}.copyright span{float:right}.simple-header{padding:18px 6%;background:var(--p);color:#fff}.article-page{max-width:950px;margin:30px auto;background:#fff;border-radius:18px;padding:34px;box-shadow:var(--shadow)}.article-hero{width:100%;max-height:520px;object-fit:cover;border-radius:14px}.article-content{line-height:1.8;white-space:pre-line}.reveal{animation:fadeUp .55s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 25 tema: warna + karakter bentuk/layout */
.theme-01{--p:#0b2a5b;--s:#f7b500;--a:#1266d8}.theme-02{--p:#071a36;--s:#d7aa3c;--a:#ba8520}.theme-03{--p:#0c5b45;--s:#e8b928;--a:#168467}.theme-04{--p:#9b3514;--s:#ffb000;--a:#e25b1d}.theme-05{--p:#4c1d6f;--s:#f0b429;--a:#7b2cbf}.theme-06{--p:#111827;--s:#d8a93c;--a:#64748b;--bg:#0d1117;--card:#171c24;--text:#eef2f7;--muted:#b8c1cf}.theme-07{--p:#243447;--s:#d9a441;--a:#576b80;--bg:#fafafa;--r:8px}.theme-08{--p:#0d5961;--s:#f5b51b;--a:#0b8792}.theme-09{--p:#741a1a;--s:#d8a02d;--a:#a52a2a}.theme-10{--p:#6b421d;--s:#efb65a;--a:#b26a2c;--bg:#fbf7ef}.theme-11{--p:#155e75;--s:#fbbf24;--a:#0ea5e9;--card:rgba(255,255,255,.80);--r:24px}.theme-11 .section-card,.theme-11 .section-block,.theme-11 .gallery-block{backdrop-filter:blur(12px)}.theme-12{--p:#0b3c89;--s:#f4c542;--a:#1d63cf}.theme-13{--p:#7c2358;--s:#ffbd3a;--a:#e34478}.theme-14{--p:#2b2b2b;--s:#e09b2d;--a:#aa6a0c;--bg:#171717;--card:#232323;--text:#f3f4f6}.theme-15{--p:#874f65;--s:#f5c6a5;--a:#d07198;--bg:#fff7f7}.theme-16{--p:#075c69;--s:#f6c343;--a:#09a8bb}.theme-17{--p:#6b4a32;--s:#d9a55b;--a:#9b6b42;--bg:#f7f2ea}.theme-18{--p:#7a1029;--s:#ffcb3d;--a:#c71f46}.theme-19{--p:#061a36;--s:#18d1ff;--a:#19a6ff;--bg:#07111f;--card:#0d1c30;--text:#e7f8ff}.theme-20{--p:#416c22;--s:#e1b83f;--a:#6e9f2f;--bg:#f6faef}.theme-21{--p:#202020;--s:#bbb;--a:#555;--bg:#f4f4f4}.theme-21 img{filter:grayscale(1)}.theme-22{--p:#5e237e;--s:#ffb21a;--a:#e23886}.theme-22 .section-card,.theme-22 .section-block{clip-path:polygon(0 0,97% 0,100% 7%,100% 100%,3% 100%,0 93%)}.theme-23{--p:#08213e;--s:#ff8c1a;--a:#d95c0b}.theme-24{--p:#174b78;--s:#f3b93e;--a:#287bb8;--r:10px}.theme-25{--p:#081f47;--s:#f3b400;--a:#155bd7;--r:18px}
.theme-06 .news-card,.theme-14 .news-card,.theme-19 .news-card{background:var(--card);border-color:#334155}.theme-13 .section-title.fancy,.theme-18 .section-title.fancy,.theme-22 .section-title.fancy{background:linear-gradient(90deg,color-mix(in srgb,var(--a) 20%,white),transparent)}
@media(max-width:1100px){.main-nav{display:none;position:absolute;top:84px;left:0;right:0;background:#fff;padding:18px;flex-direction:column;align-items:flex-start}.main-nav.open{display:flex}.main-nav a{padding:8px}.menu-toggle{display:block}.vm-card{grid-template-columns:1fr}.vm-col{border-left:0;border-top:1px solid #e5e7eb}.news-grid{grid-template-columns:repeat(2,1fr)}.video-layout{grid-template-columns:1fr}.gallery-pair{grid-template-columns:1fr}}
@media(max-width:720px){.nav-wrap{padding:0 14px;min-height:72px}.brand{min-width:0}.brand img{width:44px;height:44px}.brand strong{font-size:17px}.brand small{font-size:9px}.hero-slide img{height:260px}.page-shell{padding:14px}.two-col,.news-grid,.footer-grid{grid-template-columns:1fr}.featured-ann{grid-template-columns:1fr}.video-placeholder{height:260px}.staff-card{min-width:160px}.staff-card img{height:190px}.gallery-grid{grid-template-columns:repeat(2,1fr)}.copyright span{float:none;display:block;margin-top:5px}}
.nav-dropdown{position:relative}.nav-dropdown>.dropdown-menu{display:none;position:absolute;right:0;top:58px;min-width:190px;background:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);padding:8px}.nav-dropdown:hover>.dropdown-menu{display:grid}.dropdown-menu a{padding:10px 12px!important;color:#17233b!important;border-radius:8px}.dropdown-menu a:hover{background:#eef4ff}.theme-02 .site-header,.theme-06 .site-header,.theme-14 .site-header,.theme-19 .site-header,.theme-23 .site-header{background:var(--p);color:#fff}.theme-02 .brand strong,.theme-06 .brand strong,.theme-14 .brand strong,.theme-19 .brand strong,.theme-23 .brand strong{color:#fff}.theme-02 .main-nav a,.theme-06 .main-nav a,.theme-14 .main-nav a,.theme-19 .main-nav a,.theme-23 .main-nav a{color:#fff}.theme-04 .section-card,.theme-04 .section-block,.theme-04 .gallery-block{border-radius:6px;border-top:4px solid var(--s)}.theme-05 .section-title{border-bottom:2px solid color-mix(in srgb,var(--a) 30%,transparent)}.theme-07 .section-card,.theme-07 .section-block,.theme-07 .gallery-block{box-shadow:none;border:1px solid #e3e6ea}.theme-08 .section-card,.theme-08 .section-block{border-left:4px solid var(--a)}.theme-09 .section-title.fancy{background:#fff;border-left:7px solid var(--p)}.theme-10 .site-header{background:#fffaf0}.theme-12 .section-card{box-shadow:0 12px 26px rgba(11,60,137,.14)}.theme-13 .site-header{background:linear-gradient(90deg,#fff,#fff2f7)}.theme-15 .news-card{border-radius:24px}.theme-16 .section-title.fancy{border-left:0;border-radius:30px 8px 30px 8px;background:linear-gradient(90deg,#dffafe,transparent)}.theme-17 .news-card,.theme-17 .gallery-block{border:1px solid #d8c2a9}.theme-18 .news-card{border-radius:0;border-left:5px solid var(--p)}.theme-18 .section-title h2{letter-spacing:.08em}.theme-19 .section-card,.theme-19 .section-block,.theme-19 .gallery-block{box-shadow:0 0 0 1px #145075,0 0 24px rgba(24,209,255,.12)}.theme-20 .section-title.fancy{border-left-color:#78a83e}.theme-23 .section-title.fancy{border-left-color:#ff8c1a}.theme-24 .section-card,.theme-24 .section-block,.theme-24 .gallery-block{box-shadow:0 5px 15px rgba(23,75,120,.08)}.theme-25 .section-title.fancy,.theme-25 .video-section{border:1px solid rgba(244,180,0,.35)}

/* Dynamic navbar + centered website popup */
.rich-content{white-space:normal}.rich-content img{max-width:100%;height:auto}.rich-content table{width:100%;border-collapse:collapse}.rich-content td,.rich-content th{border:1px solid #dce3ed;padding:8px}.rich-content a{color:var(--a);text-decoration:underline}
.site-popup-backdrop{position:fixed;z-index:1000;inset:0;background:rgba(2,12,30,.62);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}.site-popup-backdrop[hidden]{display:none}.site-popup{width:min(920px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 28px 90px rgba(0,0,0,.3);position:relative;border:1px solid rgba(255,255,255,.7)}.site-popup-horizontal{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr)}.site-popup-vertical{width:min(620px,94vw)}.site-popup-media img{width:100%;height:100%;min-height:320px;object-fit:cover}.site-popup-vertical .site-popup-media img{height:260px;min-height:0}.site-popup-content{padding:36px}.site-popup-kicker{display:inline-block;color:var(--a);font-size:11px;font-weight:800;letter-spacing:.12em}.site-popup-content h2{font-size:30px;margin:8px 0 14px;color:var(--p)}.site-popup-text{line-height:1.75;color:#475569}.site-popup-button{display:inline-flex;margin-top:18px;background:var(--a);color:#fff!important;padding:11px 18px;border-radius:10px;font-weight:700}.site-popup-close{position:absolute;z-index:2;right:12px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#0b234d;color:#fff;font-size:25px;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.18)}
@media(max-width:720px){.site-popup-horizontal{grid-template-columns:1fr}.site-popup-horizontal .site-popup-media img{height:220px;min-height:0}.site-popup-content{padding:24px}.site-popup-content h2{font-size:24px}}

/* Revision: real listing pages, safe maps, and article metadata */
.map-box{overflow:hidden}.map-box iframe{width:100%;height:180px;border:0;display:block}.map-link{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:10px;background:var(--s);color:#10213d!important;font-weight:800}.article-date{display:block;margin:8px 0 18px;color:#64748b;font-size:13px}.article-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#64748b;font-size:13px;margin-bottom:18px}.article-breadcrumb a{color:var(--a);font-weight:700}.listing-page{max-width:1420px;margin:28px auto;padding:0 24px 50px}.listing-header{background:#fff;border-radius:18px;padding:26px 30px;margin-bottom:22px;box-shadow:var(--shadow)}.listing-header h1{margin:8px 0}.listing-header p{color:#64748b;margin:0 0 8px}.listing-header small{color:#64748b}.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.listing-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}.listing-card>img{width:100%;height:220px;object-fit:cover}.listing-card>div{padding:18px}.listing-card time{font-size:12px;color:#64748b}.listing-card h2{font-size:19px;line-height:1.35;margin:8px 0}.listing-card p{color:#64748b;line-height:1.65;font-size:14px}.listing-card a{color:var(--a);font-weight:800}.listing-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.listing-gallery figure{margin:0;background:#fff;border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}.listing-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.listing-gallery figcaption{padding:14px;display:grid;gap:5px}.listing-gallery figcaption span{font-size:13px;color:#64748b}.real-pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:28px}.real-pagination a{min-width:40px;height:40px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid #dbe3ee;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:var(--p)}.real-pagination a.active{background:var(--p);color:#fff;border-color:var(--p)}.empty-state{background:#fff;padding:34px;border-radius:16px;text-align:center;color:#64748b;box-shadow:var(--shadow)}
@media(max-width:1000px){.listing-grid{grid-template-columns:repeat(2,1fr)}.listing-gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.listing-page{padding:0 14px 36px}.listing-grid{grid-template-columns:1fr}.listing-gallery{grid-template-columns:repeat(2,1fr)}.listing-card>img{height:210px}.listing-header{padding:22px}.map-box iframe{height:220px}}

/* =========================================================
   Visual refinement v8.1 - berlaku untuk seluruh 25 template
   ========================================================= */
body[class*="theme-"] .vm-card{align-items:stretch}
body[class*="theme-"] .principal{
    position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:15px;text-align:center;padding:28px 24px 25px!important;overflow:hidden
}
body[class*="theme-"] .principal::before{content:"";position:absolute;width:180px;height:180px;border:24px solid rgba(255,255,255,.075);border-radius:50%;right:-86px;top:-72px;z-index:-1}
body[class*="theme-"] .principal::after{content:"";position:absolute;width:120px;height:120px;border:16px solid color-mix(in srgb,var(--t-accent,var(--s)) 32%,transparent);border-radius:50%;left:-62px;bottom:-58px;z-index:-1}
body[class*="theme-"] .principal-heading{width:100%;display:flex;justify-content:center}
body[class*="theme-"] .principal .badge{font-size:12px;letter-spacing:.04em;padding:8px 17px;box-shadow:0 7px 18px rgba(0,0,0,.13)}
body[class*="theme-"] .principal-photo-wrap{position:relative;padding:5px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.92),color-mix(in srgb,var(--t-accent,var(--s)) 42%,white));box-shadow:0 14px 30px rgba(0,0,0,.18)}
body[class*="theme-"] .principal-photo-wrap::after{content:"";position:absolute;inset:-7px;border:1px solid rgba(255,255,255,.28);border-radius:29px;pointer-events:none}
body[class*="theme-"] .principal img{width:170px;height:205px;object-fit:cover;object-position:center top;border-radius:19px}
body[class*="theme-"] .principal-identity{width:100%}
body[class*="theme-"] .principal h2{margin:2px 0 4px;font-size:clamp(22px,2vw,31px);line-height:1.18;color:#fff!important}
body[class*="theme-"] .principal .principal-title-text{margin:0;color:rgba(255,255,255,.76)!important;font-size:14px;line-height:1.5}

body[class*="theme-"] .vm-col{position:relative;overflow:hidden;padding:34px 34px!important;background-image:radial-gradient(circle at 100% 0,var(--orn-a,rgba(21,91,215,.07)) 0 5px,transparent 6px),linear-gradient(135deg,var(--orn-a,rgba(21,91,215,.035)),transparent 38%)}
body[class*="theme-"] .vm-col::after{content:"";position:absolute;right:-42px;bottom:-46px;width:120px;height:120px;border:16px solid var(--orn-b,rgba(243,180,0,.10));border-radius:50%;pointer-events:none}
body[class*="theme-"] .icon-title{position:relative;z-index:1;gap:11px;margin-bottom:19px;color:var(--t-secondary,var(--a))}
body[class*="theme-"] .vm-title-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--t-secondary,var(--a)) 10%,white);border:1px solid color-mix(in srgb,var(--t-secondary,var(--a)) 24%,white);font-size:19px}
body[class*="theme-"] .icon-title h3{font-size:clamp(24px,2.1vw,35px);letter-spacing:.01em;color:var(--t-secondary,var(--a))!important}
body[class*="theme-"] .vision-item{display:grid;grid-template-columns:34px 1fr;gap:13px;align-items:flex-start;position:relative;z-index:1}
body[class*="theme-"] .vision-check{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--t-secondary,var(--a));color:#fff;font-size:17px;font-weight:900;box-shadow:0 7px 18px color-mix(in srgb,var(--t-secondary,var(--a)) 24%,transparent)}
body[class*="theme-"] .vision-item p{margin:1px 0 0;font-size:clamp(16px,1.35vw,21px);line-height:1.52}
body[class*="theme-"] .mission-text{position:relative;z-index:1;font-size:clamp(15px,1.25vw,19px);line-height:1.68;color:var(--t-text,#17233b)}

/* Ornamen lembut untuk seluruh blok/kartu utama, mengikuti warna masing-masing template. */
body[class*="theme-"] .featured-ann,
body[class*="theme-"] .announcement-list,
body[class*="theme-"] .news-card,
body[class*="theme-"] .video-layout,
body[class*="theme-"] .staff-card,
body[class*="theme-"] .gallery-grid figure,
body[class*="theme-"] .listing-card,
body[class*="theme-"] .listing-gallery figure,
body[class*="theme-"] .listing-header,
body[class*="theme-"] .article-page{
    position:relative;isolation:isolate;
    background-image:linear-gradient(145deg,var(--orn-a,rgba(21,91,215,.035)),transparent 32%),radial-gradient(circle at 92% 9%,var(--orn-b,rgba(243,180,0,.10)) 0 7px,transparent 8px)!important
}
body[class*="theme-"] .featured-ann::after,
body[class*="theme-"] .announcement-list::after,
body[class*="theme-"] .news-card::after,
body[class*="theme-"] .staff-card::after,
body[class*="theme-"] .gallery-grid figure::after,
body[class*="theme-"] .listing-card::after,
body[class*="theme-"] .listing-gallery figure::after{
    content:"";position:absolute;right:-19px;top:-19px;width:54px;height:54px;border:8px solid var(--orn-b,rgba(243,180,0,.10));border-radius:50%;pointer-events:none;z-index:0
}
body[class*="theme-"] .featured-ann>*,body[class*="theme-"] .announcement-list>*,body[class*="theme-"] .news-card>*,body[class*="theme-"] .staff-card>*,body[class*="theme-"] .gallery-grid figure>*,body[class*="theme-"] .listing-card>*,body[class*="theme-"] .listing-gallery figure>*{position:relative;z-index:1}

/* Tombol berita: lebih jelas, modern, dan tetap mengikuti identitas 25 template. */
body[class*="theme-"] .read-more-btn{display:inline-flex!important;align-items:center;gap:10px;width:max-content;margin-top:8px;padding:10px 15px;border-radius:999px;background:linear-gradient(135deg,var(--t-primary,var(--p)),var(--t-secondary,var(--a)))!important;color:#fff!important;font-size:12px!important;font-weight:800!important;letter-spacing:.01em;box-shadow:0 8px 20px color-mix(in srgb,var(--t-primary,var(--p)) 20%,transparent);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
body[class*="theme-"] .read-more-btn:hover{transform:translateY(-2px);box-shadow:0 12px 25px color-mix(in srgb,var(--t-primary,var(--p)) 27%,transparent);filter:saturate(1.08)}
body[class*="theme-"] .read-more-arrow{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.17);font-size:15px;transition:transform .2s ease}
body[class*="theme-"] .read-more-btn:hover .read-more-arrow{transform:translateX(3px)}

@media(max-width:1100px){body[class*="theme-"] .principal{padding:25px 20px!important}body[class*="theme-"] .vm-col{padding:27px 24px!important}}
@media(max-width:720px){body[class*="theme-"] .principal img{width:155px;height:190px}body[class*="theme-"] .vm-col{padding:24px 20px!important}.vision-item{grid-template-columns:30px 1fr!important}}


/* =========================================================
   Rich text Kepala Sekolah / Visi / Misi - seluruh 25 template
   Format berasal langsung dari editor Quill di halaman admin.
   ========================================================= */
body[class*="theme-"] .school-rich-text{position:relative;z-index:1;min-width:0;line-height:1.55;word-break:normal;overflow-wrap:anywhere}
body[class*="theme-"] .school-rich-text p{margin:0 0 .48em}
body[class*="theme-"] .school-rich-text p:last-child{margin-bottom:0}
body[class*="theme-"] .school-rich-text ul,
body[class*="theme-"] .school-rich-text ol{margin:.35em 0 .55em;padding-left:1.55em}
body[class*="theme-"] .school-rich-text li{margin:.18em 0}
body[class*="theme-"] .school-rich-text li[data-list="bullet"]{list-style-type:disc}
body[class*="theme-"] .school-rich-text li[data-list="ordered"]{list-style-type:decimal}
body[class*="theme-"] .school-rich-text li[data-list="checked"]{list-style-type:"✓  "}
body[class*="theme-"] .school-rich-text li[data-list="unchecked"]{list-style-type:"○  "}
body[class*="theme-"] .school-rich-text .ql-ui{display:none}
body[class*="theme-"] .school-rich-text a{color:var(--t-secondary,var(--a));text-decoration:underline;text-underline-offset:2px}
body[class*="theme-"] .school-rich-text blockquote{margin:.55em 0;padding:.25em 0 .25em .8em;border-left:3px solid var(--t-secondary,var(--a))}

body[class*="theme-"] .principal-name-rich{font-size:clamp(22px,2vw,31px);font-weight:700;color:#fff;line-height:1.18;text-align:center}
body[class*="theme-"] .principal-name-rich p{color:inherit;font-size:inherit;line-height:inherit}
body[class*="theme-"] .vision-rich{font-size:clamp(16px,1.35vw,21px);color:#64748b;line-height:1.52}
body[class*="theme-"] .vision-rich p{font-size:inherit;color:inherit;line-height:inherit}
body[class*="theme-"] .mission-rich{font-size:clamp(15px,1.25vw,19px);color:var(--t-text,#17233b);line-height:1.68}
body[class*="theme-"] .mission-rich p{font-size:inherit;color:inherit;line-height:inherit}

/* Format kelas yang dihasilkan Quill. */
body[class*="theme-"] .school-rich-text .ql-align-center{text-align:center}
body[class*="theme-"] .school-rich-text .ql-align-right{text-align:right}
body[class*="theme-"] .school-rich-text .ql-align-justify{text-align:justify}
body[class*="theme-"] .school-rich-text .ql-direction-rtl{direction:rtl;text-align:inherit}
body[class*="theme-"] .school-rich-text .ql-indent-1{padding-left:2.5em}
body[class*="theme-"] .school-rich-text .ql-indent-2{padding-left:5em}
body[class*="theme-"] .school-rich-text .ql-indent-3{padding-left:7.5em}
body[class*="theme-"] .school-rich-text .ql-indent-4{padding-left:10em}
body[class*="theme-"] .school-rich-text .ql-indent-5{padding-left:12.5em}
body[class*="theme-"] .school-rich-text .ql-indent-6{padding-left:15em}
body[class*="theme-"] .school-rich-text .ql-indent-7{padding-left:17.5em}
body[class*="theme-"] .school-rich-text .ql-indent-8{padding-left:20em}
body[class*="theme-"] .school-rich-text .ql-font-arial{font-family:Arial,Helvetica,sans-serif}
body[class*="theme-"] .school-rich-text .ql-font-georgia{font-family:Georgia,"Times New Roman",serif}
body[class*="theme-"] .school-rich-text .ql-font-trebuchet{font-family:"Trebuchet MS",Arial,sans-serif}
body[class*="theme-"] .school-rich-text .ql-font-verdana{font-family:Verdana,Geneva,sans-serif}
body[class*="theme-"] .school-rich-text .ql-font-segoe{font-family:"Segoe UI",Arial,sans-serif}

@media(max-width:720px){
    body[class*="theme-"] .principal-name-rich{font-size:clamp(20px,7vw,28px)}
    body[class*="theme-"] .school-rich-text .ql-indent-1{padding-left:1.3em}
    body[class*="theme-"] .school-rich-text .ql-indent-2{padding-left:2.6em}
    body[class*="theme-"] .school-rich-text .ql-indent-3,
    body[class*="theme-"] .school-rich-text .ql-indent-4,
    body[class*="theme-"] .school-rich-text .ql-indent-5,
    body[class*="theme-"] .school-rich-text .ql-indent-6,
    body[class*="theme-"] .school-rich-text .ql-indent-7,
    body[class*="theme-"] .school-rich-text .ql-indent-8{padding-left:3.9em}
}


/* ===== Revisi blok Kepala Sekolah / Visi / Misi ===== */
body[class*="theme-"] .principal-identity-title-only{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:4px;
}
body[class*="theme-"] .principal-identity-title-only .principal-title-text{
    margin:0;
    text-align:center;
}
body[class*="theme-"] .vm-title-centered{
    justify-content:center;
    width:100%;
    text-align:center;
}
body[class*="theme-"] .vision-item-no-check{
    display:block;
}
body[class*="theme-"] .vision-item-no-check .vision-rich{
    width:100%;
}

/* ===== YouTube player ===== */
.youtube-frame{
    width:100%;
    height:420px;
    display:block;
    border:0;
    border-radius:15px;
    background:#06101f;
}
.video-item.active{
    background:color-mix(in srgb,var(--s) 14%,#fff);
    box-shadow:inset 3px 0 0 var(--s);
}
.youtube-duration-probe{
    position:fixed!important;
    left:-9999px!important;
    top:-9999px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:.001!important;
    pointer-events:none!important;
}
.video-invalid::after{
    content:"Link YouTube tidak valid";
    position:absolute;
    inset:auto 16px 16px 16px;
    padding:10px 14px;
    border-radius:10px;
    background:rgba(0,0,0,.72);
    color:#fff;
    text-align:center;
    font-size:13px;
}
@media(max-width:720px){
    .youtube-frame{height:260px}
}


/* ============================================================
   Lightbox foto + Galeri portrait 8 blok
   Berlaku pada seluruh 25 template melalui warna tema global.
   ============================================================ */
.image-zoom-trigger{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    cursor:zoom-in;
    overflow:hidden;
    border-radius:inherit;
}
.image-zoom-trigger img{
    transition:transform .28s ease,filter .28s ease;
}
.image-zoom-trigger:hover img,
.image-zoom-trigger:focus-visible img{
    transform:scale(1.035);
    filter:saturate(1.04);
}
.image-zoom-trigger:focus-visible{
    outline:3px solid color-mix(in srgb,var(--a) 55%,white);
    outline-offset:3px;
}
.zoom-hint{
    position:absolute;
    right:10px;
    bottom:10px;
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(9,24,48,.72);
    color:#fff;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 7px 18px rgba(0,0,0,.18);
    opacity:0;
    transform:translateY(6px);
    transition:.22s ease;
    font-size:20px;
    line-height:1;
}
.image-zoom-trigger:hover .zoom-hint,
.image-zoom-trigger:focus-visible .zoom-hint{
    opacity:1;
    transform:none;
}
.staff-photo-trigger{
    border-radius:10px;
}
.staff-photo-trigger img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
}

/* Dua galeri ditampilkan bertumpuk penuh, masing-masing 8 card portrait */
.gallery-showcase{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
    margin-top:22px;
}
.gallery-block-full{
    padding:22px;
}
.gallery-title-row{
    align-items:center;
}
.gallery-grid-portrait{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}
.gallery-card-portrait{
    margin:0;
    min-width:0;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--p) 10%,#e6eaf0);
    border-radius:16px;
    background:var(--card);
    box-shadow:0 7px 20px rgba(15,39,71,.07);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.gallery-card-portrait:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--a) 30%,#dfe5ec);
    box-shadow:0 13px 30px rgba(15,39,71,.12);
}
.gallery-card-portrait .gallery-photo-trigger{
    border-radius:0;
}
.gallery-card-portrait img{
    width:100%;
    aspect-ratio:3/4;
    height:auto;
    object-fit:cover;
    border-radius:0;
}
.gallery-card-portrait figcaption{
    min-height:54px;
    padding:12px 13px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    line-height:1.35;
    font-weight:800;
    color:var(--text);
}

/* Lightbox */
.school-lightbox{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    padding:24px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease;
}
.school-lightbox.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.school-lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(3,12,28,.86);
    backdrop-filter:blur(7px);
}
.school-lightbox-dialog{
    position:relative;
    z-index:1;
    width:min(1040px,94vw);
    max-height:92vh;
    display:flex;
    flex-direction:column;
    background:color-mix(in srgb,var(--card) 96%,#fff);
    border:1px solid rgba(255,255,255,.24);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 28px 80px rgba(0,0,0,.38);
    transform:scale(.96) translateY(8px);
    transition:transform .22s ease;
}
.school-lightbox.is-open .school-lightbox-dialog{
    transform:none;
}
.school-lightbox-image-wrap{
    min-height:240px;
    max-height:78vh;
    display:grid;
    place-items:center;
    padding:14px;
    background:linear-gradient(145deg,#071225,#0c1d35);
}
.school-lightbox-image-wrap img{
    display:block;
    max-width:100%;
    max-height:74vh;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:10px;
}
.school-lightbox-close{
    position:absolute;
    z-index:3;
    top:12px;
    right:12px;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.65);
    border-radius:50%;
    background:rgba(5,17,38,.76);
    color:#fff;
    font-size:30px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.school-lightbox-close:hover{
    background:var(--a);
}
.school-lightbox-caption{
    display:grid;
    gap:3px;
    padding:14px 18px 16px;
    text-align:center;
}
.school-lightbox-caption strong{
    color:var(--p);
    font-size:16px;
}
.school-lightbox-caption span{
    color:var(--muted);
    font-size:13px;
}
body.lightbox-open{
    overflow:hidden;
}

@media(max-width:1100px){
    .gallery-grid-portrait{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
    .gallery-grid-portrait{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
    .gallery-block-full{padding:16px}
    .gallery-card-portrait figcaption{font-size:11px;padding:10px 8px}
    .school-lightbox{padding:12px}
    .school-lightbox-dialog{width:96vw;border-radius:15px}
    .school-lightbox-image-wrap{padding:8px;max-height:78vh}
}
@media(max-width:420px){
    .gallery-grid-portrait{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ============================================================
   Revisi teks Visi/Misi + Berita
   Berlaku konsisten pada seluruh theme-01 s.d. theme-25.
   ============================================================ */

/* Rata kiri-kanan untuk isi Visi dan Misi */
body[class*="theme-"] .vision-rich,
body[class*="theme-"] .mission-rich,
body[class*="theme-"] .vision-rich p,
body[class*="theme-"] .mission-rich p,
body[class*="theme-"] .vision-rich li,
body[class*="theme-"] .mission-rich li{
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
}

/* Rata kiri-kanan untuk ringkasan/konten berita */
body[class*="theme-"] .news-body p,
body[class*="theme-"] .listing-card p,
body[class*="theme-"] .article-content{
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
}

/* Metadata pembuat + tanggal berita */
.news-meta,
.article-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px 14px;
    margin-bottom:9px;
    color:var(--muted);
    font-size:11px;
    font-weight:750;
    line-height:1.4;
}
.news-meta .news-author{
    color:color-mix(in srgb,var(--p) 78%,#64748b);
}
.news-meta time{
    color:var(--a);
    font-weight:800;
}
.article-meta{
    margin:8px 0 18px;
    padding:10px 13px;
    width:fit-content;
    border-radius:10px;
    background:color-mix(in srgb,var(--a) 7%,#fff);
    border:1px solid color-mix(in srgb,var(--a) 16%,transparent);
    font-size:13px;
}
.listing-news-meta{
    margin-bottom:8px;
}

/* Pagination berita di bagian bawah blok Berita Terkini */
.homepage-news-pagination{
    margin-top:26px;
    padding-top:20px;
    border-top:1px solid color-mix(in srgb,var(--p) 10%,transparent);
}
.homepage-news-pagination a{
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.homepage-news-pagination a:hover{
    transform:translateY(-2px);
    box-shadow:0 7px 16px rgba(15,39,71,.12);
}
.homepage-news-pagination a.active{
    background:var(--a);
    border-color:var(--a);
    color:#fff;
    box-shadow:0 7px 18px color-mix(in srgb,var(--a) 25%,transparent);
}

@media(max-width:720px){
    .news-meta{
        gap:5px 10px;
        font-size:10px;
    }
    .article-meta{
        width:100%;
    }
}

/* ============================================================
   Presisi blok Kepala Sekolah + Visi/Misi
   Berlaku untuk theme-01 sampai theme-25.
   ============================================================ */

/* Kepala Sekolah: susunan presisi badge -> foto -> nama */
body[class*="theme-"] .principal{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-auto-rows:max-content !important;
    align-content:start !important;
    justify-items:center !important;
    row-gap:0 !important;
    padding:28px 24px 26px !important;
}
body[class*="theme-"] .principal-heading{
    margin:0 0 18px !important;
    width:100% !important;
}
body[class*="theme-"] .principal-photo-wrap{
    margin:0 0 20px !important;
}
body[class*="theme-"] .principal-identity,
body[class*="theme-"] .principal-identity-name-only{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    align-self:start !important;
}
body[class*="theme-"] .principal-name-rich,
body[class*="theme-"] .principal-name-rich p{
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
}
body[class*="theme-"] .principal-name-rich > :first-child{
    margin-top:0 !important;
}
body[class*="theme-"] .principal-name-rich > :last-child{
    margin-bottom:0 !important;
}

/* Visi/Misi: judul dan isi dibuat lebih dekat dan tetap rapi */
body[class*="theme-"] .vm-col{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    padding:30px 34px !important;
}
body[class*="theme-"] .vm-col .icon-title,
body[class*="theme-"] .vm-col .vm-title-centered{
    margin:0 0 16px !important;
    padding:0 !important;
    flex:0 0 auto !important;
}
body[class*="theme-"] .vision-item,
body[class*="theme-"] .vision-item-no-check,
body[class*="theme-"] .mission-text{
    margin:0 !important;
    padding:0 !important;
    flex:0 0 auto !important;
}
body[class*="theme-"] .vision-rich,
body[class*="theme-"] .mission-rich{
    margin:0 !important;
    padding:0 !important;
}
body[class*="theme-"] .vision-rich > :first-child,
body[class*="theme-"] .mission-rich > :first-child{
    margin-top:0 !important;
}
body[class*="theme-"] .vision-rich > :last-child,
body[class*="theme-"] .mission-rich > :last-child{
    margin-bottom:0 !important;
}
body[class*="theme-"] .mission-rich ol,
body[class*="theme-"] .mission-rich ul,
body[class*="theme-"] .vision-rich ol,
body[class*="theme-"] .vision-rich ul{
    margin-top:0 !important;
    margin-bottom:0 !important;
}
/* Abaikan baris kosong pertama yang kadang dibuat editor Quill. */
body[class*="theme-"] .vision-rich > p:first-child:has(> br:only-child),
body[class*="theme-"] .mission-rich > p:first-child:has(> br:only-child){
    display:none !important;
}

@media(max-width:1100px){
    body[class*="theme-"] .principal{
        padding:25px 20px 24px !important;
    }
    body[class*="theme-"] .principal-heading{margin-bottom:16px !important}
    body[class*="theme-"] .principal-photo-wrap{margin-bottom:18px !important}
    body[class*="theme-"] .vm-col{padding:26px 24px !important}
    body[class*="theme-"] .vm-col .icon-title{margin-bottom:14px !important}
}
@media(max-width:720px){
    body[class*="theme-"] .principal-heading{margin-bottom:14px !important}
    body[class*="theme-"] .principal-photo-wrap{margin-bottom:16px !important}
    body[class*="theme-"] .vm-col{padding:23px 20px !important}
    body[class*="theme-"] .vm-col .icon-title{margin-bottom:12px !important}
}


/* ============================================================
   Revisi: jarak foto Kepsek + pagination galeri & berita
   Berlaku pada semua theme-01 s.d. theme-25.
   ============================================================ */
body[class*="theme-"] .principal-heading{
    margin-bottom:36px !important;
}

body[class*="theme-"] .gallery-grid-portrait{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
body[class*="theme-"] .gallery-card-portrait img{
    aspect-ratio:3/4 !important;
    object-fit:cover !important;
}

.pagination-with-labels{
    display:grid;
    grid-template-columns:minmax(112px,1fr) auto minmax(112px,1fr);
    align-items:center;
    gap:14px;
    width:100%;
}
.pagination-with-labels .pagination-pages{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}
.pagination-with-labels .pagination-nav{
    min-width:112px;
    padding:10px 15px;
    border-radius:999px;
    text-align:center;
    font-weight:800;
    text-decoration:none;
    border:1px solid color-mix(in srgb,var(--a) 24%,#dbe4ee);
    background:color-mix(in srgb,var(--a) 7%,#fff);
    color:var(--p);
    transition:.18s ease;
}
.pagination-with-labels .pagination-prev{justify-self:start}
.pagination-with-labels .pagination-next{justify-self:end}
.pagination-with-labels .pagination-nav:not(.is-disabled):hover{
    background:var(--a);
    border-color:var(--a);
    color:#fff;
    transform:translateY(-1px);
}
.pagination-with-labels .is-disabled{
    opacity:.42;
    cursor:not-allowed;
    user-select:none;
}
.gallery-pagination{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid color-mix(in srgb,var(--p) 10%,transparent);
}

@media(max-width:1100px){
    body[class*="theme-"] .principal-heading{margin-bottom:32px !important}
    body[class*="theme-"] .gallery-grid-portrait{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}
@media(max-width:720px){
    body[class*="theme-"] .principal-heading{margin-bottom:28px !important}
    body[class*="theme-"] .gallery-grid-portrait{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .pagination-with-labels{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }
    .pagination-with-labels .pagination-pages{
        grid-column:1 / -1;
        grid-row:1;
    }
    .pagination-with-labels .pagination-prev{
        grid-column:1;
        grid-row:2;
        justify-self:stretch;
    }
    .pagination-with-labels .pagination-next{
        grid-column:2;
        grid-row:2;
        justify-self:stretch;
    }
}


/* ============================================================
   Revisi galeri lebih compact + pager selalu terlihat
   Berlaku ke seluruh 25 template melalui selector theme-*.
   ============================================================ */

/* Card galeri diperkecil tetapi tetap portrait/vertikal. */
body[class*="theme-"] .gallery-grid-portrait{
    grid-template-columns:repeat(4,minmax(125px,175px)) !important;
    justify-content:center !important;
    gap:14px !important;
}
body[class*="theme-"] .gallery-card-portrait{
    width:100%;
    max-width:175px;
    justify-self:center;
}
body[class*="theme-"] .gallery-card-portrait img{
    width:100% !important;
    aspect-ratio:4/5 !important;
    object-fit:cover !important;
}
body[class*="theme-"] .gallery-card-portrait figcaption{
    min-height:46px !important;
    padding:9px 8px !important;
}

/* Pagination tetap tampak walaupun baru 1 halaman. */
.listing-pagination,
.homepage-news-pagination,
.gallery-pagination{
    display:grid !important;
}
.pagination-with-labels .pagination-pages > a{
    min-width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    text-decoration:none;
    border:1px solid color-mix(in srgb,var(--a) 22%,#dbe4ee);
    background:#fff;
    color:var(--p);
    font-weight:800;
}
.pagination-with-labels .pagination-pages > a.active{
    color:#fff;
    background:var(--a);
    border-color:var(--a);
}
.listing-pagination{
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid color-mix(in srgb,var(--p) 10%,transparent);
}

@media(max-width:1100px){
    body[class*="theme-"] .gallery-grid-portrait{
        grid-template-columns:repeat(3,minmax(120px,170px)) !important;
    }
}
@media(max-width:720px){
    body[class*="theme-"] .gallery-grid-portrait{
        grid-template-columns:repeat(2,minmax(115px,1fr)) !important;
        justify-content:stretch !important;
    }
    body[class*="theme-"] .gallery-card-portrait{
        max-width:none;
    }
}


/* ============================================================
   FINAL GALERI: 2 BLOK, MASING-MASING 8 KARTU (4 x 2 DESKTOP)
   Berlaku untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */
body[class*="theme-"] .gallery-showcase{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
}
body[class*="theme-"] .gallery-block-full{
    width:100% !important;
    padding:22px 24px 24px !important;
}
body[class*="theme-"] .gallery-grid-eight{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:18px !important;
    justify-content:stretch !important;
    align-items:stretch !important;
    width:100% !important;
}
body[class*="theme-"] .gallery-grid-eight .gallery-card-portrait{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    justify-self:stretch !important;
    border-radius:15px !important;
    overflow:hidden !important;
}
body[class*="theme-"] .gallery-grid-eight .gallery-card-portrait img{
    width:100% !important;
    aspect-ratio:3/4 !important;
    height:auto !important;
    object-fit:cover !important;
}
body[class*="theme-"] .gallery-grid-eight .gallery-card-portrait figcaption{
    min-height:52px !important;
    padding:11px 10px !important;
    font-size:12px !important;
    line-height:1.35 !important;
}
body[class*="theme-"] .gallery-grid-eight .gallery-placeholder{
    opacity:.72;
    border-style:dashed !important;
}
body[class*="theme-"] .gallery-placeholder-visual{
    position:relative;
    width:100%;
    aspect-ratio:3/4;
    overflow:hidden;
    background:color-mix(in srgb,var(--a) 6%,#f5f7fa);
}
body[class*="theme-"] .gallery-placeholder-visual img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    filter:grayscale(.65) opacity(.28);
}
body[class*="theme-"] .gallery-placeholder-visual span{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:42px;
    font-weight:300;
    color:color-mix(in srgb,var(--a) 62%,#64748b);
}

/* Pager tetap di bawah masing-masing blok */
body[class*="theme-"] .gallery-pagination{
    margin-top:22px !important;
}

/* Tablet dan HP */
@media(max-width:1100px){
    body[class*="theme-"] .gallery-grid-eight{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}
@media(max-width:760px){
    body[class*="theme-"] .gallery-block-full{
        padding:16px !important;
    }
    body[class*="theme-"] .gallery-grid-eight{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }
    body[class*="theme-"] .gallery-grid-eight .gallery-card-portrait figcaption{
        font-size:11px !important;
    }
}


/* ============================================================
   GALERI PROFESIONAL — foto proporsional + pagination elegan
   Berlaku untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */

/* Card 4 x 2 pada desktop, memenuhi blok tetapi tidak terlalu tinggi. */
body[class*="theme-"] .gallery-grid-eight{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
}

/* Frame foto memakai rasio konsisten. Gambar TIDAK diregangkan. */
body[class*="theme-"] .gallery-grid-eight .gallery-card-portrait{
    border-radius:14px !important;
    background:var(--card) !important;
    border:1px solid color-mix(in srgb,var(--p) 11%,#dfe6ee) !important;
    box-shadow:0 7px 22px rgba(15,39,71,.075) !important;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease !important;
}
body[class*="theme-"] .gallery-grid-eight .gallery-card-portrait:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--a) 34%,#dfe6ee) !important;
    box-shadow:0 14px 30px rgba(15,39,71,.13) !important;
}
body[class*="theme-"] .gallery-grid-eight .image-zoom-trigger,
body[class*="theme-"] .gallery-placeholder-visual{
    width:100% !important;
    aspect-ratio:4/3 !important;
    background:color-mix(in srgb,var(--p) 4%,#f6f8fb);
    overflow:hidden !important;
}
body[class*="theme-"] .gallery-grid-eight .image-zoom-trigger img,
body[class*="theme-"] .gallery-placeholder-visual img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none;
}
/* Hover zoom hanya menskalakan proporsional; tidak mengubah lebar/tinggi gambar. */
body[class*="theme-"] .gallery-grid-eight .image-zoom-trigger:hover img,
body[class*="theme-"] .gallery-grid-eight .image-zoom-trigger:focus-visible img{
    transform:scale(1.035) !important;
}
body[class*="theme-"] .gallery-grid-eight .gallery-card-portrait figcaption{
    min-height:58px !important;
    padding:12px 13px !important;
    font-size:12px !important;
    line-height:1.35 !important;
    letter-spacing:.01em;
    background:var(--card);
}

/* Placeholder tetap rapi bila data belum genap 8. */
body[class*="theme-"] .gallery-grid-eight .gallery-placeholder{
    opacity:1 !important;
    border:1px dashed color-mix(in srgb,var(--a) 28%,#cfd8e3) !important;
    box-shadow:none !important;
}
body[class*="theme-"] .gallery-grid-eight .gallery-placeholder-visual{
    background:
        radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--a) 12%,transparent),transparent 38%),
        color-mix(in srgb,var(--a) 4%,#f7f9fc) !important;
}
body[class*="theme-"] .gallery-grid-eight .gallery-placeholder-visual img{
    display:none !important;
}
body[class*="theme-"] .gallery-grid-eight .gallery-placeholder-visual span{
    width:54px;
    height:54px;
    inset:50% auto auto 50% !important;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:color-mix(in srgb,var(--a) 10%,#fff);
    border:1px solid color-mix(in srgb,var(--a) 23%,transparent);
    font-size:28px !important;
    color:color-mix(in srgb,var(--a) 68%,#667085) !important;
}

/* Pagination sebagai footer card profesional. */
body[class*="theme-"] .gallery-pagination{
    position:relative;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:18px !important;
    margin:22px -24px -24px !important;
    padding:16px 22px !important;
    min-height:68px;
    border-top:1px solid color-mix(in srgb,var(--p) 9%,#e7ebf0) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb,var(--a) 2%,#fff),
            color-mix(in srgb,var(--a) 5%,#fff));
    border-radius:0 0 18px 18px;
}

/* Previous / Next */
body[class*="theme-"] .gallery-pagination .pagination-nav{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:126px !important;
    min-height:40px;
    padding:9px 16px !important;
    border-radius:12px !important;
    border:1px solid color-mix(in srgb,var(--a) 23%,#dce3eb) !important;
    background:#fff !important;
    color:var(--p) !important;
    font-size:12px;
    font-weight:800 !important;
    letter-spacing:.01em;
    text-decoration:none !important;
    box-shadow:0 3px 10px rgba(15,39,71,.055);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease !important;
}
body[class*="theme-"] .gallery-pagination .pagination-nav > span{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:color-mix(in srgb,var(--a) 10%,#f4f7fb);
    font-size:19px;
    line-height:1;
}
body[class*="theme-"] .gallery-pagination .pagination-nav:not(.is-disabled):hover{
    transform:translateY(-1px) !important;
    background:var(--a) !important;
    border-color:var(--a) !important;
    color:#fff !important;
    box-shadow:0 8px 18px color-mix(in srgb,var(--a) 20%,transparent);
}
body[class*="theme-"] .gallery-pagination .pagination-nav:not(.is-disabled):hover > span{
    background:rgba(255,255,255,.18);
}
body[class*="theme-"] .gallery-pagination .pagination-prev{justify-self:start !important}
body[class*="theme-"] .gallery-pagination .pagination-next{justify-self:end !important}
body[class*="theme-"] .gallery-pagination .pagination-nav.is-disabled{
    opacity:.42 !important;
    background:color-mix(in srgb,#fff 90%,#eef2f6) !important;
    box-shadow:none !important;
}

/* Nomor halaman di tengah. */
body[class*="theme-"] .gallery-pagination .pagination-pages{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0;
}
body[class*="theme-"] .gallery-pagination .pagination-pages > a{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border-radius:11px !important;
    border:1px solid color-mix(in srgb,var(--a) 20%,#dfe5ec) !important;
    background:#fff !important;
    color:var(--muted) !important;
    font-size:12px !important;
    font-weight:850 !important;
    text-decoration:none !important;
    box-shadow:0 3px 10px rgba(15,39,71,.045);
    transition:.18s ease;
}
body[class*="theme-"] .gallery-pagination .pagination-pages > a:hover{
    border-color:color-mix(in srgb,var(--a) 55%,#dfe5ec) !important;
    color:var(--a) !important;
    transform:translateY(-1px);
}
body[class*="theme-"] .gallery-pagination .pagination-pages > a.active{
    background:var(--a) !important;
    border-color:var(--a) !important;
    color:#fff !important;
    box-shadow:0 7px 16px color-mix(in srgb,var(--a) 25%,transparent) !important;
}

/* Responsif */
@media(max-width:1100px){
    body[class*="theme-"] .gallery-grid-eight{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media(max-width:760px){
    body[class*="theme-"] .gallery-grid-eight{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:11px !important;
    }
    body[class*="theme-"] .gallery-grid-eight .image-zoom-trigger,
    body[class*="theme-"] .gallery-placeholder-visual{
        aspect-ratio:4/3 !important;
    }
    body[class*="theme-"] .gallery-pagination{
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
        margin:20px -16px -16px !important;
        padding:14px 16px !important;
    }
    body[class*="theme-"] .gallery-pagination .pagination-pages{
        grid-column:1 / -1;
        grid-row:1;
    }
    body[class*="theme-"] .gallery-pagination .pagination-prev{
        grid-column:1;
        grid-row:2;
        width:100%;
    }
    body[class*="theme-"] .gallery-pagination .pagination-next{
        grid-column:2;
        grid-row:2;
        width:100%;
    }
    body[class*="theme-"] .gallery-pagination .pagination-nav{
        min-width:0 !important;
        width:100%;
        padding:9px 10px !important;
    }
}


/* ============================================================
   PAGINATION PROFESIONAL BLOK BERITA TERKINI
   Disamakan dengan desain pagination galeri profesional.
   Berlaku untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */
body[class*="theme-"] .homepage-news-pagination{
    position:relative;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:18px !important;
    margin:24px -22px -22px !important;
    padding:16px 22px !important;
    min-height:68px;
    border-top:1px solid color-mix(in srgb,var(--p) 9%,#e7ebf0) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb,var(--a) 2%,#fff),
            color-mix(in srgb,var(--a) 5%,#fff));
    border-radius:0 0 var(--r) var(--r);
}

/* Tombol Sebelumnya / Berikutnya */
body[class*="theme-"] .homepage-news-pagination .pagination-nav{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:126px !important;
    min-height:40px;
    padding:9px 16px !important;
    border-radius:12px !important;
    border:1px solid color-mix(in srgb,var(--a) 23%,#dce3eb) !important;
    background:#fff !important;
    color:var(--p) !important;
    font-size:12px;
    font-weight:800 !important;
    letter-spacing:.01em;
    text-decoration:none !important;
    box-shadow:0 3px 10px rgba(15,39,71,.055);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}
body[class*="theme-"] .homepage-news-pagination .pagination-nav > span{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:color-mix(in srgb,var(--a) 10%,#f4f7fb);
    font-size:19px;
    line-height:1;
}
body[class*="theme-"] .homepage-news-pagination .pagination-nav:not(.is-disabled):hover{
    transform:translateY(-1px) !important;
    background:var(--a) !important;
    border-color:var(--a) !important;
    color:#fff !important;
    box-shadow:0 8px 18px color-mix(in srgb,var(--a) 20%,transparent);
}
body[class*="theme-"] .homepage-news-pagination .pagination-nav:not(.is-disabled):hover > span{
    background:rgba(255,255,255,.18);
}
body[class*="theme-"] .homepage-news-pagination .pagination-prev{
    justify-self:start !important;
}
body[class*="theme-"] .homepage-news-pagination .pagination-next{
    justify-self:end !important;
}
body[class*="theme-"] .homepage-news-pagination .pagination-nav.is-disabled{
    opacity:.42 !important;
    background:color-mix(in srgb,#fff 90%,#eef2f6) !important;
    box-shadow:none !important;
    cursor:not-allowed;
}

/* Nomor halaman berita */
body[class*="theme-"] .homepage-news-pagination .pagination-pages{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0;
}
body[class*="theme-"] .homepage-news-pagination .pagination-pages > a{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border-radius:11px !important;
    border:1px solid color-mix(in srgb,var(--a) 20%,#dfe5ec) !important;
    background:#fff !important;
    color:var(--muted) !important;
    font-size:12px !important;
    font-weight:850 !important;
    text-decoration:none !important;
    box-shadow:0 3px 10px rgba(15,39,71,.045);
    transition:.18s ease;
}
body[class*="theme-"] .homepage-news-pagination .pagination-pages > a:hover{
    border-color:color-mix(in srgb,var(--a) 55%,#dfe5ec) !important;
    color:var(--a) !important;
    transform:translateY(-1px);
}
body[class*="theme-"] .homepage-news-pagination .pagination-pages > a.active{
    background:var(--a) !important;
    border-color:var(--a) !important;
    color:#fff !important;
    box-shadow:0 7px 16px color-mix(in srgb,var(--a) 25%,transparent) !important;
}

/* Responsif pagination berita */
@media(max-width:760px){
    body[class*="theme-"] .homepage-news-pagination{
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
        margin:20px -22px -22px !important;
        padding:14px 16px !important;
    }
    body[class*="theme-"] .homepage-news-pagination .pagination-pages{
        grid-column:1 / -1;
        grid-row:1;
    }
    body[class*="theme-"] .homepage-news-pagination .pagination-prev{
        grid-column:1;
        grid-row:2;
        width:100%;
    }
    body[class*="theme-"] .homepage-news-pagination .pagination-next{
        grid-column:2;
        grid-row:2;
        width:100%;
    }
    body[class*="theme-"] .homepage-news-pagination .pagination-nav{
        min-width:0 !important;
        width:100%;
        padding:9px 10px !important;
    }
}


/* ============================================================
   FOOTER GLOBAL HITAM — tidak mengikuti warna 25 template
   ============================================================ */
html body[class*="theme-"] .site-footer,
html body[class*="theme-"] .site-footer.site-footer-fixed-black,
.site-footer.site-footer-fixed-black{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    margin-top:32px;
    background:#050505 !important;
    background-image:none !important;
    color:#fff !important;
    border-top:1px solid #202020 !important;
    box-shadow:0 -14px 40px rgba(0,0,0,.08);
}
html body[class*="theme-"] .site-footer::before,
html body[class*="theme-"] .site-footer::after,
.site-footer.site-footer-fixed-black::before,
.site-footer.site-footer-fixed-black::after{
    content:none !important;
    display:none !important;
    background:none !important;
    border:0 !important;
}
.site-footer-fixed-black .footer-grid{
    max-width:1420px;
    margin:0 auto;
    padding:42px 30px 36px;
    display:grid;
    grid-template-columns:1.1fr 1.15fr .8fr;
    gap:26px;
}
.site-footer-fixed-black .footer-grid.footer-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.site-footer-fixed-black .footer-grid.footer-cols-1{grid-template-columns:minmax(0,720px);justify-content:center}
.site-footer-fixed-black .footer-panel{
    min-width:0;
    padding:20px;
    border:1px solid #202020;
    border-radius:16px;
    background:linear-gradient(145deg,#0b0b0b,#090909);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.site-footer-fixed-black .footer-panel h3{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 16px;
    color:#fff !important;
    font-size:14px;
    line-height:1.3;
    letter-spacing:.025em;
}
.site-footer-fixed-black .footer-heading-icon{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#171717;
    border:1px solid #292929;
    font-size:13px;
}
.site-footer-fixed-black .footer-panel p{
    margin:0 0 10px;
    color:#c9cdd3 !important;
    font-size:13px;
    line-height:1.75;
}
.site-footer-fixed-black .footer-contact{
    display:flex;
    flex-wrap:wrap;
    gap:6px 9px;
    align-items:center;
}
.site-footer-fixed-black .footer-contact a{color:#fff;text-decoration:none}
.site-footer-fixed-black .footer-contact a:hover{text-decoration:underline}
.site-footer-fixed-black .footer-dot{color:#5f6368}
.site-footer-fixed-black .map-box{
    width:100%;
    min-height:185px;
    overflow:hidden;
    border-radius:12px;
    border:1px solid #272727;
    background:#111 !important;
    color:#cfd3da !important;
}
.site-footer-fixed-black .map-box iframe{display:block;width:100%;height:185px;border:0}
.site-footer-fixed-black .map-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:185px;
    padding:18px;
    color:#fff !important;
    text-align:center;
}
.site-footer-fixed-black .socials{display:flex;flex-wrap:wrap;gap:10px}
.site-footer-fixed-black .socials a{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#141414 !important;
    border:1px solid #2a2a2a;
    color:#fff !important;
    font-weight:900;
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.site-footer-fixed-black .socials a:hover{
    transform:translateY(-2px);
    background:#fff !important;
    border-color:#fff;
    color:#050505 !important;
}
.site-footer-fixed-black .footer-empty-social{color:#8f969f;font-size:12px}
.site-footer-fixed-black .copyright{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:58px;
    padding:16px 30px;
    border-top:1px solid #1d1d1d !important;
    background:#020202;
    color:#aeb4bd !important;
    text-align:center;
    font-size:12px;
    line-height:1.5;
}
.site-footer-fixed-black .copyright span{float:none !important}
@media(max-width:980px){
    .site-footer-fixed-black .footer-grid,
    .site-footer-fixed-black .footer-grid.footer-cols-2{
        grid-template-columns:1fr 1fr;
    }
    .site-footer-fixed-black .footer-social{grid-column:1 / -1}
}
@media(max-width:680px){
    .site-footer-fixed-black .footer-grid,
    .site-footer-fixed-black .footer-grid.footer-cols-2,
    .site-footer-fixed-black .footer-grid.footer-cols-1{
        grid-template-columns:1fr;
        padding:26px 16px 24px;
        gap:14px;
    }
    .site-footer-fixed-black .footer-social{grid-column:auto}
    .site-footer-fixed-black .footer-panel{padding:16px}
    .site-footer-fixed-black .copyright{padding:14px 18px}
}


/* ============================================================
   TOP CONTACT BAR — NAVY / GOLD
   Komponen global di atas logo + navbar.
   Berlaku untuk theme-01 s.d. theme-25.
   ============================================================ */
.school-topbar{
    --topbar-navy:#061b3b;
    --topbar-navy-2:#082c59;
    --topbar-gold:#d9a72e;
    --topbar-text:#ffffff;
    --topbar-muted:#c8d5e8;
    position:relative;
    z-index:55;
    width:100%;
    background:
        radial-gradient(circle at 92% 22%,rgba(255,255,255,.055),transparent 18%),
        linear-gradient(105deg,var(--topbar-navy),var(--topbar-navy-2));
    color:var(--topbar-text);
    border-bottom:3px solid var(--topbar-gold);
    box-shadow:0 7px 20px rgba(4,18,39,.12);
    overflow:hidden;
}
.school-topbar::before,
.school-topbar::after{
    content:"";
    position:absolute;
    pointer-events:none;
}
.school-topbar::before{
    width:240px;height:240px;
    right:-95px;top:-150px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
    box-shadow:0 0 0 28px rgba(255,255,255,.018),0 0 0 56px rgba(255,255,255,.012);
}
.school-topbar::after{
    left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.school-topbar-inner{
    width:min(1780px,96vw);
    min-height:76px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr 1.08fr;
    align-items:stretch;
}
.topbar-segment{
    position:relative;
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 30px;
}
.topbar-segment + .topbar-segment::before{
    content:"";
    position:absolute;
    left:0;top:17px;bottom:17px;
    width:1px;
    background:linear-gradient(transparent,color-mix(in srgb,var(--topbar-gold) 92%,#fff),transparent);
    opacity:.8;
}
.topbar-icon{
    width:46px;height:46px;flex:0 0 46px;
    display:grid;place-items:center;
    border:1px solid var(--topbar-gold);
    border-radius:13px;
    color:#f8cb4f;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 7px 18px rgba(0,0,0,.12);
    font-size:20px;
}
.topbar-copy{display:block;min-width:0}
.topbar-copy small{
    display:block;
    margin-bottom:4px;
    color:var(--topbar-muted);
    font-size:11px;
    font-weight:650;
    line-height:1.25;
    letter-spacing:.015em;
}
.topbar-copy a,
.topbar-copy strong{
    display:block;
    max-width:100%;
    color:#fff;
    font-size:14px;
    font-weight:800;
    line-height:1.35;
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.topbar-copy a:hover{color:#ffd76a}
.topbar-social{
    justify-content:center;
    gap:18px;
}
.topbar-social-label{
    white-space:nowrap;
    color:#fff;
    font-size:13px;
    font-weight:800;
}
.topbar-social-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
}
.topbar-social-link{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    line-height:1;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 5px 14px rgba(0,0,0,.16);
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.topbar-social-link:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 9px 20px rgba(0,0,0,.22);
    filter:brightness(1.08);
}
.topbar-social-facebook{background:linear-gradient(145deg,#4267b2,#244a91)}
.topbar-social-instagram{background:linear-gradient(145deg,#f58529,#dd2a7b 48%,#8134af)}
.topbar-social-youtube{background:linear-gradient(145deg,#ff2525,#d90000)}
.topbar-social-tiktok{background:linear-gradient(145deg,#192231,#05080c)}

/* Sentuhan visual berbeda untuk 25 template, navy tetap dipertahankan. */
.theme-01 .school-topbar{--topbar-gold:#e2b230}
.theme-02 .school-topbar{--topbar-gold:#d4ad59;border-bottom-width:2px}
.theme-03 .school-topbar{--topbar-gold:#d9b64b}
.theme-04 .school-topbar{--topbar-gold:#ffb31a}
.theme-05 .school-topbar{--topbar-gold:#d8b253}
.theme-06 .school-topbar{--topbar-gold:#d6ad56}
.theme-07 .school-topbar{--topbar-gold:#d9a441}
.theme-08 .school-topbar{--topbar-gold:#f0bc42}
.theme-09 .school-topbar{--topbar-gold:#d9a02d}
.theme-10 .school-topbar{--topbar-gold:#e0b75b}
.theme-11 .school-topbar{--topbar-gold:#e6c25a}
.theme-12 .school-topbar{--topbar-gold:#f4c542}
.theme-13 .school-topbar{--topbar-gold:#e4b54e}
.theme-14 .school-topbar{--topbar-gold:#e09b2d}
.theme-15 .school-topbar{--topbar-gold:#ddb460}
.theme-16 .school-topbar{--topbar-gold:#f6c343}
.theme-17 .school-topbar{--topbar-gold:#d3a85f}
.theme-18 .school-topbar{--topbar-gold:#ffcb3d}
.theme-19 .school-topbar{--topbar-gold:#27cbea;--topbar-navy:#071a32;--topbar-navy-2:#0b2748}
.theme-20 .school-topbar{--topbar-gold:#d6b24d}
.theme-21 .school-topbar{--topbar-gold:#d5aa3b}
.theme-22 .school-topbar{--topbar-gold:#e6b54a}
.theme-23 .school-topbar{--topbar-gold:#ff9f2f}
.theme-24 .school-topbar{--topbar-gold:#f0bb45}
.theme-25 .school-topbar{--topbar-gold:#f3b400}

/* Ornamen mikro per kelompok template agar tidak terasa identik. */
.theme-03 .school-topbar-inner,
.theme-08 .school-topbar-inner,
.theme-13 .school-topbar-inner,
.theme-18 .school-topbar-inner,
.theme-23 .school-topbar-inner{
    background-image:linear-gradient(120deg,transparent 0 82%,rgba(255,255,255,.025) 82% 84%,transparent 84%);
}
.theme-05 .topbar-icon,.theme-10 .topbar-icon,.theme-15 .topbar-icon,.theme-20 .topbar-icon,.theme-25 .topbar-icon{border-radius:50%}
.theme-04 .topbar-icon,.theme-09 .topbar-icon,.theme-14 .topbar-icon,.theme-19 .topbar-icon,.theme-24 .topbar-icon{transform:rotate(-2deg)}
.theme-02 .school-topbar::after,.theme-07 .school-topbar::after,.theme-12 .school-topbar::after,.theme-17 .school-topbar::after,.theme-22 .school-topbar::after{height:2px;opacity:.65}

/* Tablet */
@media(max-width:1050px){
    .school-topbar-inner{grid-template-columns:1fr 1fr}
    .topbar-social{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);min-height:58px}
    .topbar-social::before{display:none}
}
/* HP */
@media(max-width:680px){
    .school-topbar-inner{
        width:100%;
        grid-template-columns:1fr;
    }
    .topbar-segment{
        min-height:58px;
        padding:9px 16px;
    }
    .topbar-segment + .topbar-segment::before{
        left:16px;right:16px;top:0;bottom:auto;width:auto;height:1px;
        background:linear-gradient(90deg,transparent,rgba(217,167,46,.6),transparent);
    }
    .topbar-icon{width:38px;height:38px;flex-basis:38px;border-radius:10px;font-size:17px}
    .topbar-copy a,.topbar-copy strong{font-size:12px}
    .topbar-copy small{font-size:9px}
    .topbar-social{
        grid-column:auto;
        justify-content:flex-start;
        min-height:58px;
        border-top:0;
    }
    .topbar-social-label{font-size:11px}
    .topbar-social-link{width:32px;height:32px;font-size:12px}
}


/* ============================================================
   FOOTER 2 BLOK — NAVY + HITAM
   Berlaku konsisten untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */
html body[class*="theme-"] .site-footer.site-footer-two-layer,
.site-footer.site-footer-two-layer{
    --footer-navy:#061b3b;
    --footer-navy-2:#082c59;
    --footer-gold:#d9a72e;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    margin-top:34px;
    padding:0 !important;
    background:#020202 !important;
    background-image:none !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 -14px 40px rgba(0,0,0,.08);
}

/* Blok 1: navy */
.site-footer-two-layer .footer-upper{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 93% 13%,rgba(255,255,255,.055),transparent 18%),
        radial-gradient(circle at 5% 94%,rgba(217,167,46,.10),transparent 17%),
        linear-gradient(112deg,var(--footer-navy),var(--footer-navy-2));
    border-bottom:1px solid rgba(255,255,255,.07);
}

/* Lengkung dekoratif */
.site-footer-two-layer .footer-upper::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    left:-180px;
    bottom:-250px;
    border:1px solid rgba(217,167,46,.30);
    border-radius:50%;
    box-shadow:
        0 0 0 34px rgba(217,167,46,.055),
        0 0 0 70px rgba(217,167,46,.025);
    pointer-events:none;
}
.site-footer-two-layer .footer-upper::after{
    content:"";
    position:absolute;
    width:430px;
    height:230px;
    right:-130px;
    top:-150px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:0 0 0 100%;
    transform:rotate(-7deg);
    box-shadow:
        -28px 22px 0 rgba(255,255,255,.015),
        -58px 44px 0 rgba(255,255,255,.01);
    pointer-events:none;
}

.site-footer-two-layer .footer-upper-inner{
    position:relative;
    z-index:1;
    width:100%;
    padding:46px 0 42px;
}

/* Grid atas */
.site-footer-two-layer .footer-grid{
    max-width:1420px;
    margin:0 auto;
    padding:0 30px;
    display:grid;
    grid-template-columns:1.1fr 1.15fr .8fr;
    gap:24px;
}
.site-footer-two-layer .footer-grid.footer-cols-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.site-footer-two-layer .footer-grid.footer-cols-1{
    grid-template-columns:minmax(0,720px);
    justify-content:center;
}

/* Card elegan di atas navy */
.site-footer-two-layer .footer-panel{
    position:relative;
    min-width:0;
    min-height:230px;
    padding:22px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:22px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 16px 34px rgba(1,12,30,.16);
    backdrop-filter:blur(4px);
    overflow:hidden;
}
.site-footer-two-layer .footer-panel::after{
    content:"";
    position:absolute;
    width:86px;
    height:86px;
    right:-42px;
    bottom:-42px;
    border-radius:50%;
    border:1px solid rgba(217,167,46,.17);
    box-shadow:0 0 0 14px rgba(217,167,46,.025);
    pointer-events:none;
}
.site-footer-two-layer .footer-panel h3{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 17px;
    color:#fff !important;
    font-size:14px;
    line-height:1.3;
    letter-spacing:.025em;
}
.site-footer-two-layer .footer-heading-icon{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    flex:0 0 32px;
    border-radius:10px;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(217,167,46,.33);
    color:#ffd267;
    font-size:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.site-footer-two-layer .footer-panel p{
    position:relative;
    z-index:1;
    margin:0 0 10px;
    color:#d8e3f2 !important;
    font-size:13px;
    line-height:1.8;
}
.site-footer-two-layer .footer-contact{
    display:flex;
    flex-wrap:wrap;
    gap:6px 9px;
    align-items:center;
}
.site-footer-two-layer .footer-contact a{
    color:#fff !important;
    text-decoration:none;
}
.site-footer-two-layer .footer-contact a:hover{color:#ffd267 !important}
.site-footer-two-layer .footer-dot{color:#d9a72e}

/* Map */
.site-footer-two-layer .map-box{
    position:relative;
    z-index:1;
    width:100%;
    min-height:185px;
    overflow:hidden;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.18);
    background:#0b203d !important;
    color:#dbe6f2 !important;
    box-shadow:0 10px 26px rgba(0,0,0,.16);
}
.site-footer-two-layer .map-box iframe{
    display:block;
    width:100%;
    height:185px;
    border:0;
}
.site-footer-two-layer .map-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:185px;
    padding:18px;
    color:#fff !important;
    text-align:center;
}

/* Social */
.site-footer-two-layer .socials{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.site-footer-two-layer .socials a{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(255,255,255,.075) !important;
    border:1px solid rgba(255,255,255,.16);
    color:#fff !important;
    font-weight:900;
    box-shadow:0 7px 16px rgba(0,0,0,.12);
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.site-footer-two-layer .socials a:hover{
    transform:translateY(-2px);
    background:#fff !important;
    border-color:#fff;
    color:#061b3b !important;
}
.site-footer-two-layer .footer-empty-social{color:#b6c5d8;font-size:12px}

/* Blok 2: hitam */
.site-footer-two-layer .footer-bottom,
.site-footer-two-layer .copyright{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:64px;
    margin:0 !important;
    padding:17px 30px;
    border-top:1px solid #1b1b1b !important;
    background:#020202 !important;
    background-image:none !important;
    color:#b9bec6 !important;
    text-align:center;
    font-size:12px;
    line-height:1.5;
}
.site-footer-two-layer .copyright span{float:none !important}

/* Paksa semua footer template mengabaikan warna tema. */
html body[class*="theme-"] .site-footer-two-layer .footer-upper{
    background:
        radial-gradient(circle at 93% 13%,rgba(255,255,255,.055),transparent 18%),
        radial-gradient(circle at 5% 94%,rgba(217,167,46,.10),transparent 17%),
        linear-gradient(112deg,#061b3b,#082c59) !important;
}
html body[class*="theme-"] .site-footer-two-layer .footer-bottom,
html body[class*="theme-"] .site-footer-two-layer .copyright{
    background:#020202 !important;
}

/* Sedikit variasi aksen per template, warna dasar navy tetap sama. */
.theme-01 .site-footer-two-layer{--footer-gold:#e2b230}
.theme-02 .site-footer-two-layer{--footer-gold:#d4ad59}
.theme-03 .site-footer-two-layer{--footer-gold:#d9b64b}
.theme-04 .site-footer-two-layer{--footer-gold:#ffb31a}
.theme-05 .site-footer-two-layer{--footer-gold:#d8b253}
.theme-06 .site-footer-two-layer{--footer-gold:#d6ad56}
.theme-07 .site-footer-two-layer{--footer-gold:#d9a441}
.theme-08 .site-footer-two-layer{--footer-gold:#f0bc42}
.theme-09 .site-footer-two-layer{--footer-gold:#d9a02d}
.theme-10 .site-footer-two-layer{--footer-gold:#e0b75b}
.theme-11 .site-footer-two-layer{--footer-gold:#e6c25a}
.theme-12 .site-footer-two-layer{--footer-gold:#f4c542}
.theme-13 .site-footer-two-layer{--footer-gold:#e4b54e}
.theme-14 .site-footer-two-layer{--footer-gold:#e09b2d}
.theme-15 .site-footer-two-layer{--footer-gold:#ddb460}
.theme-16 .site-footer-two-layer{--footer-gold:#f6c343}
.theme-17 .site-footer-two-layer{--footer-gold:#d3a85f}
.theme-18 .site-footer-two-layer{--footer-gold:#ffcb3d}
.theme-19 .site-footer-two-layer{--footer-gold:#27cbea}
.theme-20 .site-footer-two-layer{--footer-gold:#d6b24d}
.theme-21 .site-footer-two-layer{--footer-gold:#d5aa3b}
.theme-22 .site-footer-two-layer{--footer-gold:#e6b54a}
.theme-23 .site-footer-two-layer{--footer-gold:#ff9f2f}
.theme-24 .site-footer-two-layer{--footer-gold:#f0bb45}
.theme-25 .site-footer-two-layer{--footer-gold:#f3b400}

@media(max-width:980px){
    .site-footer-two-layer .footer-grid,
    .site-footer-two-layer .footer-grid.footer-cols-2{
        grid-template-columns:1fr 1fr;
    }
    .site-footer-two-layer .footer-social{grid-column:1 / -1}
}
@media(max-width:680px){
    .site-footer-two-layer .footer-upper-inner{padding:28px 0 24px}
    .site-footer-two-layer .footer-grid,
    .site-footer-two-layer .footer-grid.footer-cols-2,
    .site-footer-two-layer .footer-grid.footer-cols-1{
        grid-template-columns:1fr;
        padding:0 16px;
        gap:14px;
    }
    .site-footer-two-layer .footer-social{grid-column:auto}
    .site-footer-two-layer .footer-panel{
        min-height:0;
        padding:17px;
        border-radius:18px;
    }
    .site-footer-two-layer .footer-bottom,
    .site-footer-two-layer .copyright{
        min-height:58px;
        padding:14px 18px;
    }
}

/* ============================================================
   FOOTER CURVED CARDS — FINAL APPROVED VISUAL
   Lekukan berada pada CARD, bukan sekadar ornamen background.
   Berlaku untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */
html body[class*="theme-"] .site-footer-two-layer .footer-upper{
    background:linear-gradient(118deg,#061b3b 0%,#082a55 55%,#061a38 100%) !important;
}

/* Fokus visual pada bentuk card. */
.site-footer-two-layer .footer-grid{
    gap:28px !important;
    padding-top:30px !important;
}

.site-footer-two-layer .footer-panel{
    --footer-curve:#d9a72e;
    position:relative !important;
    overflow:visible !important;
    min-height:285px !important;
    padding:72px 28px 28px !important;
    border:1px solid color-mix(in srgb,var(--footer-curve) 80%,rgba(255,255,255,.18)) !important;
    border-radius:30px 30px 26px 26px !important;
    background:
        linear-gradient(145deg,rgba(8,49,96,.92),rgba(5,27,61,.92)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 22px 46px rgba(1,11,28,.22) !important;
}

/* Membuat lekukan cekung nyata pada garis atas card. */
.site-footer-two-layer .footer-panel::before{
    content:"" !important;
    position:absolute !important;
    z-index:2 !important;
    top:-2px !important;
    left:50% !important;
    width:118px !important;
    height:55px !important;
    transform:translateX(-50%) !important;
    border-radius:0 0 62px 62px !important;
    background:#072249 !important;
    border-left:1px solid var(--footer-curve) !important;
    border-right:1px solid var(--footer-curve) !important;
    border-bottom:1px solid var(--footer-curve) !important;
    border-top:0 !important;
    box-shadow:0 11px 18px rgba(1,13,31,.12) !important;
    pointer-events:none !important;
}

/* Aksen kecil bercahaya di bawah card. */
.site-footer-two-layer .footer-panel::after{
    content:"" !important;
    position:absolute !important;
    z-index:3 !important;
    left:50% !important;
    right:auto !important;
    bottom:-3px !important;
    width:50px !important;
    height:5px !important;
    transform:translateX(-50%) !important;
    border:0 !important;
    border-radius:999px !important;
    background:radial-gradient(circle,var(--footer-curve) 0 8%,rgba(217,167,46,.55) 18%,transparent 68%) !important;
    box-shadow:0 0 12px color-mix(in srgb,var(--footer-curve) 68%,transparent) !important;
}

/* Heading diletakkan di tengah seperti mockup. */
.site-footer-two-layer .footer-panel h3{
    position:relative !important;
    z-index:4 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:14px !important;
    margin:0 0 24px !important;
    text-align:center !important;
    font-size:15px !important;
    font-weight:850 !important;
    letter-spacing:.025em !important;
}

/* Emblem ikon mengambang tepat di dalam lekukan. */
.site-footer-two-layer .footer-heading-icon{
    position:absolute !important;
    z-index:6 !important;
    top:-101px !important;
    left:50% !important;
    width:70px !important;
    height:70px !important;
    transform:translateX(-50%) !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    border:2px solid var(--footer-curve) !important;
    background:linear-gradient(145deg,#0b3268,#071e43) !important;
    color:#ffd267 !important;
    font-size:28px !important;
    box-shadow:
        0 10px 22px rgba(0,0,0,.25),
        inset 0 0 0 5px rgba(255,255,255,.025) !important;
}

/* Garis dekorasi mini di bawah judul card. */
.site-footer-two-layer .footer-panel h3::after{
    content:"◆  ◆  ◆";
    display:block;
    margin-top:1px;
    color:var(--footer-curve);
    font-size:6px;
    letter-spacing:4px;
    opacity:.95;
}

.site-footer-two-layer .footer-address p,
.site-footer-two-layer .footer-location .map-box,
.site-footer-two-layer .footer-social .socials{
    position:relative;
    z-index:4;
}

/* Isi alamat lebih presisi. */
.site-footer-two-layer .footer-address p{
    max-width:440px;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:left !important;
}
.site-footer-two-layer .footer-address .footer-contact{
    margin-top:18px !important;
}

/* Map mengikuti kurva card, tidak terlalu kotak. */
.site-footer-two-layer .footer-location .map-box{
    border-radius:20px !important;
    border:1px solid color-mix(in srgb,var(--footer-curve) 55%,rgba(255,255,255,.18)) !important;
    overflow:hidden !important;
    box-shadow:0 12px 26px rgba(0,0,0,.19) !important;
}
.site-footer-two-layer .footer-location .map-box iframe{
    height:205px !important;
}

/* Ikon sosial menjadi tombol elegan seperti visual. */
.site-footer-two-layer .footer-social .socials{
    justify-content:center !important;
    gap:14px !important;
    margin-top:26px !important;
}
.site-footer-two-layer .footer-social .socials a{
    width:58px !important;
    height:58px !important;
    border-radius:17px !important;
    border:1px solid color-mix(in srgb,var(--footer-curve) 72%,rgba(255,255,255,.18)) !important;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)) !important;
    font-size:19px !important;
    box-shadow:0 10px 22px rgba(0,0,0,.18) !important;
}
.site-footer-two-layer .footer-social .socials a:hover{
    color:#071e43 !important;
    background:#ffd267 !important;
    border-color:#ffd267 !important;
    transform:translateY(-4px) !important;
}

/* Copyright tetap hitam, dipisahkan garis emas yang halus. */
.site-footer-two-layer .footer-bottom,
.site-footer-two-layer .copyright{
    min-height:76px !important;
    border-top:2px solid color-mix(in srgb,var(--footer-gold,#d9a72e) 74%,#715514) !important;
    background:linear-gradient(180deg,#050505,#010101) !important;
    color:#d9dce1 !important;
    letter-spacing:.01em;
}

/* Variasi aksen card tetap mengikuti identitas 25 template. */
.theme-01 .footer-panel{--footer-curve:#e2b230}.theme-02 .footer-panel{--footer-curve:#d4ad59}
.theme-03 .footer-panel{--footer-curve:#d9b64b}.theme-04 .footer-panel{--footer-curve:#ffb31a}
.theme-05 .footer-panel{--footer-curve:#d8b253}.theme-06 .footer-panel{--footer-curve:#d6ad56}
.theme-07 .footer-panel{--footer-curve:#d9a441}.theme-08 .footer-panel{--footer-curve:#f0bc42}
.theme-09 .footer-panel{--footer-curve:#d9a02d}.theme-10 .footer-panel{--footer-curve:#e0b75b}
.theme-11 .footer-panel{--footer-curve:#e6c25a}.theme-12 .footer-panel{--footer-curve:#f4c542}
.theme-13 .footer-panel{--footer-curve:#e4b54e}.theme-14 .footer-panel{--footer-curve:#e09b2d}
.theme-15 .footer-panel{--footer-curve:#ddb460}.theme-16 .footer-panel{--footer-curve:#f6c343}
.theme-17 .footer-panel{--footer-curve:#d3a85f}.theme-18 .footer-panel{--footer-curve:#ffcb3d}
.theme-19 .footer-panel{--footer-curve:#27cbea}.theme-20 .footer-panel{--footer-curve:#d6b24d}
.theme-21 .footer-panel{--footer-curve:#d5aa3b}.theme-22 .footer-panel{--footer-curve:#e6b54a}
.theme-23 .footer-panel{--footer-curve:#ff9f2f}.theme-24 .footer-panel{--footer-curve:#f0bb45}
.theme-25 .footer-panel{--footer-curve:#f3b400}

@media(max-width:980px){
    .site-footer-two-layer .footer-grid{gap:52px 20px !important}
}
@media(max-width:680px){
    .site-footer-two-layer .footer-grid{
        gap:58px !important;
        padding-top:34px !important;
    }
    .site-footer-two-layer .footer-panel{
        min-height:0 !important;
        padding:66px 20px 22px !important;
        border-radius:26px !important;
    }
    .site-footer-two-layer .footer-panel::before{
        width:102px !important;
        height:48px !important;
    }
    .site-footer-two-layer .footer-heading-icon{
        width:62px !important;
        height:62px !important;
        top:-92px !important;
        font-size:23px !important;
    }
    .site-footer-two-layer .footer-location .map-box iframe{height:180px !important}
    .site-footer-two-layer .footer-social .socials a{width:50px !important;height:50px !important;border-radius:15px !important}
}


/* ============================================================
   TOP CONTACT BAR — WARNA & IKON DARI ADMIN
   Pengaturan global berlaku pada semua 25 template.
   ============================================================ */
html body[class*="theme-"] .school-topbar{
    background:
        radial-gradient(circle at 92% 22%,rgba(255,255,255,.055),transparent 18%),
        linear-gradient(105deg,
            var(--topbar-custom-bg,#061B3B),
            color-mix(in srgb,var(--topbar-custom-bg,#061B3B) 84%,#1f4c82)) !important;
    color:var(--topbar-custom-text,#FFFFFF) !important;
}
html body[class*="theme-"] .school-topbar .topbar-copy small,
html body[class*="theme-"] .school-topbar .topbar-copy a,
html body[class*="theme-"] .school-topbar .topbar-copy strong,
html body[class*="theme-"] .school-topbar .topbar-social-label{
    color:var(--topbar-custom-text,#FFFFFF) !important;
}
.school-topbar .topbar-icon-phone{color:var(--topbar-phone-icon-color,#F8CB4F) !important}
.school-topbar .topbar-icon-email{color:var(--topbar-email-icon-color,#F8CB4F) !important}
.school-topbar .topbar-icon-social{color:var(--topbar-social-icon-color,#F8CB4F) !important}
.school-topbar .topbar-social-link{
    color:var(--topbar-social-button-icon-color,#FFFFFF) !important;
}
.school-topbar .topbar-social-link:hover{
    color:var(--topbar-social-button-icon-color,#FFFFFF) !important;
}


/* ============================================================
   FOOTER — WARNA & IKON DARI ADMIN
   Berlaku global untuk seluruh 25 template.
   ============================================================ */
html body[class*="theme-"] .site-footer-two-layer .footer-upper{
    background:
        linear-gradient(112deg,
            var(--footer-custom-bg,#061B3B),
            color-mix(in srgb,var(--footer-custom-bg,#061B3B) 82%,#173f72)) !important;
    color:var(--footer-custom-text,#FFFFFF) !important;
}
.site-footer-two-layer .footer-upper .footer-panel,
.site-footer-two-layer .footer-upper .footer-panel h3,
.site-footer-two-layer .footer-upper .footer-panel p,
.site-footer-two-layer .footer-upper .footer-panel a{
    color:var(--footer-custom-text,#FFFFFF) !important;
}
.site-footer-two-layer .footer-heading-icon-address{
    color:var(--footer-address-icon-color,#F8CB4F) !important;
}
.site-footer-two-layer .footer-heading-icon-location{
    color:var(--footer-location-icon-color,#F8CB4F) !important;
}
.site-footer-two-layer .footer-heading-icon-social{
    color:var(--footer-social-icon-color,#F8CB4F) !important;
}
.site-footer-two-layer .socials a{
    color:var(--footer-social-button-icon-color,#FFFFFF) !important;
}
.site-footer-two-layer .socials a:hover{
    color:var(--footer-social-button-icon-color,#FFFFFF) !important;
}


/* ============================================================
   FOOTER KONTAK + WARNA SOSIAL SAMA DENGAN TOP CONTACT BAR
   Berlaku untuk seluruh 25 template.
   ============================================================ */
.site-footer-two-layer .footer-address-details{
    display:grid;
    gap:13px;
    position:relative;
    z-index:2;
}
.site-footer-two-layer .footer-detail-row{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:start;
    gap:11px;
    color:var(--footer-custom-text,#fff);
    font-size:13px;
    line-height:1.7;
}
.site-footer-two-layer .footer-detail-row a{
    color:var(--footer-custom-text,#fff) !important;
    text-decoration:none;
    overflow-wrap:anywhere;
}
.site-footer-two-layer .footer-detail-row a:hover{
    text-decoration:underline;
}
.site-footer-two-layer .footer-detail-icon{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    font-size:15px;
}
.site-footer-two-layer .footer-detail-icon-address{
    color:var(--footer-address-line-icon-color,#F8CB4F) !important;
}
.site-footer-two-layer .footer-detail-icon-phone{
    color:var(--footer-phone-icon-color,#F8CB4F) !important;
}
.site-footer-two-layer .footer-detail-icon-email{
    color:var(--footer-email-icon-color,#F8CB4F) !important;
}

/* Social footer dibuat sama dengan identitas ikon sosial Top Contact Bar. */
.site-footer-two-layer .socials a.footer-social-brand{
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
    color:var(--footer-social-button-icon-color,#fff) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.18) !important;
    transition:transform .18s ease,filter .18s ease,box-shadow .18s ease !important;
}
.site-footer-two-layer .socials a.footer-social-facebook{
    background:linear-gradient(145deg,#4267b2,#244a91) !important;
}
.site-footer-two-layer .socials a.footer-social-instagram{
    background:linear-gradient(145deg,#f58529,#dd2a7b 48%,#8134af) !important;
}
.site-footer-two-layer .socials a.footer-social-youtube{
    background:linear-gradient(145deg,#ff2525,#d90000) !important;
}
.site-footer-two-layer .socials a.footer-social-tiktok{
    background:linear-gradient(145deg,#192231,#05080c) !important;
}
.site-footer-two-layer .socials a.footer-social-brand:hover{
    transform:translateY(-3px) scale(1.03) !important;
    filter:brightness(1.08) !important;
    color:var(--footer-social-button-icon-color,#fff) !important;
    box-shadow:0 12px 24px rgba(0,0,0,.24) !important;
}


/* ============================================================
   TOP CONTACT BAR — COMPACT / CLASSIC
   Lebih tipis, rapi, dan elegan pada seluruh 25 template.
   ============================================================ */
@media (min-width:681px){
    body[class*="theme-"] .school-topbar-inner{
        min-height:54px !important;
    }

    body[class*="theme-"] .topbar-segment{
        min-height:54px !important;
        padding:6px 24px !important;
        gap:11px !important;
    }

    body[class*="theme-"] .topbar-segment + .topbar-segment::before{
        top:11px !important;
        bottom:11px !important;
    }

    body[class*="theme-"] .topbar-icon{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
        border-radius:10px !important;
        font-size:15px !important;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 4px 10px rgba(0,0,0,.10) !important;
    }

    body[class*="theme-"] .topbar-copy small{
        margin-bottom:2px !important;
        font-size:9px !important;
        line-height:1.15 !important;
        letter-spacing:.02em !important;
    }

    body[class*="theme-"] .topbar-copy a,
    body[class*="theme-"] .topbar-copy strong{
        font-size:12px !important;
        line-height:1.2 !important;
        font-weight:750 !important;
    }

    body[class*="theme-"] .topbar-social{
        gap:12px !important;
    }

    body[class*="theme-"] .topbar-social-label{
        font-size:11px !important;
    }

    body[class*="theme-"] .topbar-social-links{
        gap:7px !important;
    }

    body[class*="theme-"] .topbar-social-link{
        width:31px !important;
        height:31px !important;
        font-size:11px !important;
        box-shadow:0 4px 10px rgba(0,0,0,.13) !important;
    }

    body[class*="theme-"] .school-topbar{
        border-bottom-width:2px !important;
        box-shadow:0 4px 12px rgba(4,18,39,.08) !important;
    }
}

/* Tablet */
@media (min-width:681px) and (max-width:1050px){
    body[class*="theme-"] .topbar-social{
        min-height:46px !important;
        padding-top:5px !important;
        padding-bottom:5px !important;
    }
}

/* HP juga dibuat lebih ringkas */
@media(max-width:680px){
    body[class*="theme-"] .topbar-segment{
        min-height:46px !important;
        padding:6px 14px !important;
        gap:9px !important;
    }

    body[class*="theme-"] .topbar-icon{
        width:31px !important;
        height:31px !important;
        flex-basis:31px !important;
        font-size:14px !important;
    }

    body[class*="theme-"] .topbar-copy small{
        margin-bottom:1px !important;
        font-size:8px !important;
    }

    body[class*="theme-"] .topbar-copy a,
    body[class*="theme-"] .topbar-copy strong{
        font-size:11px !important;
    }

    body[class*="theme-"] .topbar-social{
        min-height:46px !important;
        gap:10px !important;
    }

    body[class*="theme-"] .topbar-social-link{
        width:29px !important;
        height:29px !important;
        font-size:11px !important;
    }
}


/* ============================================================
   PENGUMUMAN UTAMA — GAMBAR TAMPIL UTUH / TIDAK TERPOTONG
   Berlaku untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */

/* Beranda: pertahankan seluruh foto sesuai rasio file upload. */
body[class*="theme-"] .featured-ann{
    align-items:start;
}

body[class*="theme-"] .featured-ann > img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:390px !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:12px !important;
    background:color-mix(in srgb,var(--p) 3%,#f8fafc);
    border:1px solid color-mix(in srgb,var(--p) 8%,#e5eaf0);
}

/* Halaman detail / Selengkapnya: jangan pernah crop gambar utama. */
body[class*="theme-"] .article-page .article-hero,
body[class*="theme-"] .pro-article .article-hero{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:22px auto 28px !important;
    border-radius:14px !important;
    background:color-mix(in srgb,var(--p) 3%,#f8fafc);
    border:1px solid color-mix(in srgb,var(--p) 8%,#e5eaf0);
    box-shadow:0 8px 24px rgba(15,39,71,.07);
}

/* Jika gambar sangat tinggi, tetap utuh dan nyaman di layar kecil. */
@media(max-width:760px){
    body[class*="theme-"] .featured-ann{
        grid-template-columns:1fr !important;
    }

    body[class*="theme-"] .featured-ann > img{
        width:auto !important;
        max-width:100% !important;
        max-height:520px !important;
        margin:0 auto !important;
    }

    body[class*="theme-"] .article-page .article-hero,
    body[class*="theme-"] .pro-article .article-hero{
        width:auto !important;
        max-width:100% !important;
        margin:16px auto 22px !important;
    }
}


/* ============================================================
   PENGUMUMAN & KEGIATAN — ICON BERWARNA PROFESIONAL
   Berlaku untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */
body[class*="theme-"] .announcement-list a{
    position:relative;
    display:grid !important;
    grid-template-columns:40px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:13px !important;
    padding:13px 0 !important;
    transition:background .18s ease,transform .18s ease,padding .18s ease;
}

body[class*="theme-"] .announcement-list a::before{
    content:"";
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    font-size:16px;
    font-weight:900;
    line-height:1;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 6px 14px rgba(15,39,71,.10), inset 0 1px 0 rgba(255,255,255,.35);
}

body[class*="theme-"] .announcement-list a > span{
    min-width:0;
}

/* Ikon dan warna dibuat bervariasi tetapi tetap satu bahasa desain. */
body[class*="theme-"] .announcement-list a:nth-child(1)::before{
    content:"📌";
    background:linear-gradient(145deg,#fff1f2,#fecdd3);
    color:#be123c;
}
body[class*="theme-"] .announcement-list a:nth-child(2)::before{
    content:"🎓";
    background:linear-gradient(145deg,#eff6ff,#bfdbfe);
    color:#1d4ed8;
}
body[class*="theme-"] .announcement-list a:nth-child(3)::before{
    content:"📝";
    background:linear-gradient(145deg,#fefce8,#fde68a);
    color:#a16207;
}
body[class*="theme-"] .announcement-list a:nth-child(4)::before{
    content:"🏆";
    background:linear-gradient(145deg,#fff7ed,#fed7aa);
    color:#c2410c;
}
body[class*="theme-"] .announcement-list a:nth-child(5)::before{
    content:"🤝";
    background:linear-gradient(145deg,#ecfdf5,#a7f3d0);
    color:#047857;
}
body[class*="theme-"] .announcement-list a:nth-child(6)::before{
    content:"⭐";
    background:linear-gradient(145deg,#faf5ff,#e9d5ff);
    color:#7e22ce;
}
body[class*="theme-"] .announcement-list a:nth-child(7)::before{
    content:"📅";
    background:linear-gradient(145deg,#ecfeff,#a5f3fc);
    color:#0e7490;
}

/* Hover tetap elegan, tidak ramai. */
body[class*="theme-"] .announcement-list a:hover{
    padding-left:8px !important;
    padding-right:8px !important;
    border-radius:12px;
    background:color-mix(in srgb,var(--a) 5%,transparent);
    transform:translateX(2px);
}

body[class*="theme-"] .announcement-list a:hover::before{
    transform:scale(1.04);
}

/* Tanggal tetap rapi di kanan. */
body[class*="theme-"] .announcement-list time{
    justify-self:end;
    font-size:12px !important;
    color:var(--muted) !important;
    font-weight:650;
}

/* Responsif */
@media(max-width:680px){
    body[class*="theme-"] .announcement-list a{
        grid-template-columns:34px minmax(0,1fr) !important;
        gap:10px !important;
    }
    body[class*="theme-"] .announcement-list a::before{
        width:30px;
        height:30px;
        border-radius:9px;
        font-size:14px;
    }
    body[class*="theme-"] .announcement-list time{
        grid-column:2;
        justify-self:start;
        margin-top:2px;
        font-size:10px !important;
    }
}


/* ============================================================
   PAGINATION PENGUMUMAN & KEGIATAN — PROFESSIONAL / ELEGAN
   Berlaku ke seluruh theme-01 s.d. theme-25.
   ============================================================ */
body[class*="theme-"] .announcement-events-card{
    display:flex;
    flex-direction:column;
}

body[class*="theme-"] .announcement-events-card .announcement-list{
    flex:1 1 auto;
}

body[class*="theme-"] .announcement-pagination{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:12px !important;
    margin:18px -22px -22px !important;
    padding:14px 18px !important;
    min-height:62px;
    border-top:1px solid color-mix(in srgb,var(--p) 9%,#e8edf3);
    border-radius:0 0 var(--r) var(--r);
    background:
        linear-gradient(180deg,
            color-mix(in srgb,var(--a) 2%,#fff),
            color-mix(in srgb,var(--a) 5%,#fff));
}

/* Previous / Next */
body[class*="theme-"] .announcement-pagination .pagination-nav{
    min-width:104px !important;
    min-height:36px;
    padding:8px 13px !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid color-mix(in srgb,var(--a) 22%,#dce4ed) !important;
    border-radius:10px !important;
    background:#fff !important;
    color:var(--p) !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1;
    text-decoration:none !important;
    box-shadow:0 3px 10px rgba(15,39,71,.05);
    transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease !important;
}
body[class*="theme-"] .announcement-pagination .pagination-prev{justify-self:start !important}
body[class*="theme-"] .announcement-pagination .pagination-next{justify-self:end !important}
body[class*="theme-"] .announcement-pagination .pagination-nav > span{
    font-size:17px;
    line-height:1;
}
body[class*="theme-"] .announcement-pagination .pagination-nav:not(.is-disabled):hover{
    transform:translateY(-1px);
    background:var(--a) !important;
    border-color:var(--a) !important;
    color:#fff !important;
    box-shadow:0 7px 16px color-mix(in srgb,var(--a) 20%,transparent);
}
body[class*="theme-"] .announcement-pagination .pagination-nav.is-disabled{
    opacity:.38;
    cursor:not-allowed;
    box-shadow:none;
}

/* Nomor halaman */
body[class*="theme-"] .announcement-pagination .pagination-pages{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap;
    gap:6px !important;
}
body[class*="theme-"] .announcement-pagination .pagination-pages > a{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    border:1px solid color-mix(in srgb,var(--a) 18%,#dce4ed) !important;
    background:#fff !important;
    color:var(--muted) !important;
    font-size:11px !important;
    font-weight:850 !important;
    text-decoration:none !important;
    box-shadow:0 2px 8px rgba(15,39,71,.04);
    transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease;
}
body[class*="theme-"] .announcement-pagination .pagination-pages > a:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--a) 55%,#dce4ed) !important;
    color:var(--a) !important;
}
body[class*="theme-"] .announcement-pagination .pagination-pages > a.active{
    background:var(--a) !important;
    border-color:var(--a) !important;
    color:#fff !important;
    box-shadow:0 6px 14px color-mix(in srgb,var(--a) 24%,transparent) !important;
}

/* HP */
@media(max-width:680px){
    body[class*="theme-"] .announcement-pagination{
        grid-template-columns:1fr 1fr !important;
        gap:9px !important;
        margin:16px -22px -22px !important;
        padding:12px 14px !important;
    }
    body[class*="theme-"] .announcement-pagination .pagination-pages{
        grid-column:1/-1;
        grid-row:1;
    }
    body[class*="theme-"] .announcement-pagination .pagination-prev{
        grid-column:1;
        grid-row:2;
        width:100%;
    }
    body[class*="theme-"] .announcement-pagination .pagination-next{
        grid-column:2;
        grid-row:2;
        width:100%;
    }
    body[class*="theme-"] .announcement-pagination .pagination-nav{
        min-width:0 !important;
        width:100%;
    }
}


/* ============================================================
   ICON PENGUMUMAN DARI HALAMAN ADMIN
   Menimpa ikon otomatis berdasarkan urutan.
   ============================================================ */
body[class*="theme-"] .announcement-list a[data-announcement-icon]::before{
    content:"📌";
    background:linear-gradient(145deg,#fff1f2,#fecdd3);
    color:#be123c;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="pin"]::before{
    content:"📌"; background:linear-gradient(145deg,#fff1f2,#fecdd3); color:#be123c;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="education"]::before{
    content:"🎓"; background:linear-gradient(145deg,#eff6ff,#bfdbfe); color:#1d4ed8;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="note"]::before{
    content:"📝"; background:linear-gradient(145deg,#fefce8,#fde68a); color:#a16207;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="trophy"]::before{
    content:"🏆"; background:linear-gradient(145deg,#fff7ed,#fed7aa); color:#c2410c;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="handshake"]::before{
    content:"🤝"; background:linear-gradient(145deg,#ecfdf5,#a7f3d0); color:#047857;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="star"]::before{
    content:"⭐"; background:linear-gradient(145deg,#faf5ff,#e9d5ff); color:#7e22ce;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="calendar"]::before{
    content:"📅"; background:linear-gradient(145deg,#ecfeff,#a5f3fc); color:#0e7490;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="bell"]::before{
    content:"🔔"; background:linear-gradient(145deg,#fff7ed,#ffedd5); color:#ea580c;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="briefcase"]::before{
    content:"💼"; background:linear-gradient(145deg,#f1f5f9,#cbd5e1); color:#334155;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="flag"]::before{
    content:"🚩"; background:linear-gradient(145deg,#fef2f2,#fecaca); color:#b91c1c;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="megaphone"]::before{
    content:"📣"; background:linear-gradient(145deg,#eef2ff,#c7d2fe); color:#4338ca;
}
body[class*="theme-"] .announcement-list a[data-announcement-icon="info"]::before{
    content:"ℹ️"; background:linear-gradient(145deg,#eff6ff,#dbeafe); color:#0369a1;
}


/* ============================================================
   PENGUMUMAN UTAMA — GAMBAR SAMPAI MENTOK KE BAWAH CARD
   Tetap utuh, proporsional, dan tidak terpotong.
   Berlaku untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */
body[class*="theme-"] .two-col > .section-card:first-child{
    display:flex !important;
    flex-direction:column !important;
}

body[class*="theme-"] .two-col > .section-card:first-child .featured-ann{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(250px,44%) minmax(0,1fr) !important;
    align-items:stretch !important;
    gap:18px !important;
}

body[class*="theme-"] .two-col > .section-card:first-child .featured-ann > img{
    align-self:stretch !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    min-height:100% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    background:transparent !important;
}

/* Konten teks tetap dimulai dari atas. */
body[class*="theme-"] .two-col > .section-card:first-child .featured-ann > div{
    align-self:start !important;
}

/* Responsif: pada layar kecil gambar kembali normal agar tidak terlalu tinggi. */
@media(max-width:760px){
    body[class*="theme-"] .two-col > .section-card:first-child .featured-ann{
        grid-template-columns:1fr !important;
    }

    body[class*="theme-"] .two-col > .section-card:first-child .featured-ann > img{
        width:auto !important;
        height:auto !important;
        min-height:0 !important;
        max-height:560px !important;
        margin:0 auto !important;
        object-fit:contain !important;
    }
}


/* ============================================================
   PENGUMUMAN UTAMA — VISUAL FINAL SESUAI MOCKUP
   Gambar mulai langsung dari atas tanpa ruang kosong.
   Berlaku untuk seluruh theme-01 s.d. theme-25.
   ============================================================ */
body[class*="theme-"] .two-col > .section-card:first-child .featured-ann{
    align-items:start !important;
    grid-template-columns:minmax(250px,44%) minmax(0,1fr) !important;
    gap:20px !important;
}

body[class*="theme-"] .two-col > .section-card:first-child .featured-ann > img{
    display:block !important;
    align-self:start !important;
    justify-self:stretch !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border-radius:13px !important;
}

body[class*="theme-"] .two-col > .section-card:first-child .featured-ann > div{
    align-self:start !important;
    padding-top:0 !important;
    margin-top:0 !important;
}

body[class*="theme-"] .two-col > .section-card:first-child .featured-ann h3{
    margin-top:0 !important;
}

body[class*="theme-"] .two-col > .section-card:first-child > .section-title{
    margin-bottom:14px !important;
    padding-bottom:0 !important;
}

@media(max-width:760px){
    body[class*="theme-"] .two-col > .section-card:first-child .featured-ann{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    body[class*="theme-"] .two-col > .section-card:first-child .featured-ann > img{
        width:auto !important;
        max-width:100% !important;
        height:auto !important;
        max-height:none !important;
        margin:0 auto !important;
    }
}


/* ============================================================
   GALERI BERANDA — 2 PANEL COMPACT, 6 FOTO PER PANEL (3 x 2)
   Kegiatan kiri, Prestasi kanan. Berlaku pada 25 template.
   ============================================================ */
body[class*="theme-"] .gallery-showcase-compact{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:22px !important;
    align-items:start !important;
    margin-top:22px !important;
}

body[class*="theme-"] .gallery-panel-compact{
    width:100% !important;
    min-width:0 !important;
    padding:18px !important;
    border-radius:18px !important;
    overflow:hidden !important;
}

body[class*="theme-"] .gallery-panel-compact .gallery-title-row{
    margin-bottom:16px !important;
    padding:12px 14px !important;
    border-radius:11px !important;
}

body[class*="theme-"] .gallery-panel-compact .gallery-title-row h2{
    font-size:14px !important;
    line-height:1.25 !important;
}

body[class*="theme-"] .gallery-panel-compact .gallery-title-row > span{
    font-size:16px !important;
}

body[class*="theme-"] .gallery-panel-compact .gallery-title-row > a{
    font-size:9px !important;
    white-space:nowrap;
}

body[class*="theme-"] .gallery-grid-compact{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
}

body[class*="theme-"] .gallery-card-compact{
    min-width:0;
    margin:0 !important;
    border:1px solid color-mix(in srgb,var(--p) 11%,#e3e8ef);
    border-radius:11px !important;
    overflow:hidden;
    background:#fff;
    box-shadow:0 4px 12px rgba(15,39,71,.055);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

body[class*="theme-"] .gallery-card-compact:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--a) 30%,#dfe5ec);
    box-shadow:0 8px 18px rgba(15,39,71,.09);
}

body[class*="theme-"] .gallery-card-compact .image-zoom-trigger{
    display:block !important;
    width:100% !important;
    aspect-ratio:4/3 !important;
    overflow:hidden !important;
    border:0 !important;
    padding:0 !important;
    background:color-mix(in srgb,var(--p) 4%,#f7f9fc);
    cursor:pointer;
}

body[class*="theme-"] .gallery-card-compact .image-zoom-trigger img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    aspect-ratio:auto !important;
    transition:transform .22s ease;
}

body[class*="theme-"] .gallery-card-compact .image-zoom-trigger:hover img{
    transform:scale(1.025);
}

body[class*="theme-"] .gallery-card-compact figcaption{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px !important;
    padding:8px 7px !important;
    font-size:10px !important;
    line-height:1.3 !important;
    font-weight:750;
    text-align:center;
    color:var(--text);
    background:#fff;
}

/* Pagination compact & profesional */
body[class*="theme-"] .gallery-pagination-compact{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:16px !important;
    padding-top:14px !important;
    border-top:1px solid color-mix(in srgb,var(--p) 8%,#e8edf3);
}

body[class*="theme-"] .gallery-page-nav{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:31px;
    padding:7px 10px;
    border-radius:9px;
    border:1px solid color-mix(in srgb,var(--a) 20%,#dce4ed);
    background:#fff;
    color:var(--p);
    font-size:9px;
    line-height:1;
    font-weight:800;
    text-decoration:none;
    transition:.18s ease;
}

body[class*="theme-"] a.gallery-page-nav:hover{
    background:var(--a);
    border-color:var(--a);
    color:#fff;
    transform:translateY(-1px);
}

body[class*="theme-"] .gallery-page-nav.is-disabled{
    opacity:.35;
    cursor:not-allowed;
}

body[class*="theme-"] .gallery-page-numbers{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
}

body[class*="theme-"] .gallery-page-numbers a{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:8px;
    border:1px solid color-mix(in srgb,var(--a) 18%,#dce4ed);
    background:#fff;
    color:var(--muted);
    font-size:9px;
    font-weight:850;
    text-decoration:none;
    transition:.18s ease;
}

body[class*="theme-"] .gallery-page-numbers a:hover{
    color:var(--a);
    border-color:var(--a);
    transform:translateY(-1px);
}

body[class*="theme-"] .gallery-page-numbers a.active{
    color:#fff !important;
    background:var(--a) !important;
    border-color:var(--a) !important;
    box-shadow:0 5px 12px color-mix(in srgb,var(--a) 22%,transparent);
}

/* Laptop lebih sempit: tetap 3 kolom tetapi lebih rapat */
@media(max-width:1180px){
    body[class*="theme-"] .gallery-showcase-compact{
        gap:16px !important;
    }
    body[class*="theme-"] .gallery-panel-compact{
        padding:14px !important;
    }
    body[class*="theme-"] .gallery-grid-compact{
        gap:10px !important;
    }
}

/* Tablet: kedua panel turun menjadi satu kolom */
@media(max-width:900px){
    body[class*="theme-"] .gallery-showcase-compact{
        grid-template-columns:1fr !important;
    }
}

/* HP: 2 kartu per baris agar tetap terbaca */
@media(max-width:560px){
    body[class*="theme-"] .gallery-grid-compact{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    body[class*="theme-"] .gallery-pagination-compact{
        grid-template-columns:1fr 1fr !important;
    }
    body[class*="theme-"] .gallery-page-numbers{
        grid-column:1/-1;
        grid-row:1;
        margin-bottom:4px;
    }
    body[class*="theme-"] .gallery-page-nav:first-child{
        grid-column:1;
        grid-row:2;
    }
    body[class*="theme-"] .gallery-page-nav:last-child{
        grid-column:2;
        grid-row:2;
    }
}


/* ============================================================
   TOP CONTACT BAR — SEPARATOR ORNAMEN PREMIUM
   Mengganti garis vertikal polos menjadi ornamen navy-gold.
   Berlaku pada seluruh 25 template.
   ============================================================ */
@media(min-width:681px){

    /* Hilangkan garis vertikal polos lama */
    body[class*="theme-"] .topbar-segment + .topbar-segment::before{
        content:"" !important;
        position:absolute !important;
        left:0 !important;
        top:50% !important;
        bottom:auto !important;
        width:1px !important;
        height:36px !important;
        transform:translate(-50%,-50%) !important;
        background:
            linear-gradient(
                to bottom,
                transparent 0%,
                color-mix(in srgb,var(--topbar-gold,#d9a72e) 28%,transparent) 18%,
                var(--topbar-gold,#d9a72e) 46%,
                var(--topbar-gold,#d9a72e) 54%,
                color-mix(in srgb,var(--topbar-gold,#d9a72e) 28%,transparent) 82%,
                transparent 100%
            ) !important;
        opacity:.85 !important;
        border-radius:999px !important;
        box-shadow:0 0 6px rgba(217,167,46,.08) !important;
    }

    /* Diamond kecil di tengah separator */
    body[class*="theme-"] .topbar-segment + .topbar-segment::after{
        content:"" !important;
        position:absolute !important;
        left:0 !important;
        top:50% !important;
        width:8px !important;
        height:8px !important;
        transform:translate(-50%,-50%) rotate(45deg) !important;
        border-radius:2px !important;
        background:
            linear-gradient(
                135deg,
                #f6d56e,
                var(--topbar-gold,#d9a72e)
            ) !important;
        border:1px solid rgba(255,255,255,.34) !important;
        box-shadow:
            0 0 0 4px rgba(217,167,46,.055),
            0 2px 7px rgba(0,0,0,.14),
            0 0 8px rgba(246,213,110,.13) !important;
        pointer-events:none !important;
        z-index:2 !important;
    }

    /* Variasi halus pada beberapa template tanpa mengubah konsep */
    body.theme-05 .topbar-segment + .topbar-segment::after,
    body.theme-10 .topbar-segment + .topbar-segment::after,
    body.theme-15 .topbar-segment + .topbar-segment::after,
    body.theme-20 .topbar-segment + .topbar-segment::after,
    body.theme-25 .topbar-segment + .topbar-segment::after{
        border-radius:50% !important;
        transform:translate(-50%,-50%) !important;
    }
}

/* Tablet 2 kolom: separator horizontal untuk baris sosial */
@media(min-width:681px) and (max-width:1050px){
    body[class*="theme-"] .topbar-social::before{
        display:block !important;
        left:18px !important;
        right:18px !important;
        top:0 !important;
        bottom:auto !important;
        width:auto !important;
        height:1px !important;
        transform:none !important;
        background:
            linear-gradient(
                90deg,
                transparent,
                color-mix(in srgb,var(--topbar-gold,#d9a72e) 60%,transparent),
                transparent
            ) !important;
    }

    body[class*="theme-"] .topbar-social::after{
        left:50% !important;
        top:0 !important;
        width:7px !important;
        height:7px !important;
        transform:translate(-50%,-50%) rotate(45deg) !important;
    }
}

/* HP: separator menjadi garis horizontal dengan diamond kecil */
@media(max-width:680px){
    body[class*="theme-"] .topbar-segment + .topbar-segment::before{
        content:"" !important;
        position:absolute !important;
        left:16px !important;
        right:16px !important;
        top:0 !important;
        bottom:auto !important;
        width:auto !important;
        height:1px !important;
        transform:none !important;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                color-mix(in srgb,var(--topbar-gold,#d9a72e) 54%,transparent) 22%,
                var(--topbar-gold,#d9a72e) 50%,
                color-mix(in srgb,var(--topbar-gold,#d9a72e) 54%,transparent) 78%,
                transparent 100%
            ) !important;
    }

    body[class*="theme-"] .topbar-segment + .topbar-segment::after{
        content:"" !important;
        position:absolute !important;
        left:50% !important;
        top:0 !important;
        width:6px !important;
        height:6px !important;
        transform:translate(-50%,-50%) rotate(45deg) !important;
        background:var(--topbar-gold,#d9a72e) !important;
        border-radius:1px !important;
        box-shadow:0 0 0 3px rgba(217,167,46,.045) !important;
        pointer-events:none !important;
    }
}


/* ============================================================
   SAFEGUARD: ORNAMEN TOP CONTACT BAR TIDAK MENGGANGGU NAVBAR
   ============================================================ */
body[class*="theme-"] .school-topbar{
    position:relative;
    z-index:40 !important;
}

body[class*="theme-"] .school-topbar .topbar-segment{
    position:relative;
}

body[class*="theme-"] .school-topbar .topbar-segment::before,
body[class*="theme-"] .school-topbar .topbar-segment::after{
    pointer-events:none !important;
}


/* ============================================================
   TOP CONTACT BAR — SEPARATOR MINIMAL / CLASSIC
   Diamond separator dihilangkan agar lebih bersih.
   ============================================================ */
@media(min-width:681px){
    body[class*="theme-"] .topbar-segment + .topbar-segment::after{
        display:none !important;
        content:none !important;
    }

    body[class*="theme-"] .topbar-segment + .topbar-segment::before{
        content:"" !important;
        display:block !important;
        position:absolute !important;
        left:0 !important;
        top:50% !important;
        bottom:auto !important;
        width:1px !important;
        height:28px !important;
        transform:translateY(-50%) !important;
        background:linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255,255,255,.08) 15%,
            rgba(248,203,79,.34) 50%,
            rgba(255,255,255,.08) 85%,
            transparent 100%
        ) !important;
        border-radius:999px !important;
        opacity:.9 !important;
        box-shadow:none !important;
    }
}

@media(max-width:680px){
    body[class*="theme-"] .topbar-segment + .topbar-segment::after{
        display:none !important;
        content:none !important;
    }

    body[class*="theme-"] .topbar-segment + .topbar-segment::before{
        content:"" !important;
        display:block !important;
        position:absolute !important;
        left:16px !important;
        right:16px !important;
        top:0 !important;
        width:auto !important;
        height:1px !important;
        transform:none !important;
        background:linear-gradient(
            90deg,
            transparent,
            rgba(248,203,79,.30),
            transparent
        ) !important;
        box-shadow:none !important;
    }
}

/* ============================================================
   PENGUMUMAN & KEGIATAN — TIPOGRAFI DARI ADMIN
   Hanya teks judul list; ikon dan tanggal tetap independen.
   ============================================================ */
body[class*="theme-"] .announcement-events-card .announcement-list a > span{
    font-family:var(--announcement-list-font-family,Inter,"Segoe UI",Arial,sans-serif) !important;
    font-size:var(--announcement-list-font-size,15px) !important;
    color:var(--announcement-list-font-color,#17233B) !important;
    line-height:1.45 !important;
}
body[class*="theme-"] .announcement-events-card .announcement-list a:hover > span{
    color:var(--announcement-list-font-color,#17233B) !important;
}

/* KELOLA BUTTON — bar judul seluruh 25 template */
body[class*="theme-"] .managed-section-title{
    width:var(--managed-width,100%) !important;
    min-height:var(--managed-height,52px) !important;
    height:auto !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    background:linear-gradient(90deg,var(--managed-gradient-start,#0B376F),var(--managed-gradient-end,#1769E0)) !important;
    border-radius:var(--managed-radius,12px) !important;
    color:var(--managed-text-color,#FFFFFF) !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
}
body[class*="theme-"] .managed-section-title h2{
    font-family:var(--managed-font-family,Inter,"Segoe UI",Arial,sans-serif) !important;
    font-size:var(--managed-font-size,16px) !important;
    font-weight:var(--managed-font-weight,800) !important;
    color:var(--managed-text-color,#FFFFFF) !important;
    line-height:1.2 !important;
    margin:0 !important;
}
body[class*="theme-"] .managed-section-title > span,
body[class*="theme-"] .managed-section-title > a{color:var(--managed-text-color,#FFFFFF) !important}
@media(max-width:680px){
    body[class*="theme-"] .managed-section-title{width:100% !important}
    body[class*="theme-"] .managed-section-title h2{font-size:min(var(--managed-font-size,16px),18px) !important}
}


/* FINAL KELOLA BUTTON — inline admin menjadi sumber tampilan utama */
body[class*="theme-"] .managed-section-title{
    box-sizing:border-box !important;
}
body[class*="theme-"] .managed-section-title h2{
    font-family:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    color:inherit !important;
}
body[class*="theme-"] .managed-section-title > a{
    color:inherit !important;
}
body[class*="theme-"] .managed-section-title .managed-title-icon{
    flex:0 0 auto;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}