*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding-top:118px;font-family:Inter,Segoe UI,Arial,sans-serif;color:#24332e;background:#f7faf9}.container{width:min(1180px,calc(100% - 32px));margin:auto}.top{background:#063b2e;color:#dcece7;font-size:12px;padding:9px 0}.topin{display:flex;justify-content:space-between;gap:20px}.nav{background:#fff;box-shadow:0 4px 20px #0001;position:relative;z-index:50}.navin{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#063b2e;min-width:230px}.brand img{width:58px;height:58px;object-fit:contain}.brand span{font-size:18px;font-weight:900}.navin nav{display:flex;gap:4px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.navlink,.dd button{font:inherit;font-weight:700;color:#42504b;text-decoration:none;background:none;border:0;padding:12px 9px;cursor:pointer;border-radius:8px}.navlink:hover,.dd button:hover{color:#087f5b;background:#eef8f4}.navlink i,.dd i{margin-right:5px}.dd{position:relative}.dd>button span{font-size:11px}.drop{display:none;position:absolute;top:calc(100% - 2px);left:0;background:#fff;min-width:245px;box-shadow:0 12px 30px #0002;border-top:3px solid #087f5b;border-radius:0 0 12px 12px;overflow:hidden}.dd:hover .drop,.dd.open .drop{display:block}.drop a{display:block;padding:12px 15px;color:#42504b;text-decoration:none;border-bottom:1px solid #eee}.drop a:hover{background:#f2f8f5;color:#087f5b}.mob,.mobile{display:none}.hero{height:620px;position:relative;overflow:hidden;background:#063b2e}.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s}.slide.active{opacity:1}.slide img{width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#063b2eeb,#063b2e66,transparent)}.heroText{position:relative;z-index:2;height:100%;display:flex;align-items:center;color:#fff}.heroText h1{font-size:clamp(38px,6vw,68px);line-height:1.05;max-width:760px;margin:12px 0}.heroText p{max-width:700px;font-size:18px;line-height:1.7}.section{padding:70px 0}.alt{background:#edf5f1}.head{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.eyebrow{font-size:12px;color:#087f5b;font-weight:900;letter-spacing:2px;text-transform:uppercase}.grid{display:grid;gap:20px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.card,.detail{background:#fff;border:1px solid #e2ece8;border-radius:17px;overflow:hidden;box-shadow:0 8px 25px #0000000b}.card img{width:100%;height:210px;object-fit:cover}.body{padding:18px}.tag{display:inline-block;background:#e7f5ef;color:#087f5b;border-radius:99px;padding:4px 9px;font-size:11px;font-weight:800}.btn{display:inline-block;background:#087f5b;color:#fff;text-decoration:none;border:0;border-radius:9px;padding:10px 14px;font-weight:800;cursor:pointer}.btn:hover{filter:brightness(.92)}.stats{background:#063b2e;color:#fff}.stat{text-align:center;padding:18px}.stat i{color:#f5c75a;font-size:25px}.stat strong{display:block;font-size:29px}.stat span{display:block;margin-top:4px}.welcome{display:grid;grid-template-columns:360px 1fr;gap:45px;align-items:center}.welcome img{width:100%;height:410px;object-fit:cover;border-radius:20px}.prose{line-height:1.8}.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.quick a{background:#fff;border:1px solid #e2ece8;padding:18px;text-align:center;text-decoration:none;color:#063b2e;border-radius:13px}.quick i{display:block;color:#087f5b;font-size:23px;margin-bottom:7px}.detail{padding:28px}.detail img.cover{width:100%;max-height:540px;object-fit:cover;border-radius:14px}.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px;padding:50px 0;color:#d6e7e1}.footer,footer{background:#052f26;color:#d6e7e1}.flogo{width:60px;height:60px;object-fit:contain}.social{display:block;color:#d6e7e1;text-decoration:none;margin:8px 0}.fb{text-align:center;border-top:1px solid #ffffff15;padding:15px;font-size:12px}.placeholder{min-height:160px;display:grid;place-items:center;background:#eef5f1;color:#087f5b;font-size:42px}@media(max-width:1000px){.navin nav{display:none}.mob{display:block;border:0;background:none;font-size:24px;color:#063b2e}.mobile.open{display:flex;flex-direction:column;padding:8px 0 18px;background:#063b2e}.mobile .navlink,.mobile .dd button{color:#fff;display:block;width:100%;text-align:left;border-bottom:1px solid #ffffff18}.mobile .dd{width:100%}.mobile .drop{display:block;position:static;width:100%;background:#0b493c;border:0;box-shadow:none}.mobile .drop a{color:#dcece7}.g4{grid-template-columns:repeat(2,1fr)}.quick{grid-template-columns:repeat(2,1fr)}.foot{grid-template-columns:1fr 1fr}}@media(max-width:600px){body{padding-top:106px}.topin span:last-child{display:none}.navin{min-height:70px}.brand{min-width:0}.brand img{width:48px;height:48px}.brand span{font-size:14px}.hero{height:520px}.heroText h1{font-size:40px}.heroText p{font-size:15px}.g2,.g3,.g4{grid-template-columns:1fr}.quick{grid-template-columns:1fr 1fr}.foot{grid-template-columns:1fr}.section{padding:48px 0}}
/* ===== AUTO SLIDER V8 ===== */
.hero{isolation:isolate}
.hero .slide{visibility:hidden;z-index:0;transition:opacity .8s ease,visibility .8s ease}
.hero .slide.active{visibility:visible;z-index:1}
.hero .slide img{display:block}
.slider-controls{
position:absolute;
left:50%;
bottom:24px;
transform:translateX(-50%);
z-index:10;
display:flex;
align-items:center;
gap:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(0,0,0,.28);
backdrop-filter:blur(6px);
}
.slider-controls button{
border:0;
cursor:pointer;
color:#fff;
}
.slider-prev,.slider-next{
width:38px;
height:38px;
border-radius:50%;
background:rgba(0,0,0,.38);
font-size:24px;
line-height:38px;
}
.slider-prev:hover,.slider-next:hover{background:rgba(0,0,0,.65)}
.slider-dots{display:flex;align-items:center;gap:7px}
.slider-dot{
width:10px;
height:10px;
padding:0;
border-radius:50%;
background:rgba(255,255,255,.55);
}
.slider-dot.active{
width:28px;
border-radius:99px;
background:#fff;
}
@media(max-width:600px){
.slider-controls{bottom:16px;gap:9px;padding:6px 9px}
.slider-prev,.slider-next{width:34px;height:34px;line-height:34px;font-size:20px}
.slider-dot{width:8px;height:8px}
.slider-dot.active{width:22px}
}
/* =========================================================
MIN 1 ENDE V9 - TEMA HIJAU
Palet: hijau madrasah, putih, hijau muda, aksen emas lembut
========================================================= */
:root{
--primary:#08783f;
--primary-dark:#055b30;
--primary-light:#eaf7ef;
--secondary:#129653;
--accent:#d9a441;
--text:#183126;
--muted:#64756c;
--white:#ffffff;
--border:#dce9e1;
--shadow:0 10px 30px rgba(5,91,48,.10);
}
/* Header & navigasi */
.site-header,.navbar,header{
background:#ffffff;
}
.site-header a,.navbar a,header a{
color:var(--primary-dark);
}
.site-header a:hover,.navbar a:hover,header a:hover{
color:var(--secondary);
}
.brand,.logo-text,.site-title{
color:var(--primary-dark)!important;
font-weight:800;
}
.navbar .active,.navbar a.active{
color:var(--primary)!important;
border-bottom-color:var(--primary)!important;
}
.navbar button,.menu-toggle{
color:var(--primary-dark);
}
/* Tombol */
.btn,.button,button[type="submit"],.btn-primary{
background:var(--primary);
border-color:var(--primary);
color:#fff;
}
.btn:hover,.button:hover,button[type="submit"]:hover,.btn-primary:hover{
background:var(--primary-dark);
border-color:var(--primary-dark);
}
/* Hero */
.hero{
background:linear-gradient(135deg,#075f32 0%,#08783f 52%,#13a45b 100%);
}
.hero::before{
background:linear-gradient(90deg,rgba(3,48,25,.72),rgba(3,48,25,.18));
}
.hero h1,.hero h2,.hero p{
color:#fff;
}
/* Heading dan section */
.section-title,.section h2,.content-title{
color:var(--primary-dark);
}
.section-title::after,.section h2::after{
background:var(--accent);
}
/* Kartu */
.card,.news-card,.info-card,.feature-card,.gallery-card{
border-color:var(--border);
box-shadow:var(--shadow);
}
.card:hover,.news-card:hover,.info-card:hover,.feature-card:hover,.gallery-card:hover{
border-color:#b8d9c4;
box-shadow:0 14px 35px rgba(5,91,48,.14);
}
.card h3,.news-card h3,.info-card h3,.feature-card h3{
color:var(--primary-dark);
}
/* Statistik */
.stats,.statistics{
background:var(--primary-light);
}
.stat-number,.stat-value{
color:var(--primary);
}
/* Link */
a{
color:var(--primary);
}
a:hover{
color:var(--primary-dark);
}
/* Badge / kategori */
.badge,.category,.label{
background:#e2f4e9;
color:var(--primary-dark);
}
/* Form */
input:focus,textarea:focus,select:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(8,120,63,.12);
}
/* Footer */
footer,.site-footer{
background:#064d2a;
color:#eaf7ef;
}
footer a,.site-footer a{
color:#c9f0d7;
}
footer a:hover,.site-footer a:hover{
color:#ffffff;
}
/* Mobile menu */
.mobile-menu,.mobile-nav{
background:#ffffff;
border-top:3px solid var(--primary);
}
.mobile-menu a,.mobile-nav a{
color:var(--primary-dark);
}
.mobile-menu a:hover,.mobile-nav a:hover{
background:var(--primary-light);
color:var(--primary);
}
/* Slider controls tetap serasi dengan tema hijau */
.slider-controls{
background:rgba(3,48,25,.40);
}
.slider-prev,.slider-next{
background:rgba(3,48,25,.52);
}
.slider-prev:hover,.slider-next:hover{
background:var(--primary-dark);
}
.slider-dot.active{
background:#fff;
}
/* Aksen garis / ikon */
.icon,.section-icon{
color:var(--primary);
}
hr{
border-color:var(--border);
}
/* =========================================================
INTERAKTIF MENU + TEMA WARNA PER HALAMAN - MIN 1 ENDE
========================================================= */
body{
--page-accent:#08783f;
--page-accent-dark:#055b30;
--page-soft:#eaf7ef;
--page-bg:#f7faf9;
background:var(--page-bg);
transition:background-color .45s ease;
}
main{
position:relative;
isolation:isolate;
}
main::before{
content:"";
position:absolute;
inset:0 0 auto;
height:190px;
z-index:-1;
pointer-events:none;
background:linear-gradient(180deg,var(--page-soft),rgba(255,255,255,0));
opacity:.72;
transition:background .45s ease;
}
/* Palet halaman */
.page-theme-home{--page-accent:#08783f;--page-accent-dark:#055b30;--page-soft:#eaf7ef;--page-bg:#f7faf9}
.page-theme-profile{--page-accent:#2563a6;--page-accent-dark:#174a7a;--page-soft:#eaf3fb;--page-bg:#f5f9fd}
.page-theme-academic{--page-accent:#7c3aed;--page-accent-dark:#5721a8;--page-soft:#f2eafe;--page-bg:#faf8ff}
.page-theme-people{--page-accent:#0f766e;--page-accent-dark:#0a554f;--page-soft:#e6f7f5;--page-bg:#f4fbfa}
.page-theme-students{--page-accent:#db7b16;--page-accent-dark:#9d530d;--page-soft:#fff3e4;--page-bg:#fffbf6}
.page-theme-news{--page-accent:#c2410c;--page-accent-dark:#8d2e09;--page-soft:#fff0e9;--page-bg:#fff9f6}
.page-theme-achievement{--page-accent:#b7791f;--page-accent-dark:#815313;--page-soft:#fff8df;--page-bg:#fffdf5}
.page-theme-creative{--page-accent:#be185d;--page-accent-dark:#86103f;--page-soft:#fdebf4;--page-bg:#fff8fb}
.page-theme-gallery{--page-accent:#0891b2;--page-accent-dark:#0b6478;--page-soft:#e7f8fc;--page-bg:#f5fcfe}
.page-theme-partner{--page-accent:#475569;--page-accent-dark:#273447;--page-soft:#edf1f5;--page-bg:#f8fafc}
.page-theme-help{--page-accent:#2563eb;--page-accent-dark:#1747a0;--page-soft:#eaf1ff;--page-bg:#f7faff}
.page-theme-community{--page-accent:#9333ea;--page-accent-dark:#6922aa;--page-soft:#f4eaff;--page-bg:#fbf9ff}
.page-theme-finance{--page-accent:#15803d;--page-accent-dark:#0d5b2b;--page-soft:#e9f8ee;--page-bg:#f7fcf8}
.page-theme-ppdb{--page-accent:#dc2626;--page-accent-dark:#991b1b;--page-soft:#feecec;--page-bg:#fff8f8}
.page-theme-contact,.page-theme-info{--page-accent:#0369a1;--page-accent-dark:#064e73;--page-soft:#e7f5fc;--page-bg:#f6fbfe}
.page-theme-default{--page-accent:#08783f;--page-accent-dark:#055b30;--page-soft:#eaf7ef;--page-bg:#f7faf9}
/* Warna otomatis elemen utama mengikuti halaman */
.page-theme-profile .eyebrow,.page-theme-academic .eyebrow,.page-theme-people .eyebrow,
.page-theme-students .eyebrow,.page-theme-news .eyebrow,.page-theme-achievement .eyebrow,
.page-theme-creative .eyebrow,.page-theme-gallery .eyebrow,.page-theme-partner .eyebrow,
.page-theme-help .eyebrow,.page-theme-community .eyebrow,.page-theme-finance .eyebrow,
.page-theme-ppdb .eyebrow,.page-theme-contact .eyebrow,.page-theme-info .eyebrow{
color:var(--page-accent);
}
.page-theme-profile .btn,.page-theme-academic .btn,.page-theme-people .btn,
.page-theme-students .btn,.page-theme-news .btn,.page-theme-achievement .btn,
.page-theme-creative .btn,.page-theme-gallery .btn,.page-theme-partner .btn,
.page-theme-help .btn,.page-theme-community .btn,.page-theme-finance .btn,
.page-theme-ppdb .btn,.page-theme-contact .btn,.page-theme-info .btn{
background:var(--page-accent);border-color:var(--page-accent);
}
.page-theme-profile .btn:hover,.page-theme-academic .btn:hover,.page-theme-people .btn:hover,
.page-theme-students .btn:hover,.page-theme-news .btn:hover,.page-theme-achievement .btn:hover,
.page-theme-creative .btn:hover,.page-theme-gallery .btn:hover,.page-theme-partner .btn:hover,
.page-theme-help .btn:hover,.page-theme-community .btn:hover,.page-theme-finance .btn:hover,
.page-theme-ppdb .btn:hover,.page-theme-contact .btn:hover,.page-theme-info .btn:hover{
background:var(--page-accent-dark);border-color:var(--page-accent-dark);
}
/* Animasi saat kursor berada di menu */
.navlink,.dd>button{
position:relative;
overflow:hidden;
transition:color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease;
}
.navlink::after,.dd>button::after{
content:"";
position:absolute;
left:10px;right:10px;bottom:5px;
height:3px;
border-radius:99px;
background:var(--page-accent);
transform:scaleX(0);
transform-origin:center;
transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.navlink:hover,.dd>button:hover,
.navlink.is-active,.dd>button.is-active{
color:var(--page-accent)!important;
background:var(--page-soft)!important;
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,.07);
}
.navlink:hover::after,.dd>button:hover::after,
.navlink.is-active::after,.dd>button.is-active::after{
transform:scaleX(1);
}
.navlink i,.dd>button i{
transition:transform .28s ease;
}
.navlink:hover i,.dd>button:hover i,.navlink.is-active i,.dd>button.is-active i{
transform:translateY(-1px) scale(1.12) rotate(-4deg);
}
.drop a{
transition:background .2s ease,color .2s ease,padding-left .22s ease;
}
.drop a:hover,.drop a.is-active{
background:var(--page-soft);
color:var(--page-accent);
padding-left:20px;
}
/* Animasi kartu/isi halaman */
.card,.detail,.quick a{
transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
}
.card:hover,.detail:hover,.quick a:hover{
transform:translateY(-5px);
border-color:color-mix(in srgb,var(--page-accent) 35%,#dce9e1);
box-shadow:0 16px 34px rgba(0,0,0,.11);
}
.quick a:hover i{
color:var(--page-accent);
animation:menuIconBounce .55s ease both;
}
@keyframes menuIconBounce{
0%,100%{transform:translateY(0) scale(1)}
45%{transform:translateY(-5px) scale(1.14)}
}
/* Efek perpindahan antar halaman */
.page-transition{
position:fixed;
inset:0;
z-index:9999;
pointer-events:none;
background:var(--page-accent);
transform:translateY(100%);
transition:transform .38s cubic-bezier(.77,0,.18,1);
}
body.is-leaving .page-transition{transform:translateY(0)}
/* Lingkaran mengikuti kursor desktop */
.cursor-orb{
position:fixed;
width:18px;height:18px;
left:0;top:0;
z-index:10000;
pointer-events:none;
border:2px solid var(--page-accent);
border-radius:50%;
opacity:0;
transform:translate(-50%,-50%) scale(.7);
transition:opacity .2s ease,transform .18s ease,border-color .3s ease;
mix-blend-mode:multiply;
}
body.cursor-ready .cursor-orb{opacity:.7}
body.cursor-hover .cursor-orb{
transform:translate(-50%,-50%) scale(1.8);
opacity:.9;
}
@media(pointer:coarse){
.cursor-orb{display:none!important}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
scroll-behavior:auto!important;
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
}
.cursor-orb,.page-transition{display:none!important}
}
/* =========================================================
MENU HOVER + PAGE COLOR THEMES - FIXED / VISIBLE
========================================================= */
body[class*="page-theme-"]{
background:var(--page-bg)!important;
transition:background-color .45s ease;
}
body[class*="page-theme-"] main{
background:var(--page-bg)!important;
transition:background-color .45s ease;
}
body[class*="page-theme-"] .section:nth-child(even){
background:color-mix(in srgb,var(--page-accent) 5%,var(--page-bg))!important;
}
body[class*="page-theme-"] .section-title,
body[class*="page-theme-"] h1:not(.heroText h1),
body[class*="page-theme-"] h2:not(.heroText h2),
body[class*="page-theme-"] h3:not(.heroText h3){
--heading-color:var(--page-accent);
}
/* Desktop navigation: sangat jelas ketika cursor berada di menu */
.navin nav .navlink,
.navin nav .dd>button{
position:relative!important;
isolation:isolate;
overflow:visible!important;
border:1px solid transparent!important;
border-radius:12px!important;
transition:transform .22s ease,background-color .22s ease,color .22s ease,
box-shadow .22s ease,border-color .22s ease!important;
}
.navin nav .navlink::before,
.navin nav .dd>button::before{
content:"";
position:absolute;
inset:3px;
z-index:-1;
border-radius:9px;
background:var(--page-soft);
transform:scale(.82);
opacity:0;
transition:transform .25s ease,opacity .25s ease;
}
.navin nav .navlink::after,
.navin nav .dd>button::after{
content:""!important;
position:absolute!important;
left:12px!important;
right:12px!important;
bottom:4px!important;
height:3px!important;
border-radius:99px!important;
background:var(--page-accent)!important;
transform:scaleX(0)!important;
transition:transform .25s ease!important;
}
.navin nav .navlink:hover,
.navin nav .dd>button:hover,
.navin nav .navlink.is-active,
.navin nav .dd>button.is-active{
color:var(--page-accent)!important;
background:var(--page-soft)!important;
border-color:color-mix(in srgb,var(--page-accent) 25%,transparent)!important;
transform:translateY(-4px) scale(1.035)!important;
box-shadow:0 9px 22px color-mix(in srgb,var(--page-accent) 22%,transparent)!important;
}
.navin nav .navlink:hover::before,
.navin nav .dd>button:hover::before,
.navin nav .navlink.is-active::before,
.navin nav .dd>button.is-active::before{
opacity:1;
transform:scale(1);
}
.navin nav .navlink:hover::after,
.navin nav .dd>button:hover::after,
.navin nav .navlink.is-active::after,
.navin nav .dd>button.is-active::after{
transform:scaleX(1)!important;
}
.navin nav .navlink i,
.navin nav .dd>button i{
display:inline-block;
transition:transform .3s ease;
}
.navin nav .navlink:hover i,
.navin nav .dd>button:hover i,
.navin nav .navlink.is-active i,
.navin nav .dd>button.is-active i{
transform:translateY(-2px) rotate(-8deg) scale(1.18);
}
/* Dropdown submenu */
.navin nav .drop{
border-top:3px solid var(--page-accent)!important;
box-shadow:0 18px 40px rgba(0,0,0,.15)!important;
}
.navin nav .drop a:hover,
.navin nav .drop a.is-active{
background:var(--page-soft)!important;
color:var(--page-accent)!important;
padding-left:22px!important;
}
/* Cursor ring: membesar + berubah saat menyentuh menu */
.cursor-orb{
width:22px!important;height:22px!important;
border:2px solid var(--page-accent)!important;
box-shadow:0 0 0 4px color-mix(in srgb,var(--page-accent) 12%,transparent),
0 0 18px color-mix(in srgb,var(--page-accent) 25%,transparent);
transition:opacity .15s ease,transform .2s ease,border-color .25s ease,
box-shadow .25s ease!important;
}
body.cursor-hover .cursor-orb{
transform:translate(-50%,-50%) scale(1.75)!important;
background:color-mix(in srgb,var(--page-accent) 12%,transparent)!important;
border-width:3px!important;
}
/* Animasi masuk halaman */
body.page-theme-home main,body.page-theme-profile main,body.page-theme-academic main,
body.page-theme-people main,body.page-theme-staff main,body.page-theme-students main,
body.page-theme-news main,body.page-theme-achievement main,
body.page-theme-creative main,body.page-theme-gallery main,
body.page-theme-partner main,body.page-theme-help main,
body.page-theme-community main,body.page-theme-finance main,
body.page-theme-ppdb main,body.page-theme-contact main,body.page-theme-info main{
animation:pageThemeIn .45s ease both;
}
@keyframes pageThemeIn{
from{opacity:.35;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
/* Mobile: hover tidak tersedia, active tetap sangat jelas */
@media(max-width:1000px){
.mobile .navlink,.mobile .dd>button{
border-left:4px solid transparent!important;
transition:background .2s ease,color .2s ease,padding-left .2s ease,border-color .2s ease!important;
}
.mobile .navlink:hover,.mobile .dd>button:hover,
.mobile .navlink.is-active,.mobile .dd>button.is-active{
background:var(--page-accent)!important;
color:#fff!important;
border-left-color:#fff!important;
padding-left:20px!important;
transform:none!important;
box-shadow:none!important;
}
}
/* =========================================================
TEMA UNIK SETIAP HALAMAN MENU - MIN 1 ENDE
Setiap URL memiliki identitas warna sendiri.
========================================================= */
.page-theme-home{--page-accent:#15803d;--page-accent-dark:#0b5c2a;--page-soft:#eaf8ef;--page-bg:#f6fbf7}
.page-theme-welcome{--page-accent:#2563eb;--page-accent-dark:#1d4ed8;--page-soft:#eaf2ff;--page-bg:#f5f9ff}
.page-theme-history{--page-accent:#92400e;--page-accent-dark:#78350f;--page-soft:#fff4e8;--page-bg:#fffaf5}
.page-theme-vision{--page-accent:#0f766e;--page-accent-dark:#115e59;--page-soft:#e7f8f6;--page-bg:#f5fcfb}
.page-theme-academic{--page-accent:#7c3aed;--page-accent-dark:#5b21b6;--page-soft:#f2eaff;--page-bg:#faf8ff}
.page-theme-people{--page-accent:#0891b2;--page-accent-dark:#0e7490;--page-soft:#e7f9fc;--page-bg:#f5fdff}
.page-theme-staff{--page-accent:#0d9488;--page-accent-dark:#0f766e;--page-soft:#e6fffb;--page-bg:#f4fffd}
.page-theme-finance{--page-accent:#16a34a;--page-accent-dark:#15803d;--page-soft:#eaf8ef;--page-bg:#f7fcf8}
.page-theme-news{--page-accent:#ea580c;--page-accent-dark:#c2410c;--page-soft:#fff0e8;--page-bg:#fff9f5}
.page-theme-achievement{--page-accent:#ca8a04;--page-accent-dark:#a16207;--page-soft:#fff8df;--page-bg:#fffdf5}
.page-theme-creative{--page-accent:#db2777;--page-accent-dark:#be185d;--page-soft:#fdebf5;--page-bg:#fff8fc}
.page-theme-gallery{--page-accent:#0891b2;--page-accent-dark:#0e7490;--page-soft:#e7f8fc;--page-bg:#f5fcfe}
.page-theme-partner{--page-accent:#475569;--page-accent-dark:#334155;--page-soft:#edf2f7;--page-bg:#f8fafc}
.page-theme-help{--page-accent:#2563eb;--page-accent-dark:#1d4ed8;--page-soft:#eaf1ff;--page-bg:#f7faff}
.page-theme-community{--page-accent:#9333ea;--page-accent-dark:#7e22ce;--page-soft:#f4eaff;--page-bg:#fbf9ff}
.page-theme-ppdb{--page-accent:#dc2626;--page-accent-dark:#b91c1c;--page-soft:#feecec;--page-bg:#fff8f8}
.page-theme-contact{--page-accent:#0369a1;--page-accent-dark:#075985;--page-soft:#e7f5fc;--page-bg:#f6fbfe}
body[class*="page-theme-"] main{background:var(--page-bg)!important;transition:background .45s ease}
body[class*="page-theme-"] .eyebrow{color:var(--page-accent)!important}
body[class*="page-theme-"] .btn{background:var(--page-accent)!important;border-color:var(--page-accent)!important}
body[class*="page-theme-"] .btn:hover{background:var(--page-accent-dark)!important;border-color:var(--page-accent-dark)!important}
body[class*="page-theme-"] .tag{background:var(--page-soft)!important;color:var(--page-accent)!important}
body[class*="page-theme-"] .staff-intro,body[class*="page-theme-"] .student-intro{border-top:4px solid var(--page-accent)}
.staff-search{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}.staff-search input,.staff-search select{flex:1;min-width:210px;border:1px solid #d8e5df;border-radius:10px;padding:11px 13px;font:inherit;background:#fff}.staff-search select{max-width:220px}.staff-search .btn{flex:0 0 auto}.staff-card img,.student-card img{height:250px;object-fit:cover;background:var(--page-soft)}.staff-card .body,.student-card .body{min-height:150px}.staff-card h3,.student-card h3{margin:9px 0 6px}.student-count{margin-top:18px;padding:12px 16px;border-radius:12px;background:var(--page-soft);color:var(--page-accent-dark)}
body.page-theme-staff main h1,body.page-theme-staff main h2,body.page-theme-staff main h3{color:var(--page-accent)!important}
body[class*="page-theme-"] .detail{border-top:4px solid var(--page-accent)}
body[class*="page-theme-"] .card:hover,body[class*="page-theme-"] .detail:hover{border-color:var(--page-accent)!important}
/* Judul utama ikut warna halaman */
body[class*="page-theme-"] main h1:not(.heroText h1),
body[class*="page-theme-"] main h2:not(.heroText h2){color:var(--page-accent)!important}
/* Beranda: tiap blok memiliki nuansa warna tersendiri */
.page-theme-home main .quick a{position:relative;overflow:hidden}
.page-theme-home main .quick a:nth-child(1){--q:#15803d;--qs:#eaf8ef}
.page-theme-home main .quick a:nth-child(2){--q:#2563eb;--qs:#eaf2ff}
.page-theme-home main .quick a:nth-child(3){--q:#7c3aed;--qs:#f2eaff}
.page-theme-home main .quick a:nth-child(4){--q:#ea580c;--qs:#fff0e8}
.page-theme-home main .quick a:nth-child(5){--q:#db2777;--qs:#fdebf5}
.page-theme-home main .quick a{border-color:color-mix(in srgb,var(--q) 22%,#e2ece8);background:var(--qs);color:var(--q)}
.page-theme-home main .quick a i{color:var(--q)}
.page-theme-home main .quick a:hover{background:var(--q);color:#fff;border-color:var(--q);transform:translateY(-7px) scale(1.02);box-shadow:0 16px 30px color-mix(in srgb,var(--q) 28%,transparent)}
.page-theme-home main .quick a:hover i{color:#fff}
/* Beranda: warna blok berbeda agar halaman tidak monoton */
.page-theme-home main > .section:nth-of-type(1){background:#f4fbf6}
.page-theme-home main > .section:nth-of-type(2){background:#eef7ff}
.page-theme-home main > .section:nth-of-type(3){background:#faf5ff}
.page-theme-home main > .section:nth-of-type(4){background:#fff7ef}
.page-theme-home main > .section:nth-of-type(5){background:#fff5fa}
/* Garis identitas warna di bagian atas setiap halaman */
body[class*="page-theme-"] main::before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--page-accent),color-mix(in srgb,var(--page-accent) 35%,white));box-shadow:0 2px 10px color-mix(in srgb,var(--page-accent) 25%,transparent)}
/* Active menu menggunakan warna halaman yang sedang dibuka */
.navin nav .navlink.is-active,.navin nav .dd>button.is-active{background:var(--page-soft)!important;color:var(--page-accent)!important;border-color:color-mix(in srgb,var(--page-accent) 30%,transparent)!important}
.navin nav .drop a.is-active{background:var(--page-accent)!important;color:#fff!important;padding-left:22px!important}
.mobile .navlink.is-active,.mobile .dd>button.is-active{background:var(--page-accent)!important;color:#fff!important}
/* Efek hover cursor yang lebih tegas */
@media(pointer:fine){
.navlink:hover,.dd>button:hover{letter-spacing:.15px}
.navlink:hover i,.dd>button:hover i{animation:menuIconPop .55s ease both}
}
@keyframes menuIconPop{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.3) rotate(-10deg)}100%{transform:scale(1.12) rotate(-5deg)}}
/* =========================================================
MIN 1 ENDE - BERANDA CERIA RAMAH ANAK V14
Setiap blok/kartu di index.php memiliki identitas warna sendiri.
========================================================= */
.page-theme-home main{overflow:hidden}
.page-theme-home .home-portal-section{background:linear-gradient(180deg,#f7fff9,#ffffff)!important}
.page-theme-home .home-welcome-section{background:linear-gradient(180deg,#f1f7ff,#fbf7ff)!important}
.page-theme-home .home-program-section{background:linear-gradient(180deg,#fff8ec,#fffdf7)!important}
.page-theme-home .home-achievement-section{background:linear-gradient(180deg,#fffbed,#fff7fb)!important}
.page-theme-home .home-staff-section{background:linear-gradient(180deg,#edfbff,#f7f4ff)!important}
.page-theme-home .home-news-section{background:linear-gradient(180deg,#fff2f8,#f4fbff)!important}
/* Statistik: ceria dan tidak monoton */
.page-theme-home .stats{background:linear-gradient(135deg,#0f7b4d,#168f61)!important}
.page-theme-home .stats .stat{position:relative;border-radius:18px;transition:transform .25s ease,background .25s ease}
.page-theme-home .stats .stat:hover{transform:translateY(-5px);background:rgba(255,255,255,.10)}
.page-theme-home .stats .stat:nth-child(1) i{color:#ffd54f}
.page-theme-home .stats .stat:nth-child(2) i{color:#7dd3fc}
.page-theme-home .stats .stat:nth-child(3) i{color:#f9a8d4}
.page-theme-home .stats .stat:nth-child(4) i{color:#c4b5fd}
.page-theme-home .stats .stat:nth-child(5) i{color:#fdba74}
.page-theme-home .stats .stat:nth-child(6) i{color:#86efac}
/* Portal Link: setiap kartu beda warna, termasuk jika jumlah > 5 */
.page-theme-home .quick a:nth-child(1){--q:#16a34a;--qs:#ecfdf3}
.page-theme-home .quick a:nth-child(2){--q:#2563eb;--qs:#eff6ff}
.page-theme-home .quick a:nth-child(3){--q:#f59e0b;--qs:#fffbeb}
.page-theme-home .quick a:nth-child(4){--q:#f97316;--qs:#fff7ed}
.page-theme-home .quick a:nth-child(5){--q:#ec4899;--qs:#fdf2f8}
.page-theme-home .quick a:nth-child(6){--q:#8b5cf6;--qs:#f5f3ff}
.page-theme-home .quick a:nth-child(7){--q:#06b6d4;--qs:#ecfeff}
.page-theme-home .quick a:nth-child(8){--q:#ef4444;--qs:#fef2f2}
.page-theme-home .quick a:nth-child(9){--q:#14b8a6;--qs:#f0fdfa}
.page-theme-home .quick a:nth-child(10){--q:#6366f1;--qs:#eef2ff}
.page-theme-home .quick a:nth-child(11){--q:#84cc16;--qs:#f7fee7}
.page-theme-home .quick a:nth-child(12){--q:#d946ef;--qs:#fdf4ff}
.page-theme-home .quick a:nth-child(13){--q:#0ea5e9;--qs:#f0f9ff}
.page-theme-home .quick a:nth-child(14){--q:#e11d48;--qs:#fff1f2}
.page-theme-home .quick a:nth-child(15){--q:#ca8a04;--qs:#fefce8}
.page-theme-home .quick a:nth-child(16){--q:#7c3aed;--qs:#f5f3ff}
.page-theme-home .quick a{border:2px solid color-mix(in srgb,var(--q) 28%,#fff)!important;background:var(--qs)!important;color:var(--q)!important;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.page-theme-home .quick a::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--q);border-radius:13px 0 0 13px}
.page-theme-home .quick a i{color:var(--q)!important;transition:transform .25s ease,color .25s ease}
.page-theme-home .quick a b{font-size:14px}
.page-theme-home .quick a:hover{background:var(--q)!important;color:#fff!important;border-color:var(--q)!important;transform:translateY(-8px) rotate(-1deg) scale(1.025)!important;box-shadow:0 18px 34px color-mix(in srgb,var(--q) 30%,transparent)!important}
.page-theme-home .quick a:hover i{color:#fff!important;transform:translateY(-3px) scale(1.2) rotate(6deg)}
/* Sambutan */
.page-theme-home .home-welcome-section .welcome{background:linear-gradient(135deg,#ffffff,#f5f0ff);padding:28px;border-radius:24px;border:2px solid #dbeafe;box-shadow:0 14px 35px rgba(37,99,235,.10)}
.page-theme-home .home-welcome-section .eyebrow{color:#2563eb!important}
.page-theme-home .home-welcome-section h2{color:#5b21b6!important}
.page-theme-home .home-welcome-section .btn{background:#2563eb!important}
/* Program Unggulan: kartu oranye/kuning */
.page-theme-home .home-program-card{border-top:5px solid #f59e0b!important;background:#fffdf7}
.page-theme-home .home-program-card:nth-child(2){border-top-color:#f97316!important}
.page-theme-home .home-program-card:nth-child(3){border-top-color:#eab308!important}
.page-theme-home .home-program-card:nth-child(4){border-top-color:#fb7185!important}
.page-theme-home .home-program-card h3{color:#b45309!important}
/* Prestasi: kuning, oranye, pink */
.page-theme-home .home-achievement-card:nth-child(1){border-top:5px solid #eab308!important}
.page-theme-home .home-achievement-card:nth-child(2){border-top:5px solid #f97316!important}
.page-theme-home .home-achievement-card:nth-child(3){border-top:5px solid #ec4899!important}
.page-theme-home .home-achievement-card:nth-child(1) .tag{background:#fef3c7!important;color:#a16207!important}
.page-theme-home .home-achievement-card:nth-child(2) .tag{background:#ffedd5!important;color:#c2410c!important}
.page-theme-home .home-achievement-card:nth-child(3) .tag{background:#fce7f3!important;color:#be185d!important}
/* Kamad & Koordinator: cyan/biru/ungu/hijau */
.page-theme-home .home-staff-card:nth-child(1){border-top:5px solid #06b6d4!important}
.page-theme-home .home-staff-card:nth-child(2){border-top:5px solid #3b82f6!important}
.page-theme-home .home-staff-card:nth-child(3){border-top:5px solid #8b5cf6!important}
.page-theme-home .home-staff-card:nth-child(4){border-top:5px solid #22c55e!important}
.page-theme-home .home-staff-card h3{color:#155e75!important}
/* Berita: pink/merah/ungu/teal */
.page-theme-home .home-news-card:nth-child(1){border-top:5px solid #ec4899!important}
.page-theme-home .home-news-card:nth-child(2){border-top:5px solid #ef4444!important}
.page-theme-home .home-news-card:nth-child(3){border-top:5px solid #8b5cf6!important}
.page-theme-home .home-news-card:nth-child(4){border-top:5px solid #14b8a6!important}
.page-theme-home .home-news-card:nth-child(1) h3{color:#be185d!important}
.page-theme-home .home-news-card:nth-child(2) h3{color:#b91c1c!important}
.page-theme-home .home-news-card:nth-child(3) h3{color:#6d28d9!important}
.page-theme-home .home-news-card:nth-child(4) h3{color:#0f766e!important}
/* Gerakan lembut saat kartu beranda muncul */
.page-theme-home .quick a,.page-theme-home .home-program-card,.page-theme-home .home-achievement-card,.page-theme-home .home-staff-card,.page-theme-home .home-news-card{animation:homeCardIn .55s ease both}
.page-theme-home .quick a:nth-child(2),.page-theme-home .home-program-card:nth-child(2),.page-theme-home .home-achievement-card:nth-child(2){animation-delay:.05s}
.page-theme-home .quick a:nth-child(3),.page-theme-home .home-program-card:nth-child(3),.page-theme-home .home-achievement-card:nth-child(3){animation-delay:.10s}
.page-theme-home .quick a:nth-child(4),.page-theme-home .home-program-card:nth-child(4){animation-delay:.15s}
@keyframes homeCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
.page-theme-home .home-welcome-section .welcome{padding:16px;border-radius:18px}
.page-theme-home .quick a{min-height:84px}
.page-theme-home .quick a b{font-size:13px}
}
/* =========================================================
MIN 1 ENDE V15 - PERBAIKAN BERANDA SISWA + MENU INTERAKTIF
========================================================= */
.page-theme-home .home-student-section{
background:linear-gradient(135deg,#effcf5 0%,#f4fbff 48%,#fff7fc 100%)!important;
}
.page-theme-home .home-student-section .head h2{color:#15803d!important}
.page-theme-home .home-student-card{
border:2px solid #d7eee1!important;
background:#fff!important;
box-shadow:0 10px 26px rgba(21,128,61,.08)!important;
overflow:hidden;
transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease!important;
}
.page-theme-home .home-student-card:nth-child(4n+1){--student-accent:#16a34a;--student-soft:#ecfdf3}
.page-theme-home .home-student-card:nth-child(4n+2){--student-accent:#2563eb;--student-soft:#eff6ff}
.page-theme-home .home-student-card:nth-child(4n+3){--student-accent:#ec4899;--student-soft:#fdf2f8}
.page-theme-home .home-student-card:nth-child(4n){--student-accent:#8b5cf6;--student-soft:#f5f3ff}
.page-theme-home .home-student-card:hover{
transform:translateY(-9px) scale(1.015)!important;
border-color:var(--student-accent)!important;
box-shadow:0 20px 38px color-mix(in srgb,var(--student-accent) 22%,transparent)!important;
}
.home-student-card .student-photo{height:250px;background:var(--student-soft);position:relative;overflow:hidden}
.home-student-card .student-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .35s ease}
.home-student-card:hover .student-photo img{transform:scale(1.045);filter:saturate(1.06)}
.student-photo-shine{position:absolute;inset:-30% auto -30% -80%;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .65s ease;pointer-events:none}
.home-student-card:hover .student-photo-shine{left:135%}
.home-student-card .tag{background:var(--student-soft)!important;color:var(--student-accent)!important}
.home-student-card h3{color:var(--student-accent)!important}
.home-student-card .body{min-height:145px}
/* Kursor desktop: lebih terlihat dan membesar saat masuk menu */
@media(pointer:fine){
body.cursor-ready{cursor:default}
.cursor-orb{
width:24px!important;height:24px!important;
border-width:2px!important;
opacity:.78;
pointer-events:none!important;
}
body.cursor-hover .cursor-orb{
width:24px!important;height:24px!important;
transform:translate(-50%,-50%) scale(2.25)!important;
opacity:1!important;
box-shadow:0 0 0 6px color-mix(in srgb,var(--page-accent) 12%,transparent),
0 0 28px color-mix(in srgb,var(--page-accent) 42%,transparent)!important;
}
.navin nav .navlink:hover,.navin nav .dd>button:hover{
animation:menuLift .34s cubic-bezier(.2,.8,.2,1) both;
}
.navin nav .navlink:hover i,.navin nav .dd>button:hover i{
animation:menuIconFloat .65s ease both;
}
.navin nav .drop a:hover{
transform:translateX(5px);
box-shadow:inset 4px 0 0 var(--page-accent);
}
}
@keyframes menuLift{
0%{transform:translateY(0) scale(1)}
55%{transform:translateY(-5px) scale(1.045)}
100%{transform:translateY(-4px) scale(1.035)}
}
@keyframes menuIconFloat{
0%{transform:translateY(0) rotate(0) scale(1)}
35%{transform:translateY(-4px) rotate(-8deg) scale(1.2)}
70%{transform:translateY(1px) rotate(5deg) scale(1.12)}
100%{transform:translateY(-2px) rotate(-5deg) scale(1.16)}
}
/* Garis animasi menu: selalu berasal dari tengah */
.navin nav .navlink::after,.navin nav .dd>button::after{
height:4px!important;
bottom:3px!important;
left:14px!important;right:14px!important;
transform-origin:center!important;
}
/* Submenu ikut memiliki identitas warna halaman */
.navin nav .drop{
border-top-width:4px!important;
animation:dropReveal .22s ease both;
}
.navin nav .drop a{
position:relative;
transition:background .2s ease,color .2s ease,padding-left .22s ease,transform .22s ease,box-shadow .22s ease!important;
}
@keyframes dropReveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){
.home-student-card .student-photo{height:220px}
.mobile .drop a:hover{padding-left:24px!important;transform:translateX(3px)}
}
/* =========================================================
MIN 1 ENDE V16 - ANIMASI UNIVERSAL SEMUA HALAMAN
Efek hover/gerak dibuat konsisten seperti kartu Siswa.
========================================================= */
:root{--motion-ease:cubic-bezier(.2,.8,.2,1)}
/* Semua kartu website: bergerak, glow, garis warna dan shine */
body[class*="page-theme-"] main .card{
position:relative;
overflow:hidden;
border-top:3px solid color-mix(in srgb,var(--card-accent,var(--page-accent)) 75%,#fff)!important;
background:linear-gradient(145deg,#fff,var(--card-soft,#fff))!important;
transition:transform .32s var(--motion-ease),box-shadow .32s ease,border-color .25s ease,background .3s ease!important;
will-change:transform;
}
body[class*="page-theme-"] main .card::before{
content:"";
position:absolute;
top:0;bottom:0;left:-80%;width:42%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
transform:skewX(-18deg);
transition:left .7s var(--motion-ease);
z-index:3;
pointer-events:none;
}
body[class*="page-theme-"] main .card::after{
content:"";
position:absolute;
left:18px;right:18px;bottom:0;height:4px;
background:var(--card-accent,var(--page-accent));
border-radius:8px 8px 0 0;
transform:scaleX(0);
transform-origin:center;
transition:transform .3s var(--motion-ease);
z-index:4;
pointer-events:none;
}
body[class*="page-theme-"] main .card:hover{
transform:translateY(-9px) scale(1.018) rotate(-.25deg)!important;
border-color:var(--card-accent,var(--page-accent))!important;
box-shadow:0 20px 40px color-mix(in srgb,var(--card-accent,var(--page-accent)) 20%,transparent),0 5px 12px rgba(15,23,42,.08)!important;
}
body[class*="page-theme-"] main .card:hover::before{left:135%}
body[class*="page-theme-"] main .card:hover::after{transform:scaleX(1)}
body[class*="page-theme-"] main .card img{
transition:transform .48s var(--motion-ease),filter .35s ease!important;
}
body[class*="page-theme-"] main .card:hover img{
transform:scale(1.055)!important;
filter:saturate(1.08) brightness(1.02)!important;
}
body[class*="page-theme-"] main .card .body{position:relative;z-index:5}
body[class*="page-theme-"] main .card h3,
body[class*="page-theme-"] main .card h2{transition:color .25s ease,transform .25s ease}
body[class*="page-theme-"] main .card:hover h3,
body[class*="page-theme-"] main .card:hover h2{color:var(--card-accent,var(--page-accent))!important;transform:translateX(3px)}
/* Siklus warna kartu pada SEMUA halaman */
body[class*="page-theme-"] main .grid .card:nth-child(4n+1){--card-accent:#16a34a;--card-soft:#f0fdf4}
body[class*="page-theme-"] main .grid .card:nth-child(4n+2){--card-accent:#2563eb;--card-soft:#eff6ff}
body[class*="page-theme-"] main .grid .card:nth-child(4n+3){--card-accent:#f59e0b;--card-soft:#fffbeb}
body[class*="page-theme-"] main .grid .card:nth-child(4n){--card-accent:#ec4899;--card-soft:#fdf2f8}
/* Variasi kelima supaya daftar panjang tidak monoton */
body[class*="page-theme-"] main .grid.g4 .card:nth-child(8n+5),
body[class*="page-theme-"] main .grid.g3 .card:nth-child(8n+5){--card-accent:#8b5cf6;--card-soft:#f5f3ff}
body[class*="page-theme-"] main .grid.g4 .card:nth-child(8n+6),
body[class*="page-theme-"] main .grid.g3 .card:nth-child(8n+6){--card-accent:#06b6d4;--card-soft:#ecfeff}
body[class*="page-theme-"] main .grid.g4 .card:nth-child(8n+7),
body[class*="page-theme-"] main .grid.g3 .card:nth-child(8n+7){--card-accent:#f97316;--card-soft:#fff7ed}
body[class*="page-theme-"] main .grid.g4 .card:nth-child(8n),
body[class*="page-theme-"] main .grid.g3 .card:nth-child(8n){--card-accent:#14b8a6;--card-soft:#f0fdfa}
/* Statistik juga mengikuti pola gerak kartu */
body[class*="page-theme-"] main .stat{
position:relative;
transition:transform .3s var(--motion-ease),box-shadow .3s ease,background .3s ease!important;
}
body[class*="page-theme-"] main .stat:hover{
transform:translateY(-7px) scale(1.025)!important;
box-shadow:0 15px 30px rgba(15,23,42,.14)!important;
}
body[class*="page-theme-"] main .stat i{transition:transform .4s var(--motion-ease)}
body[class*="page-theme-"] main .stat:hover i{transform:translateY(-4px) scale(1.2) rotate(-7deg)}
/* Portal Link: animasi sama dengan kartu Siswa */
body[class*="page-theme-"] main .quick a{
transition:transform .32s var(--motion-ease),box-shadow .32s ease,background .25s ease,color .25s ease!important;
will-change:transform;
}
body[class*="page-theme-"] main .quick a:hover{
transform:translateY(-9px) scale(1.025) rotate(-.6deg)!important;
}
body[class*="page-theme-"] main .quick a i{transition:transform .4s var(--motion-ease)!important}
body[class*="page-theme-"] main .quick a:hover i{transform:translateY(-4px) scale(1.22) rotate(8deg)!important}
/* Tombol ikut bergerak agar interaksi seluruh halaman terasa hidup */
body[class*="page-theme-"] main .btn,
body[class*="page-theme-"] main button:not(.slider-prev):not(.slider-next):not(.slider-dot){
transition:transform .22s var(--motion-ease),box-shadow .22s ease,background .22s ease!important;
}
body[class*="page-theme-"] main .btn:hover,
body[class*="page-theme-"] main button:not(.slider-prev):not(.slider-next):not(.slider-dot):hover{
transform:translateY(-3px) scale(1.025);
box-shadow:0 9px 18px color-mix(in srgb,var(--page-accent) 22%,transparent);
}
/* Detail/box pada halaman yang tidak memakai grid card */
body[class*="page-theme-"] main .detail,
body[class*="page-theme-"] main .box,
body[class*="page-theme-"] main .info-box{
transition:transform .3s var(--motion-ease),box-shadow .3s ease,border-color .25s ease!important;
}
body[class*="page-theme-"] main .detail:hover,
body[class*="page-theme-"] main .box:hover,
body[class*="page-theme-"] main .info-box:hover{
transform:translateY(-5px);
box-shadow:0 15px 30px color-mix(in srgb,var(--page-accent) 15%,transparent);
}
/* Menu utama: efek lebih kuat, berlaku desktop dan mobile */
@media(pointer:fine){
.navin nav .navlink,.navin nav .dd>button,.mobile .navlink,.mobile .dd>button{
position:relative;
transition:transform .28s var(--motion-ease),box-shadow .28s ease,background .25s ease,color .25s ease!important;
}
.navin nav .navlink:hover,.navin nav .dd>button:hover,.mobile .navlink:hover,.mobile .dd>button:hover{
transform:translateY(-5px) scale(1.045)!important;
box-shadow:0 9px 22px color-mix(in srgb,var(--page-accent) 24%,transparent)!important;
}
.navin nav .navlink:hover::after,.navin nav .dd>button:hover::after{
transform:scaleX(1)!important;
}
.navin nav .drop a:hover{transform:translateX(7px) scale(1.015)!important}
}
/* Hover lembut untuk elemen klik lainnya */
body[class*="page-theme-"] main a:not(.btn):not(.quick a){transition:color .2s ease,transform .2s ease}
body[class*="page-theme-"] main a:not(.btn):not(.quick a):hover{color:var(--page-accent)!important}
/* Jangan mengganggu pengguna yang mematikan animasi */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
body[class*="page-theme-"] main .card:hover,
body[class*="page-theme-"] main .stat:hover,
body[class*="page-theme-"] main .quick a:hover{transform:none!important}
}
/* GALERI BERANDA - tampilkan dokumentasi seperti kartu Siswa, ceria dan interaktif */
.page-theme-home .home-gallery-section{background:linear-gradient(180deg,#eefcff 0%,#fff7fb 100%)!important}
.page-theme-home .home-gallery-card{border-top:5px solid #06b6d4!important;position:relative;overflow:hidden}
.page-theme-home .home-gallery-card:nth-child(4n+2){border-top-color:#f59e0b!important}
.page-theme-home .home-gallery-card:nth-child(4n+3){border-top-color:#ec4899!important}
.page-theme-home .home-gallery-card:nth-child(4n){border-top-color:#8b5cf6!important}
.page-theme-home .home-gallery-card:nth-child(4n+1) h3{color:#0e7490!important}
.page-theme-home .home-gallery-card:nth-child(4n+2) h3{color:#b45309!important}
.page-theme-home .home-gallery-card:nth-child(4n+3) h3{color:#be185d!important}
.page-theme-home .home-gallery-card:nth-child(4n) h3{color:#6d28d9!important}
.home-gallery-card .gallery-photo{height:220px;position:relative;overflow:hidden;background:#eef7f8}
.home-gallery-card .gallery-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .35s ease}
.home-gallery-card:hover .gallery-photo img{transform:scale(1.08) rotate(.4deg);filter:saturate(1.08)}
.gallery-shine{position:absolute;inset:-30% auto -30% -80%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);transition:left .7s ease;pointer-events:none}
.home-gallery-card:hover .gallery-shine{left:135%}
.home-gallery-card .body{min-height:108px}
.home-gallery-card .tag{background:#ecfeff!important;color:#0e7490!important}
@media(max-width:600px){.home-gallery-card .gallery-photo{height:220px}}
.gallery-album-open{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit;font:inherit;cursor:pointer}.gallery-album-card{overflow:hidden}.gallery-album-cover{height:230px;position:relative;overflow:hidden;background:#eef7f8}.gallery-album-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .35s ease}.gallery-album-card:hover .gallery-album-cover img{transform:scale(1.09);filter:saturate(1.1)}.gallery-count{position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(6,59,46,.86);color:#fff;font-size:12px;font-weight:800}.gallery-open-label{display:inline-block;margin-top:8px;font-weight:800;color:var(--page-accent,#078b62)}.home-gallery-card .gallery-photo{position:relative}.home-gallery-card .gallery-count{font-size:11px}.gallery-lightbox{position:fixed;inset:0;background:rgba(3,20,16,.92);z-index:99999;display:none;align-items:center;justify-content:center;padding:25px}.gallery-lightbox.show{display:flex}.gallery-view{width:min(1000px,88vw);max-height:92vh;text-align:center;position:relative}.gallery-view>img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:14px;box-shadow:0 15px 50px rgba(0,0,0,.4);background:#fff}.gallery-caption{color:#fff;font-size:18px;font-weight:800;margin-top:10px}.gallery-counter{color:#cce9df;margin-top:4px;font-size:13px}.gallery-close,.gallery-prev,.gallery-next{position:absolute;border:0;background:rgba(255,255,255,.16);color:#fff;width:48px;height:48px;border-radius:50%;font-size:34px;line-height:1;cursor:pointer;z-index:2;transition:.2s}.gallery-close:hover,.gallery-prev:hover,.gallery-next:hover{background:rgba(255,255,255,.3);transform:scale(1.08)}.gallery-close{top:18px;right:18px}.gallery-prev{left:18px;top:50%;margin-top:-24px}.gallery-next{right:18px;top:50%;margin-top:-24px}.gallery-thumbs{display:flex;justify-content:center;gap:7px;overflow:auto;margin:12px auto 0;max-width:90vw;padding:4px}.gallery-thumbs button{width:62px;height:48px;border:2px solid transparent;border-radius:7px;padding:0;overflow:hidden;background:#fff;opacity:.65;cursor:pointer}.gallery-thumbs button.active{border-color:#fff;opacity:1}.gallery-thumbs img{width:100%;height:100%;object-fit:cover}@media(max-width:600px){.gallery-album-cover{height:210px}.gallery-lightbox{padding:12px}.gallery-view>img{max-height:62vh}.gallery-prev,.gallery-next{width:40px;height:40px;font-size:28px}.gallery-prev{left:7px}.gallery-next{right:7px}.gallery-close{top:8px;right:8px}.gallery-thumbs button{width:54px;height:42px}}
/* =========================================================
TEMA BACKGROUND TRANSPARAN PER HALAMAN & PER BAGIAN BERANDA
Setiap halaman mempunyai warna identitas sendiri dengan
background transparan agar isi tetap ringan dan mudah dibaca.
========================================================= */
body[class*="page-theme-"]{position:relative;overflow-x:hidden}
body[class*="page-theme-"]::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--page-accent) 13%,transparent) 0 16%,transparent 38%),
radial-gradient(circle at 92% 22%,color-mix(in srgb,var(--page-accent) 10%,transparent) 0 14%,transparent 36%),
radial-gradient(circle at 55% 100%,color-mix(in srgb,var(--page-accent) 8%,transparent) 0 18%,transparent 42%);
opacity:.85;
}
body[class*="page-theme-"]::after{
content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
background:linear-gradient(135deg,color-mix(in srgb,var(--page-accent) 3%,transparent),transparent 45%,color-mix(in srgb,var(--page-accent) 4%,transparent));
}
main{background:transparent}
main::before{height:320px;opacity:.42;background:linear-gradient(180deg,color-mix(in srgb,var(--page-accent) 12%,transparent),transparent)}
/* Warna tambahan yang belum ada pada palet sebelumnya */
.page-theme-welcome{--page-accent:#2563eb;--page-accent-dark:#1d4ed8;--page-soft:#eaf2ff;--page-bg:#f8fbff}
.page-theme-history{--page-accent:#92400e;--page-accent-dark:#71320a;--page-soft:#fff4e8;--page-bg:#fffaf5}
.page-theme-vision{--page-accent:#0f766e;--page-accent-dark:#0b5d57;--page-soft:#e7f8f5;--page-bg:#f7fcfb}
.page-theme-staff{--page-accent:#0891b2;--page-accent-dark:#0e7490;--page-soft:#e8f9fc;--page-bg:#f7fdfe}
/* Setiap bagian Beranda mempunyai background transparan berbeda */
.index-section-theme{position:relative;isolation:isolate;overflow:hidden}
.index-section-theme::before{
content:"";position:absolute;inset:10px 0;z-index:-1;pointer-events:none;border-radius:32px;
background:linear-gradient(135deg,color-mix(in srgb,var(--section-color) 11%,transparent),color-mix(in srgb,var(--section-color) 4%,transparent) 55%,transparent);
border:1px solid color-mix(in srgb,var(--section-color) 13%,transparent);
}
.index-section-theme::after{
content:"";position:absolute;width:230px;height:230px;right:-90px;top:-100px;z-index:-1;border-radius:50%;pointer-events:none;
background:color-mix(in srgb,var(--section-color) 9%,transparent);filter:blur(3px);
}
.home-portal-section{--section-color:#2563eb}
.home-welcome-section{--section-color:#7c3aed}
.home-program-section{--section-color:#f59e0b}
.home-achievement-section{--section-color:#eab308}
.home-staff-section{--section-color:#06b6d4}
.home-gallery-section{--section-color:#ec4899}
.home-student-section{--section-color:#22c55e}
.home-news-section{--section-color:#f43f5e}
/* Kartu ikut membawa warna bagian namun tetap transparan */
.index-section-theme .card,.index-section-theme .stat,.index-section-theme .quick>a{
background:color-mix(in srgb,var(--section-color) 7%,rgba(255,255,255,.78));
border-color:color-mix(in srgb,var(--section-color) 22%,rgba(255,255,255,.45));
}
.index-section-theme .card:hover,.index-section-theme .quick>a:hover,.index-section-theme .stat:hover{
box-shadow:0 16px 35px color-mix(in srgb,var(--section-color) 22%,transparent);
}
/* Animasi menu dan submenu lebih hidup */
.navlink:hover,.dd>button:hover,.drop a:hover{animation:menuFloat .42s ease both}
.drop a:hover{transform:translateX(6px) scale(1.015);box-shadow:0 5px 16px color-mix(in srgb,var(--page-accent) 15%,transparent)}
.navlink::after,.dd>button::after{box-shadow:0 0 12px color-mix(in srgb,var(--page-accent) 60%,transparent)}
@keyframes menuFloat{0%{transform:translateY(0)}55%{transform:translateY(-4px)}100%{transform:translateY(-2px)}}
@media(max-width:760px){
body[class*="page-theme-"]::before{position:absolute;min-height:100%}
.index-section-theme::before{inset:5px 8px;border-radius:22px}
}
/* Judul section Beranda dapat diklik menuju halaman lengkap */
.home-section-title-link{color:inherit;text-decoration:none;display:inline-block;position:relative;transition:transform .2s ease,color .2s ease,filter .2s ease}
.home-section-title-link::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:999px;background:currentColor;transform:scaleX(.25);transform-origin:left center;opacity:.25;transition:transform .25s ease,opacity .25s ease}
.home-section-title-link:hover{transform:translateY(-2px);filter:brightness(1.08)}
.home-section-title-link:hover::after{transform:scaleX(1);opacity:.7}
/* Folder navigasi pada setiap judul section Beranda */
.home-folder-card{display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:18px 22px;border-radius:18px;text-decoration:none!important;background:rgba(255,255,255,.9);border:1px solid rgba(15,23,42,.10);box-shadow:0 8px 22px rgba(15,23,42,.08);position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.home-folder-card::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--folder-accent,#f59e0b)}
.home-folder-card::after{content:"";position:absolute;left:-35%;top:0;width:28%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);transition:left .55s ease}
.home-folder-card:hover{transform:translateY(-4px) scale(1.005);box-shadow:0 15px 32px rgba(15,23,42,.14);border-color:color-mix(in srgb,var(--folder-accent) 35%,#fff)}
.home-folder-card:hover::after{left:120%}
.folder-program{--folder-accent:#f59e0b;background:linear-gradient(100deg,#fff8e8,#fffdf7)}
.folder-achievement{--folder-accent:#eab308;background:linear-gradient(100deg,#fffbea,#fff7fb)}
.folder-staff{--folder-accent:#06b6d4;background:linear-gradient(100deg,#ecfbff,#f7f4ff)}
.folder-student{--folder-accent:#22c55e;background:linear-gradient(100deg,#effdf3,#f7fff9)}
.folder-icon{width:58px;height:48px;display:grid;place-items:center;flex:0 0 58px;border-radius:14px;background:color-mix(in srgb,var(--folder-accent) 14%,white);color:var(--folder-accent);font-size:25px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--folder-accent) 20%,transparent)}
.folder-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.folder-copy strong{font-size:20px;color:#163b32;line-height:1.2}
.folder-copy small{font-size:13px;color:#64748b}
.folder-arrow{font-weight:800;font-size:13px;color:var(--folder-accent);white-space:nowrap}
.folder-arrow i{margin-left:5px;transition:transform .2s ease}
.home-folder-card:hover .folder-arrow i{transform:translateX(5px)}
@media(max-width:760px){.home-folder-card{gap:11px;padding:14px 15px;border-radius:15px}.folder-icon{width:48px;height:42px;flex-basis:48px;font-size:21px}.folder-copy strong{font-size:17px}.folder-copy small{font-size:11px;line-height:1.35}.folder-arrow{font-size:0}.folder-arrow i{font-size:16px;margin:0}.home-folder-card{margin-bottom:16px}}
/* Kartu halaman lengkap: seluruh isi tetap nyaman dibaca */
.content-read-card .body{padding:22px 22px 25px}.content-read-card .body h2{margin:7px 0 12px;color:#063b2e}.content-read-card .body p{line-height:1.7}.content-read-card .body>div{line-height:1.8;color:#334155}.content-read-card .body small{display:block;color:#64748b;margin:6px 0 12px}
.content-read-card img{max-height:290px;object-fit:cover}
/* V25: Kartu Beranda ringkas - foto + judul, seluruh kartu dapat diklik */
.home-compact-grid{gap:16px}
.home-compact-card{display:block;text-decoration:none!important;overflow:hidden;cursor:pointer;min-height:0;padding:0!important}
.home-compact-card img{width:100%;height:180px;object-fit:cover;display:block;margin:0;transition:transform .4s ease,filter .3s ease}
.home-compact-card .body{padding:11px 13px!important;min-height:0!important}
.home-compact-card h3{margin:0!important;font-size:16px!important;line-height:1.3!important}
.home-compact-card:hover img{transform:scale(1.045);filter:saturate(1.05)}
.home-compact-card:focus-visible{outline:3px solid rgba(14,165,233,.45);outline-offset:3px}
.home-student-card .student-photo{height:180px!important}
@media(max-width:768px){.home-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}.home-compact-card img,.home-student-card .student-photo{height:145px!important}.home-compact-card .body{padding:9px 10px!important}.home-compact-card h3{font-size:14px!important}}
/* Homepage news: layout dua kolom seperti portal berita */
.home-news-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff8f4 0%,#fffdf7 100%)!important;padding-top:58px;padding-bottom:62px}
.home-news-section:before,.home-news-section:after{content:"";position:absolute;border-radius:50%;background:rgba(251,146,60,.10);pointer-events:none}
.home-news-section:before{width:170px;height:170px;right:-45px;top:24px}
.home-news-section:after{width:150px;height:150px;left:-70px;bottom:-70px}
.home-news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;position:relative;z-index:1}
.home-news-head h2{margin:8px 0 0;font-size:clamp(2rem,3.3vw,2.65rem);line-height:1.1;color:#278b58}
.home-news-head .eyebrow{display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;background:#ffe9d8;color:#f97316;font-size:.76rem;font-weight:800;letter-spacing:.02em}
.home-news-all{color:#278b58;font-weight:700;text-decoration:none;white-space:nowrap;padding:8px 0}
.home-news-all span{font-size:1.35em;margin-left:8px;vertical-align:-1px}
.home-news-layout{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(280px,.95fr);gap:32px;align-items:start;position:relative;z-index:1}
.home-news-main{display:grid;gap:20px}
.home-news-feature{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:190px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 7px 22px rgba(36,56,70,.10);border:1px solid rgba(226,232,240,.75);transition:transform .25s ease,box-shadow .25s ease}
.home-news-feature:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(36,56,70,.15)}
.home-news-feature-media{position:relative;display:block;min-height:190px;overflow:hidden;background:#e5e7eb}
.home-news-feature-media img{width:100%;height:100%;min-height:190px;display:block;object-fit:cover;transition:transform .35s ease}
.home-news-feature:hover .home-news-feature-media img{transform:scale(1.035)}
.home-news-number{position:absolute;left:12px;top:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#ff8a00;color:#fff;font-weight:900;font-size:.82rem;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.home-news-feature-body{padding:20px 22px 18px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.home-news-feature-body .tag{display:inline-flex;align-self:flex-start;background:#fff0df;color:#f97316;border-radius:999px;padding:5px 11px;font-size:.72rem;font-weight:800;margin-bottom:9px}
.home-news-feature-body h3{margin:0 0 9px;font-size:1.12rem;line-height:1.45;color:#1f2937}
.home-news-feature-body h3 a{color:inherit;text-decoration:none}
.home-news-feature-body h3 a:hover{color:#278b58}
.home-news-feature-body p{margin:0 0 12px;color:#6b7280;font-size:.88rem;line-height:1.6}
.home-news-date{font-size:.76rem;color:#94a3b8}
.home-news-sidebar{background:#2c8d59;color:#fff;border-radius:20px;padding:22px 24px 18px;box-shadow:0 8px 22px rgba(36,56,70,.10);overflow:hidden}
.home-news-sidebar-title{font-size:1.1rem;font-weight:800;display:flex;align-items:center;gap:10px;padding:3px 0 17px}
.home-news-sidebar-title span{font-size:1.15rem;color:#ffd166}
.home-news-latest-list{display:flex;flex-direction:column}
.home-news-latest-item{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.18);text-decoration:none;color:#fff}
.home-news-latest-item:first-child{padding-top:8px}
.home-news-latest-item:last-child{border-bottom:0;padding-bottom:4px}
.home-news-latest-item img{width:58px;height:58px;border-radius:10px;object-fit:cover;display:block;background:rgba(255,255,255,.15)}
.home-news-latest-copy{display:flex;flex-direction:column;min-width:0;gap:6px}
.home-news-latest-copy strong{font-size:.83rem;line-height:1.35;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-news-latest-copy small{font-size:.71rem;color:rgba(255,255,255,.68)}
@media(max-width:900px){.home-news-layout{grid-template-columns:1fr}.home-news-sidebar{order:2}.home-news-feature{grid-template-columns:260px minmax(0,1fr)}}
@media(max-width:640px){.home-news-section{padding-top:42px;padding-bottom:45px}.home-news-head{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:24px}.home-news-head h2{font-size:1.8rem}.home-news-all{padding-top:0}.home-news-feature{grid-template-columns:1fr;min-height:0}.home-news-feature-media,.home-news-feature-media img{height:210px;min-height:210px}.home-news-feature-body{padding:17px 18px 18px}.home-news-feature-body h3{font-size:1rem}.home-news-sidebar{padding:18px 17px 14px}.home-news-latest-item{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:12px 0}.home-news-latest-item img{width:52px;height:52px}}
/* =========================================================
MIN 1 ENDE V31 - VIDEO KEGIATAN BERANDA
Tampilan kartu YouTube + lightbox pemutar seperti referensi.
========================================================= */
.page-theme-home .home-video-section{
--section-color:#ef4444;
background:linear-gradient(180deg,#fff,#f8fafc)!important;
}
.page-theme-home .home-video-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.page-theme-home .home-video-card{
display:block;width:100%;padding:0;overflow:hidden;text-align:left;cursor:pointer;
border:1px solid #e5e7eb!important;border-top:4px solid #ef4444!important;
background:#fff!important;border-radius:16px!important;
box-shadow:0 8px 24px rgba(15,23,42,.08);
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important;
animation:homeCardIn .55s ease both;
}
.page-theme-home .home-video-card:nth-child(2){border-top-color:#f97316!important;animation-delay:.05s}
.page-theme-home .home-video-card:nth-child(3){border-top-color:#eab308!important;animation-delay:.10s}
.page-theme-home .home-video-card:nth-child(4){border-top-color:#06b6d4!important;animation-delay:.15s}
.page-theme-home .home-video-card:nth-child(5){border-top-color:#8b5cf6!important;animation-delay:.20s}
.page-theme-home .home-video-card:hover{transform:translateY(-7px)!important;box-shadow:0 18px 40px rgba(15,23,42,.16)!important}
.page-theme-home .home-video-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e2e8f0}
.page-theme-home .home-video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .3s ease}
.page-theme-home .home-video-card:hover .home-video-thumb img{transform:scale(1.05);filter:brightness(.72)}
.page-theme-home .home-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:45px;border-radius:12px;display:grid;place-items:center;background:#ff0000;color:#fff;font-size:24px;padding-left:4px;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .25s ease}
.page-theme-home .home-video-card:hover .home-video-play{transform:translate(-50%,-50%) scale(1.1)}
.page-theme-home .home-video-youtube{position:absolute;left:12px;bottom:12px;padding:5px 9px;border-radius:7px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:800}
.page-theme-home .home-video-card .body{padding:15px 16px 17px}
.page-theme-home .home-video-card h3{margin:0;color:#172033;font-size:16px;line-height:1.4}
.page-theme-home .home-video-card p{margin:8px 0 0;color:#64748b;font-size:12px;line-height:1.45}
.home-video-section{--section-color:#ef4444}
.video-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:30px;background:rgba(0,0,0,.84);backdrop-filter:blur(3px)}
.video-lightbox.is-open{display:flex}
.video-lightbox-panel{width:min(900px,94vw);background:#111;border-radius:4px;box-shadow:0 24px 80px rgba(0,0,0,.55);overflow:hidden}
.video-lightbox-player{position:relative;aspect-ratio:16/9;background:#000}
.video-lightbox-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-lightbox-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;color:#fff;font-size:14px}
.video-lightbox-caption a{color:#fff;text-decoration:none;opacity:.9}
.video-lightbox-caption a:hover{text-decoration:underline}
.video-lightbox-close{position:absolute;right:22px;top:16px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2}
.video-lightbox-close:hover{background:rgba(255,255,255,.28)}
@media(max-width:1100px){.page-theme-home .home-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.page-theme-home .home-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.page-theme-home .home-video-card .body{padding:12px}.page-theme-home .home-video-card h3{font-size:14px}.page-theme-home .home-video-play{width:54px;height:38px;font-size:20px}.video-lightbox{padding:14px}.video-lightbox-caption{align-items:flex-start;flex-direction:column;gap:8px}}
@media(max-width:430px){.page-theme-home .home-video-grid{grid-template-columns:1fr}}
/* Video Kegiatan page */
.video-page-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.video-page-card{display:block;width:100%;padding:0;border:0;text-align:left;cursor:pointer;overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 8px 25px rgba(15,23,42,.10);transition:transform .25s ease,box-shadow .25s ease}
.video-page-card:hover{transform:translateY(-6px);box-shadow:0 16px 38px rgba(15,23,42,.16)}
.video-page-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e2e8f0}
.video-page-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease,filter .3s ease}
.video-page-card:hover .video-page-thumb img{transform:scale(1.05);filter:brightness(.72)}
.video-page-thumb .home-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:45px;border-radius:12px;display:grid;place-items:center;background:#f00;color:#fff;font-size:24px;padding-left:4px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.video-page-thumb .home-video-youtube{position:absolute;left:12px;bottom:12px;padding:5px 9px;border-radius:7px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:800}
.video-page-card .body{padding:15px 16px 18px}.video-page-card h3{margin:0;color:#172033;font-size:17px;line-height:1.4}.video-page-card p{margin:8px 0 0;color:#64748b;font-size:13px;line-height:1.5}
.video-page-intro{margin-bottom:22px}
@media(max-width:900px){.video-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.video-page-grid{grid-template-columns:1fr;gap:16px}.video-page-thumb .home-video-play{width:56px;height:40px;font-size:21px}}
/* =========================================================
V34 - UKURAN FOTO KARTU SERAGAM & TIDAK MEMPENGARUHI KARTU
Semua kartu menggunakan area media dengan ukuran tetap.
Rasio gambar dipertahankan dengan object-fit: cover.
========================================================= */
body[class*="page-theme-"] main .grid{align-items:stretch}
body[class*="page-theme-"] main .grid > .card{
height:100%;
display:flex;
flex-direction:column;
min-width:0;
}
body[class*="page-theme-"] main .grid > .card > img{
width:100%!important;
height:220px!important;
min-height:220px!important;
max-height:220px!important;
object-fit:cover!important;
object-position:center!important;
display:block;
flex:0 0 220px;
}
/* V55: Foto Guru & Pegawai ditampilkan utuh, tidak dipotong oleh object-fit:cover. */
body[class*="page-theme-"] main .grid > .staff-card > img{
object-fit:contain!important;
object-position:center!important;
background:#fff!important;
}
body[class*="page-theme-"] main .grid > .card > .body{
flex:1 1 auto;
min-width:0;
}
/* Kartu ringkas Beranda: semua foto mempunyai tinggi yang sama */
.page-theme-home .home-compact-grid{align-items:stretch}
.page-theme-home .home-compact-card{
height:100%;
display:flex!important;
flex-direction:column;
}
.page-theme-home .home-compact-card > img{
width:100%!important;
height:180px!important;
min-height:180px!important;
max-height:180px!important;
object-fit:cover!important;
object-position:center!important;
flex:0 0 180px;
}
.page-theme-home .home-compact-card .body{flex:1 1 auto}
/* Foto siswa menggunakan wadah tetap */
.page-theme-home .home-student-card .student-photo{
width:100%;
height:180px!important;
min-height:180px!important;
max-height:180px!important;
flex:0 0 180px;
}
.page-theme-home .home-student-card .student-photo img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
/* Galeri Beranda */
.page-theme-home .home-gallery-grid{align-items:stretch}
.page-theme-home .home-gallery-card{height:100%}
.page-theme-home .home-gallery-card .gallery-photo{
height:220px!important;
min-height:220px!important;
max-height:220px!important;
}
.page-theme-home .home-gallery-card .gallery-photo img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
/* Video Beranda dan halaman Video */
.page-theme-home .home-video-card,
.video-page-card{height:100%}
.page-theme-home .home-video-thumb,
.video-page-thumb{
width:100%;
aspect-ratio:16/9;
min-height:0;
overflow:hidden;
flex:0 0 auto;
}
.page-theme-home .home-video-thumb img,
.video-page-thumb img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
/* Berita utama: area foto tetap, tidak mengikuti ukuran file foto */
.home-news-feature{min-height:220px}
.home-news-feature-media,
.home-news-feature-media img{
height:220px!important;
min-height:220px!important;
max-height:220px!important;
}
.home-news-feature-media img{width:100%!important;object-fit:cover!important;object-position:center!important}
.home-news-feature-body{min-width:0}
/* Daftar Berita Terkini: thumbnail tetap */
.home-news-latest-item img{
width:58px!important;
height:58px!important;
min-width:58px!important;
min-height:58px!important;
max-width:58px!important;
max-height:58px!important;
object-fit:cover!important;
object-position:center!important;
}
/* Pada layar kecil, tinggi media tetap terkendali dan proporsional */
@media(max-width:768px){
.page-theme-home .home-compact-card > img{
height:145px!important;
min-height:145px!important;
max-height:145px!important;
flex-basis:145px;
}
.page-theme-home .home-student-card .student-photo{
height:145px!important;
min-height:145px!important;
max-height:145px!important;
flex-basis:145px;
}
.page-theme-home .home-gallery-card .gallery-photo{
height:180px!important;
min-height:180px!important;
max-height:180px!important;
}
.home-news-feature-media,
.home-news-feature-media img{
height:210px!important;
min-height:210px!important;
max-height:210px!important;
}
}
/* Running Text — tepat setelah Hero / Slider pada Beranda */
.running-text-section{background:#087f45;color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.running-text-inner{width:100%;margin:auto;display:flex;align-items:center;min-height:48px}
.running-text-viewport{min-width:0;flex:1;overflow:hidden;position:relative}
.running-text-track{display:flex;width:max-content;align-items:center;white-space:nowrap;animation:runningTextMove 28s linear infinite;will-change:transform}
.running-text-item{display:inline-flex;align-items:center;font-size:.9rem;font-weight:700;padding-right:80px}
.running-text-item:before{content:'•';font-size:1.15rem;margin-right:12px;color:#f8d34f}
@keyframes runningTextMove{from{transform:translateX(100vw)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.running-text-track{animation:none;transform:none}}
@media(max-width:600px){.running-text-inner{width:100%;min-height:44px}.running-text-item{font-size:.78rem;padding-right:55px}}
/* V37 — Slider Beranda 1920x300 */
.page-theme-home .hero{width:min(1920px,100%);height:300px;margin:0 auto;border-radius:0;overflow:hidden}
.page-theme-home .hero .slide img{width:100%;height:300px;object-fit:cover;object-position:center}
.page-theme-home .heroText{padding:0 28px}
.page-theme-home .heroText h1{font-size:clamp(26px,4vw,46px);margin:8px 0}
.page-theme-home .heroText p{font-size:15px;line-height:1.45;max-width:620px}
/* Statistik — motif geometris bernuansa Islami + kartu warna-warni */
.page-theme-home .stats{
position:relative;overflow:hidden;
background-color:#075c38!important;
background-image:
linear-gradient(30deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),
linear-gradient(150deg,rgba(255,255,255,.08) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.08) 87.5%,rgba(255,255,255,.08)),
linear-gradient(30deg,rgba(255,255,255,.06) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.06) 87.5%,rgba(255,255,255,.06)),
linear-gradient(150deg,rgba(255,255,255,.06) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.06) 87.5%,rgba(255,255,255,.06));
background-position:0 0,0 0,20px 35px,20px 35px;
background-size:40px 70px,40px 70px,40px 70px,40px 70px;
}
.page-theme-home .stats:before{content:"";position:absolute;inset:0;opacity:.5;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.16),transparent 45%);pointer-events:none}
.page-theme-home .stats .container{position:relative;z-index:1}
.page-theme-home .stats .stat{margin:0;border:2px solid rgba(255,255,255,.55);box-shadow:0 12px 28px rgba(0,0,0,.14);min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;color:#17352a;border-radius:18px}
.page-theme-home .stats .stat:nth-child(1){background:#ffe8a3!important}.page-theme-home .stats .stat:nth-child(2){background:#bde7ff!important}.page-theme-home .stats .stat:nth-child(3){background:#ffc7df!important}.page-theme-home .stats .stat:nth-child(4){background:#d9ccff!important}.page-theme-home .stats .stat:nth-child(5){background:#ffd0a6!important}.page-theme-home .stats .stat:nth-child(6){background:#bdf3cb!important}
.page-theme-home .stats .stat i{font-size:27px;margin-bottom:4px}.page-theme-home .stats .stat strong{color:#12402d;font-size:30px}.page-theme-home .stats .stat span{color:#315148;font-weight:800}
/* Running Text — seluruh gaya dapat diubah dari Pengaturan Admin */
.running-text-section{background:var(--rt-bg,#087f45)!important;color:var(--rt-color,#fff)!important}
.running-text-item{font-family:var(--rt-font,Inter),Arial,sans-serif;font-size:var(--rt-size,15px)!important;font-weight:var(--rt-weight,700)!important;font-style:var(--rt-style,normal)!important;color:var(--rt-color,#fff)!important}
.running-text-track{animation-duration:var(--rt-speed,28s)!important}
@media(max-width:600px){.page-theme-home .hero{height:auto;aspect-ratio:1920/300}.page-theme-home .hero .slide img{height:100%;object-fit:cover}.page-theme-home .heroText{padding:0 18px}.page-theme-home .heroText h1{font-size:28px}.page-theme-home .heroText p{font-size:13px}.page-theme-home .stats .stat{min-height:105px}}
/* V41 — Header atas (nama sekolah + menu) selalu statis saat halaman di-scroll */
.site-header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:10000!important}
.site-header .top,.site-header .nav{position:relative!important}
@media(max-width:600px){body{padding-top:106px!important}.site-header .top{min-height:36px}}
/* V42: Header atas hijau - nama sekolah dan menu tetap statis */
.site-header .top{background:#087f45!important;color:#fff!important}
.site-header .nav{background:#087f45!important;box-shadow:0 4px 20px #0003!important}
.site-header .brand,.site-header .brand span{color:#fff!important}
.site-header .navlink,.site-header .dd>button{color:#fff!important}
.site-header .navlink:hover,.site-header .dd>button:hover,.site-header .navlink.is-active,.site-header .dd>button.is-active{background:rgba(255,255,255,.16)!important;color:#fff!important}
.site-header .drop{background:#fff!important;border-top-color:#f5c75a!important}
.site-header .drop a{color:#42504b!important}
.site-header .drop a:hover,.site-header .drop a.is-active{background:#eef8f4!important;color:#087f45!important}
.site-header .mob{color:#fff!important}
.site-header .mobile.open{background:#076d3c!important}
.site-header .mobile .navlink,.site-header .mobile .dd>button{color:#fff!important}
.site-header .mobile .navlink:hover,.site-header .mobile .dd>button:hover,.site-header .mobile .navlink.is-active,.site-header .mobile .dd>button.is-active{background:rgba(255,255,255,.14)!important;color:#fff!important}
.site-header .mobile .drop{background:#075b34!important}
.site-header .mobile .drop a{color:#dcece7!important}
/* V13 CONTENT READER: full-image display + split reader/sidebar layout */
.content-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.content-layout.has-sidebar{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
.content-main{min-width:0}
.content-open{padding:0;overflow:hidden}
.content-open-media{width:100%;display:flex;align-items:center;justify-content:center;background:#f5f8f7;padding:14px;min-height:220px}
.content-open-media img{display:block;width:auto;height:auto;max-width:100%;max-height:520px;object-fit:contain;border-radius:12px}
.content-open>.body{padding:26px 30px 32px}
.content-open h1,.content-open h2{margin-top:10px;line-height:1.25}
.article-detail-section .content-open-media img{max-height:560px}
.article-body img,.prose img{max-width:100%;height:auto!important;object-fit:contain!important}
.article-body figure,.prose figure{max-width:100%;margin:22px auto;text-align:center}
.article-body figure img,.prose figure img{display:block;margin:auto;width:auto;max-width:100%;height:auto!important;max-height:700px;object-fit:contain!important}
.article-meta{color:#64756f;font-size:14px}
.content-list-card{display:block;text-decoration:none;color:inherit;overflow:hidden}
.content-list-media{width:100%;min-height:190px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#f5f8f7;overflow:hidden}
.content-list-media img{display:block;width:100%;height:100%;object-fit:contain!important;max-width:100%;max-height:100%;background:#f5f8f7}
.content-list-card .body{min-height:180px}
.content-list-card .btn{margin-top:12px}
.content-back{margin-top:14px}
.content-sidebar{background:#fff;border:1px solid #e2ece8;border-radius:17px;box-shadow:0 8px 25px #0000000b;overflow:hidden;position:sticky;top:140px;max-height:calc(100vh - 165px)}
.sidebar-title{padding:17px 18px;background:linear-gradient(135deg,#eef8f4,#f7fbfa);border-bottom:1px solid #e2ece8;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sidebar-title span{font-weight:900;color:#063b2e;font-size:17px}
.sidebar-title small{color:#087f5b;font-weight:800;font-size:11px;white-space:nowrap}
.sidebar-list{padding:8px;overflow:auto;max-height:calc(100vh - 225px)}
.sidebar-item{display:flex;gap:11px;padding:10px;border-radius:12px;text-decoration:none;color:#263831;border-bottom:1px solid #edf2f0;transition:background .2s,transform .2s}
.sidebar-item:last-child{border-bottom:0}
.sidebar-item:hover,.sidebar-item.active{background:#eef8f4;transform:translateX(2px)}
.sidebar-thumb{flex:0 0 86px;width:86px;height:62px;border-radius:9px;overflow:hidden;background:#f5f8f7;display:flex;align-items:center;justify-content:center}
.sidebar-thumb img{width:100%;height:100%;object-fit:contain!important;display:block}
.sidebar-copy{min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center}
.sidebar-copy strong{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sidebar-copy small{font-size:11px;color:#71827c}
.sidebar-empty{padding:18px;color:#71827c;text-align:center}
@media(max-width:900px){.content-layout.has-sidebar{grid-template-columns:1fr}.content-sidebar{position:static;max-height:none}.sidebar-list{max-height:420px}.content-open>.body{padding:22px}.content-open-media{min-height:180px}.content-open-media img{max-height:440px}}
@media(max-width:600px){.content-layout{gap:16px}.content-open-media{padding:8px;min-height:150px}.content-open-media img,.article-detail-section .content-open-media img{max-height:340px}.content-open>.body{padding:18px}.content-list-media{min-height:150px}.sidebar-thumb{flex-basis:74px;width:74px;height:56px}.sidebar-list{max-height:360px}}
/* V14 READER LAYOUT — reference-style detail pages */
.content-layout.has-sidebar{
grid-template-columns:minmax(0,2.15fr) minmax(300px,.85fr);
gap:30px;
max-width:1180px;
margin-inline:auto;
}
.content-main{min-width:0}
.content-open{background:#fff;border:1px solid #e1ebe6;border-radius:18px;box-shadow:0 10px 30px rgba(4,62,42,.07)}
.content-open-media{
width:100%;
min-height:240px;
padding:18px;
background:#f7faf8;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.content-open-media img{
display:block;
width:auto!important;
height:auto!important;
max-width:100%!important;
max-height:620px!important;
object-fit:contain!important;
border-radius:10px;
}
.article-detail-section .content-open-media{min-height:260px}
.article-detail-section .content-open-media img{max-height:620px!important}
.content-open>.body{padding:28px 30px 34px}
.content-open h1,.content-open h2{font-size:clamp(25px,3vw,38px);line-height:1.2}
.content-open .article-body,.content-open .prose{font-size:16px;line-height:1.85}
/* V41 READER IMAGE FIDELITY: preserve admin-selected image size/alignment */
.content-open .article-body img,.content-open .prose img{max-width:100%;height:auto;object-fit:contain;}
.content-open .article-body img.alignleft,.content-open .prose img.alignleft{float:left;margin:.25em 1.25em .75em 0;}
.content-open .article-body img.alignright,.content-open .prose img.alignright{float:right;margin:.25em 0 .75em 1.25em;}
.content-open .article-body img.aligncenter,.content-open .prose img.aligncenter{display:block;margin:1.1em auto;}
.content-open .article-body img.alignnone,.content-open .prose img.alignnone{display:block;margin:1.1em 0;}
.content-open .article-body figure,.content-open .prose figure{max-width:100%;margin:24px 0;text-align:initial;}
.content-open .article-body figure.alignleft,.content-open .prose figure.alignleft{float:left;margin:.25em 1.25em .75em 0;}
.content-open .article-body figure.alignright,.content-open .prose figure.alignright{float:right;margin:.25em 0 .75em 1.25em;}
.content-open .article-body figure.aligncenter,.content-open .prose figure.aligncenter{margin-left:auto;margin-right:auto;text-align:center;}
.content-open .article-body figure img,.content-open .prose figure img{margin:0;max-width:100%;height:auto;}
.content-sidebar{
min-width:0;
position:sticky;
top:118px;
max-height:calc(100vh - 140px);
border-radius:18px;
}
.sidebar-list{max-height:calc(100vh - 205px);padding:8px}
.sidebar-item{align-items:center;min-height:78px}
.sidebar-thumb{flex:0 0 92px;width:92px;height:68px}
.sidebar-thumb img{width:100%!important;height:100%!important;object-fit:contain!important}
.sidebar-copy strong{font-size:13px;line-height:1.4}
.content-list-main{max-width:1180px;margin-inline:auto}
.content-list-media{
aspect-ratio:16/10;
min-height:210px;
padding:10px;
background:#f7faf8;
}
.content-list-media img{
width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;
}
.content-list-card .body{min-height:160px;padding:20px 22px 24px}
@media(max-width:900px){
.content-layout.has-sidebar{grid-template-columns:1fr;gap:20px}
.content-sidebar{position:static;max-height:none}
.sidebar-list{max-height:440px}
.content-open-media{min-height:200px;padding:12px}
.content-open-media img,.article-detail-section .content-open-media img{max-height:520px!important}
}
@media(max-width:600px){
.content-open-media{min-height:160px;padding:8px}
.content-open-media img,.article-detail-section .content-open-media img{max-height:380px!important}
.content-open>.body{padding:20px 18px 24px}
.content-list-media{min-height:170px}
.sidebar-thumb{flex-basis:76px;width:76px;height:58px}
}
/* V15 NEWS CLICK + SAFE IMAGE LAYOUT */
.news-list-grid{align-items:stretch}
.news-card{height:100%;padding:0}
.news-card .content-card-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.news-card .content-list-media{flex:0 0 auto;aspect-ratio:16/10;min-height:220px;padding:12px;overflow:hidden}
.news-card .content-list-media img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.news-card .body{flex:1;display:flex;flex-direction:column;align-items:flex-start;min-height:0!important;padding:20px 22px 24px}
.news-card .body h2{margin:9px 0 8px;line-height:1.25}
.news-card .body p{margin:0 0 14px;line-height:1.65}
.news-card .body .btn{margin-top:auto}
.content-card-link:focus-visible{outline:3px solid #ff8da1;outline-offset:-3px;border-radius:18px}
@media(max-width:600px){.news-card .content-list-media{min-height:180px}.news-card .body{padding:18px}.news-card .body h2{font-size:22px}}
/* ==========================================================
V17 - DETAIL TENAGA PENDIDIK / PROFIL ORANG
Tampilan detail diperkecil, berada di tengah, dan foto
selalu mempertahankan rasio asli tanpa crop.
========================================================== */
.detail-read-single{
width:min(100%, 820px);
max-width:820px;
margin:0 auto;
}
.detail-read-single .content-read-card{
width:100%;
max-width:820px;
margin:0 auto;
overflow:hidden;
}
.detail-read-single .content-read-card > img{
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:430px;
object-fit:contain;
object-position:center center;
margin:0 auto;
background:#f5f8f7;
}
.detail-read-single .content-read-card .body{
padding:22px 26px 26px;
}
.detail-read-single .content-read-card .body h2{
font-size:clamp(22px,3vw,30px);
line-height:1.25;
}
/* Detail halaman program/berita/prestasi: ukuran terkontrol dan foto utuh. */
.content-layout.has-sidebar .content-main .content-open{
width:100%;
max-width:820px;
margin:0 auto;
}
.content-open-media{
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.content-open-media img,
.article-detail-section .content-open-media img{
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:520px;
object-fit:contain !important;
object-position:center center;
margin:0 auto;
}
@media (max-width:900px){
.detail-read-single{
width:min(100%, 700px);
}
.detail-read-single .content-read-card > img{
max-height:400px;
}
.content-layout.has-sidebar .content-main .content-open{
max-width:100%;
}
}
@media (max-width:600px){
.detail-read-single{
width:100%;
max-width:100%;
}
.detail-read-single .content-read-card{
border-radius:16px;
}
.detail-read-single .content-read-card > img{
width:auto;
height:auto;
max-width:100%;
max-height:360px;
}
.detail-read-single .content-read-card .body{
padding:18px 18px 22px;
}
.content-open-media{
min-height:0;
padding:8px;
}
.content-open-media img,
.article-detail-section .content-open-media img{
width:auto;
height:auto;
max-width:100%;
max-height:380px !important;
}
}
/* ==========================================================
V30.2 - Kamad & Koordinator
Satu kartu Kamad di atas, deretan Koordinator di bawah.
Foto utuh dan responsif mengikuti referensi pengguna.
========================================================== */
.kamad-Koordinator-section{padding-bottom:64px}
.kamad-block{text-align:center;margin:0 auto 52px}
.kamad-section-label{display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;padding:7px 16px;border-radius:999px;background:#e8f7f3;color:#087f6e;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.kamad-card-wrap{display:flex;justify-content:center}
.kamad-card{display:flex;flex-direction:column;width:min(100%,430px);overflow:hidden;text-decoration:none;color:inherit;border-radius:24px;background:#fff;box-shadow:0 18px 45px rgba(6,59,46,.12);border:1px solid rgba(6,59,46,.08);transition:transform .25s ease,box-shadow .25s ease}
.kamad-card:hover,.Koordinator-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(6,59,46,.16)}
.kamad-photo{display:flex;align-items:center;justify-content:center;min-height:340px;padding:22px 22px 0;background:linear-gradient(180deg,#eefaf6,#fff)}
.kamad-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:390px;object-fit:contain;object-position:center bottom}
.kamad-card .body{padding:22px 26px 26px;text-align:center}
.kamad-card .body h2{margin:8px 0 7px;color:#063b2e;font-size:clamp(23px,3vw,31px);line-height:1.2}
.kamad-card .body p,.Koordinator-card .body p{margin:0;color:#64748b}
.Koordinator-block{margin-top:10px}
.Koordinator-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.Koordinator-section-head h2{margin:5px 0 0;color:#063b2e;font-size:clamp(25px,3vw,34px)}
.people-total{padding:7px 13px;border-radius:999px;background:#f1f7f5;color:#547269;font-size:13px;font-weight:700;white-space:nowrap}
.Koordinator-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
.Koordinator-card{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;border-radius:20px;background:#fff;border:1px solid rgba(6,59,46,.08);box-shadow:0 10px 30px rgba(6,59,46,.09);transition:transform .25s ease,box-shadow .25s ease}
.Koordinator-photo{display:flex;align-items:center;justify-content:center;min-height:240px;padding:14px 14px 0;background:linear-gradient(180deg,#f0faf7,#fff)}
.Koordinator-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:275px;object-fit:contain;object-position:center bottom}
.Koordinator-card .body{padding:17px 17px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;flex:1}
.Koordinator-card .body h3{margin:8px 0 6px;color:#063b2e;font-size:17px;line-height:1.3}
.Koordinator-card .tag{font-size:10px}
.Koordinator-card .body p{font-size:12px;line-height:1.45}
@media(max-width:1100px){.Koordinator-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.Koordinator-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.kamad-card{width:min(100%,390px)}.kamad-photo{min-height:290px}.Koordinator-photo{min-height:220px}.Koordinator-section-head{align-items:flex-start;flex-direction:column;gap:8px}}
@media(max-width:480px){.kamad-Koordinator-section{padding-bottom:42px}.kamad-block{margin-bottom:38px}.kamad-card{border-radius:18px}.kamad-photo{min-height:250px;padding:15px 15px 0}.kamad-photo img{max-height:290px}.kamad-card .body{padding:18px}.Koordinator-grid{grid-template-columns:1fr 1fr;gap:11px}.Koordinator-card{border-radius:16px}.Koordinator-photo{min-height:175px;padding:8px 8px 0}.Koordinator-photo img{max-height:205px}.Koordinator-card .body{padding:12px 9px 15px}.Koordinator-card .body h3{font-size:14px}.Koordinator-card .tag{font-size:9px}.people-total{font-size:12px}}
/* ==========================================================
V32 - HOME Kamad & Koordinator
Struktur beranda mengikuti halaman referensi:
satu kartu Kamad di atas, Koordinator berjajar di bawah.
========================================================== */
.home-management-section{padding-top:58px;padding-bottom:68px}
.home-management-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.home-management-head h2{margin:6px 0 5px;color:#063b2e;font-size:clamp(28px,3vw,38px)}
.home-management-head p{margin:0;color:#64748b}
.home-kamad-wrap{display:flex;justify-content:center;margin-bottom:42px}
.home-kamad-card{width:min(100%,430px);display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;border-radius:24px;background:#fff;border:1px solid rgba(6,59,46,.09);box-shadow:0 18px 45px rgba(6,59,46,.12);transition:transform .25s ease,box-shadow .25s ease}
.home-kamad-card:hover,.home-Koordinator-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(6,59,46,.16)}
.home-kamad-photo{display:flex;justify-content:center;align-items:flex-end;min-height:350px;padding:20px 24px 0;background:linear-gradient(180deg,#eefaf6,#fff)}
.home-kamad-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:390px;object-fit:contain;object-position:center bottom}
.home-kamad-card .body{text-align:center;padding:21px 24px 27px}
.home-kamad-card .body h2{margin:8px 0 6px;color:#063b2e;font-size:clamp(23px,3vw,31px);line-height:1.2}
.home-kamad-card .body p,.home-Koordinator-card .body p{margin:0;color:#64748b;font-size:13px}
.home-Koordinator-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
.home-Koordinator-head h3{margin:5px 0 0;color:#063b2e;font-size:clamp(25px,3vw,34px)}
.home-Koordinator-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.home-Koordinator-card{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;border-radius:20px;background:#fff;border:1px solid rgba(6,59,46,.08);box-shadow:0 10px 30px rgba(6,59,46,.09);transition:transform .25s ease,box-shadow .25s ease}
.home-Koordinator-photo{display:flex;align-items:flex-end;justify-content:center;min-height:235px;padding:10px 12px 0;background:linear-gradient(180deg,#f0faf7,#fff)}
.home-Koordinator-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:270px;object-fit:contain;object-position:center bottom}
.home-Koordinator-card .body{padding:16px 14px 19px;text-align:center;display:flex;flex-direction:column;align-items:center;flex:1}
.home-Koordinator-card .body h3{margin:8px 0 6px;color:#063b2e;font-size:16px;line-height:1.3}
.home-Koordinator-card .tag{font-size:10px}
@media(max-width:1000px){.home-Koordinator-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.home-management-head{align-items:flex-start;flex-direction:column;gap:14px}.home-kamad-wrap{margin-bottom:34px}.home-kamad-card{width:min(100%,390px)}.home-kamad-photo{min-height:300px}.home-Koordinator-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.home-Koordinator-photo{min-height:205px}}
@media(max-width:480px){.home-management-section{padding-top:42px;padding-bottom:45px}.home-kamad-card{border-radius:18px}.home-kamad-photo{min-height:255px;padding:14px 14px 0}.home-kamad-photo img{max-height:295px}.home-kamad-card .body{padding:17px}.home-Koordinator-grid{gap:10px}.home-Koordinator-card{border-radius:15px}.home-Koordinator-photo{min-height:170px;padding:7px 7px 0}.home-Koordinator-photo img{max-height:205px}.home-Koordinator-card .body{padding:11px 8px 14px}.home-Koordinator-card .body h3{font-size:13px}.home-Koordinator-card .tag{font-size:8px}.home-Koordinator-head{align-items:flex-start;flex-direction:column;gap:8px}}
/* V34 - Home Kamad & Koordinator: centered headings, 1 Kamad + 4 Koordinator */
.home-management-head-centered{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;margin-bottom:34px}
.home-management-head-centered .btn{margin-top:2px}
.home-Koordinator-head-centered{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;margin:0 0 24px}
.home-Koordinator-head-centered h3{margin:4px 0 0}
.home-Koordinator-head-centered .people-total{margin-top:2px}
@media(max-width:760px){.home-management-head-centered{margin-bottom:28px}.home-Koordinator-head-centered{margin-bottom:18px}}
/* V35 - Home Kamad & Koordinator heading follows other homepage sections.
Remove secondary management labels and keep the main title on the left with the action on the right. */
.home-management-section .home-management-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;text-align:left;}
.home-management-section .home-management-head-centered{flex-direction:row;align-items:flex-end;text-align:left;}
.home-management-section .home-management-head p{display:none;}
.home-management-section .home-Koordinator-head{display:flex;align-items:center;justify-content:center;margin:0 0 24px;text-align:center;}
.home-management-section .home-Koordinator-head h3{margin:0;color:#063b2e;font-size:clamp(24px,2.5vw,32px);}
.home-management-section .home-Koordinator-head .people-total{display:none;}
@media(max-width:760px){.home-management-section .home-management-head{flex-direction:row;align-items:center;}.home-management-section .home-management-head h2{font-size:26px;}.home-management-section .home-management-head .btn{flex-shrink:0;}.home-management-section .home-Koordinator-head{margin-bottom:18px;}}
/* V36: subheadings for management section */
.home-management-subtitle{text-align:center;margin:0 0 18px;color:#063b2e;font-size:clamp(22px,2.6vw,30px);font-weight:800}
.home-Koordinator-head{align-items:center;justify-content:center;margin-top:28px}
.home-Koordinator-head h3{text-align:center}
.kamad-section-label{text-align:center}
.Koordinator-section-head{align-items:center;justify-content:center}
.Koordinator-section-head h2{text-align:center}
/* V41 — Reader images follow the exact size/alignment selected in the admin editor. */
.content-open .article-body img,.content-open .prose img{max-width:100%;height:auto;object-fit:contain;}
.content-open .article-body img.alignleft,.content-open .prose img.alignleft{float:left;margin:.25em 1.25em .75em 0;}
.content-open .article-body img.alignright,.content-open .prose img.alignright{float:right;margin:.25em 0 .75em 1.25em;}
.content-open .article-body img.aligncenter,.content-open .prose img.aligncenter{display:block;margin:1.1em auto;}
.content-open .article-body img.alignnone,.content-open .prose img.alignnone{display:block;margin:1.1em 0;}
.content-open .article-body figure,.content-open .prose figure{max-width:100%;margin:24px 0;text-align:initial;}
.content-open .article-body figure.alignleft,.content-open .prose figure.alignleft{float:left;margin:.25em 1.25em .75em 0;}
.content-open .article-body figure.alignright,.content-open .prose figure.alignright{float:right;margin:.25em 0 .75em 1.25em;}
.content-open .article-body figure.aligncenter,.content-open .prose figure.aligncenter{margin-left:auto;margin-right:auto;text-align:center;}
.content-open .article-body figure img,.content-open .prose figure img{margin:0;max-width:100%;height:auto;}
@media(max-width:600px){.content-open .article-body img.alignleft,.content-open .prose img.alignleft,.content-open .article-body img.alignright,.content-open .prose img.alignright,.content-open .article-body figure.alignleft,.content-open .prose figure.alignleft,.content-open .article-body figure.alignright,.content-open .prose figure.alignright{float:none;display:block;margin:1em auto;max-width:100%;}}
/* V50 — Public Testimonial Form */
.testimoni-public-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0 26px;margin-bottom:24px;border-bottom:1px solid #e2ece8}.testimoni-public-head p{margin:0 0 5px;font-weight:700;color:#24332e}.testimoni-public-head small{color:#687b74}.testimoni-form-wrap{max-width:900px;margin:0 auto}.testimoni-form-intro{background:#f2f8f5;border:1px solid #dcebe5;border-radius:17px;padding:24px;margin-bottom:20px}.testimoni-form-intro h2{margin:0 0 10px;color:#063b2e}.testimoni-form-intro p{margin:7px 0;line-height:1.7}.testimoni-note{font-size:13px;color:#687b74}.testimoni-public-form{background:#fff;border:1px solid #e2ece8;border-radius:17px;padding:28px;box-shadow:0 8px 25px #0000000b}.testimoni-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.testimoni-field{margin-bottom:18px}.testimoni-field label{display:block;font-weight:800;color:#24332e;margin-bottom:7px}.testimoni-field label span{color:#d9485f}.testimoni-field input,.testimoni-field textarea{width:100%;border:1px solid #d8e5df;border-radius:10px;padding:12px 14px;font:inherit;color:#24332e;background:#fff;outline:0}.testimoni-field textarea{resize:vertical;min-height:180px;line-height:1.7}.testimoni-field input:focus,.testimoni-field textarea:focus{border-color:#087f5b;box-shadow:0 0 0 3px #087f5b18}.testimoni-field small{display:block;color:#7b8a85;margin-top:6px}.testimoni-form-actions,.testimoni-success-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:6px}.testimoni-public-form .btn.secondary,.testimoni-success-actions .btn.secondary{background:#eef3f1!important;color:#42504b!important}.testimoni-alert{padding:16px 18px;border-radius:12px;margin-bottom:18px;font-weight:700;line-height:1.6}.testimoni-alert.success{background:#e8f7ee;color:#166534;border:1px solid #b9e4c7}.testimoni-alert.error{background:#fff0f0;color:#9f1239;border:1px solid #f3c2cb}.testimoni-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.testimoni-success-actions{justify-content:flex-start;padding-top:4px}
@media(max-width:700px){.testimoni-public-head{align-items:flex-start;flex-direction:column}.testimoni-form-grid{grid-template-columns:1fr}.testimoni-public-form{padding:20px}.testimoni-form-actions,.testimoni-success-actions{justify-content:stretch}.testimoni-form-actions .btn,.testimoni-success-actions .btn{flex:1;text-align:center}}
/* V56 - Kamad & Koordinator clean layout: no section labels */
.kamad-Koordinator-section .kamad-block{margin:0 auto 46px;text-align:center}
.kamad-Koordinator-section .kamad-card-wrap{justify-content:center}
.kamad-Koordinator-section .kamad-card{width:min(100%,430px)}
.kamad-Koordinator-section .Koordinator-block{margin-top:0}
.kamad-Koordinator-section .Koordinator-grid{justify-content:center}
.kamad-Koordinator-section .Koordinator-section-head{display:none}
.home-kamad-wrap{margin-bottom:38px}
.home-Koordinator-head{display:none}
/* =========================================================
V57 - GLOBAL MOBILE-FIRST / HP LAYOUT
Seluruh halaman publik mengikuti pola tampilan HP yang konsisten.
Tidak mengubah data/CMS; hanya layout dan responsivitas.
========================================================= */
@media (max-width: 1100px){
.container{width:min(100% - 24px,760px)}
.site-header .navin{min-height:68px;gap:10px}
.site-header .navin nav{display:none!important}
.site-header .mob{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff!important;font-size:23px}
.site-header .mobile.open{display:flex!important;flex-direction:column;padding:8px 12px 16px;background:#08783f!important}
.site-header .mobile .navlink,.site-header .mobile .dd>button{width:100%;padding:13px 12px;text-align:left;font-size:14px;border-radius:9px}
.site-header .mobile .drop{min-width:0}
.site-header .brand{min-width:0;gap:9px}
.site-header .brand img{width:46px;height:46px}
.site-header .brand span{font-size:14px}
.section{padding:46px 0}
.head{align-items:flex-start;gap:14px;flex-direction:column;margin-bottom:20px}
.head .btn{align-self:flex-start}
.g2,.g3,.g4{grid-template-columns:1fr}
.quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.welcome{grid-template-columns:1fr;gap:24px}
.welcome img{height:auto;max-height:420px;object-fit:contain;background:#fff}
.foot{grid-template-columns:1fr;gap:22px}
.detail{padding:18px}
.detail img.cover{max-height:none;height:auto;object-fit:contain}
.content-layout,.content-layout.has-sidebar{grid-template-columns:1fr!important}
.content-sidebar{position:static!important;max-height:none!important}
.table,.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table table{min-width:680px}
}
@media (max-width: 600px){
body{padding-top:106px!important;font-size:14px}
.container{width:calc(100% - 24px)!important}
.top{font-size:10px;padding:7px 0}
.topin{justify-content:center}
.topin span:first-child{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topin span:last-child{display:none!important}
.site-header .navin{min-height:68px}
.site-header .brand img{width:43px;height:43px}
.site-header .brand span{font-size:13px}
.site-header .mob{width:42px;height:42px;font-size:21px}
.hero{height:auto!important;aspect-ratio:16/6;min-height:230px}
.heroText{padding:0 8px}
.heroText h1{font-size:27px;line-height:1.12;margin:8px 0}
.heroText p{font-size:12px;line-height:1.5;margin:6px 0}
.hero .slide img{object-fit:cover}
.slider-controls{bottom:10px}
.section{padding:38px 0}
.eyebrow{font-size:10px;letter-spacing:1.4px}
.head h2,.section h2,.section-title{font-size:22px;line-height:1.2;margin:0}
.grid,.g2,.g3,.g4{grid-template-columns:1fr!important;gap:13px}
.quick{grid-template-columns:1fr 1fr!important;gap:9px}
.quick a{padding:14px 9px;font-size:12px}
.quick i{font-size:21px}
.card,.detail,.news-card,.info-card,.feature-card,.gallery-card{border-radius:14px}
.card img{height:auto;max-height:300px;object-fit:contain;background:#fff}
.body{padding:15px}
.body h3{font-size:17px;line-height:1.3}
.tag{font-size:10px}
.btn{padding:9px 12px;font-size:12px}
.stats .grid{grid-template-columns:repeat(2,1fr)!important}
.stat{padding:13px 8px}
.stat strong{font-size:22px}
.stat span{font-size:11px}
.stat i{font-size:20px}
.welcome img{max-height:300px;border-radius:15px}
.prose{font-size:14px;line-height:1.7}
.detail{padding:15px}
.detail h1{font-size:24px;line-height:1.25}
.article-body,.prose{overflow-wrap:anywhere}
.foot{padding:35px 0;gap:18px}
.fb{font-size:10px;padding:12px}
.content-open>.body{padding:16px!important}
.content-open-media{padding:7px!important;min-height:140px!important}
.content-open-media img{max-height:330px!important}
.content-list-media{min-height:145px!important}
.sidebar-thumb{flex-basis:70px!important;width:70px!important;height:54px!important}
/* Semua halaman daftar tetap nyaman dibaca dengan satu kartu per baris. */
.news-grid,.people-grid,.student-grid,.achievement-grid,.gallery-grid,.facility-grid,.program-grid,.video-page-grid{grid-template-columns:1fr!important;gap:13px!important}
.home-news-grid,.home-people-grid,.home-gallery-grid,.home-achievement-grid{grid-template-columns:1fr!important;gap:13px!important}
/* Form publik */
form,.form{max-width:100%}
input,textarea,select{max-width:100%;font-size:14px}
}
@media (min-width:601px) and (max-width:1100px){
.g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.welcome{grid-template-columns:1fr}
.card img{height:230px;object-fit:contain;background:#fff}
}
/* Cegah elemen lebar menyebabkan halaman HP bergeser horizontal. */
@media (max-width:1100px){
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
}
/* =========================================================
V58 — FIX HALAMAN SEJARAH
Memastikan konten sejarah tidak tertutup/tertindih footer,
teks tetap terbaca, dan layout responsif di desktop/mobile.
========================================================= */
body.page-theme-history main{
display:block!important;
position:relative!important;
height:auto!important;
min-height:0!important;
overflow:visible!important;
}
body.page-theme-history main .section{
position:relative!important;
z-index:1!important;
height:auto!important;
min-height:0!important;
overflow:visible!important;
}
body.page-theme-history main .detail{
position:relative!important;
z-index:2!important;
display:block!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:visible!important;
background:#fff!important;
color:#334155!important;
padding:28px!important;
line-height:1.85!important;
box-sizing:border-box!important;
}
body.page-theme-history main .detail p{
color:#334155!important;
margin:0 0 1.05em!important;
}
body.page-theme-history main .detail h2,
body.page-theme-history main .detail h3,
body.page-theme-history main .detail h4{
color:var(--page-accent-dark)!important;
}
body.page-theme-history footer{
position:relative!important;
z-index:5!important;
clear:both!important;
margin-top:0!important;
transform:none!important;
}
body.page-theme-history .page-heading{
position:relative!important;
z-index:1!important;
}
@media(max-width:600px){
body.page-theme-history main .detail{
padding:18px!important;
border-radius:14px!important;
line-height:1.75!important;
}
body.page-theme-history main .section{
padding-top:0!important;
padding-bottom:28px!important;
}
}
/* V61 — Portal Link: akses cepat aplikasi dari Beranda */
.home-portal-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}
.home-portal-heading h2{margin:5px 0 0;color:#063b2e;font-size:28px}
.home-portal-section .quick{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:stretch}
.home-portal-section .quick a{min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 12px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.home-portal-section .quick a i{font-size:27px;margin:0}
.home-portal-section .quick a b{font-size:14px;line-height:1.25}
.min1-portal-help{margin-top:16px;padding:14px 16px;border:1px solid #cfe5da;border-left:4px solid #087f5b;border-radius:12px;background:#f2faf6;color:#31534a;display:grid;gap:5px}
.min1-portal-help b{color:#087f5b}
.min1-portal-help small{color:#6b7c75}
.min1-portal-icon-preset{width:100%}
@media(max-width:600px){.home-portal-heading h2{font-size:23px}.home-portal-section .quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-portal-section .quick a{min-height:100px;padding:14px 8px}.home-portal-section .quick a b{font-size:13px}}
/* V66 - Berita responsif untuk HP, termasuk saat Chrome memakai "Situs desktop".
Kartu berita dibuat vertikal: foto di atas, judul tepat di bawahnya,
sehingga tidak memanjang ke samping dan tetap proporsional. */
@media (max-width:1100px){
.home-news-feature{
grid-template-columns:1fr!important;
min-height:0!important;
align-self:start;
}
.home-news-feature-media,
.home-news-feature-media img{
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
aspect-ratio:16/9!important;
display:block!important;
}
.home-news-feature-media img{
object-fit:cover!important;
object-position:center!important;
}
.home-news-feature-body{
display:block!important;
padding:13px 15px 15px!important;
}
.home-news-feature-body .tag{
margin-bottom:7px!important;
}
.home-news-feature-body h3{
margin:0!important;
font-size:1rem!important;
line-height:1.38!important;
display:-webkit-box!important;
-webkit-line-clamp:3!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
}
.home-news-feature-body p,
.home-news-feature-body .home-news-date{
display:none!important;
}
}
@media (max-width:700px){
.home-news-feature-body{padding:12px 14px 14px!important}
.home-news-feature-body h3{font-size:.96rem!important;line-height:1.35!important}
}
/* V67: Foto Guru & Pegawai menggunakan proporsi foto resmi 3x4. */
body[class*="page-theme-"] main .grid > .staff-card > img,
.staff-card > img{
width:100%!important;
aspect-ratio:3 / 4!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
object-fit:contain!important;
object-position:center!important;
background:#fff!important;
display:block!important;
flex:0 0 auto!important;
}
/* =========================================================
V69 — KARTU KONTEN: TEKS TANPA KOTAK/GARIS INTERNAL
Border hanya milik kartu utama. Area teks di dalam kartu
menyatu dengan kartu dan tidak membuat kotak kedua.
Berlaku untuk Sambutan, Sejarah, Struktur, Visi & Misi,
Program Unggulan, Kamad & Koordinator, Biaya, FAQ, dll.
========================================================= */
body[class*="page-theme-"] main .detail.prose,
body[class*="page-theme-"] main .article-body,
body[class*="page-theme-"] main .student-intro,
body[class*="page-theme-"] main .video-page-intro,
body[class*="page-theme-"] main .faq-answer,
body[class*="page-theme-"] main .testimoni-body{
background:transparent;
}
/* Wrapper teks langsung di dalam kartu tidak boleh menjadi kartu kedua. */
body[class*="page-theme-"] main .detail.prose > div,
body[class*="page-theme-"] main .article-body > div,
body[class*="page-theme-"] main .student-intro > div,
body[class*="page-theme-"] main .video-page-intro > div,
body[class*="page-theme-"] main .faq-answer > div,
body[class*="page-theme-"] main .testimoni-body > div,
body[class*="page-theme-"] main .detail > .body > .prose > div,
body[class*="page-theme-"] main .detail > .body > .article-body > div{
border:0!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
}
/* Jika editor menyimpan border/background langsung pada elemen teks,
hilangkan tampilan kotaknya tanpa mengganggu gambar/tabel. */
body[class*="page-theme-"] main .detail.prose > div[style*="border"],
body[class*="page-theme-"] main .article-body > div[style*="border"],
body[class*="page-theme-"] main .student-intro > div[style*="border"],
body[class*="page-theme-"] main .video-page-intro > div[style*="border"],
body[class*="page-theme-"] main .faq-answer > div[style*="border"],
body[class*="page-theme-"] main .testimoni-body > div[style*="border"]{
border:0!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
}
/* Kartu utama tetap menjadi satu-satunya bingkai visual. */
body[class*="page-theme-"] main > .section > .container > .detail,
body[class*="page-theme-"] main > .section > .container > .grid > .detail,
body[class*="page-theme-"] main > .section > .container > .detail-read-single > .card,
body[class*="page-theme-"] main .content-open,
body[class*="page-theme-"] main .content-read-card{
position:relative;
}
/* =========================================================
V80 FINAL — KARTU KONTEN + HEADER MENU
- Area teks tidak pernah memiliki bingkai internal.
- Kartu utama tetap satu-satunya bingkai.
- Sejarah memakai kartu terukur seperti Sambutan.
- CTA lama (Program Unggulan / Info PPDB) tidak lagi berwarna permanen.
========================================================= */
/* Header hijau: menu normal menyatu dengan header. */
.site-header .navin nav .navlink.cta:not(.is-active),
.site-header .navin nav .navlink.cta:not(.is-active):focus,
.site-header .navin nav .navlink.cta:not(.is-active):visited{
background:transparent!important;
color:#fff!important;
border-color:transparent!important;
box-shadow:none!important;
transform:none!important;
}
.site-header .navin nav .navlink:not(.is-active):not(:hover),
.site-header .navin nav .dd>button:not(.is-active):not(:hover){
background:transparent!important;
color:#fff!important;
border-color:transparent!important;
box-shadow:none!important;
transform:none!important;
}
.site-header .navin nav .navlink:hover,
.site-header .navin nav .dd>button:hover,
.site-header .navin nav .navlink.is-active,
.site-header .navin nav .dd>button.is-active{
background:var(--page-soft)!important;
color:var(--page-accent)!important;
border-color:color-mix(in srgb,var(--page-accent) 30%,transparent)!important;
box-shadow:0 8px 20px color-mix(in srgb,var(--page-accent) 18%,transparent)!important;
transform:translateY(-2px)!important;
}
/* Tidak boleh ada kotak/border kedua pada isi teks. */
body[class*="page-theme-"] main .detail.prose,
body[class*="page-theme-"] main .detail.prose > *,
body[class*="page-theme-"] main .history-text,
body[class*="page-theme-"] main .history-text > *,
body[class*="page-theme-"] main .detail > .body.prose,
body[class*="page-theme-"] main .detail > .body.prose > *{
outline:0!important;
box-shadow:none!important;
}
body[class*="page-theme-"] main .detail.prose > div,
body[class*="page-theme-"] main .history-text > div,
body[class*="page-theme-"] main .detail > .body.prose > div{
border:0!important;
background:transparent!important;
outline:0!important;
box-shadow:none!important;
}
body[class*="page-theme-"] main .detail.prose p,
body[class*="page-theme-"] main .history-text p,
body[class*="page-theme-"] main .detail > .body.prose p{
border:0!important;
background:transparent!important;
outline:0!important;
box-shadow:none!important;
}
/* Sejarah: kartu tidak melebar ke seluruh layar; teks dan gambar berada
di dalam kartu yang sama, seperti kartu Sambutan. */
body.page-theme-history main .history-card{
width:min(1180px,calc(100% - 32px))!important;
margin-left:auto!important;
margin-right:auto!important;
padding:28px!important;
display:grid!important;
grid-template-columns:minmax(280px,42%) minmax(0,1fr)!important;
gap:34px!important;
align-items:center!important;
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid var(--page-accent)!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
body.page-theme-history main .history-media{min-width:0!important}
body.page-theme-history main .history-media img{
width:100%!important;
height:380px!important;
object-fit:cover!important;
object-position:center!important;
display:block!important;
border:0!important;
border-radius:18px!important;
box-shadow:none!important;
}
body.page-theme-history main .history-text{
min-width:0!important;
max-width:none!important;
width:auto!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
}
body.page-theme-history main .history-text p{margin:0 0 1.05em!important}
body.page-theme-history main .history-text p:last-child{margin-bottom:0!important}
@media(max-width:800px){
body.page-theme-history main .history-card{
grid-template-columns:1fr!important;
padding:18px!important;
gap:22px!important;
width:calc(100% - 24px)!important;
}
body.page-theme-history main .history-media img{height:auto!important;max-height:360px!important;object-fit:contain!important;background:#fff!important}
}
/* V80 FINAL — Struktur Organisasi mengikuti pola kartu Sambutan/Sejarah. */
body[class*="page-theme-"] main .detail .prose,
body[class*="page-theme-"] main .detail > .prose{
border:0!important;
background:transparent!important;
outline:0!important;
box-shadow:none!important;
padding:0!important;
margin:0!important;
}
body[class*="page-theme-"] main .structure-card{
width:min(1180px,calc(100% - 32px))!important;
margin-left:auto!important;margin-right:auto!important;
padding:28px!important;
display:grid!important;
grid-template-columns:minmax(280px,42%) minmax(0,1fr)!important;
gap:34px!important;align-items:center!important;
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid var(--page-accent)!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
body[class*="page-theme-"] main .structure-media img{
width:100%!important;height:380px!important;object-fit:contain!important;
background:#fff!important;display:block!important;border:0!important;
border-radius:18px!important;box-shadow:none!important;
}
body[class*="page-theme-"] main .structure-text{min-width:0!important;width:auto!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important}
@media(max-width:800px){
body[class*="page-theme-"] main .structure-card{grid-template-columns:1fr!important;padding:18px!important;gap:22px!important;width:calc(100% - 24px)!important}
body[class*="page-theme-"] main .structure-media img{height:auto!important;max-height:360px!important}
}
/* =========================================================
V80 FINAL FIX 2 — TEXT FILL CARD / LAYOUT LOCK
Mempertahankan seluruh pengaturan V80 sebelumnya.
Sejarah dan Struktur: gambar tetap di kiri, seluruh area
kanan kartu digunakan oleh teks. Tidak ada kolom kosong.
Pada layar kecil otomatis menjadi satu kolom.
========================================================= */
body[class*="page-theme-"] main .history-card,
body[class*="page-theme-"] main .structure-card{
display:grid!important;
grid-template-columns:minmax(280px,40%) minmax(0,1fr)!important;
grid-auto-flow:row!important;
align-items:center!important;
column-gap:34px!important;
width:min(1180px,calc(100% - 32px))!important;
margin-left:auto!important;
margin-right:auto!important;
}
body[class*="page-theme-"] main .history-card > .history-media,
body[class*="page-theme-"] main .structure-card > .structure-media{
grid-column:1!important;
grid-row:1!important;
width:100%!important;
min-width:0!important;
}
body[class*="page-theme-"] main .history-card > .history-text,
body[class*="page-theme-"] main .structure-card > .structure-text{
grid-column:2!important;
grid-row:1!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
justify-self:stretch!important;
align-self:center!important;
padding:0!important;
margin:0!important;
}
body[class*="page-theme-"] main .history-card > .history-text.prose,
body[class*="page-theme-"] main .structure-card > .structure-text.prose{
width:100%!important;
max-width:none!important;
}
body[class*="page-theme-"] main .history-card > .history-text p,
body[class*="page-theme-"] main .structure-card > .structure-text p{
width:100%!important;
max-width:none!important;
}
@media(max-width:800px){
body[class*="page-theme-"] main .history-card,
body[class*="page-theme-"] main .structure-card{
grid-template-columns:1fr!important;
column-gap:0!important;
row-gap:22px!important;
}
body[class*="page-theme-"] main .history-card > .history-media,
body[class*="page-theme-"] main .structure-card > .structure-media,
body[class*="page-theme-"] main .history-card > .history-text,
body[class*="page-theme-"] main .structure-card > .structure-text{
grid-column:1!important;
grid-row:auto!important;
width:100%!important;
}
}
/* V80 Final Fix 2 - Beranda disamakan dengan aturan menu/submenu.
Beranda tidak memakai warna CTA permanen; hanya hover dan active yang berwarna.
Seluruh aturan lama lainnya tetap dipertahankan. */
.site-header .navin nav .navlink.cta:not(.is-active){
background:transparent!important;
color:#fff!important;
box-shadow:none!important;
border-color:transparent!important;
}
.site-header .navin nav .navlink.cta:not(.is-active):hover{
background:rgba(255,255,255,.16)!important;
color:#fff!important;
}
.site-header .navin nav .navlink.cta.is-active{
background:rgba(255,255,255,.16)!important;
color:#fff!important;
}
body.page-theme-home main{
animation:pageThemeIn .45s ease both;
}
/* =========================================================
V80 FINAL FIX 3 — BERANDA MENGIKUTI TAMPILAN HALAMAN MENU
Sambutan, Program, Prestasi, Guru/Pegawai, Galeri, Siswa,
dan Berita pada Beranda menggunakan pola kartu halaman
masing-masing. Tidak ada kotak/bingkai kedua pada isi teks.
========================================================= */
/* ---------- SAMBUTAN: sama seperti halaman Sambutan ---------- */
.page-theme-home .home-welcome-section{
background:#f8fbff!important;
padding-top:48px!important;
padding-bottom:58px!important;
}
.page-theme-home .home-welcome-section .welcome{
width:min(1180px,calc(100% - 32px))!important;
margin-left:auto!important;
margin-right:auto!important;
display:grid!important;
grid-template-columns:360px minmax(0,1fr)!important;
gap:45px!important;
align-items:center!important;
padding:28px!important;
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid #2563eb!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
.page-theme-home .home-welcome-section .welcome img{
width:100%!important;
height:410px!important;
object-fit:cover!important;
object-position:center!important;
border-radius:18px!important;
display:block!important;
border:0!important;
box-shadow:none!important;
}
.page-theme-home .home-welcome-section .eyebrow{color:#2563eb!important}
.page-theme-home .home-welcome-section h2{
color:#2563eb!important;
margin:8px 0 20px!important;
}
/* Isi Sambutan menyatu dengan kartu utama. */
.page-theme-home .home-welcome-section .prose,
.page-theme-home .home-welcome-section .prose > *,
.page-theme-home .home-welcome-section .prose > div{
border:0!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
}
.page-theme-home .home-welcome-section .prose{
padding:0!important;
margin:0 0 18px!important;
color:#475569!important;
line-height:1.8!important;
}
.page-theme-home .home-welcome-section .prose p{
border:0!important;
background:transparent!important;
box-shadow:none!important;
margin:0 0 1.05em!important;
}
.page-theme-home .home-welcome-section .btn{background:#2563eb!important}
/* ---------- PROGRAM UNGGULAN: mengikuti tema halaman Program ---------- */
.page-theme-home .home-program-section{
background:#fffaf5!important;
}
.page-theme-home .home-program-card{
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid #f59e0b!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
.page-theme-home .home-program-card:nth-child(2){border-top-color:#f97316!important}
.page-theme-home .home-program-card:nth-child(3){border-top-color:#eab308!important}
.page-theme-home .home-program-card:nth-child(4){border-top-color:#fb7185!important}
.page-theme-home .home-program-card h3{color:#b45309!important}
/* ---------- PRESTASI: mengikuti tema halaman Prestasi ---------- */
.page-theme-home .home-achievement-section{background:#fffdf5!important}
.page-theme-home .home-achievement-card{
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid #ca8a04!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
.page-theme-home .home-achievement-card:nth-child(2){border-top-color:#f97316!important}
.page-theme-home .home-achievement-card:nth-child(3){border-top-color:#ec4899!important}
/* ---------- KAMAD/GURU/PEGAWAI: mengikuti tema halaman tenaga pendidik ---------- */
.page-theme-home .home-staff-section{background:#f7fdfe!important}
.page-theme-home .home-staff-card{
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid #0891b2!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
.page-theme-home .home-staff-card:nth-child(2){border-top-color:#3b82f6!important}
.page-theme-home .home-staff-card:nth-child(3){border-top-color:#8b5cf6!important}
.page-theme-home .home-staff-card:nth-child(4){border-top-color:#22c55e!important}
/* ---------- GALERI: mengikuti tema halaman Galeri ---------- */
.page-theme-home .home-gallery-section{background:#f5fcfe!important}
.page-theme-home .home-gallery-card{
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid #0891b2!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
.page-theme-home .home-gallery-card:nth-child(4n+2){border-top-color:#f59e0b!important}
.page-theme-home .home-gallery-card:nth-child(4n+3){border-top-color:#ec4899!important}
.page-theme-home .home-gallery-card:nth-child(4n){border-top-color:#8b5cf6!important}
/* ---------- SISWA: mengikuti tema halaman Siswa ---------- */
.page-theme-home .home-student-section{background:#fffbf6!important}
.page-theme-home .home-student-card{
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid #db7b16!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
/* ---------- BERITA: mengikuti tema halaman Berita ---------- */
.page-theme-home .home-news-section{
background:#fff9f5!important;
}
.page-theme-home .home-news-feature{
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid #ea580c!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
.page-theme-home .home-news-feature:nth-child(2){border-top-color:#c2410c!important}
.page-theme-home .home-news-feature:nth-child(3){border-top-color:#ea580c!important}
.page-theme-home .home-news-sidebar{
background:#fff!important;
color:#334155!important;
border:1px solid #e2ece8!important;
border-top:3px solid #ea580c!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
.page-theme-home .home-news-sidebar-title{color:#c2410c!important}
.page-theme-home .home-news-sidebar-title span{color:#ea580c!important}
.page-theme-home .home-news-latest-item{color:#334155!important;border-bottom-color:#e2e8f0!important}
.page-theme-home .home-news-latest-copy small{color:#94a3b8!important}
.page-theme-home .home-news-feature-body h3{color:#c2410c!important}
.page-theme-home .home-news-feature-body p{color:#64748b!important}
/* Semua isi teks pada kartu Beranda: satu bingkai saja, milik kartu utama. */
.page-theme-home main .home-welcome-section .prose,
.page-theme-home main .home-welcome-section .prose > *,
.page-theme-home main .home-news-feature-body,
.page-theme-home main .home-program-card .body,
.page-theme-home main .home-achievement-card .body,
.page-theme-home main .home-staff-card .body,
.page-theme-home main .home-gallery-card .body,
.page-theme-home main .home-student-card .body{
outline:0!important;
box-shadow:none!important;
}
.page-theme-home main .home-welcome-section .prose > div,
.page-theme-home main .home-welcome-section .prose p,
.page-theme-home main .home-program-card .body > *,
.page-theme-home main .home-achievement-card .body > *,
.page-theme-home main .home-staff-card .body > *,
.page-theme-home main .home-gallery-card .body > *,
.page-theme-home main .home-student-card .body > *{
border:0!important;
background:transparent!important;
outline:0!important;
box-shadow:none!important;
}
/* Portal Beranda tetap mengikuti pola kartu menu: satu bingkai, tanpa kotak kedua. */
.page-theme-home .home-portal-section{background:#f8fbff!important}
.page-theme-home .home-portal-section .quick>a{
background:#fff!important;
border:1px solid #e2ece8!important;
border-top:3px solid #2563eb!important;
border-radius:17px!important;
box-shadow:0 8px 25px #0000000b!important;
}
.page-theme-home .home-portal-section .quick>a:first-child{border-top-color:#15803d!important}
.page-theme-home .home-portal-section .quick>a:nth-child(2){border-top-color:#2563eb!important}
/* Responsif tetap sama seperti kartu halaman masing-masing. */
@media(max-width:800px){
.page-theme-home .home-welcome-section .welcome{
grid-template-columns:1fr!important;
gap:22px!important;
padding:18px!important;
width:calc(100% - 24px)!important;
border-radius:14px!important;
}
.page-theme-home .home-welcome-section .welcome img{
height:auto!important;
max-height:420px!important;
object-fit:contain!important;
background:#fff!important;
}
}
/* =========================================================
V80 FINAL FIX 3 — BERANDA CARD IMAGE PROPORTIONAL
Program Unggulan + Galeri Foto
- gambar tidak dipotong
- rasio media konsisten
- seluruh isi gambar tetap terlihat
- aturan V80 sebelumnya dipertahankan
========================================================= */
.page-theme-home .home-program-card > img,
.page-theme-home .home-gallery-card .gallery-photo{
width:100%!important;
aspect-ratio:4 / 3!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
flex:0 0 auto!important;
overflow:hidden!important;
background:#fff!important;
}
.page-theme-home .home-program-card > img{
display:block!important;
object-fit:contain!important;
object-position:center!important;
padding:0!important;
}
.page-theme-home .home-gallery-card .gallery-photo img{
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
display:block!important;
object-fit:contain!important;
object-position:center!important;
background:#fff!important;
}
/* Jangan melakukan zoom pada gambar Galeri karena dapat kembali memotong foto. */
.page-theme-home .home-gallery-card:hover .gallery-photo img{
transform:none!important;
filter:none!important;
}
/* Kartu tetap seragam walaupun judul berbeda panjang. */
.page-theme-home .home-program-card,
.page-theme-home .home-gallery-card{
height:100%!important;
display:flex!important;
flex-direction:column!important;
}
.page-theme-home .home-program-card .body,
.page-theme-home .home-gallery-card .body{
flex:1 1 auto!important;
}
@media(max-width:768px){
.page-theme-home .home-program-card > img,
.page-theme-home .home-gallery-card .gallery-photo{
aspect-ratio:4 / 3!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
}
}
/* =========================================================
V80 FINAL FIX 4 — BERANDA PROGRAM UNGGULAN LEBIH LEBAR
- kartu Program Unggulan diperlebar agar media tidak terpotong
- poster/foto menggunakan rasio 16:9
- gambar tetap utuh (contain)
- hanya mempengaruhi bagian Program Unggulan Beranda
========================================================= */
.page-theme-home .home-program-section > .container{
width:min(1320px, calc(100% - 32px))!important;
}
.page-theme-home .home-program-section .home-compact-grid{
grid-template-columns:repeat(3, minmax(0,1fr))!important;
gap:18px!important;
}
.page-theme-home .home-program-section .home-program-card > img{
width:100%!important;
aspect-ratio:16 / 9!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
object-fit:contain!important;
object-position:center!important;
display:block!important;
background:#fff!important;
padding:0!important;
flex:0 0 auto!important;
}
.page-theme-home .home-program-section .home-program-card{
min-width:0!important;
}
/* V80 FINAL FIX 5 — 6 PROGRAM, 3 KARTU PER BARIS */
.page-theme-home .home-program-section .home-compact-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
align-items:stretch!important;
}
.page-theme-home .home-program-section .home-program-card > img{
aspect-ratio:16 / 9!important;
}
@media(max-width:1100px){
.page-theme-home .home-program-section > .container{
width:min(100% - 24px, 980px)!important;
}
}
@media(max-width:768px){
.page-theme-home .home-program-section .home-compact-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:12px!important;
}
}
@media(max-width:520px){
.page-theme-home .home-program-section .home-compact-grid{
grid-template-columns:1fr!important;
}
}
/* =========================================================
V85 — BERANDA: SATUKAN BATAS CONTAINER SEMUA SECTION
- Program Unggulan kembali menggunakan lebar container standar Beranda.
- Batas kiri/kanan Program Unggulan sama dengan Berita & Artikel,
Sambutan, Prestasi, Kamad & Koordinator, Galeri, dan section lainnya.
- Tidak mengubah data, menu, submenu, warna, kartu, link, atau pengaturan CMS.
- Tetap mempertahankan 6 Program Unggulan dan 3 kartu per baris.
========================================================= */
.page-theme-home .home-program-section > .container{
width:min(1180px, calc(100% - 32px))!important;
max-width:1180px!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* Pastikan seluruh section Beranda memakai batas horizontal yang sama. */
.page-theme-home main > .section > .container,
.page-theme-home main > section.section > .container,
.page-theme-home main > .index-section-theme > .container,
.page-theme-home main > section.index-section-theme > .container{
width:min(1180px, calc(100% - 32px));
max-width:1180px;
margin-left:auto;
margin-right:auto;
}
/* Program tetap 3 kartu per baris pada desktop, sesuai V80 Final Fix 5/6. */
.page-theme-home .home-program-section .home-compact-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
align-items:stretch!important;
}
@media(max-width:1100px){
.page-theme-home main > .section > .container,
.page-theme-home main > section.section > .container,
.page-theme-home main > .index-section-theme > .container,
.page-theme-home main > section.index-section-theme > .container,
.page-theme-home .home-program-section > .container{
width:min(100% - 24px,760px)!important;
max-width:760px!important;
}
}
@media(max-width:600px){
.page-theme-home main > .section > .container,
.page-theme-home main > section.section > .container,
.page-theme-home main > .index-section-theme > .container,
.page-theme-home main > section.index-section-theme > .container,
.page-theme-home .home-program-section > .container{
width:calc(100% - 24px)!important;
max-width:none!important;
}
}