/* =============================================================
   SMA Negeri 1 Maju Bersama — Foundation Stylesheet
   Design system / global components (matches mockups)
   ============================================================= */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Brand navy */
  --navy-900: #0a1c4d;   /* top bar */
  --navy-800: #112a70;   /* header / banner base */
  --navy-700: #16357f;
  --navy-600: #1b3f9c;
  /* Blue accents */
  --blue-600: #1b4fc4;   /* primary buttons / links */
  --blue-500: #2563eb;
  --blue-100: #e8eefc;   /* light blue surfaces */
  --blue-050: #f1f5ff;
  /* Gold accent */
  --gold-500: #f5a623;
  --gold-400: #f6b531;
  /* Neutrals */
  --bg:        #f5f7fb;
  --surface:   #ffffff;
  --border:    #e6eaf2;
  --heading:   #102a70;
  --text:      #2b3553;
  --muted:     #6b7488;
  --muted-2:   #9aa3b5;
  /* Status / tag palette (bg, fg) */
  --t-blue-bg:#e3ecff;   --t-blue-fg:#1b4fc4;
  --t-green-bg:#dcf5e6;  --t-green-fg:#1a8f4c;
  --t-teal-bg:#d6f3ef;   --t-teal-fg:#0f8c84;
  --t-purple-bg:#ece3fb; --t-purple-fg:#7a3fce;
  --t-orange-bg:#ffeccd; --t-orange-fg:#d2840a;
  --t-red-bg:#fde2e2;    --t-red-fg:#d23b3b;
  --t-pink-bg:#fde3ef;   --t-pink-fg:#c8407f;
  --t-yellow-bg:#fdf2cf; --t-yellow-fg:#b8860b;
  --green-solid:#1fb255;
  /* Layout */
  --container: 1200px;
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16,42,112,.06);
  --shadow:    0 6px 20px rgba(16,42,112,.08);
  --shadow-md: 0 10px 30px rgba(16,42,112,.10);
  --gap:       24px;
  /* Type */
  --font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ---------- 2. Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 15px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4,h5 { font-family: var(--font-head); color: var(--heading); line-height: 1.25; font-weight: 700; }

/* ---------- 3. Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: 56px; }
.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; color: var(--gold-500); }
.text-muted { color: var(--muted); }

/* ---------- 4. Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: .18s ease; line-height: 1; }
.btn-primary { background: var(--navy-800); color: #fff; }
.btn-primary:hover { background: var(--navy-700); }
.btn-blue { background: var(--blue-600); color: #fff; }
.btn-blue:hover { background: var(--blue-500); }
.btn-gold { background: var(--gold-500); color: #3a2700; }
.btn-gold:hover { background: var(--gold-400); }
.btn-outline { background: #fff; color: var(--navy-800); border-color: var(--border); }
.btn-outline:hover { border-color: var(--blue-600); color: var(--blue-600); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- 5. Badges / Tags ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-weight: 600; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; line-height: 1; }
.badge.blue   { background: var(--t-blue-bg);   color: var(--t-blue-fg); }
.badge.green  { background: var(--t-green-bg);  color: var(--t-green-fg); }
.badge.teal   { background: var(--t-teal-bg);   color: var(--t-teal-fg); }
.badge.purple { background: var(--t-purple-bg); color: var(--t-purple-fg); }
.badge.orange { background: var(--t-orange-bg); color: var(--t-orange-fg); }
.badge.red    { background: var(--t-red-bg);    color: var(--t-red-fg); }
.badge.pink   { background: var(--t-pink-bg);   color: var(--t-pink-fg); }
.badge.yellow { background: var(--t-yellow-bg); color: var(--t-yellow-fg); }
.badge.status-active { background: var(--green-solid); color: #fff; }

/* ---------- 6. Top bar ---------- */
.topbar { background: var(--navy-900); color: #c9d4f2; font-size: 13px; }
.topbar .container { display: flex; align-items: center; justify-content: flex-end; height: 38px; gap: 18px; }
.topbar a { display: inline-flex; opacity: .85; transition: .15s; }
.topbar a:hover { opacity: 1; color: #fff; }
.topbar .sep { width: 1px; height: 16px; background: rgba(255,255,255,.18); }

/* ---------- 7. Header / Navbar ---------- */
.header { background: #fff; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 50; }
.header .container { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { width: 46px; height: 46px; border-radius: 8px; background: var(--navy-800); color: var(--gold-500); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 20px; flex: none; }
.brand .brand-text strong { display: block; font-family: var(--font-head); color: var(--navy-800); font-weight: 800; font-size: 16px; line-height: 1.1; letter-spacing: .01em; }
.brand .brand-text span { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: 4px; }
.nav > ul > li { position: relative; }
.nav > ul > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-family: var(--font-head); font-weight: 500; font-size: 14.5px; color: var(--navy-800); border-radius: 8px; }
.nav > ul > li > a:hover, .nav > ul > li.active > a { color: var(--blue-600); }
.nav .caret { font-size: 10px; opacity: .7; transition: .2s; }
.nav > ul > li:hover .caret { transform: rotate(180deg); }
/* Dropdown */
.dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .18s ease; }
.nav > ul > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14px; color: var(--text); }
.dropdown a:hover { background: var(--blue-050); color: var(--blue-600); }
.btn-cta-header { margin-left: 8px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--navy-800); }

/* ---------- 8. Page Hero + Breadcrumb ---------- */
.page-hero { position: relative; color: #fff; background:
    linear-gradient(100deg, rgba(10,28,77,.96) 0%, rgba(17,42,112,.86) 45%, rgba(27,63,156,.62) 100%),
    url("../img/hero-school.jpg") center/cover no-repeat, var(--navy-800); }
.page-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 60%, rgba(10,28,77,.25)); pointer-events:none; }
.page-hero .container { position: relative; z-index: 1; padding-block: 46px 52px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cdd8f5; margin-bottom: 14px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .divider { opacity: .6; }
.page-hero h1 { color: #fff; font-size: 40px; font-weight: 800; margin-bottom: 10px; }
.page-hero p { max-width: 620px; color: #dbe3f7; font-size: 15px; }

/* ---------- 9. Page body layout (sidebar + content) ---------- */
.page-body { padding-block: 40px 64px; }
.layout-sidebar { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.layout-sidebar.right { grid-template-columns: 1fr 300px; }

/* ---------- 10. Sidebar nav ---------- */
.sidebar { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }
.side-nav { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-sm); }
.side-nav .side-head { display: flex; align-items: center; gap: 10px; background: var(--navy-800); color: #fff; padding: 12px 14px; border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text); font-size: 14px; transition: .15s; }
.side-nav a .ic { width: 18px; text-align: center; opacity: .7; }
.side-nav a:hover { background: var(--blue-050); color: var(--blue-600); }
.side-nav a.active { background: var(--blue-100); color: var(--blue-600); font-weight: 600; }
.side-cta { background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: var(--radius); padding: 18px; text-align: left; }
.side-cta h4 { font-size: 14.5px; margin-bottom: 6px; color: var(--navy-800); }
.side-cta p { font-size: 13px; color: var(--muted); margin-bottom: 12px; }

/* ---------- 11. Filter toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-sm); margin-bottom: 8px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab { padding: 8px 14px; border-radius: var(--radius-sm); font-family: var(--font-head); font-size: 13.5px; font-weight: 500; color: var(--text); cursor: pointer; border: 1px solid transparent; }
.tab:hover { background: var(--blue-050); }
.tab.active { background: var(--navy-800); color: #fff; }
.toolbar .spacer { margin-left: auto; }
.field { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px; color: var(--muted); }
.field input, .field select { border: 0; outline: 0; background: none; min-width: 120px; }
.select { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px; color: var(--text); }
.result-count { font-size: 13.5px; color: var(--muted); margin: 14px 2px; }
.result-count strong { color: var(--navy-800); }

/* ---------- 12. Cards ---------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: .2s ease; overflow: hidden; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* profile card */
.card-profile { padding: 22px 18px; text-align: center; }
.card-profile .avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; background: var(--blue-050); border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.card-profile h3 { font-size: 15.5px; margin-bottom: 3px; }
.card-profile .role { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.card-profile .email { font-size: 12.5px; color: var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; margin: 10px 0 14px; }
.card-profile .badge { margin-bottom: 10px; }

/* content card (news/ekskul) */
.card-content .thumb { aspect-ratio: 16/10; object-fit: cover; width: 100%; background: var(--blue-050); }
.card-content .body { padding: 16px; }
.card-content .meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.card-content h3 { font-size: 15.5px; margin: 8px 0 6px; }
.card-content p { font-size: 13.5px; color: var(--muted); }

/* gallery card */
.card-gallery { position: relative; }
.card-gallery .thumb { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.card-gallery .count { position: absolute; top: 10px; left: 10px; background: rgba(10,28,77,.78); color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(2px); }
.card-gallery .body { padding: 14px 16px; }

/* stat */
.stat { display: flex; align-items: center; gap: 14px; }
.stat .num { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--gold-500); line-height: 1; }
.stat .lbl { font-size: 13px; color: var(--muted); }

/* feature item (homepage highlight) */
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature .fic { width: 46px; height: 46px; border-radius: 12px; background: var(--navy-800); color: #fff; display: grid; place-items: center; flex: none; font-size: 20px; }
.feature h4 { font-size: 14.5px; margin-bottom: 4px; }
.feature p { font-size: 13px; color: var(--muted); }

/* ---------- 13. Pagination ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; }
.pagination a, .pagination span { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; font-size: 14px; color: var(--text); cursor: pointer; transition: .15s; }
.pagination a:hover { border-color: var(--blue-600); color: var(--blue-600); }
.pagination .current { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.pagination .gap { border: 0; }

/* ---------- 14. Footer ---------- */
.footer { background: var(--navy-900); color: #b9c4e6; padding-block: 52px 0; margin-top: 40px; }
.footer a:hover { color: #fff; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.footer h5 { color: #fff; font-size: 14px; margin-bottom: 16px; }
.footer .f-brand strong { color: #fff; font-family: var(--font-head); font-size: 16px; }
.footer ul li { margin-bottom: 9px; font-size: 14px; }
.footer .contact-line { display: flex; gap: 9px; font-size: 13.5px; margin-bottom: 10px; align-items: flex-start; }
.footer .social { display: flex; gap: 10px; margin-top: 8px; }
.footer .social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.footer .social a:hover { background: var(--blue-600); }
.newsletter { margin-top: 12px; }
.newsletter p { font-size: 13.5px; color: #b9c4e6; margin-bottom: 12px; line-height: 1.5; }
.newsletter form { display: flex; background: #fff; border-radius: 8px; overflow: hidden; max-width: 300px; }
.newsletter input { flex: 1; min-width: 0; background: none; border: 0; padding: 11px 14px; color: #243b63; font-size: 13.5px; }
.newsletter input::placeholder { color: #8c98c2; }
.newsletter button { border: 0; background: var(--gold-500); color: #3a2a05; padding: 0 16px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.newsletter button:hover { background: var(--gold-400); }
.footer .copyright { text-align: center; font-size: 13px; color: #8c98c2; border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding: 20px; }

/* ---------- 15. Generic surfaces / styleguide ---------- */
.panel { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.sg-section { margin-bottom: 48px; }
.sg-section > h2 { font-size: 22px; margin-bottom: 6px; }
.sg-section > .desc { color: var(--muted); margin-bottom: 20px; font-size: 14px; }
.swatch { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.swatch .chip { height: 64px; }
.swatch .meta { padding: 10px 12px; font-size: 12px; }
.swatch .meta b { display: block; font-family: var(--font-head); color: var(--heading); margin-bottom: 2px; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- 16. Responsive ---------- */
@media (max-width: 1024px) {
  .layout-sidebar, .layout-sidebar.right { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
  .cols-4 { grid-template-columns: repeat(3, 1fr); }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav { position: fixed; inset: 76px 0 auto 0; background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); margin: 0; padding: 12px; display: none; }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 14px; display: none; }
  .nav > ul > li.open .dropdown { display: block; }
  .btn-cta-header { display: none; }
  .nav-toggle { display: inline-flex; }
  .header .container { gap: 12px; }
  .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: repeat(2, 1fr); }
  .page-hero h1 { font-size: 30px; }
  .footer .cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: 1fr; }
  .brand .brand-text span { display: none; }
}

/* =============================================================
   17. Page-specific components
   ============================================================= */

/* ----- Homepage hero ----- */
.home-hero { position: relative; color:#fff; background:
   linear-gradient(105deg, rgba(10,28,77,.94), rgba(17,42,112,.80) 50%, rgba(27,63,156,.55));
   background-color: var(--navy-800); }
.home-hero .container { padding-block: 70px 110px; display:grid; grid-template-columns: 1.05fr .95fr; gap:40px; align-items:center; position:relative; z-index:1; }
.home-hero .eyebrow { color:#ffd98a; }
.home-hero h1 { color:#fff; font-size:46px; line-height:1.1; margin:14px 0 16px; font-weight:800; }
.home-hero p { color:#dbe3f7; max-width:520px; margin-bottom:24px; font-size:15.5px; }
.home-hero .hero-art { aspect-ratio:4/3; border-radius:var(--radius-lg); background:linear-gradient(135deg,#2b4fa0,#5a78c9); box-shadow:var(--shadow-md); }
.home-features { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:26px; margin-top:-70px; position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.home-features .feature .fic { background:var(--blue-050); color:var(--blue-600); }

/* ----- Section heading ----- */
.sec-head { margin-bottom:26px; }
.sec-head .eyebrow { color:var(--gold-500); }
.sec-head h2 { font-size:30px; }
.sec-head.center { text-align:center; }

/* ----- About + stats ----- */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.about-img { aspect-ratio:4/3; border-radius:var(--radius); background:linear-gradient(135deg,#cdd9f6,#eef2fc); box-shadow:var(--shadow); }
.about-stats { display:grid; grid-template-columns:repeat(2,auto); gap:22px 40px; margin-top:18px; }

/* ----- CTA band ----- */
.cta-band { background:linear-gradient(100deg,var(--navy-800),var(--navy-600)); color:#fff; border-radius:var(--radius-lg); padding:34px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-band h3 { color:#fff; font-size:24px; }
.cta-band p { color:#cdd8f5; }

/* ----- OSIS / sub tab bar ----- */
.tabbar { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.tabbar a { padding:11px 18px; font-family:var(--font-head); font-weight:500; font-size:14px; color:var(--text); border-radius:8px 8px 0 0; border-bottom:2px solid transparent; }
.tabbar a:hover { color:var(--blue-600); }
.tabbar a.active { color:var(--blue-600); border-bottom-color:var(--blue-600); font-weight:600; }

/* ----- Timeline ----- */
.timeline { position:relative; padding-left:8px; }
.timeline::before { content:""; position:absolute; left:23px; top:6px; bottom:6px; width:2px; background:var(--border); }
.tl-item { position:relative; display:grid; grid-template-columns:48px 1fr auto; gap:18px; align-items:start; padding:14px 0; }
.tl-item .dot { width:48px; height:48px; border-radius:50%; background:var(--blue-050); color:var(--blue-600); display:grid; place-items:center; font-size:20px; z-index:1; border:3px solid #fff; }
.tl-item .yr { font-family:var(--font-head); font-weight:700; color:var(--gold-500); font-size:14px; }
.tl-item h4 { font-size:16px; margin:2px 0 4px; }
.tl-item p { font-size:13.5px; color:var(--muted); }
.tl-item .tl-img { width:180px; aspect-ratio:16/10; border-radius:var(--radius-sm); background:linear-gradient(135deg,#cdd9f6,#eef2fc); }

/* ----- Pillars / value grid ----- */
.pillars { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.pillar { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px 18px; box-shadow:var(--shadow-sm); border-top:3px solid var(--blue-600); }
.pillar .pic { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:24px; margin-bottom:14px; background:var(--blue-050); color:var(--blue-600); }
.pillar h4 { font-size:16px; margin-bottom:6px; }
.pillar p { font-size:13px; color:var(--muted); }
.value-list { display:grid; gap:18px; }
.value-item { display:flex; gap:14px; }
.value-item .vic { width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--blue-050); color:var(--blue-600); font-size:20px; }
.value-item h4 { font-size:15px; margin-bottom:2px; }
.value-item p { font-size:13px; color:var(--muted); }

/* ----- Org chart ----- */
.orgchart { text-align:center; overflow-x:auto; padding:10px; }
.org-node { display:inline-block; background:#fff; border:1px solid var(--border); border-top:3px solid var(--navy-800); border-radius:var(--radius-sm); padding:12px 18px; min-width:180px; box-shadow:var(--shadow-sm); }
.org-node.lead { background:var(--navy-800); color:#fff; border-top-color:var(--gold-500); }
.org-node .ttl { font-family:var(--font-head); font-weight:600; font-size:13.5px; }
.org-node .nm { font-size:12.5px; color:var(--muted); margin-top:2px; }
.org-node.lead .nm { color:#cdd8f5; }
.org-level { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:28px; position:relative; }
.org-level::before { content:""; position:absolute; top:-16px; left:50%; width:2px; height:16px; background:var(--border); transform:translateX(-50%); }

/* ----- Calendar ----- */
.calendar { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-head .mname { font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--navy-800); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-grid .dow { text-align:center; font-size:12px; color:var(--muted); font-weight:600; padding:6px 0; }
.cal-cell { aspect-ratio:1/.9; border-radius:8px; padding:8px; font-size:13px; position:relative; }
.cal-cell:hover { background:var(--blue-050); }
.cal-cell.muted { color:var(--muted-2); }
.cal-cell .ev { position:absolute; bottom:7px; left:8px; width:7px; height:7px; border-radius:50%; }
.cal-cell.today { background:var(--blue-100); font-weight:700; color:var(--blue-600); }
.dot-blue{background:#2563eb}.dot-gold{background:#f5a623}.dot-green{background:#1fb255}.dot-purple{background:#7a3fce}.dot-red{background:#d23b3b}
.agenda-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.agenda-item .date-pill { flex:none; width:48px; text-align:center; background:var(--blue-050); border-radius:8px; padding:6px 0; }
.agenda-item .date-pill .d { font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--navy-800); line-height:1; }
.agenda-item .date-pill .m { font-size:11px; color:var(--muted); text-transform:uppercase; }

/* ----- Data table ----- */
.data-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.data-table th { background:var(--navy-800); color:#fff; font-family:var(--font-head); font-weight:600; font-size:13px; text-align:left; padding:13px 16px; }
.data-table td { padding:12px 16px; font-size:13.5px; border-top:1px solid var(--border); }
.data-table tbody tr:hover { background:var(--blue-050); }
.summary-box { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.summary-box .row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.summary-box .row:last-child { border:0; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips a { padding:7px 10px; background:var(--blue-050); border-radius:8px; font-size:12.5px; color:var(--blue-600); font-weight:600; }

/* ----- Forms ----- */
.form-grid { display:grid; gap:14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--navy-800); }
.form-field input, .form-field select, .form-field textarea { width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px; font-size:14px; background:#fff; }
.form-field textarea { min-height:120px; resize:vertical; }
.info-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
.info-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; gap:13px; box-shadow:var(--shadow-sm); }
.info-card .iic { width:42px; height:42px; border-radius:10px; background:var(--blue-600); color:#fff; display:grid; place-items:center; flex:none; }
.info-card .lbl { font-size:12px; color:var(--muted); }
.info-card .val { font-size:13.5px; font-weight:600; color:var(--navy-800); }
.map-embed { aspect-ratio:16/10; border-radius:var(--radius); background:linear-gradient(135deg,#d6e0d8,#e8eef0); display:grid; place-items:center; color:var(--muted); border:1px solid var(--border); }

/* ----- SPMB ----- */
.spmb-hero-meta { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-top:-34px; position:relative; z-index:3; }
.spmb-hero-meta .m { display:flex; gap:10px; align-items:center; }
.spmb-hero-meta .lbl { font-size:11.5px; color:var(--muted); }
.spmb-hero-meta .val { font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--navy-800); }
.jalur { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.jalur-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px 18px; box-shadow:var(--shadow-sm); text-align:center; }
.jalur-card .jic { width:54px; height:54px; border-radius:14px; margin:0 auto 12px; display:grid; place-items:center; font-size:24px; background:var(--blue-050); color:var(--blue-600); }
.jalur-card .kuota { font-family:var(--font-head); font-weight:800; font-size:28px; color:var(--navy-800); margin:8px 0; }
.steps { display:grid; gap:0; }
.step { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.step .sn { width:30px; height:30px; border-radius:50%; background:var(--navy-800); color:#fff; display:grid; place-items:center; font-size:13px; flex:none; }
.check-list li { display:flex; gap:10px; padding:7px 0; font-size:13.5px; }
.check-list .ck { color:var(--green-solid); }

/* ----- News list (Berita / Pengumuman) ----- */
.feature-news { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:22px; }
.feature-news .thumb { aspect-ratio:16/11; background:linear-gradient(135deg,#cdd9f6,#eef2fc); }
.feature-news .body { padding:22px; }
.feature-news h3 { font-size:21px; margin:8px 0 10px; }
.list-news { display:grid; gap:14px; }
.list-news .item { display:flex; gap:14px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow-sm); }
.list-news .item .ic { width:46px; height:46px; border-radius:10px; background:var(--blue-050); color:var(--blue-600); display:grid; place-items:center; flex:none; font-size:20px; }
.list-news .item h4 { font-size:15px; margin-bottom:3px; }
.list-news .item .meta { font-size:12px; color:var(--muted); }
.widget { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); margin-bottom:18px; }
.widget h5 { font-size:15px; margin-bottom:12px; }
.widget .cat-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.widget .cat-row:last-child{border:0;}
.widget .cat-row .cnt { background:var(--blue-050); color:var(--blue-600); border-radius:6px; padding:1px 8px; font-size:12px; font-weight:600; }
.popular-item { display:flex; gap:10px; padding:9px 0; }
.popular-item .rank { width:24px; height:24px; border-radius:50%; background:var(--navy-800); color:#fff; display:grid; place-items:center; font-size:12px; flex:none; }

/* ----- Announcement (kelulusan) ----- */
.result-banner { background:var(--t-green-bg); border:1px solid #b7e6c8; border-radius:var(--radius); padding:22px; text-align:center; }
.result-banner .big { font-family:var(--font-head); font-weight:800; font-size:30px; color:var(--green-solid); }
.kepsek-hero { display:grid; grid-template-columns:300px 1fr; gap:28px; }
.kepsek-photo { aspect-ratio:1/1.05; border-radius:var(--radius); background:linear-gradient(135deg,#cdd9f6,#eef2fc); box-shadow:var(--shadow); }

/* ===== WordPress menu compatibility ===== */
.nav ul.sub-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:210px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:8px; display:none; z-index:60; }
.nav li.menu-item-has-children { position:relative; }
.nav li.menu-item-has-children:hover > ul.sub-menu { display:block; }
.nav ul.sub-menu li a { display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--text); }
.nav ul.sub-menu li a:hover { background:var(--blue-050); color:var(--blue-600); }
.nav .current-menu-item > a, .nav .current_page_item > a { color:var(--blue-600); font-weight:600; }
.wp-caption, .aligncenter { text-align:center; }
.screen-reader-text { position:absolute; left:-9999px; }
body.admin-bar .topbar { /* keep below admin bar */ }

/* ===== Tambahan kelas untuk tema WordPress ===== */
.topbar-search { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); border-radius:999px; padding:3px 12px; }
.topbar-search .ic { font-size:13px; opacity:.85; }
.topbar-search input { background:transparent; border:0; outline:0; color:#fff; font-size:12.5px; width:120px; }
.topbar-search input::placeholder { color:rgba(255,255,255,.7); }
.topbar .spacer { flex:1; }
.hero-text { max-width:560px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.btn-outline-light { border:1.5px solid rgba(255,255,255,.6); color:#fff; background:transparent; }
.btn-outline-light:hover { background:rgba(255,255,255,.12); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.site-main { min-height:40vh; }
.list-news .item { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.list-news .item:last-child { border-bottom:0; }
.list-news .item .ic { width:34px; height:34px; border-radius:8px; background:var(--blue-050); flex:0 0 auto; }
.list-news .item strong { display:block; font-size:13.5px; line-height:1.3; }
.list-news .item .text-muted { font-size:12px; }

/* ============================================================
   HOMEPAGE v2 — penyesuaian presisi agar sesuai mockup
   (warna diambil langsung dari homepage.png)
   ============================================================ */
:root{
  --navy-950:#001b45;
  --navy-900:#002151;
  --navy-800:#0a2c63;
  --navy-700:#10367a;
  --blue-600:#0e3f86;
  --blue-500:#1b4fc4;
  --gold-500:#f6c049;
  --gold-600:#e8a72c;
  --bg:#f3f7fa;
  --heading:#0a2c63;
}

/* Topbar: ikon hanya di kanan */
.topbar{ background:var(--navy-950); }
.topbar .container{ justify-content:flex-end; gap:16px; }
.topbar .spacer{ display:none; }
.topbar a{ opacity:.92; font-size:14px; display:inline-flex; align-items:center; }
.topbar a:hover{ opacity:1; }

/* Header button => PPDB navy solid */
.btn-cta-header{ background:var(--navy-800); color:#fff; border-radius:10px; padding:11px 22px; font-weight:600; }
.btn-cta-header:hover{ background:var(--navy-900); color:#fff; }
.header .logo{ background:var(--navy-800); color:var(--gold-500); }

/* ---------- HERO full-bleed + overlay gradient ---------- */
.home-hero{
  position:relative;
  background-image:
    linear-gradient(90deg, rgba(0,27,69,.94) 0%, rgba(0,33,81,.80) 36%, rgba(0,33,81,.32) 68%, rgba(0,33,81,.04) 100%),
    var(--hero-bg, linear-gradient(120deg,#0a2c63,#15407f));
  background-size:cover; background-position:center; background-color:var(--navy-800);
}
.home-hero .container{ display:block; padding-block:92px 150px; }
.home-hero .hero-text{ max-width:540px; }
.home-hero .eyebrow{ display:inline-flex; align-items:center; gap:12px; color:var(--gold-500); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:13px; }
.home-hero .eyebrow::before{ content:""; width:36px; height:2px; background:var(--gold-500); display:inline-block; }
.home-hero h1{ color:#fff; font-size:50px; line-height:1.08; margin:16px 0 18px; font-weight:800; }
.home-hero p{ color:#dce4f5; font-size:16px; max-width:470px; margin-bottom:28px; }
.home-hero .hero-art{ display:none; }
.hero-cta{ background:var(--blue-600); color:#fff; padding:14px 26px; border-radius:10px; box-shadow:0 10px 24px rgba(0,33,81,.40); }
.hero-cta:hover{ background:#0a2c63; color:#fff; }

/* ---------- Feature bar melayang, ikon bulat ---------- */
.feature-wrap{ position:relative; z-index:3; }
.home-features{ margin-top:-82px; box-shadow:0 20px 44px rgba(0,33,81,.14); border-radius:16px; padding:30px 14px; background:#fff; }
.home-features .feature{ padding:8px 24px; position:relative; align-items:center; }
.home-features .feature + .feature::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--border); }
.feature .fic{ width:56px; height:56px; border-radius:50%; background:var(--navy-800); color:#fff; font-size:23px; display:flex; align-items:center; justify-content:center; flex:none; }
.feature h4{ color:var(--heading); font-size:15px; margin-bottom:5px; }
.feature p{ font-size:12.5px; color:var(--muted); }

/* ---------- About: foto | teks | statistik ---------- */
.about-section{ background:var(--bg); }
.about-grid{ grid-template-columns:360px 1fr 250px; gap:48px; align-items:center; }
.about-img{ aspect-ratio:auto; height:300px; border-radius:14px; background-size:cover; background-position:center; background-color:#dde6f2; box-shadow:var(--shadow); }
.about-text .eyebrow{ color:var(--gold-500); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; }
.about-text h2{ color:var(--heading); font-size:30px; margin:10px 0 14px; }
.about-text .btn-blue{ margin-top:18px; }
.about-stats{ display:flex; flex-direction:column; gap:24px; padding-left:36px; border-left:1px solid var(--border); }
.about-stats .stat{ display:flex; align-items:center; gap:14px; text-align:left; }
.about-stats .stat .sic{ width:34px; height:34px; color:var(--gold-500); font-size:24px; flex:none; display:grid; place-items:center; }
.about-stats .num{ font-family:var(--font-head); font-weight:800; font-size:26px; color:var(--heading); line-height:1.05; }
.about-stats .lbl{ font-size:13px; color:var(--muted); }

/* ---------- News ---------- */
.news-section .section-head .eyebrow{ color:var(--gold-500); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; }
.news-section .section-head h2{ color:var(--heading); font-size:30px; margin-top:6px; }
.news-card{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.news-card .thumb{ position:relative; display:block; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:#dde6f2; }
.news-card .date-badge{ position:absolute; top:12px; right:12px; background:var(--navy-900); color:#fff; border-radius:10px; padding:8px 12px; text-align:center; line-height:1.05; box-shadow:0 6px 16px rgba(0,0,0,.22); }
.news-card .date-badge .d{ font-family:var(--font-head); font-weight:800; font-size:20px; display:block; }
.news-card .date-badge .m{ font-size:11px; opacity:.88; }
.news-card .body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.news-card h3{ color:var(--heading); font-size:17px; line-height:1.35; }
.news-card h3 a{ color:inherit; }
.news-card p{ font-size:13.5px; color:var(--muted); }
.news-card .more{ margin-top:auto; color:var(--blue-600); font-weight:600; font-size:13.5px; }

/* ---------- CTA band ---------- */
.cta-band{ display:flex; align-items:center; gap:28px; background:linear-gradient(100deg,#001b45,#0a2c63 60%,#10367a); border-radius:18px; padding:34px 42px; color:#fff; position:relative; overflow:hidden; }
.cta-band .cta-icon{ width:74px; height:74px; border-radius:50%; border:2px solid rgba(255,255,255,.55); display:grid; place-items:center; flex:none; }
.cta-band .cta-text{ flex:1; }
.cta-band .cta-text h3{ font-size:22px; color:#fff; margin:0; }
.cta-band .cta-text p{ color:#cfdaf0; margin-top:4px; }

/* ---------- Buttons refresh ---------- */
.btn-gold{ background:var(--gold-500); color:#3a2a05; font-weight:700; }
.btn-gold:hover{ background:var(--gold-600); color:#3a2a05; }
.btn-blue{ background:var(--blue-600); color:#fff; }
.btn-blue:hover{ background:#0a2c63; color:#fff; }
.btn-primary{ background:var(--blue-600); color:#fff; }
.btn-primary:hover{ background:#0a2c63; color:#fff; }

@media (max-width: 960px){
  .about-grid{ grid-template-columns:1fr; }
  .about-stats{ border-left:0; padding-left:0; flex-direction:row; flex-wrap:wrap; gap:18px 30px; }
  .home-hero h1{ font-size:36px; }
  .home-features{ grid-template-columns:repeat(2,1fr); }
  .home-features .feature + .feature::before{ display:none; }
  .cta-band{ flex-direction:column; text-align:center; }
}

/* ============================================================
   HOMEPAGE v2b — rapatkan jarak, foto landscape, ikon footer
   ============================================================ */
/* Jarak antar bagian lebih rapat */
.section{ padding-block:46px; }
.home-hero .container{ padding-block:74px 120px; }
.feature-wrap .home-features{ margin-top:-66px; }
.feature-wrap{ margin-bottom:4px; }
.about-text h2{ margin-top:8px; }
.news-section .section-head{ margin-bottom:22px; }

/* Foto About: persegi panjang (landscape) */
.about-grid{ grid-template-columns:380px 1fr 240px; }
.about-img{ height:248px; aspect-ratio:auto; }

/* ---------- Footer: kontak dengan ikon ---------- */
.footer .f-brand .contact-line{ display:flex; align-items:flex-start; gap:10px; margin:8px 0; color:#c7d2e6; font-size:14px; line-height:1.5; }
.footer .f-brand .contact-line svg{ flex:none; margin-top:3px; color:var(--gold-500); }
.footer .social{ display:flex; gap:10px; margin-top:14px; }
.footer .social a{ width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; }
.footer .social a:hover{ background:var(--gold-500); color:#0a2c63; }

/* Footer kontak di preview */
.pv-footer .contact-line{ display:flex; align-items:flex-start; gap:10px; margin:8px 0; font-size:14px; line-height:1.5; }
.pv-footer .contact-line svg{ flex:none; margin-top:3px; color:var(--gold-500); }

/* v2c: rapatkan jarak atas section berita (setengah) */
.news-section{ padding-top:23px; }

/* v2d: jarak antar section seragam 15px */
.section{ padding-top:15px; padding-bottom:0; }
.about-section{ padding-bottom:15px; }
.about-section + .section{ padding-top:0; }
.feature-wrap{ margin-bottom:0; }
.news-section .section-head{ margin-bottom:14px; }
.cta-band{ margin-top:15px; }

/* v2e: jarak antar section 20px */
.section{ padding-top:20px; padding-bottom:0; }
.about-section{ padding-bottom:20px; }
.about-section + .section{ padding-top:0; }
.cta-band{ margin-top:20px; }

/* v2f: jarak antar section SERAGAM 18px (final, konsisten termasuk ke footer) */
.section{ padding-top:0 !important; padding-bottom:0 !important; }
.feature-wrap{ margin-top:0 !important; margin-bottom:18px !important; }
.about-section{ margin-top:0 !important; }
.news-section{ margin-top:18px !important; }
.cta-band{ margin-top:40px !important; margin-bottom:0 !important; }
.footer{ margin-top:18px !important; }
.pv-footer{ margin-top:18px !important; }

/* v2g: beri jarak judul kartu berita dari tepi bawah foto */
.news-card .body{ padding-top:24px !important; gap:10px; }
.news-card h3{ margin-top:0; }

/* v2h: kurangi padding dalam kolom fitur agar teks muat */
.home-features{ padding:26px 10px !important; gap:12px !important; }
.home-features .feature{ padding:6px 14px !important; }
.home-features .feature h4{ font-size:14.5px; line-height:1.25; }
.home-features .feature p{ font-size:12px; line-height:1.4; }

/* v-guru: foto pada kartu profil + halaman profil guru */
.card-profile img.avatar{ display:block; }
.card-profile .avatar-ph{ display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:700; color:var(--blue-600); background:var(--blue-050); }
.guru-profile{ display:flex; gap:28px; align-items:flex-start; }
.guru-profile .gp-photo{ flex:none; width:200px; }
.guru-profile .gp-photo img,.guru-profile .gp-photo-ph{ width:200px; height:200px; border-radius:16px; object-fit:cover; box-shadow:var(--shadow-sm); border:1px solid var(--border); display:block; }
.guru-profile .gp-photo-ph{ display:flex; align-items:center; justify-content:center; font-size:72px; font-weight:700; color:var(--blue-600); background:var(--blue-050); }
.guru-profile .gp-main{ flex:1; min-width:0; }
.guru-profile .gp-name{ font-size:26px; margin:0 0 4px; color:var(--heading); }
.guru-profile .gp-role{ font-size:15px; color:var(--muted); margin-bottom:10px; }
.guru-profile .gp-badge{ margin-bottom:16px; }
.guru-profile .gp-data{ width:100%; border-collapse:collapse; margin:0 0 18px; }
.guru-profile .gp-data th,.guru-profile .gp-data td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:top; }
.guru-profile .gp-data th{ width:170px; color:var(--muted); font-weight:600; }
.guru-profile .gp-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.gp-bio{ margin-top:18px; }
.gp-bio h3{ margin:0 0 8px; font-size:18px; color:var(--heading); }
@media (max-width:640px){
.guru-profile{ flex-direction:column; align-items:center; text-align:center; }
.guru-profile .gp-data th{ width:auto; }
.guru-profile .gp-actions{ justify-content:center; }
}
/* ===== Profil Sekolah (disalin dari prototipe) ===== */
/* ===== ps-profil v1: halaman Profil Sekolah ===== */
.page-hero.has-img{ position:relative; background-size:cover; background-position:center; }
.page-hero.has-img::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,28,77,.93) 0%, rgba(17,42,112,.72) 55%, rgba(17,42,112,.40) 100%); }
.page-hero.has-img .container{ position:relative; z-index:1; }
.side-download{ margin-top:16px; background:var(--blue-050); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; gap:12px; align-items:flex-start; text-decoration:none; }
.side-download .ic{ width:38px; height:38px; flex:none; border-radius:10px; background:var(--blue-100); color:var(--blue-600); display:flex; align-items:center; justify-content:center; font-size:17px; }
.side-download strong{ display:block; color:var(--heading); font-size:14px; font-family:var(--font-head); }
.side-download p{ margin:3px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5; }
.ps-about{ display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }
.ps-about h2{ font-size:22px; color:var(--heading); margin:6px 0 12px; }
.ps-about p{ color:var(--text); margin-bottom:12px; line-height:1.75; font-size:14.5px; }
.ps-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.ps-photo img{ display:block; width:100%; height:100%; object-fit:cover; min-height:240px; }
.ps-stats{ display:flex; flex-wrap:wrap; gap:24px 30px; margin-top:10px; }
.ps-stat{ display:flex; align-items:center; gap:11px; }
.ps-stat .ic{ width:36px; height:36px; border-radius:10px; background:var(--blue-050); color:var(--blue-600); display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
.ps-stat .tx{ display:flex; flex-direction:column; }
.ps-stat .n{ font-family:var(--font-head); font-weight:700; color:var(--heading); font-size:17px; line-height:1.15; }
.ps-stat .l{ font-size:12px; color:var(--muted); }
.ps-card{ display:flex; flex-direction:column; }
.ps-card .ps-ic{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; flex:none; line-height:1; overflow:visible; }
.ps-ic.blue{ background:var(--blue-100); color:var(--blue-600); }
.ps-ic.teal{ background:var(--t-teal-bg); color:var(--t-teal-fg); }
.ps-ic.purple{ background:var(--t-purple-bg); color:var(--t-purple-fg); }
.ps-ic.ps-ic-img{ background:transparent; padding:0; }
.ps-ic-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.ps-card h3{ font-size:17px; color:var(--heading); margin-bottom:9px; }
.ps-card p{ color:var(--muted); font-size:14px; line-height:1.65; }
.ps-card ul{ list-style:none; margin:0; padding:0; }
.ps-card ul li{ position:relative; padding-left:22px; margin-bottom:8px; font-size:13.5px; color:var(--text); line-height:1.45; }
.ps-card ul li::before{ content:"\2713"; position:absolute; left:0; color:var(--green-solid); font-weight:700; }
.ps-more{ margin-top:auto; padding-top:14px; color:var(--blue-600); font-weight:600; font-size:13.5px; text-decoration:none; display:inline-flex; gap:6px; align-items:center; }
.ps-more:hover{ gap:9px; }
.ps-accre{ margin-top:22px; background:linear-gradient(120deg, var(--navy-900), var(--navy-700)); border-radius:var(--radius-lg); padding:30px 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#fff; }
.ps-accre-left{ display:flex; gap:18px; align-items:flex-start; }
.ps-accre-left .ic{ width:54px; height:54px; border-radius:13px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:25px; flex:none; }
.ps-accre-left h3{ font-size:19px; margin:2px 0 7px; color:#fff; }
.ps-accre-left p{ font-size:13.5px; color:rgba(255,255,255,.82); max-width:560px; line-height:1.6; }
.ps-accre-badge{ display:flex; align-items:center; gap:13px; flex:none; }
.ps-accre-badge .a{ position:relative; width:70px; height:70px; border-radius:50%; background:radial-gradient(circle at 34% 28%, #ffe7a6, var(--gold-500) 66%, #e8a31c 100%); color:var(--navy-900); font-family:var(--font-head); font-weight:800; font-size:31px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 3px rgba(255,255,255,.5), inset 0 0 0 4px rgba(192,120,8,.55), 0 0 0 4px #e0951a, 0 7px 16px rgba(0,0,0,.4); z-index:1; }
.ps-accre-badge .a::before, .ps-accre-badge .a::after{ content:""; position:absolute; top:56%; width:18px; height:42px; background:linear-gradient(180deg, #f7b733, #c97e0e); clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); box-shadow:0 3px 5px rgba(0,0,0,.3); z-index:-1; }
.ps-accre-badge .a::before{ left:13px; transform:rotate(16deg); }
.ps-accre-badge .a::after{ right:13px; transform:rotate(-16deg); }
.ps-accre-badge .a.a-img{ background:none; box-shadow:none; width:auto; height:auto; min-width:84px; }
.ps-accre-badge .a.a-img::before, .ps-accre-badge .a.a-img::after{ display:none; }
.ps-accre-badge .a.a-img img{ height:90px; width:auto; max-width:120px; display:block; }
.ps-accre-badge .t{ font-family:var(--font-head); font-weight:700; font-size:15px; line-height:1.3; color:#fff; }
.ps-accre-badge .t span{ display:block; font-weight:400; font-size:12.5px; color:rgba(255,255,255,.78); }
@media (max-width:860px){
.ps-about{ grid-template-columns:1fr; }
.ps-accre{ flex-direction:column; align-items:flex-start; }
}

/* ===== ps-profil v2: revisi (stats sejajar, ikon di samping judul, clamp 3 baris, modal) ===== */
.ps-stats{ flex-wrap:nowrap; justify-content:space-between; gap:16px; }
.ps-card .ps-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ps-card .ps-card-head .ps-ic{ margin-bottom:0; width:44px; height:44px; font-size:20px; flex:none; line-height:1; }
.ps-card .ps-card-head h3{ margin:0; }
.ps-clamp3{ display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; color:var(--muted); font-size:14px; line-height:1.6; }
.ps-modal{ position:fixed; inset:0; background:rgba(10,28,77,.55); display:none; align-items:center; justify-content:center; z-index:120; padding:20px; }
.ps-modal.open{ display:flex; }
.ps-modal-card{ background:#fff; border-radius:16px; max-width:560px; width:100%; padding:30px 32px; position:relative; box-shadow:var(--shadow-md); max-height:85vh; overflow:auto; }
.ps-modal-x{ position:absolute; top:12px; right:16px; background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color:var(--muted); }
.ps-modal-x:hover{ color:var(--heading); }
.ps-modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ps-modal-head h3{ margin:0; color:var(--heading); font-size:20px; }
.ps-modal-head .ps-ic{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:21px; flex:none; line-height:1; }
.ps-modal-body p{ margin:0 0 13px; color:var(--text); line-height:1.75; font-size:14.5px; }
.ps-modal-body p:last-child{ margin-bottom:0; }
.ps-modal-body ul{ margin:6px 0 0; padding:0; list-style:none; }
.ps-modal-body ul li{ position:relative; padding-left:24px; margin-bottom:10px; line-height:1.5; font-size:14px; color:var(--text); }
.ps-modal-body ul li::before{ content:"\2713"; position:absolute; left:0; color:var(--green-solid); font-weight:700; }
@media (max-width:560px){ .ps-stats{ flex-wrap:wrap; } }

/* ===== ps-profil v3: foto popup, tombol center, stats 1 baris, sidebar bertingkat ===== */
.ps-stats{ flex-wrap:wrap; gap:14px 26px; }
.ps-stat .tx{ flex-direction:row; align-items:baseline; gap:6px; }
.ps-stat .n{ font-size:15px; }
.ps-stat .l{ font-size:12.5px; }
.ps-photo{ cursor:pointer; display:block; position:relative; }
.ps-photo::after{ content:"\1F50D"; position:absolute; right:12px; bottom:12px; width:34px; height:34px; border-radius:50%; background:rgba(10,28,77,.65); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; opacity:0; transition:opacity .2s; }
.ps-photo:hover::after{ opacity:1; }
.ps-modal-body img{ width:100%; border-radius:10px; display:block; }
.ps-card .ps-more-btn{ margin-top:auto; align-self:center; }
.ps-sekilas-more{ display:inline-block; margin-top:4px; color:var(--blue-600); font-weight:600; font-size:13.5px; text-decoration:none; }
.ps-sekilas-more:hover{ text-decoration:underline; }
.side-nav .sn-parent{ width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; color:var(--text); border-radius:8px; font-size:14px; }
.side-nav .sn-parent:hover{ background:var(--blue-050); color:var(--heading); }
.side-nav .sn-caret{ transition:transform .2s; font-size:10px; color:var(--muted); }
.side-nav .sn-group.open .sn-caret{ transform:rotate(90deg); }
.side-nav .sn-children{ display:none; padding-left:8px; margin:2px 0 4px 10px; border-left:2px solid var(--border); }
.side-nav .sn-group.open .sn-children{ display:block; }
.side-nav .sn-children a{ font-size:13px; padding:7px 12px; color:var(--muted); }
.side-nav .sn-children a:hover{ color:var(--blue-600); }

/* ===== ps-profil v4: stats 1 baris memanjang + jarak baca selengkapnya ===== */
.ps-stats{ flex-wrap:nowrap; gap:10px 18px; }
.ps-stat{ white-space:nowrap; }
.ps-stat .l{ white-space:nowrap; }
.ps-sekilas-more{ display:inline-block; margin-top:9px; }

/* ===== ps-profil v5: stats pindah ke bawah, full width 1 baris ===== */
.panel > .ps-stats{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); justify-content:space-between; }

/* ===== ps-profil v6: jarak teks kartu ke tombol ===== */
.ps-card .ps-clamp3{ margin-bottom:18px; }

.ps-accre-left .ic img{ width:100%; height:100%; object-fit:contain; padding:7px; border-radius:11px; }

/* ============ Berita (News) page ============ */
.berita-layout{ display:grid; grid-template-columns:260px 1fr 300px; gap:28px; align-items:start; }
.berita-main{ min-width:0; }
.berita-toolbar{ display:flex; gap:12px; margin-bottom:22px; align-items:center; }
.berita-search{ position:relative; flex:1; }
.berita-search input{ width:100%; padding:11px 14px 11px 38px; border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; font-size:14px; background:#fff; color:var(--text); }
.berita-search input:focus{ outline:none; border-color:var(--blue-600); }
.berita-search .si{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:13px; opacity:.6; }
.berita-select{ position:relative; }
.berita-select select{ appearance:none; -webkit-appearance:none; padding:11px 32px 11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; font:inherit; font-size:14px; color:var(--text); cursor:pointer; }
.berita-select select:focus{ outline:none; border-color:var(--blue-600); }
.berita-select::after{ content:"\25be"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted-2); pointer-events:none; font-size:12px; }
.berita-sort{ margin-left:auto; }
.news-tag{ display:inline-block; align-self:flex-start; font-family:var(--font-head); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:999px; }
.news-tag.blue{ background:var(--t-blue-bg); color:var(--t-blue-fg); }
.news-tag.green{ background:var(--t-green-bg); color:var(--t-green-fg); }
.news-tag.orange{ background:var(--t-orange-bg); color:var(--t-orange-fg); }
.news-tag.teal{ background:var(--t-teal-bg); color:var(--t-teal-fg); }
.news-tag.purple{ background:var(--t-purple-bg); color:var(--t-purple-fg); }
.news-featured{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); margin-bottom:26px; }
.nf-top{ display:grid; grid-template-columns:260px 1fr; gap:20px; align-items:stretch; margin-bottom:14px; }
.nf-head{ display:flex; flex-direction:column; justify-content:center; gap:10px; }
.nf-head .news-tag{ margin:0; }
.news-featured .nf-img{ display:block; width:100%; height:100%; min-height:120px; border-radius:8px; background-size:cover; background-position:center; }
.news-featured .nf-body{ display:flex; flex-direction:column; }
.news-featured h2{ font-size:23px; color:var(--heading); line-height:1.28; margin:0; font-family:var(--font-head); }
.news-meta{ display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:13px; margin:12px 0 14px; }
.news-featured p{ color:var(--text); font-size:14.5px; line-height:1.65; margin-bottom:20px; }
.berita-h{ font-size:19px; color:var(--heading); margin:6px 0 16px; font-family:var(--font-head); font-weight:700; }
.news-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.news-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:.18s; }
.news-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.news-card .nc-img{ display:block; height:118px; background-size:cover; background-position:center; }
.news-card .nc-body{ padding:14px 15px 16px; display:flex; flex-direction:column; flex:1; }
.news-card .news-tag{ margin-bottom:9px; font-size:10px; padding:3px 9px; }
.news-card h4{ font-size:14px; line-height:1.35; color:var(--heading); margin-bottom:8px; font-family:var(--font-head); }
.news-card .nc-date{ color:var(--muted-2); font-size:12px; margin-bottom:8px; }
.news-card p{ color:var(--muted); font-size:12.7px; line-height:1.55; margin-bottom:12px; flex:1; }
.news-readmore{ font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--blue-600); display:inline-flex; align-items:center; gap:5px; }
.news-card .news-readmore{ font-size:12.5px; }
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:30px; }
.pagination a{ min-width:38px; height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; color:var(--text); font-size:14px; font-weight:500; }
.pagination a:hover{ border-color:var(--blue-600); color:var(--blue-600); }
.pagination a.active{ background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
.pagination .dots{ display:inline-flex; align-items:flex-end; padding:0 4px; color:var(--muted-2); }
.berita-aside{ display:flex; flex-direction:column; gap:22px; }
.widget{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.widget-h{ font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--heading); padding:15px 18px; border-bottom:1px solid var(--border); }
.cat-list a{ display:flex; align-items:center; justify-content:space-between; padding:11px 18px; color:var(--text); font-size:14px; border-bottom:1px solid var(--border); }
.cat-list a:last-child{ border-bottom:0; }
.cat-list a:hover{ background:var(--blue-050); color:var(--blue-600); }
.cat-list .cnt{ background:var(--blue-100); color:var(--blue-600); font-size:12px; font-weight:600; min-width:26px; height:22px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
.pop-list{ padding:4px 2px; }
.pop-item{ display:flex; gap:12px; padding:13px 10px; border-radius:var(--radius-sm); align-items:center; }
.pop-item + .pop-item{ border-top:1px solid var(--border); }
.pop-item:hover{ background:var(--blue-050); }
.pop-rank{ width:26px; height:26px; flex:none; border-radius:50%; background:var(--navy-800); color:#fff; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.pop-thumb{ width:56px; height:56px; flex:none; border-radius:10px; background-size:cover; background-position:center; }
.pop-item .pi-body{ min-width:0; }
.pop-item .pi-body strong{ display:block; font-size:13.5px; font-weight:600; color:var(--heading); line-height:1.35; margin-bottom:5px; }
.pop-item .pi-body .pi-date{ display:block; color:var(--muted-2); font-size:11.5px; }
.widget-foot{ padding:14px 18px; border-top:1px solid var(--border); }
.widget-foot .btn{ width:100%; justify-content:center; }
@media(max-width:1080px){ .berita-layout{ grid-template-columns:1fr; } .berita-aside{ flex-direction:row; flex-wrap:wrap; } .berita-aside .widget{ flex:1 1 300px; } }
@media(max-width:880px){ .news-grid{ grid-template-columns:repeat(2,1fr); } .nf-top{ grid-template-columns:1fr; } .news-featured .nf-img{ height:190px; } }
@media(max-width:560px){ .news-grid{ grid-template-columns:1fr; } .berita-toolbar{ flex-wrap:wrap; } .berita-sort{ margin-left:0; } }
/* ============ /Berita ============ */

/* PJAX loading state */
#content.is-loading{opacity:.55;transition:opacity .15s ease;pointer-events:none}

/* ============ Sejarah ============ */
.tl-item .tl-img{ background-size:cover; background-position:center; }
.sej-quote{ margin-top:22px; background:var(--blue-050); border:1px solid var(--blue-100); border-left:4px solid var(--blue-600); border-radius:var(--radius); padding:18px 24px; }
.sej-quote .q{ font-family:var(--font-head); font-size:38px; line-height:.6; color:var(--blue-600); opacity:.45; }
.sej-quote p{ font-style:italic; color:var(--navy-800); font-size:15px; margin:2px 0 8px; }
.sej-quote .by{ font-size:13px; font-weight:600; color:var(--muted); }
.tonggak, .infosingkat{ padding:4px 0; }
.tg-item, .is-row{ display:flex; gap:12px; align-items:flex-start; padding:11px 18px; border-bottom:1px solid var(--border); }
.tg-item:last-child, .is-row:last-child{ border-bottom:0; }
.tg-ic, .is-ic{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--blue-050); color:var(--blue-600); display:grid; place-items:center; font-size:15px; }
.tg-yr{ font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--gold-500); }
.tg-tx{ font-size:13px; color:var(--text); }
.is-l{ font-size:12px; color:var(--muted); }
.is-v{ font-size:13.5px; font-weight:600; color:var(--navy-800); }
@media(max-width:560px){ .tl-item{ grid-template-columns:40px 1fr; } .tl-item .tl-img{ display:none; } }
/* ============ /Sejarah ============ */

/* ============ Visi & Misi ============ */
.vm-visi{ display:flex; gap:18px; align-items:flex-start; padding:12px 0; }
.vm-icon{ width:64px; height:64px; flex:none; border-radius:50%; background:var(--blue-600); color:#fff; display:grid; place-items:center; }
.vm-quote{ flex:1; background:var(--blue-050); border:1px solid var(--blue-100); border-left:4px solid var(--blue-600); border-radius:var(--radius); padding:18px 22px; font-size:15.5px; line-height:1.6; color:var(--navy-800); position:relative; }
.vm-quote .q{ font-family:var(--font-head); font-size:32px; line-height:.6; color:var(--blue-600); opacity:.35; }
.vm-misi{ display:grid; gap:16px; }
.vm-item{ display:flex; gap:14px; align-items:flex-start; }
.vm-num{ width:42px; height:42px; flex:none; border-radius:8px; background:var(--blue-600); color:#fff; font-family:var(--font-head); font-weight:700; font-size:16px; display:grid; place-items:center; }
.vm-item p{ font-size:14px; line-height:1.6; color:var(--text); margin-top:10px; }
.vm-footer{ margin-top:22px; background:var(--blue-050); border:1px solid var(--blue-100); border-radius:var(--radius); padding:18px 24px; position:relative; overflow:hidden; }
.vm-footer .q{ font-family:var(--font-head); font-size:38px; line-height:.6; color:var(--blue-600); opacity:.3; }
.vm-footer p{ font-size:14.5px; line-height:1.65; color:var(--navy-800); margin:6px 0 0; max-width:calc(100% - 160px); }
.vm-footer .vf-icon{ position:absolute; bottom:0; right:12px; opacity:.15; pointer-events:none; }
.nilai-list{ padding:4px 0; }
.nl-item{ display:flex; gap:12px; align-items:flex-start; padding:12px 18px; border-bottom:1px solid var(--border); }
.nl-item:last-child{ border-bottom:0; }
.nl-ic{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--blue-050); color:var(--blue-600); display:grid; place-items:center; font-size:16px; }
.nl-name{ font-size:14px; font-weight:600; color:var(--navy-800); margin-bottom:2px; }
.nl-desc{ font-size:12.5px; color:var(--muted); }
@media(max-width:560px){ .vm-visi{ flex-direction:column; } .vm-quote{ font-size:14px; } .vm-footer p{ max-width:100%; } .vm-footer .vf-icon{ display:none; } }
/* ============ /Visi & Misi ============ */

/* ============ OSIS ============ */
.osis-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:8px}
.osis-tab{padding:9px 16px;background:transparent;border:0;border-radius:8px 8px 0 0;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s}
.osis-tab:hover{background:var(--blue-050);color:var(--blue-600)}
.osis-tab.active{background:var(--navy-800);color:#fff}
.osis-about{display:flex;gap:24px;align-items:flex-start}
.osis-about img{width:320px;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);flex:none}
.osis-about p{font-size:14px;line-height:1.65;color:var(--text);margin-bottom:18px}
.osis-meta{display:grid;gap:12px}
.om-item{display:flex;gap:12px;align-items:center}
.om-ic{width:38px;height:38px;flex:none;border-radius:50%;background:var(--blue-050);color:var(--blue-600);display:grid;place-items:center;font-size:16px}
.om-l{font-size:12px;color:var(--muted)}
.om-v{font-size:14px;font-weight:600;color:var(--navy-800)}
.osis-preview-struktur{display:flex;gap:16px;margin:18px 0;flex-wrap:wrap}
.ops-item{flex:1;min-width:180px;text-align:center;background:var(--blue-050);border:1px solid var(--blue-100);border-radius:var(--radius);padding:18px}
.ops-badge{font-size:12px;font-weight:600;color:var(--blue-600);margin-bottom:8px}
.ops-name{font-size:15px;font-weight:600;color:var(--navy-800);margin-bottom:2px}
.ops-kelas{font-size:13px;color:var(--muted)}
.osis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.osis-card h4{font-size:16px;margin-bottom:12px}
.osis-card ul{list-style:none;padding:0;margin:0 0 12px}
.osis-card ul li{padding:6px 0;font-size:13.5px;color:var(--text);border-bottom:1px solid var(--border)}
.osis-card ul li:last-child{border:0}
.osis-card a{font-size:13.5px;color:var(--blue-600);font-weight:600}
.osis-pembina{text-align:center;padding:18px}
.osis-pembina img{width:80px;height:80px;border-radius:50%;margin-bottom:12px;object-fit:cover}
.op-name{font-size:15px;font-weight:600;color:var(--navy-800);margin-bottom:2px}
.op-pos{font-size:13px;color:var(--muted);margin-bottom:4px}
.op-email{font-size:12px;color:var(--blue-600);margin-bottom:12px}
.osis-org{padding:12px 0}
.oo-badge{display:inline-block;padding:6px 12px;background:var(--navy-800);color:#fff;border-radius:6px;font-size:12px;font-weight:600;margin-bottom:12px}
.oo-head{text-align:center;margin:0 auto 24px;max-width:240px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.oo-head img{display:block;width:80px;height:80px;border-radius:50%;margin:8px auto;object-fit:cover}
.oo-name{font-size:15px;font-weight:600;color:var(--navy-800)}
.oo-pos,.oo-kelas{font-size:13px;color:var(--muted)}
.oo-row{display:flex;justify-content:center;gap:18px;margin:18px 0;flex-wrap:wrap}
.oo-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center;min-width:160px;box-shadow:var(--shadow-sm)}
.oo-card img{display:block;width:72px;height:72px;border-radius:50%;margin:8px auto;object-fit:cover}
.oo-ketua{border-top:3px solid var(--gold-500)}
.oo-seksi{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-top:24px}
.oo-seksi .oo-card{padding:14px}
.oo-seksi .oo-card{min-width:0}
.oo-b-blue{background:var(--blue-600)}
.oo-b-green{background:#1fb255}
.oo-b-orange{background:#f5a623}
.oo-b-red{background:#d23b3b}
.oo-b-teal{background:#0f8c84}
.oo-b-purple{background:#7a3fce}
.oo-b-gold{background:var(--gold-500);color:var(--navy-800)}
.oo-b-pink{background:#e91e63}
.oo-card ul{list-style:none;padding:0;margin:8px 0 0;text-align:left}
.oo-card ul li{font-size:12px;color:var(--muted);padding:3px 0}
.osis-cta{background:var(--blue-050);color:var(--navy-800);border:1px solid var(--blue-100);border-radius:14px;padding:22px 26px;margin-top:24px;display:flex;gap:18px;align-items:center}
.osis-cta svg{flex:none;stroke:var(--blue-600);width:44px;height:44px}
.osis-cta h4{font-size:17px;margin-bottom:6px;color:var(--navy-800)}
.osis-cta p{font-size:13.5px;color:var(--muted);margin:0;max-width:640px}
.osis-cta .btn{flex:0 0 auto;margin-left:auto;white-space:nowrap}
.osis-filter{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.of-btn{padding:8px 14px;background:var(--blue-050);border:1px solid var(--blue-100);border-radius:8px;font-size:13px;font-weight:600;color:var(--blue-600);cursor:pointer;transition:all .2s}
.of-btn:hover{background:var(--blue-100)}
.of-btn.active{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.of-btn.is-hidden{display:none}
.of-more{padding:8px 14px;background:transparent;border:1px dashed var(--blue-100);border-radius:8px;font-size:13px;font-weight:600;color:var(--blue-600);cursor:pointer;transition:all .2s}
.of-more:hover{background:var(--blue-050);border-style:solid}
.osis-program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.opg-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);transition:all .2s}
.opg-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.opg-icon{width:52px;height:52px;border-radius:50%;background:var(--blue-050);color:var(--blue-600);display:grid;place-items:center;font-size:24px;margin-bottom:12px}
.opg-badge{display:inline-block;padding:5px 10px;background:var(--blue-050);color:var(--blue-600);border-radius:6px;font-size:11px;font-weight:600;margin-bottom:10px}
.opg-badge.akademik{background:#dbeafe;color:#1e3a8a}
.opg-badge.keagamaan{background:#d1fae5;color:#065f46}
.opg-badge.sosial{background:#ffe4e6;color:#9f1239}
.opg-badge.lingkungan{background:#d1fae5;color:#14532d}
.opg-badge.olahraga{background:#fef3c7;color:#92400e}
.opg-item h4{font-size:15px;margin-bottom:8px}
.opg-item p{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.opg-time{font-size:12px;color:var(--blue-600);font-weight:600}
.osis-stat{padding:4px 0}
.os-item{display:flex;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border)}
.os-item:last-child{border:0}
.os-ic{width:40px;height:40px;flex:none;border-radius:50%;background:var(--blue-050);color:var(--blue-600);display:grid;place-items:center;font-size:16px}
.os-v{font-family:var(--font-head);font-size:24px;font-weight:700;color:var(--navy-800)}
.os-l{font-size:12px;color:var(--muted)}
.osis-kegiatan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.okg-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:all .2s}
.okg-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.okg-item img{width:100%;aspect-ratio:16/10;object-fit:cover}
.okg-badge{display:inline-block;padding:4px 8px;background:var(--blue-600);color:#fff;border-radius:4px;font-size:11px;font-weight:600;margin:12px 0 0 12px}
.okg-badge.blue{background:#2563eb}
.okg-badge.orange{background:#f59e0b}
.okg-badge.green{background:#10b981}
.okg-badge.purple{background:#7c3aed}
.okg-badge.teal{background:#14b8a6}
.okg-badge.red{background:#ef4444}
.okg-badge.gold{background:#f59e0b}
.okg-item h4{font-size:15px;margin:8px 12px 6px;line-height:1.3}
.okg-date{font-size:12px;color:var(--blue-600);font-weight:600;margin:0 12px 6px}
.okg-item p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 12px 12px}
.osis-mini-cal{font-size:12px}
.omc-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.omc-row span{padding:6px;text-align:center;border-radius:4px}
.omc-row span:not(:empty):hover{background:var(--blue-050);cursor:pointer}
.omc-row .blue{background:var(--blue-600);color:#fff;font-weight:600}
.omc-row .orange{background:#f59e0b;color:#fff;font-weight:600}
.omc-row .green{background:#10b981;color:#fff;font-weight:600}
.omc-row .purple{background:#7c3aed;color:#fff;font-weight:600}
.osis-upcoming{padding:4px 0}
.ou-item{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border)}
.ou-item:last-child{border:0}
.ou-date{flex:none;width:48px;text-align:center;background:var(--blue-050);border-radius:8px;padding:6px 0}
.ou-d{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--navy-800);line-height:1}
.ou-m{font-size:11px;color:var(--muted);text-transform:uppercase}
.ou-name{font-size:14px;font-weight:600;color:var(--navy-800);margin-bottom:4px}
.ou-time{font-size:12px;color:var(--muted);line-height:1.4}
.osis-juara-carousel{display:flex;gap:18px;overflow-x:auto;padding:12px 0;scroll-snap-type:x mandatory}
.ojc-item{flex:none;width:320px;background:linear-gradient(135deg,#f0f4fc,#e0e8f9);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;scroll-snap-align:start;position:relative}
.ojc-item.gold{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#f59e0b}
.ojc-item.silver{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-color:#94a3b8}
.ojc-item.bronze{background:linear-gradient(135deg,#fed7aa,#fdba74);border-color:#f97316}
.ojc-item.blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-color:#3b82f6}
.ojc-medal{font-size:48px;margin-bottom:12px}
.ojc-rank{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--navy-800);margin-bottom:8px}
.ojc-item h4{font-size:15px;margin-bottom:12px;line-height:1.4}
.ojc-year{font-size:13px;color:var(--muted);font-weight:600}
.osis-carousel-nav{display:flex;justify-content:center;gap:12px;margin-top:12px}
.ocn-prev,.ocn-next{width:36px;height:36px;border-radius:50%;background:var(--navy-800);color:#fff;border:0;font-size:20px;cursor:pointer;display:grid;place-items:center}
.ocn-prev:hover,.ocn-next:hover{background:var(--blue-600)}
.osis-prestasi-list{display:flex;flex-direction:column;gap:16px}
.opl-item{display:flex;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:all .2s}
.opl-item:hover{box-shadow:var(--shadow-md)}
.opl-trophy{font-size:32px;flex:none}
.opl-content h4{font-size:15px;margin-bottom:6px}
.opl-content p{font-size:13px;color:var(--muted);margin-bottom:8px}
.opl-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.opl-badge{padding:4px 10px;background:var(--blue-050);color:var(--blue-600);border-radius:6px;font-size:11px;font-weight:600}
.opl-badge.organisasi{background:#dbeafe;color:#1e3a8a}
.opl-badge.akademik{background:#dcfce7;color:#14532d}
.opl-badge.kreativitas-seni{background:#fce7f3;color:#9f1239}
.opl-year{font-size:13px;color:var(--gold-500);font-weight:600}
@media(max-width:880px){.osis-about{flex-direction:column}.osis-about img{width:100%}.osis-grid{grid-template-columns:1fr}.oo-seksi{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
@media(max-width:560px){.osis-tabs{flex-direction:column}.osis-tab{width:100%;text-align:left}.osis-preview-struktur{flex-direction:column}.osis-program-grid,.osis-kegiatan-grid{grid-template-columns:1fr}.osis-juara-carousel{flex-direction:column;align-items:stretch}.ojc-item{width:100%}}
/* ============ /OSIS ============ */

/* ===== OSIS: penyempurnaan layout sesuai mockup ===== */
.osis-layout-2{grid-template-columns:260px 1fr}
.osis-top{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start;margin-bottom:22px}
.osis-tentang{margin:0}
.oa2{display:grid;grid-template-columns:1fr 190px;gap:18px;align-items:start}
.oa2-text p{margin:0 0 14px;color:var(--text);line-height:1.7;font-size:14px}
.oa2-photo img{width:100%;height:180px;object-fit:cover;border-radius:10px}
.osis-pembina-card{margin:0;text-align:center;padding:0;overflow:hidden}
.osis-pembina-card .opc-h{background:var(--navy-800);color:#fff;font-family:var(--font-head);font-weight:600;font-size:15px;padding:12px}
.osis-pembina-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:16px auto 10px;display:block;border:3px solid var(--blue-100)}
.osis-pembina-card .op-name{font-weight:700;color:var(--navy-800);font-size:15px}
.osis-pembina-card .op-pos{color:var(--muted);font-size:13px;margin:2px 0}
.osis-pembina-card .op-email{color:var(--blue-600);font-size:12.5px;margin-bottom:14px;word-break:break-all;padding:0 14px}
.osis-pembina-card .btn{margin-bottom:18px}
.osis-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.osis-col{margin:0;display:flex;flex-direction:column}
.osis-col h3{font-size:15px;color:var(--navy-800);margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--blue-100)}
.osis-col .btn{margin-top:auto;width:100%;text-align:center}
.oc-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.oc-struk{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--blue-050);border-radius:8px;padding:9px 12px}
.ocs-jab{font-size:12.5px;color:var(--muted);font-weight:600}
.ocs-nama{font-size:13.5px;color:var(--navy-800);font-weight:700;text-align:right}
.oc-prog{display:flex;gap:10px;align-items:flex-start}
.ocp-ic{font-size:20px;line-height:1.2;flex:0 0 auto}
.ocp-t{font-weight:700;color:var(--navy-800);font-size:13.5px}
.ocp-d{color:var(--muted);font-size:12.5px;line-height:1.5}
.oc-pres{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--border);padding-bottom:9px}
.ocpr-t{font-size:13px;color:var(--text);font-weight:600}
.oc-year{flex:0 0 auto;background:var(--gold-500);color:#3a2c00;font-weight:700;font-size:11.5px;border-radius:20px;padding:2px 10px}
.osis-cta-banner{margin-top:22px;background:linear-gradient(120deg,var(--navy-800),var(--blue-600));color:#fff;border-radius:14px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.osis-cta-banner h3{margin:0 0 6px;color:#fff;font-size:19px}
.osis-cta-banner p{margin:0;color:rgba(255,255,255,.85);font-size:14px;max-width:560px}
.osis-cta-banner .btn-gold{flex:0 0 auto}
.btn-gold{background:var(--gold-500);color:#3a2c00;font-weight:700;border:none}
.btn-gold:hover{filter:brightness(1.05)}
.osis-org .oo-head,.osis-org .oo-row,.osis-org .oo-seksi{position:relative}
.osis-org .oo-head::after{content:"";position:absolute;left:50%;bottom:-20px;width:2px;height:20px;background:#cbd5e1;transform:translateX(-50%)}
.osis-org .oo-row-lead::before,.osis-org .oo-seksi::before{content:"";position:absolute;left:50%;width:2px;height:20px;background:#cbd5e1;transform:translateX(-50%)}
.osis-org .oo-row-lead::before{top:-20px}
.osis-org .oo-seksi{margin-top:20px}
.osis-org .oo-seksi::before{top:-20px}
@media (max-width:1080px){
.osis-top{grid-template-columns:1fr}
.osis-3col{grid-template-columns:1fr}
}
@media (max-width:880px){
.osis-layout-2{grid-template-columns:1fr}
.oa2{grid-template-columns:1fr}
.osis-cta-banner{flex-direction:column;text-align:center}
}

/* OSIS: meta horizontal di bawah teks & gambar */
.osis-tentang .osis-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.osis-tentang .om-item{display:flex;align-items:center;gap:8px;background:var(--blue-050);border-radius:10px;padding:10px 12px;min-width:0}
.osis-tentang .om-ic{font-size:18px;line-height:1;flex:0 0 auto}
.osis-tentang .om-item>div{min-width:0}
.osis-tentang .om-l{font-size:11.5px;color:var(--muted);line-height:1.3}
.osis-tentang .om-v{font-size:13.5px;font-weight:700;color:var(--navy-800);line-height:1.3}
@media (max-width:680px){
.osis-tentang .osis-meta{grid-template-columns:1fr}
}

/* OSIS: garis pembatas bawah judul Tentang OSIS */
.osis-tentang h2{padding-bottom:12px;border-bottom:2px solid var(--blue-100);margin-bottom:16px}

/* OSIS: tombol CTA sidebar (putih + ikon) seperti mockup */
.side-cta{text-align:center}
.side-cta h4{font-size:16px;font-weight:700}
.side-cta p{line-height:1.6}
.side-cta .side-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--blue-600);font-weight:700;border:1px solid var(--blue-100);box-shadow:var(--shadow-sm)}
.side-cta .side-cta-btn:hover{background:var(--blue-050);color:var(--blue-600)}
.side-cta .side-cta-btn svg{flex:0 0 auto}

/* OSIS: kolom kanan (pembina + unduhan) & kartu unduh panduan */
.osis-side-col{display:flex;flex-direction:column;gap:18px}
.osis-download-card{display:flex;align-items:center;gap:14px;text-decoration:none;padding:18px;transition:box-shadow .15s,transform .15s}
.osis-download-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.osis-download-card .odc-ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--blue-100);color:var(--blue-600);display:flex;align-items:center;justify-content:center}
.osis-download-card .odc-t{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy-800);font-size:15px;line-height:1.3}
.osis-download-card .odc-d{display:block;color:var(--muted);font-size:12.5px;line-height:1.45;margin-top:3px}

/* OSIS struktur: judul center + garis pemisah */
.osis-org-title{text-align:center;padding-bottom:14px;border-bottom:2px solid var(--blue-100);margin-bottom:8px}

/* Program Kerja OSIS: header tahun + tombol lainnya + warna kategori */
.osis-prog-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:2px solid var(--blue-100)}
.osis-prog-head h2{margin:0;font-size:15px}
.osis-prog-about .widget-h{font-size:24px}
.osis-more{text-align:center;margin-top:22px}
.opg-badge.kreativitas-seni{background:#fef3c7;color:#92400e}
.opg-badge.olahraga{background:#ede9fe;color:#6b21a8}
.opg-badge.kepribadian{background:#e0e7ff;color:#3730a3}
.opg-icon.akademik{background:#dbeafe;color:#1e3a8a}
.opg-icon.keagamaan{background:#d1fae5;color:#065f46}
.opg-icon.sosial{background:#ffe4e6;color:#9f1239}
.opg-icon.lingkungan{background:#dcfce7;color:#14532d}
.opg-icon.kreativitas-seni{background:#fef3c7;color:#92400e}
.opg-icon.olahraga{background:#ede9fe;color:#6b21a8}
.opg-icon.kepribadian{background:#e0e7ff;color:#3730a3}

/* Program Kerja OSIS: info dipindah ke bawah (3 kolom, penuh lebar) */
.osis-prog-info{display:grid;grid-template-columns:1fr 300px;gap:18px;margin-top:18px;align-items:start}
.osis-prog-about{margin-bottom:18px}
.osis-prog-info .widget{margin-bottom:0}
.osis-prog-info .side-cta{margin:0}
@media(max-width:880px){.osis-prog-info{grid-template-columns:1fr}}

/* Program Kerja OSIS: kartu ikon-kiri (3 kolom) */
.opg-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.opg-top .opg-icon{margin:0;flex:none;width:60px;height:60px;font-size:26px}
.opg-head{flex:1;min-width:0}
.opg-head h4{margin-bottom:8px;line-height:1.3}
.opg-head .opg-badge{margin-bottom:0}
.opg-item p{margin-bottom:12px}
.opg-time{margin-top:4px}
@media(max-width:980px){.osis-program-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.osis-program-grid{grid-template-columns:1fr}}

/* Statistik Program: grid 2x2 agar tidak ada ruang kosong */
.osis-stat{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 18px}
.os-item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;align-items:center}
.os-item:last-child{border:1px solid var(--border)}
@media(max-width:600px){.osis-stat{grid-template-columns:1fr}}

.osis-prog-side{display:flex;flex-direction:column;gap:18px}

/* Satukan 3 widget Program dalam satu frame */
.osis-prog-info.panel{padding:22px;align-items:stretch;margin-top:18px}
.osis-prog-info.panel>.widget{border:0;box-shadow:none;background:transparent;border-radius:0}
.osis-prog-info.panel .widget-h{padding:0 0 12px;border-bottom:1px solid var(--border)}
.osis-prog-info.panel .osis-stat{padding:14px 0 0}
.osis-prog-info.panel .osis-prog-side{border-left:1px solid var(--border);padding-left:22px}
.osis-prog-info.panel .osis-download-card{border:1px solid var(--border);box-shadow:none;border-radius:var(--radius-sm)}
.osis-prog-info.panel .osis-download-card:hover{box-shadow:var(--shadow-sm);transform:none}
@media(max-width:880px){.osis-prog-info.panel .osis-prog-side{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:18px}}

/* Pagination Program Kerja OSIS */
.osis-pagination{display:flex;justify-content:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.op-page{min-width:38px;height:38px;padding:0 12px;border:1px solid var(--border);background:#fff;border-radius:var(--radius-sm);font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--navy-800);cursor:pointer;transition:.15s}
.op-page:hover:not(.is-disabled):not(.active){background:var(--blue-050);border-color:var(--blue-100)}
.op-page.active{background:var(--blue-600);color:#fff;border-color:var(--blue-600);cursor:default}
.op-page.is-disabled{opacity:.45;cursor:default}

/* Widget Kegiatan di bawah */
.osis-keg-info{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0;margin-top:18px;align-items:start}
.osis-keg-info .widget,.osis-keg-info .side-cta{margin:0}
@media(max-width:980px){.osis-keg-info{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:640px){.osis-keg-info{grid-template-columns:1fr}}

/* Kegiatan: garis judul + 1 frame */
.osis-keg-head{padding-bottom:14px;margin-bottom:16px;border-bottom:2px solid var(--blue-100)}
.osis-keg-head h2{margin:0}
.osis-keg-info.panel{padding:22px;align-items:stretch}
.osis-keg-info.panel>.widget{border:0;box-shadow:none;background:transparent;border-radius:0}
.osis-keg-info.panel .widget-h{padding:0 0 12px;border-bottom:1px solid var(--border)}
.osis-keg-info.panel>.widget:first-child{padding-right:22px}
.osis-keg-info.panel>.widget+.widget{border-left:1px solid var(--border);padding-left:22px;padding-right:22px}
.osis-keg-info.panel>.osis-keg-side{border-left:1px solid var(--border);padding-left:22px}
.osis-keg-info.panel>.osis-keg-side{display:flex;flex-direction:column;gap:16px}
.osis-keg-info.panel>.osis-keg-side .side-cta{width:100%}
@media(max-width:980px){.osis-keg-info.panel>.widget:first-child,.osis-keg-info.panel>.widget+.widget{padding-right:0}.osis-keg-info.panel>.widget+.widget,.osis-keg-info.panel>.osis-keg-side{border-left:0;padding-left:0}}


/* ===== Periode OSIS & Agenda ===== */
.osis-periode-select{display:inline-flex;align-items:center;gap:10px;margin-top:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);padding:8px 14px;border-radius:30px}
.osis-periode-select label{font-size:13px;font-weight:600;color:#fff;margin:0}
.osis-periode-select select{padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.92);color:#0a2c63;font-weight:600;font-size:13px;cursor:pointer}
.osis-keg-periode{display:inline-block;margin-left:10px;font-size:13px;font-weight:600;color:var(--blue-600);background:var(--blue-050);border:1px solid var(--blue-100);padding:3px 12px;border-radius:30px;vertical-align:middle}
.osis-cal-wrap{padding:18px}
.omc-label{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--navy-800);margin-bottom:12px;text-align:center}
.osis-mini-cal .omc-head span{font-weight:700;color:var(--muted)}
.osis-upcoming-empty{color:var(--muted);font-size:14px;padding:8px 2px}
.osis-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:14px;padding:30px 16px;background:var(--blue-050);border-radius:var(--radius)}

/* ===== Prestasi OSIS — penyelarasan tampilan dengan mockup ===== */
.osis-prestasi-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.osis-prestasi-head h2{margin:0;font-size:18px}
.opl-filter{display:flex;gap:10px;flex-wrap:wrap}
.opl-filter select{padding:8px 14px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:#fff;color:var(--text);font-family:inherit;cursor:pointer}
.opl-filter select:hover{border-color:var(--blue-100)}

/* Carousel juara: panah di sisi kiri & kanan */
.osis-juara-wrap{position:relative;padding:0 4px}
.osis-juara-wrap .ocn-prev,.osis-juara-wrap .ocn-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--navy-800);font-size:20px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm);display:grid;place-items:center;transition:.15s}
.osis-juara-wrap .ocn-prev:hover,.osis-juara-wrap .ocn-next:hover{background:var(--blue-050);border-color:var(--blue-100);color:var(--blue-600)}
.osis-juara-wrap .ocn-prev{left:-8px}
.osis-juara-wrap .ocn-next{right:-8px}
.osis-juara-wrap .osis-juara-carousel{display:flex;gap:14px;overflow-x:auto;padding:6px 30px 10px;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.osis-juara-wrap .osis-juara-carousel::-webkit-scrollbar{display:none}
.osis-juara-wrap .ojc-item{flex:0 0 calc((100% - 102px)/4);min-width:148px;width:auto;padding:18px 14px}
.osis-juara-wrap .ojc-medal{font-size:34px;margin-bottom:8px}
.osis-juara-wrap .ojc-rank{font-size:16px;margin-bottom:6px}
.osis-juara-wrap .ojc-item h4{font-size:13px;margin-bottom:8px;line-height:1.35}
.osis-juara-wrap .ojc-year{font-size:12.5px}
.osis-juara-wrap .ojc-item.gold .ojc-rank{color:#b45309}
.osis-juara-wrap .ojc-item.silver .ojc-rank{color:#475569}
.osis-juara-wrap .ojc-item.bronze .ojc-rank{color:#c2410c}
.osis-juara-wrap .ojc-item.blue .ojc-rank{color:#1d4ed8}
@media(max-width:1080px){.osis-juara-wrap .ojc-item{flex-basis:calc((100% - 88px)/3)}}
@media(max-width:640px){.osis-juara-wrap .ojc-item{flex-basis:calc((100% - 74px)/2)}}

/* Daftar prestasi: ikon lingkaran berwarna + meta di kanan */
.osis-prestasi-list .opl-item{align-items:center}
.opl-trophy{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex:none;background:var(--blue-050)}
.opl-trophy.gold{background:#fef3c7}
.opl-trophy.silver{background:#f1f5f9}
.opl-trophy.bronze{background:#ffedd5}
.opl-trophy.blue{background:#dbeafe}
.opl-trophy.green{background:#dcfce7}
.opl-content{flex:1;min-width:0}
.osis-prestasi-list .opl-meta{flex:none;flex-direction:column;align-items:flex-end;gap:8px}
.opl-badge.organisasi{background:#dcfce7;color:#166534}
.opl-badge.akademik{background:#ede9fe;color:#6d28d9}
.opl-badge.kreativitas-seni{background:#ffedd5;color:#c2410c}
.opl-empty{padding:18px;text-align:center;color:var(--muted);font-size:13.5px}
@media(max-width:560px){.osis-prestasi-list .opl-meta{flex-direction:row;align-items:center}}

/* Aside: ringkasan prestasi (override grid global .osis-stat) */
.osis-prestasi-trophy{text-align:center;padding:22px 18px 4px;font-size:64px;line-height:1}
.osis-prestasi-stat{display:block;padding:4px 18px 6px}
.osis-prestasi-stat .ops-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)}
.osis-prestasi-stat .ops-row:last-child{border-bottom:0}
.osis-prestasi-stat .ops-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;flex:none;background:var(--blue-050)}
.osis-prestasi-stat .ops-ic.gold{background:#fef3c7}
.osis-prestasi-stat .ops-ic.blue{background:#dbeafe}
.osis-prestasi-stat .ops-ic.green{background:#dcfce7}
.osis-prestasi-stat .ops-ic.purple{background:#ede9fe}
.osis-prestasi-stat .ops-l{flex:1;font-size:13px;color:var(--text)}
.osis-prestasi-stat .ops-v{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--navy-800)}
.osis-prestasi-period{padding:12px 18px;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--muted)}

/* Footer widget grafik */
.opl-graph-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue-600);text-decoration:none}
.opl-graph-link:hover{color:var(--navy-800)}

/* ===== Prestasi OSIS — tab sejajar + kolom ringkasan diturunkan ===== */
/* Tab OSIS dibuat sejajar rapi dalam satu baris */
.osis-tabs{align-items:center}
.osis-tab{display:inline-flex;align-items:center;line-height:1.4;font-family:var(--font-head);margin:0;-webkit-appearance:none;appearance:none}

/* Kolom kanan kini berada di dalam berita-main (pola osis-top seperti Profil OSIS) sehingga otomatis sejajar dengan judul "Prestasi OSIS" */
.osis-prestasi-main{min-width:0}

/* Garis di bawah judul "Daftar Prestasi OSIS" (panel bawah) */
.osis-prestasi-main .panel h3{padding-bottom:12px;border-bottom:2px solid var(--blue-100);margin:0 0 16px}

/* Tooltip judul kegiatan pada kalender mini */
.osis-keg-info .widget,.osis-keg-info.panel{overflow:visible}
.osis-cal-wrap,.osis-mini-cal,.omc-row{overflow:visible}
.osis-mini-cal .omc-row span[data-tip]{position:relative;cursor:help}
.osis-mini-cal .omc-row span[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);background:var(--navy-800);color:#fff;font-size:11.5px;font-weight:500;line-height:1.35;width:max-content;max-width:170px;text-align:center;white-space:normal;padding:7px 10px;border-radius:8px;box-shadow:0 8px 22px rgba(10,44,99,.22);z-index:60;pointer-events:none}
.osis-mini-cal .omc-row span[data-tip]:hover::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--navy-800);z-index:60;pointer-events:none}

/* ===== OSIS: Berita & Galeri ===== */
.osis-berita-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.osis-berita-head .berita-search{flex:0 0 240px;max-width:100%}
.osis-berita-head .berita-search input{padding:6px 14px 6px 34px;font-size:13.5px}
.osis-berita-head .berita-search .si{font-size:12px}
.osis-berita-head h2,.osis-galeri-head h2{font-size:20px;margin:0;color:var(--heading)}
.osis-galeri-head{margin-bottom:14px}
.obl-toolbar,.ogl-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.obl-filter,.ogl-filter{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.obl-toolbar .berita-search{flex:0 0 230px;max-width:100%;margin:0}
.ogl-sort{margin-left:auto}
.osis-berita-list{display:flex;flex-direction:column;gap:18px}
.obl-item{display:grid;grid-template-columns:210px 1fr;gap:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.obl-item:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.obl-thumb{position:relative;min-height:160px;background-size:cover;background-position:center;background-color:var(--blue-100)}
.obl-thumb .news-tag{position:absolute;top:12px;left:12px;margin:0;color:#fff;border:none}
.obl-thumb .news-tag.blue{background:#2563eb}
.obl-thumb .news-tag.orange{background:#f59e0b}
.obl-thumb .news-tag.green{background:#10b981}
.obl-thumb .news-tag.purple{background:#7c3aed}
.obl-thumb .news-tag.teal{background:#14b8a6}
.obl-body{padding:16px 18px;display:flex;flex-direction:column}
.obl-body h3{font-size:16px;line-height:1.35;margin:0 0 8px;color:var(--heading)}
.obl-meta{display:flex;gap:16px;color:var(--muted);font-size:12.5px;margin-bottom:8px;flex-wrap:wrap}
.obl-body p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 12px;flex:1}
.obl-body .news-readmore{align-self:flex-start}
.obl-empty{text-align:center;color:var(--muted);padding:30px;background:var(--blue-050);border-radius:var(--radius)}
.obl-sub{padding:15px 18px 18px}
.obl-sub p{font-size:13px;color:var(--muted);margin:0 0 12px;line-height:1.55}
.obl-sub-form{display:flex;flex-direction:column;gap:10px}
.obl-sub-form input{padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:13.5px}
.obl-sub-form input:focus{outline:none;border-color:var(--blue-600)}
.obl-sub-form .btn,.obl-sub .btn{justify-content:center;width:100%;display:inline-flex;align-items:center}
.cat-list a.active{background:var(--blue-050);color:var(--blue-600)}
.osis-galeri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.osis-galeri-grid .okg-item{display:flex;flex-direction:column}
.osis-galeri-grid .okg-item p{margin-bottom:14px}
.osis-cta-banner{display:flex;align-items:center;gap:20px;background:var(--blue-050);border:1px solid var(--blue-100);border-radius:var(--radius-lg);padding:24px 28px;margin-top:26px}
.osis-cta-banner .ocb-ic{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--navy-800);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px}
.osis-cta-banner h3{margin:0 0 4px;font-size:18px;color:var(--navy-800)}
.osis-cta-banner p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.galeri-foot{display:flex;gap:18px;align-items:stretch;margin-top:26px}
.galeri-foot .osis-cta-banner{flex:1;margin-top:0}
.galeri-foot .gal-sub-widget{flex:0 0 320px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:820px){.galeri-foot{flex-direction:column}.galeri-foot .gal-sub-widget{flex:1 1 auto}}
@media(max-width:1100px){.osis-galeri-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.osis-galeri-grid{grid-template-columns:repeat(2,1fr)}.obl-item{grid-template-columns:1fr}.obl-thumb{min-height:180px}.obl-toolbar .berita-search{flex:1 1 100%}.ogl-sort{margin-left:0}.osis-cta-banner{flex-direction:column;text-align:center}}
@media(max-width:480px){.osis-galeri-grid{grid-template-columns:1fr}}

/* Berita: tab bar selebar konten (sejajar contoh Profil OSIS) */
.berita-inner{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.berita-col{min-width:0}
@media(max-width:1080px){.berita-inner{grid-template-columns:1fr}}


/* ============================================================
   Halaman Konten Sekolah (Video / Galeri / Fasilitas /
   Ekstrakurikuler / Moto & Pilar)
   ============================================================ */
.sg-total{margin:0 0 16px;font-size:14px;color:var(--muted);font-weight:600}
.site-grid{display:grid;gap:18px}
.site-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.site-grid.cols-5{grid-template-columns:repeat(5,1fr)}
.sg-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease}
.sg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.sg-card.is-hidden{display:none}
.sg-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--blue-050)}
.sg-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.sg-card:hover .sg-thumb img{transform:scale(1.05)}
.sg-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.sg-body h4{margin:0;font-size:15px;line-height:1.35;color:var(--heading);font-family:var(--font-head)}
.sg-body p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.sg-date{margin-top:auto;font-size:12.5px;color:var(--muted-2);font-weight:600}
.sg-tag{align-self:flex-start;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.01em}
.sg-tag.blue{background:#e8eefc;color:#2563eb}
.sg-tag.orange{background:#fef0db;color:#b8780a}
.sg-tag.green{background:#dcfaef;color:#0a8f63}
.sg-tag.purple{background:#ede4fc;color:#7c3aed}
.sg-tag.teal{background:#d7f6f2;color:#0d8c80}
.sg-tag.red{background:#fde2e2;color:#d12a2a}
.sg-tag.gold{background:#fbf2cf;color:#a07d05}
.sg-tag.pink{background:#fce0ef;color:#c81e7d}
.sg-empty{grid-column:1/-1;text-align:center;padding:40px 16px;color:var(--muted);font-size:14px;border:1px dashed var(--border);border-radius:var(--radius)}

/* Video */
.vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(27,79,196,.92);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;padding-left:3px;box-shadow:0 4px 14px rgba(17,42,112,.35);transition:transform .15s ease,background .15s ease}
.sg-thumb:hover .vid-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(17,42,112,.96)}
.vid-dur{position:absolute;right:8px;bottom:8px;background:rgba(10,14,30,.82);color:#fff;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:6px}

/* Galeri */
.alb-count{position:absolute;right:8px;bottom:8px;background:rgba(10,14,30,.78);color:#fff;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px}

/* Fasilitas */
.fac-ic{position:absolute;left:10px;bottom:-18px;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-size:21px}
.fac-body{padding-top:26px}

/* Ekstrakurikuler */
.eks-ic{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-size:23px}
.eks-body{padding-top:30px;text-align:center;align-items:center}
.eks-body .sg-tag{align-self:center}
.eks-pembina{margin-top:auto;font-size:12.5px;color:var(--muted-2);font-weight:600}

/* Load more */
.sg-more{display:flex;justify-content:center;margin-top:22px}
.sg-more[hidden]{display:none}
.sg-more-load{appearance:none;cursor:pointer;border:1px solid var(--blue-600);background:#fff;color:var(--blue-600);font-weight:700;font-size:14px;padding:11px 26px;border-radius:999px;transition:background .15s ease,color .15s ease}
.sg-more-load:hover{background:var(--blue-600);color:#fff}

/* ===== Moto & Pilar ===== */
.mp-h{margin:0 0 14px;font-size:21px;color:var(--heading);font-family:var(--font-head)}
.mp-h+.mp-sub{margin-top:-6px}
.mp-sub{margin:0 0 18px;color:var(--muted);font-size:14.5px;line-height:1.6}
.mp-moto{position:relative;display:flex;gap:18px;align-items:flex-start;background:linear-gradient(135deg,var(--navy-800),var(--blue-600));color:#fff;border-radius:var(--radius-lg);padding:26px 28px;margin-bottom:34px;overflow:hidden}
.mp-moto-ic{flex:none;width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#ffd76a}
.mp-moto-body{position:relative;z-index:1}
.mp-label{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;background:rgba(255,255,255,.18);padding:3px 11px;border-radius:999px;margin-bottom:10px}
.mp-moto-body blockquote{margin:0;font-family:var(--font-head);font-size:23px;line-height:1.35;font-weight:700}
.mp-moto-body p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.mp-quote{position:absolute;right:18px;top:2px;font-size:120px;line-height:1;font-family:Georgia,serif;color:rgba(255,255,255,.12);pointer-events:none}
.mp-pilar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:34px}
.mp-pilar{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 16px 24px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease}
.mp-pilar:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.mp-pilar-ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px}
.mp-pilar h4{margin:0 0 8px;font-size:15px;color:var(--heading);font-family:var(--font-head)}
.mp-pilar p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.mp-pilar-line{display:block;width:38px;height:4px;border-radius:999px;margin:14px auto 0}
.mp-c-blue{background:#e8eefc;color:#2563eb}.mp-l-blue{background:#2563eb}
.mp-c-green{background:#dcfaef;color:#0a8f63}.mp-l-green{background:#10b981}
.mp-c-gold{background:#fbf2cf;color:#a07d05}.mp-l-gold{background:#eab308}
.mp-c-purple{background:#ede4fc;color:#7c3aed}.mp-l-purple{background:#7c3aed}
.mp-c-pink{background:#fce0ef;color:#c81e7d}.mp-l-pink{background:#ec4899}
.mp-c-orange{background:#fef0db;color:#b8780a}.mp-l-orange{background:#f59e0b}
.mp-c-teal{background:#d7f6f2;color:#0d8c80}.mp-l-teal{background:#14b8a6}
.mp-c-red{background:#fde2e2;color:#d12a2a}.mp-l-red{background:#ef4444}
.mp-komitmen{display:flex;gap:16px;align-items:flex-start;background:var(--blue-050);border:1px solid var(--blue-100);border-radius:var(--radius-lg);padding:22px 24px}
.mpk-ic{flex:none;width:50px;height:50px;border-radius:14px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:24px}
.mpk-text h3{margin:0 0 6px;font-size:17px;color:var(--heading);font-family:var(--font-head)}
.mpk-text p{margin:0;font-size:14px;line-height:1.6;color:var(--text)}

/* Responsive */
@media(max-width:1100px){.site-grid.cols-5{grid-template-columns:repeat(4,1fr)}.mp-pilar-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.site-grid.cols-4{grid-template-columns:repeat(3,1fr)}.site-grid.cols-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.site-grid.cols-4,.site-grid.cols-5{grid-template-columns:repeat(2,1fr)}.mp-pilar-grid{grid-template-columns:repeat(2,1fr)}.mp-moto{flex-direction:column;gap:12px}.mp-quote{display:none}}
@media(max-width:460px){.site-grid.cols-4,.site-grid.cols-5{grid-template-columns:1fr}.mp-pilar-grid{grid-template-columns:1fr}}


/* ===== Prestasi Sekolah ===== */
.site-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.pr-card{display:flex;flex-direction:column}
.pr-card .pr-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;color:#fff}
.pr-card .pr-ic{font-size:26px;line-height:1}
.pr-badge{font-size:11.5px;font-weight:700;background:rgba(255,255,255,.22);padding:4px 11px;border-radius:999px;white-space:nowrap}
.pr-blue{background:linear-gradient(135deg,#1b4fc4,#2563eb)}
.pr-gold{background:linear-gradient(135deg,#d99a06,#eab308)}
.pr-green{background:linear-gradient(135deg,#0a8f63,#10b981)}
.pr-purple{background:linear-gradient(135deg,#6d28d9,#7c3aed)}
.pr-card .sg-body{display:flex;flex-direction:column;gap:8px;padding:16px}
.pr-card .sg-body h4{margin:0;font-size:15.5px;line-height:1.4;color:var(--heading);font-family:var(--font-head)}
.pr-card .sg-body p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.pr-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:600;color:var(--muted-2);flex-wrap:wrap}
.pr-who{color:var(--text)}

/* ===== Kontak ===== */
.kontak-info{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.ki-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 16px;text-align:center;box-shadow:var(--shadow-sm)}
.ki-ic{width:52px;height:52px;border-radius:50%;background:var(--blue-050);color:var(--blue-600);display:flex;align-items:center;justify-content:center;font-size:23px;margin:0 auto 12px}
.ki-card h3{margin:0 0 6px;font-size:15px;color:var(--heading);font-family:var(--font-head)}
.ki-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.kontak-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:22px;align-items:start}
.kontak-form-wrap h2{margin:0 0 6px;font-size:19px;color:var(--heading);font-family:var(--font-head)}
.kontak-lead{margin:0 0 16px;font-size:14px;color:var(--muted)}
.kontak-form .kf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.kf-field label{font-size:13px;font-weight:600;color:var(--heading)}
.kf-field label span{color:var(--muted-2);font-weight:400}
.kf-field input,.kf-field textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font:inherit;font-size:14px;color:var(--text);background:#fff;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}
.kf-field input:focus,.kf-field textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px var(--blue-100)}
.kf-field textarea{resize:vertical;min-height:110px}
.kontak-form .btn{margin-top:4px}
.kontak-note{margin:12px 0 0;font-size:13px;color:var(--blue-600);font-weight:600}
.kontak-map{padding:0;overflow:hidden}
.kontak-map iframe{display:block;width:100%}
.kontak-map-empty{padding:30px 22px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6}
.kontak-socials-wrap{margin-top:18px}
.kontak-socials-wrap h3{margin:0 0 12px;font-size:16px;color:var(--heading);font-family:var(--font-head)}
.kontak-socials{display:flex;flex-wrap:wrap;gap:10px}
.ks-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--heading);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:7px 14px;transition:background .15s ease,border-color .15s ease,color .15s ease}
.ks-link:hover{background:var(--blue-050);border-color:var(--blue-600);color:var(--blue-600)}
.ks-link span{font-size:15px}
@media(max-width:980px){.kontak-grid{grid-template-columns:1fr}.kontak-info{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.site-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kontak-info{grid-template-columns:1fr}.kontak-form .kf-row{grid-template-columns:1fr}.site-grid.cols-3{grid-template-columns:1fr}}


/* =========================================================================
 * Halaman: Kontak, Alumni, Pengumuman, Kelulusan, SPMB, Kalender (v1.5.0)
 * ===================================================================== */

/* Shared tag colors (tints) */
.pr-red{background:#fde8e8;color:#dc2626}
.pr-teal{background:#d9f5f1;color:#0d9488}
.pr-pink{background:#fce7f3;color:#db2777}
.pr-orange{background:#fef3df;color:#d97706}
.pr-gray{background:#eef0f4;color:#4b5563}
/* Left-border accents */
.pr-l-blue{border-left:4px solid #2563eb}
.pr-l-orange{border-left:4px solid #f59e0b}
.pr-l-green{border-left:4px solid #10b981}
.pr-l-red{border-left:4px solid #ef4444}
.pr-l-purple{border-left:4px solid #7c3aed}
.pr-l-gold{border-left:4px solid #eab308}
.pr-l-teal{border-left:4px solid #14b8a6}
.pr-l-pink{border-left:4px solid #ec4899}
/* Solid dots */
.kal-dot,.pg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#9aa3b5;flex:0 0 auto}
.kal-dot.pr-blue,.pg-dot.pr-blue{background:#2563eb}
.kal-dot.pr-orange,.pg-dot.pr-orange{background:#f59e0b}
.kal-dot.pr-green,.pg-dot.pr-green{background:#10b981}
.kal-dot.pr-red,.pg-dot.pr-red{background:#ef4444}
.kal-dot.pr-purple,.pg-dot.pr-purple{background:#7c3aed}
.kal-dot.pr-gold,.pg-dot.pr-gold{background:#eab308}
.kal-dot.pr-teal,.pg-dot.pr-teal{background:#14b8a6}
.kal-dot.pr-pink,.pg-dot.pr-pink{background:#ec4899}
.kal-dot.pr-gray,.pg-dot.pr-gray{background:#6b7280}

/* ---- 3-column layout (Pengumuman / Kelulusan / SPMB) ---- */
.peng-layout{display:grid;grid-template-columns:230px 1fr 300px;gap:24px;align-items:start}
.peng-main{min-width:0;display:flex;flex-direction:column;gap:20px}
.peng-right{display:flex;flex-direction:column;gap:16px}
.pr-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.pr-box h4{margin:0 0 12px;font-size:15px;color:var(--heading)}
.pr-warn{background:#fff8ec;border-color:#f5e2bd}
.pr-warn p{margin:0;color:#7a5a14;font-size:14px;line-height:1.6}
.pr-quote{background:var(--blue-050)}
.pr-quote p{margin:0 0 8px;font-style:italic;color:var(--text);line-height:1.6}
.pr-quote cite{font-size:13px;color:var(--muted);font-style:normal}
.pr-docs,.pr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pr-docs a{display:flex;gap:8px;align-items:flex-start;text-decoration:none;color:var(--text);font-size:14px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;transition:.15s}
.pr-docs a:hover{background:var(--blue-050);border-color:#cdd9f5}
.pr-docs span{display:flex;flex-direction:column}
.pr-docs em{font-style:normal;color:var(--muted);font-size:12px}
.pr-list li{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.pr-list li:last-child{border-bottom:0}
.pr-list span{color:var(--muted);font-size:13px}

/* ---- Profile top nav (horizontal menu) ---- */
.profile-topnav{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:22px}
.ptn-inner{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px}
.profile-topnav .ptn-item{position:relative}
.profile-topnav .ptn-link{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--navy-800);text-decoration:none;border-radius:8px;cursor:pointer;white-space:nowrap}
.profile-topnav a.ptn-link:hover,.profile-topnav .ptn-has-children:hover>.ptn-link{background:var(--blue-050);color:var(--blue-600)}
.profile-topnav .ptn-item.active>.ptn-link,.profile-topnav a.ptn-link.active{background:var(--blue-600);color:#fff}
.ptn-caret{font-size:10px;opacity:.7}
.ptn-dropdown{position:absolute;top:calc(100% + 4px);left:0;min-width:210px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);padding:6px;display:none;z-index:50}
.profile-topnav .ptn-has-children:hover>.ptn-dropdown,.profile-topnav .ptn-has-children.open>.ptn-dropdown{display:block}
.ptn-dropdown a{display:block;padding:8px 11px;font-size:13px;color:var(--text);text-decoration:none;border-radius:7px;white-space:nowrap}
.ptn-dropdown a:hover{background:var(--blue-050);color:var(--blue-600)}
.ptn-dropdown a.active{background:var(--blue-600);color:#fff}
@media(max-width:700px){.ptn-dropdown{position:static;box-shadow:none;border:0;border-left:2px solid var(--blue-100);border-radius:0;margin:2px 0 6px 12px;padding:2px 0;min-width:0}}

/* ---- Kepala Sekolah ---- */
.ks-layout{display:block;max-width:1080px;margin:0 auto}
.ks-layout.has-sidebar{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;max-width:1240px}
.ks-main{min-width:0;container-type:inline-size}
.ks-top{display:block}
.ks-center{min-width:0;display:flex;flex-direction:column;gap:22px}
.panel.ks-profile{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.ks-photo{width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--blue-050),var(--blue-100));display:flex;align-items:center;justify-content:center}
.ks-photo img{width:100%;height:100%;object-fit:cover}
.ks-photo-ph{font-size:84px;opacity:.5}
.ks-intro h2{margin:0;font-size:23px;color:var(--navy-800)}
.ks-role{color:var(--blue-600);font-weight:600;margin-top:2px}
.ks-rule{display:block;width:46px;height:3px;background:var(--blue-600);border-radius:2px;margin:12px 0}
.ks-desc{color:var(--text);line-height:1.7;margin:0 0 18px}
.ks-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ks-meta-item{display:flex;gap:10px;align-items:flex-start}
.ks-meta-item .ks-ic{font-size:17px;line-height:1.5}
.ks-meta-item small{display:block;color:var(--muted);font-size:12px}
.ks-meta-item strong{font-size:13.5px;color:var(--navy-800);font-weight:600;word-break:break-word}
.ks-meta-item a{color:inherit;text-decoration:none}
.ks-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.ks-h{margin:0 0 14px;font-size:16px;color:var(--navy-800)}
.ks-timeline{list-style:none;margin:0;padding:0}
.ks-timeline li{display:grid;grid-template-columns:14px 1fr auto;gap:10px;padding:0 0 18px;position:relative}
.ks-timeline li:last-child{padding-bottom:0}
.ks-tl-dot{width:11px;height:11px;border-radius:50%;background:var(--blue-600);margin-top:4px;box-shadow:0 0 0 3px var(--blue-050)}
.ks-timeline li:not(:last-child) .ks-tl-dot::after{content:"";position:absolute;left:5px;top:16px;bottom:0;width:2px;background:var(--border)}
.ks-tl-body{display:flex;flex-direction:column;min-width:0}
.ks-tl-body strong{font-size:14px;color:var(--navy-800)}
.ks-tl-sub{font-size:12.5px;color:var(--muted)}
.ks-tl-year{font-size:12px;color:var(--blue-600);font-weight:600;white-space:nowrap}
.ks-vm{display:flex;flex-direction:column;gap:22px}
.ks-quote-blk{margin:0;border:0;padding:0;font-style:italic;color:var(--text);line-height:1.7}
.ks-motto-row{display:flex;align-items:center;gap:10px;color:var(--blue-600);font-weight:700}
.ks-aside{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px;align-items:start}
.panel.ks-card{position:relative}
.ks-card-ic{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:10px;background:var(--blue-050);display:flex;align-items:center;justify-content:center;font-size:18px}
.panel.ks-card p{color:var(--text);line-height:1.7;margin:0}
.ks-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ks-check li{position:relative;padding-left:24px;font-size:14px;color:var(--text)}
.ks-check li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--blue-600);font-weight:700}
.ks-hours{display:flex;flex-direction:column;gap:10px}
.ks-hours div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.ks-hours span{color:var(--muted)}
.ks-hours strong{color:var(--navy-800)}
.panel.ks-bigquote{margin-top:22px;background:var(--blue-050);border-color:var(--blue-100);text-align:center}
.ks-bq-mark{font-size:44px;line-height:1;color:var(--blue-600);font-weight:700}
.panel.ks-bigquote p{font-style:italic;font-size:16px;color:var(--navy-800);margin:0 auto 8px;max-width:680px}
.panel.ks-bigquote cite{color:var(--muted);font-size:13px;font-style:normal}
@media(max-width:1080px){.ks-layout.has-sidebar{display:block}}
@container (max-width:680px){.ks-aside{grid-template-columns:1fr}}
@container (max-width:560px){.ks-cols{grid-template-columns:1fr}.panel.ks-profile{grid-template-columns:1fr}.ks-photo{max-width:220px}.ks-meta{grid-template-columns:1fr}}

/* ---- Data Staff ---- */
.ds-layout{display:block;max-width:1080px;margin:0 auto}
.ds-layout.has-sidebar{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;max-width:1240px}
.ds-main{min-width:0;container-type:inline-size}
.ds-toolbar{margin-bottom:14px}
.ds-tabs{display:flex;flex-wrap:wrap;gap:6px}
.ds-select-wrap{padding:0}
.ds-bidang{border:0;outline:0;background:none;font-size:13.5px;color:var(--text);cursor:pointer;min-width:130px}
.ds-total{color:var(--muted);font-size:13.5px;font-weight:600;margin:0 2px 16px}
.ds-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.ds-empty{padding:48px 16px;text-align:center;color:var(--muted)}
.ds-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:26px}
.ds-pager button{min-width:36px;height:36px;padding:0 11px;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:8px;font-size:14px;font-weight:600;font-family:var(--font-head);cursor:pointer;transition:all .15s}
.ds-pager button:hover:not(:disabled){border-color:var(--blue-600);color:var(--blue-600)}
.ds-pager button.active{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.ds-pager button:disabled{opacity:.4;cursor:default}
@media(max-width:1080px){.ds-layout.has-sidebar{display:block}}
@container (max-width:1000px){.ds-grid{grid-template-columns:repeat(4,1fr)}}
@container (max-width:760px){.ds-grid{grid-template-columns:repeat(3,1fr)}}
@container (max-width:540px){.ds-grid{grid-template-columns:repeat(2,1fr)}}
@container (max-width:360px){.ds-grid{grid-template-columns:1fr}}

/* ---- Kontak ---- */
.kontak-layout{display:block;max-width:1080px;margin:0 auto}
.kontak-layout.has-sidebar{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;max-width:1180px}
.kontak-layout .kontak-main{container-type:inline-size;min-width:0}
.kontak-main .kontak-grid--single{grid-template-columns:1fr;max-width:680px}
@media(max-width:1080px){.kontak-layout.has-sidebar{display:block}}
@container (max-width:760px){.kontak-main .kontak-grid{grid-template-columns:1fr}.kontak-main .kontak-info{grid-template-columns:repeat(2,1fr)}.kontak-main .dept-grid{grid-template-columns:repeat(2,1fr)}}
@container (max-width:480px){.kontak-main .kontak-info{grid-template-columns:1fr}.kontak-main .dept-grid{grid-template-columns:1fr}}
.kontak-info{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.ki-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.ki-card h3{margin:0 0 6px;font-size:15px;color:var(--heading)}
.ki-card p{margin:0;font-size:13.5px;color:var(--text);line-height:1.6}
.ki-card a{color:var(--blue-600);text-decoration:none}
.ki-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:10px}
.ki-blue{background:#e8eefc}.ki-green{background:#d9f5e9}.ki-gold{background:#fdf4d3}.ki-purple{background:#efe7fb}
.kontak-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
.kontak-map{position:relative;min-height:380px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#eef1f6}
.kontak-map iframe{display:block;width:100%;height:100%;min-height:380px}
.kontak-map-empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:380px;color:var(--muted)}
.kontak-map-btn{position:absolute;left:14px;bottom:14px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--navy-800);text-decoration:none;box-shadow:var(--shadow-md)}
.kontak-form-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.kontak-form-wrap h2{margin:0 0 6px;font-size:20px}
.kontak-lead{margin:0 0 16px;color:var(--muted);font-size:14px}
.kf-field{margin-bottom:14px;display:flex;flex-direction:column}
.kf-field label{font-size:13px;font-weight:600;color:var(--heading);margin-bottom:6px}
.kf-field input,.kf-field select,.kf-field textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:11px 12px;font:inherit;font-size:14px;background:#fff;color:var(--text)}
.kf-field textarea{resize:vertical}
.kf-field input:focus,.kf-field select:focus,.kf-field textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(27,79,196,.12)}
.kontak-submit{width:100%;background:var(--navy-800);color:#fff;border:0;border-radius:10px;padding:13px;font-size:15px;font-weight:600;cursor:pointer;transition:.15s}
.kontak-submit:hover{background:var(--blue-600)}
.kontak-note{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}
.kontak-socials-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow-sm);margin-bottom:28px}
.kontak-socials-wrap h3{margin:0 0 12px;font-size:16px}
.kontak-socials{display:flex;flex-wrap:wrap;gap:10px}
.ks-link{padding:9px 16px;border:1px solid var(--border);border-radius:30px;text-decoration:none;color:var(--navy-800);font-size:13.5px;font-weight:600;transition:.15s}
.ks-link:hover{background:var(--blue-050);border-color:#cdd9f5}
.kontak-dept h2{margin:0 0 4px;font-size:20px}
.dept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:14px}
.dept-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.dept-card h4{margin:0 0 10px;font-size:15px;color:var(--heading)}
.dc-row{margin:0 0 6px;font-size:13px;color:var(--text)}
.dc-row a{color:var(--blue-600);text-decoration:none}

/* ---- Alumni ---- */
.al-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.al-mode-wrap{margin-right:auto;min-width:210px}
.al-mode-wrap select{padding-top:9px;padding-bottom:9px}
.al-tabs{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:240px}
.al-tab{border:1px solid var(--border);background:#fff;border-radius:30px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;transition:.15s}
.al-tab:hover{background:var(--blue-050)}
.al-tab.active{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.al-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.al-controls .berita-search{flex:0 1 200px;min-width:150px}
.al-controls .berita-search input{padding-top:9px;padding-bottom:9px}
.al-controls .berita-select select{padding-top:9px;padding-bottom:9px}
.al-total{margin:0 0 16px;font-size:13.5px;color:var(--muted);font-weight:600}
.al-total b{color:var(--navy-800)}
.al-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.al-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s}
.al-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.al-photo{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#3b82f6,#1e3a8a)}
.al-photo img{width:100%;height:100%;object-fit:cover;display:block}
.al-photo-ph{font-family:var(--font-head);font-weight:800;font-size:46px;color:rgba(255,255,255,.92)}
.al-photo.al-blue{background:linear-gradient(135deg,#3b82f6,#1e3a8a)}
.al-photo.al-green{background:linear-gradient(135deg,#10b981,#065f46)}
.al-photo.al-gold{background:linear-gradient(135deg,#f59e0b,#b45309)}
.al-photo.al-red{background:linear-gradient(135deg,#f87171,#991b1b)}
.al-photo.al-teal{background:linear-gradient(135deg,#2dd4bf,#0f766e)}
.al-photo.al-purple{background:linear-gradient(135deg,#a78bfa,#5b21b6)}
.al-photo.al-pink{background:linear-gradient(135deg,#f472b6,#9d174d)}
.al-star{position:absolute;top:10px;right:12px;font-size:17px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.al-body{display:flex;flex-direction:column;gap:8px;padding:15px 16px 18px;flex:1}
.al-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.al-name{margin:0;font-size:15.5px;line-height:1.3;color:var(--heading)}
.al-year-lbl{flex-shrink:0;font-size:12px;font-weight:700;color:var(--blue-600);white-space:nowrap}
.al-tag{align-self:flex-start;display:inline-block;padding:3px 11px;border-radius:30px;font-size:11.5px;font-weight:600}
.tg-blue{background:#eaf1ff;color:#1b4fc4}
.tg-green{background:#e3f7ee;color:#0a8f63}
.tg-gold{background:#fdf3d9;color:#b45309}
.tg-red{background:#fde8e8;color:#dc2626}
.tg-teal{background:#d9f5f1;color:#0d9488}
.tg-purple{background:#efe9fd;color:#6d28d9}
.tg-pink{background:#fce7f3;color:#db2777}
.al-prof{display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.45}
.al-prof strong{color:var(--heading);font-weight:700}
.al-prof span{color:var(--muted)}
.al-quote{margin:2px 0 0;font-size:12.5px;font-style:italic;color:var(--muted);line-height:1.55}
.al-more{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;color:var(--blue-600);font-size:13px;font-weight:600;text-decoration:none}
.al-more:hover{color:var(--navy-800)}
.al-empty{padding:30px;text-align:center;color:var(--muted)}
.al-pager,.pg-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:24px}
.al-pg{min-width:36px;height:36px;border:1px solid var(--border);background:#fff;border-radius:9px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;transition:.15s}
.al-pg:hover:not(:disabled){background:var(--blue-050)}
.al-pg.active{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.al-pg:disabled{opacity:.4;cursor:default}
.al-pg-dots{min-width:22px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.al-modal[hidden]{display:none}
.al-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.al-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.al-modal-box{position:relative;width:100%;max-width:420px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:alPop .18s ease}
@keyframes alPop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.al-modal-x{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border:none;border-radius:50%;background:rgba(255,255,255,.85);color:var(--navy-800);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.al-modal-x:hover{background:#fff}
.al-modal-box .al-card{border:none;box-shadow:none;border-radius:0}
.al-modal-box .al-card:hover{transform:none;box-shadow:none}
.al-modal-box .al-photo{aspect-ratio:16/10}
.al-modal-box .al-quote{display:block}
.al-contact{display:none}
.al-modal-box .al-contact{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.al-contact-row{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--blue-600);text-decoration:none;word-break:break-all}
.al-contact-row:hover{text-decoration:underline}
.al-contact-ic{font-size:14px;flex:none}
body.al-modal-open{overflow:hidden}
@media(max-width:900px){.al-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.al-grid{grid-template-columns:1fr}}

/* ---- Pengumuman ---- */
.pg-toolbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.pg-toolbar .pg-search{flex:1;min-width:180px}
.pg-list{display:flex;flex-direction:column;gap:12px}
.pg-item{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;transition:.15s}
.pg-item:hover{box-shadow:var(--shadow-md);border-color:#cdd9f5}
.pg-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
.pg-body{min-width:0;flex:1}
.pg-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pg-top h3{margin:0;font-size:16px;color:var(--heading)}
.pg-new{background:#ef4444;color:#fff;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:30px;text-transform:uppercase}
.pg-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.pg-cat-tag{padding:2px 10px;border-radius:30px;font-size:11.5px;font-weight:600}
.pg-sum{margin:0;font-size:14px;color:var(--text);line-height:1.6}
.pg-empty{padding:30px;text-align:center;color:var(--muted)}
.pg-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pg-cats a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);font-size:13.5px;padding:8px 10px;border-radius:9px;transition:.15s}
.pg-cats a:hover{background:var(--blue-050)}
.pg-cats b{margin-left:auto;background:#eef0f4;color:var(--muted);font-size:12px;padding:1px 9px;border-radius:30px}

/* ---- Kelulusan ---- */
.kel-hero{text-align:center;background:linear-gradient(135deg,#13307d,#1b4fc4);color:#fff;border:0}
.kel-badge{display:inline-block;background:rgba(255,255,255,.18);color:#fff;padding:5px 14px;border-radius:30px;font-size:13px;font-weight:600;margin-bottom:10px}
.kel-hero h2{margin:0 0 16px;color:#fff;font-size:24px}
.kel-status{background:rgba(255,255,255,.12);border-radius:var(--radius);padding:20px}
.kel-status-big{display:inline-block;font-size:30px;font-weight:800;letter-spacing:1px;color:#7dffb0;margin-bottom:6px}
.kel-status p{margin:0;color:#dce7ff;font-size:14px}
.kel-info{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kel-info-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:4px}
.kic-ic{font-size:20px}
.kic-lbl{font-size:11.5px;color:var(--muted)}
.kic-val{font-size:14px;font-weight:700;color:var(--heading)}
.kel-perhatian h3{margin:0 0 12px;font-size:17px}
.kel-perhatian ol,.kel-perhatian ul{margin:0;padding-left:20px;color:var(--text);line-height:1.7;font-size:14px}
.kel-formbox h3{margin:0 0 4px;font-size:18px}
.kel-form{max-width:420px;margin-top:14px}

/* ---- SPMB ---- */
.spmb-year{font-size:.6em;vertical-align:middle;background:rgba(255,255,255,.22);padding:3px 12px;border-radius:30px;font-weight:600}
.spmb-info{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.spmb-info-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:4px}
.sic-ic{font-size:20px}
.sic-lbl{font-size:11.5px;color:var(--muted)}
.sic-val{font-size:13.5px;font-weight:700;color:var(--heading)}
.spmb-h{margin:0 0 16px;font-size:18px}
.spmb-jalur{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.spmb-jcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.sj-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sj-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.sj-kuota{font-size:13px;font-weight:700;color:var(--navy-800);background:var(--blue-050);padding:4px 12px;border-radius:30px}
.spmb-jcard h4{margin:0 0 6px;font-size:16px;color:var(--heading)}
.spmb-jcard p{margin:0 0 14px;font-size:13.5px;color:var(--text);line-height:1.55}
.spmb-penting{margin:0;padding-left:20px;line-height:1.7;font-size:14px;color:var(--text)}
.spmb-cta{background:linear-gradient(135deg,#13307d,#1b4fc4);color:#fff;border-radius:var(--radius);padding:28px;text-align:center}
.spmb-cta h3{margin:0 0 8px;color:#fff;font-size:21px}
.spmb-cta p{margin:0 0 16px;color:#dce7ff;font-size:14.5px}
.btn-light{display:inline-block;background:#fff;color:var(--navy-800)!important;padding:12px 26px;border-radius:10px;font-weight:700;text-decoration:none;transition:.15s}
.btn-light:hover{background:#eef2ff}
.spmb-situs{margin:14px 0 0;font-size:13px;color:#cdd9f5}
.spmb-timeline{list-style:none;margin:0;padding:0;counter-reset:st}
.spmb-timeline li{position:relative;padding:0 0 16px 30px;border-left:2px solid var(--border);margin-left:8px}
.spmb-timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.spmb-timeline li:before{counter-increment:st;content:counter(st);position:absolute;left:-13px;top:0;width:24px;height:24px;border-radius:50%;background:var(--navy-800);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.spmb-timeline b{display:block;font-size:14px;color:var(--heading)}
.spmb-timeline span{font-size:12.5px;color:var(--muted)}
.spmb-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.spmb-checklist li{position:relative;padding-left:26px;font-size:13.5px;color:var(--text);line-height:1.5}
.spmb-checklist li:before{content:'\2713';position:absolute;left:0;top:0;color:#10b981;font-weight:700}

/* ---- Kalender ---- */
.kal-layout{display:grid;grid-template-columns:240px 1fr 320px;gap:20px;align-items:start}
.kal-side{display:flex;flex-direction:column;gap:16px}
.kal-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.kal-side-h{margin:0 0 12px;font-size:14px;color:var(--heading);font-weight:700}
.kal-ta{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:14px;color:var(--text);background:#fff;cursor:pointer}
.kal-cat-all{width:100%;background:var(--navy-800);color:#fff;border:0;border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:8px;text-align:left}
.kal-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.kal-cat{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:8px 14px;font-size:13.5px;color:var(--text);cursor:pointer;border-radius:9px;text-align:left}
.kal-cat:hover{background:var(--blue-050)}
.kal-cat.active{background:var(--blue-050);font-weight:600;color:var(--navy-800)}
.kal-dl p{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.55}
.kal-dl-btn{width:100%;text-align:center}
.kal-main{min-width:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.kal-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.kal-nav{display:flex;align-items:center;gap:10px}
.kal-month-label{font-size:17px;font-weight:700;color:var(--heading);min-width:130px;text-align:center}
.kal-prev,.kal-next{width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:8px;font-size:17px;line-height:1;cursor:pointer;color:var(--navy-800)}
.kal-prev:hover,.kal-next:hover{background:var(--blue-050)}
.kal-view-toggle{display:inline-flex;background:#f1f3f8;border-radius:9px;padding:3px;gap:2px}
.kal-view-toggle button{border:0;background:transparent;padding:7px 16px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:7px}
.kal-view-toggle button.active{background:var(--navy-800);color:#fff}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.kal-dow{text-align:center;font-size:12px;font-weight:600;color:var(--muted);padding:4px 0 8px}
.kal-dow.sun{color:#ef4444}
.kal-cell{min-height:64px;border:1px solid var(--border);border-radius:10px;padding:7px 8px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.kal-cell.muted{background:#fafbfd;border-color:#f0f2f7}
.kal-cell.muted .kal-num{color:var(--muted-2)}
.kal-num{font-size:13.5px;color:var(--heading);font-weight:500}
.kal-cell.sun .kal-num{color:#ef4444}
.kal-cell.today{border-color:var(--blue-600);background:var(--blue-050)}
.kal-cell.today .kal-num{color:var(--blue-600);font-weight:700}
.kal-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:auto}
.kal-grid-week .kal-wk{min-height:118px;align-items:stretch;justify-content:flex-start;padding:8px}
.kal-grid-week .kal-num{align-self:center;margin-bottom:2px}
.kal-wk-list{display:flex;flex-direction:column;gap:5px;width:100%;margin-top:4px}
.kal-wk-ev{font-size:11.5px;line-height:1.3;border-radius:7px;padding:5px 8px;font-weight:600;border-left:3px solid transparent}
.kal-wk-ev.cat-blue{background:#eff4ff;border-color:#2563eb;color:#1d4ed8}
.kal-wk-ev.cat-orange{background:#fff7ed;border-color:#f59e0b;color:#b45309}
.kal-wk-ev.cat-red{background:#fef2f2;border-color:#ef4444;color:#b91c1c}
.kal-wk-ev.cat-green{background:#ecfdf5;border-color:#10b981;color:#047857}
.kal-wk-ev.cat-purple{background:#f5f3ff;border-color:#7c3aed;color:#6d28d9}
.kal-wk-ev.cat-gold{background:#fefce8;border-color:#eab308;color:#a16207}
.kal-legend-row{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:space-between;border-top:1px solid var(--border);margin-top:16px;padding-top:14px}
.kal-leg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text)}
.kal-list-view{display:flex;flex-direction:column;gap:14px}
.kal-events{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.kal-events h3{margin:0 0 14px;font-size:16px;color:var(--heading)}
.kal-events-list{display:flex;flex-direction:column;gap:14px;max-height:560px;overflow:auto}
.kal-ev{display:flex;gap:12px;align-items:flex-start}
.kal-bdg{flex:0 0 auto;width:46px;border-radius:10px;color:#fff;text-align:center;padding:7px 0;display:flex;flex-direction:column;line-height:1.1}
.kb-day{font-size:17px;font-weight:800}
.kb-mon{font-size:10px;font-weight:700;letter-spacing:.5px;opacity:.95}
.kal-ev-b{min-width:0;flex:1}
.kal-ev-title{font-size:14px;font-weight:600;color:var(--heading);margin-bottom:3px;line-height:1.35}
.kal-ev-cat{font-size:12.5px;font-weight:600;margin-bottom:2px}
.kal-ev-ket{font-size:12.5px;color:var(--muted);line-height:1.45}
.kal-see-all{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--blue-600);text-decoration:none}
.kal-see-all:hover{text-decoration:underline}
.kal-empty{color:var(--muted);font-size:13.5px;padding:14px 0;text-align:center}
.kal-bdg.cat-blue{background:#2563eb}.kal-bdg.cat-orange{background:#f59e0b}.kal-bdg.cat-red{background:#ef4444}.kal-bdg.cat-green{background:#10b981}.kal-bdg.cat-purple{background:#7c3aed}.kal-bdg.cat-gold{background:#eab308}
.cat-txt-blue{color:#2563eb}.cat-txt-orange{color:#d97706}.cat-txt-red{color:#ef4444}.cat-txt-green{color:#10b981}.cat-txt-purple{color:#7c3aed}.cat-txt-gold{color:#ca8a04}
.kal-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;background:var(--blue-050);border:1px solid #e2e9fb;border-radius:var(--radius);padding:20px 24px}
.kal-note{display:flex;gap:14px;align-items:flex-start}
.kal-note-ic{flex:0 0 auto;width:44px;height:44px;border-radius:11px;background:var(--navy-800);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.kal-note-txt h4{margin:0 0 4px;font-size:15px;color:var(--heading)}
.kal-note-txt p{margin:0;font-size:13.5px;color:var(--text);line-height:1.55}
.kal-sub-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 18px;font-size:13.5px;font-weight:600;color:var(--navy-800);text-decoration:none;white-space:nowrap}
.kal-sub-btn:hover{border-color:#cdd9f5;box-shadow:var(--shadow-sm)}

/* ---- Responsive ---- */
@media(max-width:1080px){
	.peng-layout,.kal-layout{grid-template-columns:1fr}
	.peng-right,.kal-side,.kal-events{order:3}
	.kontak-info,.kel-info,.spmb-info{grid-template-columns:repeat(2,1fr)}
	.dept-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
	.kontak-grid{grid-template-columns:1fr}
	.spmb-jalur{grid-template-columns:1fr}
	.kontak-info,.dept-grid,.kel-info,.spmb-info{grid-template-columns:1fr}
	.kal-cell{min-height:54px}
	.kal-bottom{flex-direction:column;align-items:stretch}
	.kal-sub-btn{justify-content:center}
	.kal-grid-week .kal-wk{min-height:auto}
}

/* ---- Kalender: tampilan tahun penuh ---- */
.kal-layout[data-view="tahun"]{grid-template-columns:240px 1fr}
.kal-layout[data-view="tahun"] .kal-events{display:none}
.kal-year{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kal-ym{border:1px solid var(--border);border-radius:12px;padding:12px 12px 14px}
.kal-ym-h{font-size:13.5px;font-weight:700;color:var(--heading);text-align:center;margin-bottom:8px}
.kal-ym-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.kal-ym-dow{font-size:9.5px;color:var(--muted);text-align:center;font-weight:700;padding-bottom:3px}
.kal-ym-dow.sun{color:#ef4444}
.kal-ym-d{font-size:10.5px;color:var(--heading);min-height:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:6px}
.kal-ym-d.sun{color:#ef4444}
.kal-ym-d.today{background:var(--blue-600);color:#fff;font-weight:700}
.kal-ym-dot{width:5px;height:5px;border-radius:50%}
.kal-ym-dot.pr-blue{background:#2563eb}
.kal-ym-dot.pr-orange{background:#f59e0b}
.kal-ym-dot.pr-red{background:#ef4444}
.kal-ym-dot.pr-green{background:#10b981}
.kal-ym-dot.pr-purple{background:#7c3aed}
.kal-ym-dot.pr-gold{background:#eab308}
@media(max-width:1080px){
	.kal-layout[data-view="tahun"]{grid-template-columns:1fr}
	.kal-year{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
	.kal-year{grid-template-columns:1fr}
}

/* ---- Tombol Berlangganan Pengingat (WhatsApp) ---- */
.kal-sub-btn.kal-wa{background:#25d366;border-color:#25d366;color:#fff}
.kal-sub-btn.kal-wa:hover{background:#1ebe5b;border-color:#1ebe5b;box-shadow:0 4px 12px rgba(37,211,102,.35)}
.kal-sub-btn.kal-wa .kal-wa-ic{flex:0 0 auto}

.ogl-toolbar .berita-search{flex:0 0 220px;max-width:100%}
@media(max-width:760px){.ogl-toolbar .berita-search{flex:1 1 100%}}

/* ===== Struktur Organisasi ===== */
.struktur-layout{display:block;max-width:1080px;margin:0 auto}
.struktur-layout.has-sidebar{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;max-width:1180px}
.struktur-layout .berita-main{container-type:inline-size}
@media(max-width:1080px){.struktur-layout.has-sidebar{display:block}}
@container (max-width:760px){.struktur-chart .oo-seksi::after,.struktur-chart .oo-seksi>.oo-card::before{display:none}.struktur-chart .oo-lead-row .str-dash{display:none}.struktur-chart .oo-seksi{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
.struktur-chart{max-width:1000px;margin:0 auto}
.struktur-chart>div{position:relative}
.struktur-chart>div:not(:first-child){margin-top:48px}
.struktur-chart>div:not(:first-child)::before{content:"";position:absolute;left:50%;top:-28px;width:2px;height:28px;background:#cbd5e1;transform:translateX(-50%)}
.struktur-chart .oo-seksi::after{content:"";position:absolute;left:12%;right:12%;top:-28px;height:2px;background:#cbd5e1}
.struktur-chart .oo-seksi>.oo-card{position:relative}
.struktur-chart .oo-seksi>.oo-card::before{content:"";position:absolute;left:50%;top:-28px;width:2px;height:28px;background:#cbd5e1;transform:translateX(-50%)}
@media(max-width:880px){.struktur-chart .oo-seksi::after,.struktur-chart .oo-seksi>.oo-card::before{display:none}}
.oo-b-gray{background:#64748b}
.oo-coord{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.oo-coord .oo-badge{margin-bottom:0}
.oo-card.oo-wide{min-width:0;width:100%;max-width:720px;margin:0 auto}
.oo-lead-row{align-items:center;gap:8px}
.oo-lead-row .str-dash{flex:0 0 40px;height:0;border-top:2px dashed #94a3b8}
.struktur-legend{display:flex;justify-content:center;gap:28px;margin-top:36px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.struktur-legend .sl-item{display:inline-flex;align-items:center;gap:8px}
.struktur-legend .sl-line{display:inline-block;width:34px;height:0;border-top:2px solid #94a3b8}
.struktur-legend .sl-line.dash{border-top-style:dashed}
@media(max-width:880px){.oo-lead-row .str-dash{display:none}}
.org-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:32px;border-bottom:2px solid var(--border)}
.org-head h2{margin:0;font-size:20px;color:var(--navy-800)}
.org-dl{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:9px 15px;font-size:13px;font-weight:600;color:var(--navy-800);text-decoration:none;white-space:nowrap}
.org-dl:hover{background:var(--blue-050);border-color:var(--blue-600)}
.org{--oline:#cdd6e8}
.org-trunk{width:2px;height:24px;background:var(--oline);margin:0 auto}
.org-l1{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}
.org-dash{flex:0 0 46px;height:0;border-top:2px dashed var(--oline)}
.org-node{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);min-width:0}
.org-node .on-head{padding:9px 14px;color:#fff;font-size:13.5px;font-weight:700;line-height:1.3}
.org-node .on-body{padding:10px 14px;font-size:13px;color:var(--text)}
.org-node .on-body strong{color:var(--navy-800);font-weight:700}
.org-node .on-body ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:5px}
.org-node .on-body li{font-size:12.5px;color:var(--text)}
.org-node.lead{flex:0 0 270px;text-align:center}
.org-node.side{flex:0 0 185px;text-align:center}
.on-head.navy{background:var(--navy-800)}
.on-head.blue{background:var(--blue-600)}
.on-head.green{background:#10b981}
.on-head.orange{background:#f59e0b}
.on-head.purple{background:#7c3aed}
.on-head.gray{background:#64748b}
.org-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.org-cols::before{content:"";position:absolute;top:-12px;left:12.5%;right:12.5%;height:2px;background:var(--oline)}
.org-col{position:relative;display:flex;flex-direction:column}
.org-col::before{content:"";position:absolute;top:-12px;left:50%;width:2px;height:12px;background:var(--oline)}
.org-sub{width:2px;height:14px;background:var(--oline);margin:0 auto}
.org-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.org-chips span{background:var(--blue-050);border:1px solid var(--border);border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--navy-800)}
.org-node.tk .on-body{text-align:center}
.org-center{display:flex;justify-content:center}
.org-node.siswa{flex:0 0 360px;text-align:center}
.org-legend{margin-top:26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;border-top:1px dashed var(--border);padding-top:16px;font-size:12.5px;color:var(--text)}
.org-legend strong{color:var(--navy-800)}
.org-legend .ol-row{display:inline-flex;align-items:center;gap:8px}
.ol-line{width:30px;height:0;display:inline-block}
.ol-line.solid{border-top:2px solid var(--navy-800)}
.ol-line.dash{border-top:2px dashed var(--muted-2)}
@media(max-width:1080px){.struktur-layout{grid-template-columns:1fr}}
@media(max-width:760px){.org-cols{grid-template-columns:1fr;gap:26px}.org-cols::before{display:none}.org-col::before{display:none}.org-dash{flex-basis:22px}.org-node.lead,.org-node.side,.org-node.siswa{flex-basis:auto;width:100%}.org-l1{gap:8px}}



/* v-guru2: profil guru/staf meniru kartu Kepala Sekolah */
.ks-profile .ks-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.ks-profile .ks-meta+.ks-cta{ margin-top:20px; }
.ks-meta-item strong a{ color:inherit; }
@container (max-width:560px){ .ks-profile .ks-cta{ justify-content:center; } }

/* ===== Pilihan Layout Website (Box & Wide) — keduanya tampil berbingkai ===== */
body.sma-layout-wide { --container: 1480px; }
body.sma-layout-box, body.sma-layout-wide { background: #e7ecf5; }
.site-frame {
	width: 100%;
	max-width: calc(var(--container) + 80px);
	margin: 28px auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 50px rgba(16,42,112,.14);
}
.site-frame > .topbar { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.site-frame > .footer { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 1100px) {
	.site-frame { margin: 0; max-width: 100%; border: 0; border-radius: 0; box-shadow: none; }
	.site-frame > .topbar, .site-frame > .footer { border-radius: 0; }
}

/* ===== Mode Penuh (Full) — lebar rata ke tepi layar, seragam ===== */
body.sma-layout-full { background: var(--bg); --container: 100%; }
body.sma-layout-full .site-frame { max-width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
body.sma-layout-full .site-frame > .topbar,
body.sma-layout-full .site-frame > .footer { border-radius: 0; }
body.sma-layout-full .container { padding-inline: 40px; }
@media (max-width: 768px) { body.sma-layout-full .container { padding-inline: 20px; } }

/* ===== Tema musiman hari besar nasional ===== */
.sma-season-ribbon { background: var(--navy-800); color: #fff; text-align: center; font-size: 13.5px; font-weight: 600; letter-spacing: .2px; padding: 9px 16px; line-height: 1.4; }
.sma-season-ribbon .em { font-style: normal; margin: 0 5px; }
body.sma-season-natal { --navy-900:#0a3a1e; --navy-800:#0e5a2c; --navy-700:#127a3a; --navy-600:#178a44; --blue-600:#b51f2a; --blue-500:#d0303b; --gold-500:#e6b422; --gold-400:#f1c94a; --heading:#0e5a2c; }
body.sma-season-tahunbaru { --navy-900:#0a1640; --navy-800:#141a5e; --navy-700:#23206f; --navy-600:#2e2a86; --blue-600:#6d3bd6; --blue-500:#8a52f0; --gold-500:#f2c14e; --gold-400:#f8d36e; --heading:#141a5e; }
body.sma-season-imlek { --navy-900:#5e0d12; --navy-800:#8c1218; --navy-700:#ad1620; --navy-600:#c8202b; --blue-600:#c8102e; --blue-500:#e0263f; --gold-500:#f1c40f; --gold-400:#ffd83a; --heading:#8c1218; }
body.sma-season-nyepi { --navy-900:#15131f; --navy-800:#2a2540; --navy-700:#3a335a; --navy-600:#4a4170; --blue-600:#6b5e9c; --blue-500:#8175b3; --gold-500:#b9a9d6; --gold-400:#cfc2e6; --heading:#2a2540; }
body.sma-season-idulfitri { --navy-900:#063a2a; --navy-800:#0a5a40; --navy-700:#0e7a54; --navy-600:#119065; --blue-600:#0e9b6b; --blue-500:#16b07e; --gold-500:#e3b341; --gold-400:#f0c863; --heading:#0a5a40; }
body.sma-season-iduladha { --navy-900:#0a3a3a; --navy-800:#0e5757; --navy-700:#127575; --navy-600:#168a8a; --blue-600:#0f8c84; --blue-500:#14a59c; --gold-500:#e3b341; --gold-400:#f0c863; --heading:#0e5757; }
body.sma-season-waisak { --navy-900:#4a2e08; --navy-800:#6e470f; --navy-700:#8f6015; --navy-600:#a8721c; --blue-600:#c8860a; --blue-500:#e0a020; --gold-500:#f2c14e; --gold-400:#f8d36e; --heading:#6e470f; }
body.sma-season-paskah { --navy-900:#3a2a55; --navy-800:#54407e; --navy-700:#6d56a0; --navy-600:#8169b8; --blue-600:#7a3fce; --blue-500:#9258e0; --gold-500:#e7c84a; --gold-400:#f0d66e; --heading:#54407e; }
body.sma-season-islam { --navy-900:#063a2e; --navy-800:#0a5a47; --navy-700:#0e7a5f; --navy-600:#119072; --blue-600:#0e9b78; --blue-500:#16b08c; --gold-500:#e3b341; --gold-400:#f0c863; --heading:#0a5a47; }
body.sma-season-merahputih { --navy-900:#7a0c12; --navy-800:#a3121a; --navy-700:#c4121f; --navy-600:#d92330; --blue-600:#c1121f; --blue-500:#e03b46; --gold-500:#b8860b; --gold-400:#d4a017; --heading:#a3121a; }


/* ======================================================================
   Hero "festival" + ornamen footer untuk tema musiman (porting pratinjau)
   ====================================================================== */
@keyframes sma-sway{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sma-floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}

.home-hero.has-festival{position:relative;overflow:hidden}
.home-hero.has-festival .hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(255,251,243,.97),rgba(255,251,243,.86) 42%,rgba(255,251,243,.25) 68%,transparent 80%)}
.home-hero.has-festival .container{position:relative;z-index:3}
.hero-deco{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-deco .d-top{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:30px;letter-spacing:14px;opacity:.7;animation:sma-sway 4s ease-in-out infinite}
.hero-deco .d-cl{position:absolute;left:24px;bottom:26px;font-size:64px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.hero-deco .d-cr{position:absolute;right:26px;bottom:24px;font-size:82px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25));animation:sma-floaty 5s ease-in-out infinite}
.hero-festival{max-width:700px}
.hero-festival .fx-eyebrow{display:block;font-family:'Segoe Script','Brush Script MT','Snell Roundhand',cursive;font-size:34px;line-height:1.1;color:var(--heading);margin-bottom:4px}
.hero-festival .fx-big{display:block;font-family:Georgia,'Times New Roman',serif;font-weight:800;font-size:66px;line-height:1.02;letter-spacing:.5px;background:linear-gradient(180deg,#f3c46b,#bf8a1d);-webkit-background-clip:text;background-clip:text;color:transparent;margin:2px 0 6px}
.hero-festival .fx-sub{display:block;text-transform:uppercase;letter-spacing:6px;font-size:15px;font-weight:700;color:var(--heading);opacity:.9}
.hero-festival .fx-greet{margin:16px 0 22px;font-style:italic;font-size:17px;color:#3a4150;max-width:560px}

body.sma-season-merahputih .hero-festival .fx-big{background:linear-gradient(180deg,#e23b3b,#a3121a);-webkit-background-clip:text;background-clip:text}
body.sma-season-idulfitri .hero-festival .fx-big,
body.sma-season-iduladha .hero-festival .fx-big,
body.sma-season-islam .hero-festival .fx-big{background:linear-gradient(180deg,#1aa06b,#0c6b46);-webkit-background-clip:text;background-clip:text}

/* ---- Footer dipercantik + ornamen tema ---- */
.footer{position:relative;overflow:hidden}
.footer .container{position:relative;z-index:2}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold-500),var(--gold-400) 50%,var(--gold-500));z-index:3}
.footer h5{position:relative;padding-bottom:10px}
.footer h5::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:2px;background:var(--gold-500)}
.footer-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.footer-deco .fd-top{position:absolute;top:10px;left:0;right:0;text-align:center;font-size:20px;letter-spacing:12px;opacity:.4}
.footer-deco .fd-l{position:absolute;left:18px;bottom:14px;font-size:56px;opacity:.8;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));animation:sma-floaty 6.5s ease-in-out infinite}
.footer-deco .fd-r{position:absolute;right:18px;bottom:14px;font-size:68px;opacity:.8;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));animation:sma-floaty 7.5s ease-in-out infinite}
body[class*="sma-season-"] .footer::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(80% 120% at 50% 120%, var(--gold-500) 0%, transparent 55%);opacity:.10;pointer-events:none}

/* ---- 4 palet tema peringatan pendidikan & sekolah ---- */
body.sma-season-hardiknas{--navy-900:#0a2a6b;--navy-800:#103a86;--navy-700:#15469c;--navy-600:#1b54bd;--blue-600:#1f5fd6;--blue-500:#2f74ef;--gold-500:#f5a623;--gold-400:#f6b531;--heading:#0f357f}
body.sma-season-hariguru{--navy-900:#0a4a3f;--navy-800:#0d5d4f;--navy-700:#0f6e5d;--navy-600:#12846f;--blue-600:#149b81;--blue-500:#1bb091;--gold-500:#f0a91e;--gold-400:#f4b733;--heading:#0c5848}
body.sma-season-sumpahpemuda{--navy-900:#7a0f16;--navy-800:#9c141c;--navy-700:#b51f27;--navy-600:#c52630;--blue-600:#d23440;--blue-500:#e0454f;--gold-500:#e8b53a;--gold-400:#f0c558;--heading:#8c1218}
body.sma-season-harianak{--navy-900:#0b4a8c;--navy-800:#0f5aa6;--navy-700:#1369bd;--navy-600:#1a7bd6;--blue-600:#2389e6;--blue-500:#37a0f5;--gold-500:#ff9f1c;--gold-400:#ffb33e;--heading:#0e5298}
body.sma-season-hariguru .hero-festival .fx-big{background:linear-gradient(180deg,#1aa06b,#0c6b46);-webkit-background-clip:text;background-clip:text}
body.sma-season-sumpahpemuda .hero-festival .fx-big{background:linear-gradient(180deg,#e2433f,#a3121a);-webkit-background-clip:text;background-clip:text}

@media(max-width:768px){
  .hero-festival .fx-big{font-size:44px}
  .hero-festival .fx-eyebrow{font-size:27px}
  .hero-festival .fx-greet{font-size:15px}
  .hero-deco .d-cl{font-size:40px}
  .hero-deco .d-cr{font-size:50px}
  .hero-deco .d-top{font-size:22px;letter-spacing:8px}
  .footer-deco .fd-l{font-size:36px}
  .footer-deco .fd-r{font-size:44px}
  .footer-deco .fd-top{letter-spacing:6px;font-size:16px}
}


/* === Topbar search popup (klik ikon -> kotak cari) === */
.topbar-searchwrap { position: relative; display: inline-flex; align-items: center; }
.topbar-search-toggle { background: transparent; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; opacity: .85; transition: .15s; }
.topbar-search-toggle:hover { opacity: 1; color: #fff; }
.topbar-search-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: none; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 5px 6px 5px 14px; box-shadow: 0 14px 34px rgba(10,28,77,.24); min-width: 240px; }
.topbar-searchwrap.open .topbar-search-pop { display: flex; }
.topbar-search-pop::before { content: ""; position: absolute; top: -6px; right: 14px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.topbar-search-pop input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13.5px; color: var(--navy-900, #0a1c4d); }
.topbar-search-pop input[type="search"]::placeholder { color: #8a93ad; }
.topbar-search-pop button[type="submit"] { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--gold-500, #f5a623); color: #1a1a1a; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.topbar-search-pop button[type="submit"]:hover { background: var(--gold-400, #f6b531); }
@media (max-width: 768px) {
  .topbar-search-pop { position: fixed; left: 12px; right: 12px; min-width: 0; }
  .topbar-search-pop::before { display: none; }
}


/* === Halaman hasil pencarian (search.php) === */
.search-bigform { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e3e8f2; border-radius:14px; padding:8px 8px 8px 16px; box-shadow:0 8px 24px rgba(10,28,77,.06); max-width:640px; margin:0 0 28px; }
.search-bigform .sb-ic { font-size:18px; color:#8a93ad; }
.search-bigform input[type="search"] { flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:15px; color:var(--navy-900,#0a1c4d); }
.search-bigform button[type="submit"] { flex:0 0 auto; border:0; border-radius:10px; background:var(--gold-500,#f5a623); color:#1a1a1a; font-weight:700; padding:10px 20px; cursor:pointer; transition:.15s; }
.search-bigform button[type="submit"]:hover { background:var(--gold-400,#f6b531); }
.search-results { display:flex; flex-direction:column; gap:14px; }
.search-item { display:flex; gap:18px; background:#fff; border:1px solid #eef1f7; border-radius:16px; padding:14px; transition:.18s; }
.search-item:hover { box-shadow:0 14px 30px rgba(10,28,77,.10); transform:translateY(-2px); border-color:#e3e8f2; }
.si-thumb { flex:0 0 150px; width:150px; height:104px; border-radius:12px; overflow:hidden; display:block; background:#eef1f7; }
.si-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.si-thumb.is-ph { display:grid; place-items:center; background:linear-gradient(135deg,#102a70,#0a1c4d); }
.si-ph-ic { font-size:34px; }
.si-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.si-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.si-type { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#bf8a1d; background:rgba(245,166,35,.12); padding:3px 10px; border-radius:999px; }
.search-item h3 { margin:0; font-size:18px; line-height:1.3; }
.search-item h3 a { color:var(--heading,#102a70); }
.search-item h3 a:hover { color:#bf8a1d; }
.search-item p { margin:0; color:#5b6478; font-size:14px; line-height:1.55; }
.si-meta { margin-top:auto; font-size:12.5px; color:#8a93ad; }
.search-empty { text-align:center; padding:48px 24px; }
.search-empty .se-ic { font-size:46px; margin-bottom:8px; }
.search-empty h3 { margin:0 0 6px; }
.search-empty p { color:#5b6478; margin:0 0 18px; }
@media (max-width:600px){
  .search-item { flex-direction:column; }
  .si-thumb { flex-basis:auto; width:100%; height:160px; }
}


/* === Penyempurnaan kolom pencarian + pemilih bagian (scope) === */
.search-bigform { flex-wrap:wrap; gap:10px 12px; padding:10px 12px; }
.search-bigform .sb-ic { font-size:18px; color:#8a93ad; flex:0 0 auto; }
.search-bigform input[type="search"] { flex:1 1 240px; min-width:180px; padding:6px 4px; }
.search-bigform input[type="search"]::-webkit-search-cancel-button { margin-left:6px; }
.search-bigform .sb-sep { flex:0 0 auto; width:1px; align-self:stretch; min-height:24px; background:#e9edf6; }
.search-bigform .sb-label { flex:0 0 auto; font-size:13px; font-weight:600; color:#5b6478; }
.sb-scope, .tsp-select { -webkit-appearance:none; -moz-appearance:none; appearance:none; border:1px solid #e3e8f2; border-radius:10px; background:#f7f9fd url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a93ad' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center; color:var(--navy-900,#0a1c4d); font-size:14px; font-weight:600; padding:9px 32px 9px 12px; cursor:pointer; outline:0; }
.sb-scope:hover, .tsp-select:hover { border-color:#cdd6e8; }
.sb-scope:focus, .tsp-select:focus { border-color:var(--gold-500,#f5a623); box-shadow:0 0 0 3px rgba(245,166,35,.18); }
.search-bigform .sb-scope { flex:0 0 auto; }

/* Topbar popup -> panel profesional */
.topbar-search-pop { display:none; flex-direction:column; gap:0; align-items:stretch; min-width:330px; padding:14px; border-radius:14px; }
.topbar-searchwrap.open .topbar-search-pop { display:flex; }
.topbar-search-pop::before { right:18px; }
.topbar-search-pop form { display:flex; flex-direction:column; gap:10px; }
.topbar-search-pop .tsp-row { display:flex; align-items:center; gap:8px; }
.topbar-search-pop .tsp-row .tsp-ic { flex:0 0 auto; display:inline-flex; color:#8a93ad; }
.topbar-search-pop input[type="search"] { flex:1 1 auto; min-width:0; width:auto; border:1px solid #e3e8f2; border-radius:10px; padding:9px 12px; font-size:14px; color:var(--navy-900,#0a1c4d); background:#f7f9fd; }
.topbar-search-pop input[type="search"]:focus { border-color:var(--gold-500,#f5a623); box-shadow:0 0 0 3px rgba(245,166,35,.16); outline:0; }
.topbar-search-pop .tsp-scope label { flex:0 0 auto; font-size:12.5px; font-weight:600; color:#5b6478; }
.topbar-search-pop .tsp-select { flex:1 1 auto; }
.topbar-search-pop button[type="submit"] { flex:0 0 auto; width:auto; height:auto; border:0; border-radius:10px; background:var(--gold-500,#f5a623); color:#1a1a1a; font-weight:700; font-size:13.5px; padding:9px 16px; cursor:pointer; transition:.15s; }
.topbar-search-pop button[type="submit"]:hover { background:var(--gold-400,#f6b531); }
@media (max-width:768px){
  .topbar-search-pop { position:fixed; left:12px; right:12px; min-width:0; }
}


/* ============================================================
   FIX: kembalikan jarak vertikal .section di halaman interior.
   (Aturan homepage v2f sebelumnya mematikan padding .section
    secara global sehingga page-hero & section jadi dempet.)
   ============================================================ */
body:not(.home) .section { padding-top: 26px !important; padding-bottom: 26px !important; }
body:not(.home) .page-hero + .section { padding-top: 40px !important; }
@media (max-width: 768px) {
  body:not(.home) .section { padding-top: 20px !important; padding-bottom: 20px !important; }
  body:not(.home) .page-hero + .section { padding-top: 40px !important; }
}


/* === Artikel berita resmi (single.php) === */
.article-single { padding: 30px 34px 28px; }
.art-head { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border, #e8ecf4); }
.art-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.art-type { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #bf8a1d; }
.art-sub { font-size: 18px; line-height: 1.5; color: #4a5468; margin: 0 0 14px; font-weight: 500; }
.art-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: #8a93ad; font-size: 13.5px; }
.art-byline .ab { display: inline-flex; align-items: center; gap: 6px; }
.art-byline .ab svg { opacity: .85; }
.art-figure { margin: 0 0 24px; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px rgba(10,28,77,.10); }
.art-figure img { width: 100%; height: auto; display: block; }
.art-figure figcaption { font-size: 13px; color: #8a93ad; font-style: italic; text-align: center; padding: 10px 14px; background: #f7f9fd; }
.art-body { font-size: 16.5px; line-height: 1.85; color: #2c3447; }
.art-body > p { margin: 0 0 18px; }
.art-body > p:first-of-type::first-letter { font-size: 3.1em; line-height: .9; font-weight: 800; color: var(--heading, #102a70); float: left; margin: 6px 12px 0 0; font-family: Georgia, 'Times New Roman', serif; }
.art-body h2, .art-body h3, .art-body h4 { color: var(--heading, #102a70); margin: 28px 0 12px; line-height: 1.3; }
.art-body h2 { font-size: 24px; }
.art-body h3 { font-size: 20px; }
.art-body a { color: #bf8a1d; text-decoration: underline; text-underline-offset: 2px; }
.art-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0; }
.art-body ul, .art-body ol { margin: 0 0 18px; padding-left: 24px; }
.art-body li { margin: 6px 0; }
.art-body blockquote { margin: 22px 0; padding: 14px 22px; border-left: 4px solid var(--gold-500, #f5a623); background: #f9fafd; border-radius: 0 10px 10px 0; color: #3a4256; font-style: italic; font-size: 17px; }
.art-note { margin: 22px 0 0; padding: 14px 16px; background: var(--blue-050, #eef3ff); border-radius: 12px; font-size: 14.5px; color: #334; }
.art-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border, #e8ecf4); display: flex; flex-direction: column; gap: 16px; }
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.art-tags a { font-size: 13px; color: #5b6478; background: #f1f4fa; border-radius: 999px; padding: 5px 12px; transition: .15s; }
.art-tags a:hover { background: var(--gold-500, #f5a623); color: #1a1a1a; }
.art-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.as-label { font-size: 13.5px; font-weight: 600; color: #5b6478; margin-right: 2px; }
.as-btn { font-size: 13px; font-weight: 600; color: #fff; border-radius: 8px; padding: 7px 14px; transition: .15s; }
.as-btn:hover { opacity: .92; transform: translateY(-1px); }
.as-btn.wa { background: #25d366; }
.as-btn.fb { background: #1877f2; }
.as-btn.x { background: #111827; }
.art-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--heading, #102a70); font-size: 14px; }
.art-back:hover { color: #bf8a1d; }
@media (max-width: 768px) {
  .article-single { padding: 22px 18px; }
  .art-body { font-size: 16px; line-height: 1.8; }
  .art-sub { font-size: 16.5px; }
  .art-body > p:first-of-type::first-letter { font-size: 2.6em; }
}

/* Label "Kategori:" pada footer artikel */
.art-tags .at-label { font-size: 13.5px; font-weight: 600; color: #5b6478; margin-right: 2px; align-self: center; }

/* Frame gambar unggulan dengan posisi yang bisa diatur (focal point) */
.art-figure img, .art-figure .art-img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }

/* Sidebar widget berita & artikel terkait (mini list dengan thumbnail) */
.widget-mini { margin: 0; }
.mini-news { display: flex; flex-direction: column; }
.mini-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.mini-item:first-child { padding-top: 0; }
.mini-item:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-thumb { width: 58px; height: 44px; border-radius: 8px; flex: 0 0 auto; background-size: cover; background-position: center; background-color: var(--blue-050); }
.mini-thumb.is-empty { background-image: linear-gradient(135deg, #eef3ff, #dbe4fb); }
.mini-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mini-title { font-size: 13.5px; line-height: 1.35; color: var(--heading); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-item:hover .mini-title { color: var(--blue-600); }
.mini-date { font-size: 12px; color: var(--muted); }
/* Badge sejajar dalam baris byline artikel */
.art-byline .badge { margin: 0; }

/* Rapikan toolbar /pengumuman/ (search + kategori + sortir) */
.pg-toolbar { align-items: center; }
.pg-toolbar .berita-search { flex: 1 1 220px; min-width: 200px; margin: 0; }
.pg-toolbar .berita-select { flex: 0 0 auto; }
.pg-toolbar .berita-select select { width: 100%; }
.pg-toolbar .pg-search { min-width: 0; }
@media (max-width: 600px) {
	.pg-toolbar .berita-select { flex: 1 1 100%; }
	.pg-toolbar .berita-select select { width: 100%; }
}

/* Jembatan hover dropdown menu atas: tutup celah agar submenu tidak menutup sendiri */
@media (min-width: 769px) {
	.nav > ul > li > .dropdown::before,
	.nav li.menu-item-has-children > ul.sub-menu::before {
		content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px; background: transparent;
	}
}

/* Data Staff: tab "Lainnya" untuk menyembunyikan peran selain 2 utama */
.ds-more{ position: relative; }
.ds-more-btn{ display: inline-flex; align-items: center; gap: 6px; background: transparent; }
.ds-more .ds-caret{ font-size: 10px; opacity: .7; transition: .2s; }
.ds-more.open .ds-caret{ transform: rotate(180deg); }
.ds-more-btn.ds-more-sel{ background: var(--navy-800); color: #fff; }
.ds-more-menu{ position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 210px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 8px; display: none; flex-direction: column; gap: 4px; }
.ds-more.open .ds-more-menu{ display: flex; }
.ds-more-menu .tab{ display: block; }
.ds-more-menu .tab:hover{ background: var(--blue-050); color: var(--blue-600); }
.ds-more-menu .tab.active{ background: var(--navy-800); color: #fff; }
.tabs .ds-more{ display: inline-flex; align-items: center; }

/* ===== Data Siswa: toggle Grid/Daftar ===== */
.grid-view-toggle{display:flex;justify-content:flex-end;gap:6px;margin:0 0 14px}
.grid-view-toggle .gv-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--border);background:#fff;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;color:var(--text);cursor:pointer;transition:.15s}
.grid-view-toggle .gv-btn:hover{background:var(--blue-050)}
.grid-view-toggle .gv-btn.active{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.grid.sma-vgrid.is-list{display:flex;flex-direction:column;gap:10px}
.grid.sma-vgrid.is-list .card-content{display:flex;flex-direction:row;align-items:stretch}
.grid.sma-vgrid.is-list .card-content .thumb{width:160px;flex:0 0 160px;aspect-ratio:auto;min-height:118px;align-self:stretch}
.grid.sma-vgrid.is-list .card-content .body{flex:1;padding:14px 16px}
.grid.sma-vgrid.is-list .card-content .body h3{margin-top:2px}
@media(max-width:560px){.grid.sma-vgrid.is-list .card-content .thumb{width:104px;flex:0 0 104px;min-height:96px}}

/* ===== Data Kelas & Wali Guru ===== */
.dk-panel{padding:24px}
.dk-title{margin:0 0 18px;font-size:18px;color:var(--heading)}
.dk-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.dk-field{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:#fff;height:42px}
.dk-field .dk-ic{font-size:14px;opacity:.7}
.dk-sel{min-width:190px}
.dk-sel select{border:0;background:transparent;font-family:inherit;font-size:14px;color:var(--text);width:100%;outline:none;cursor:pointer;height:40px}
.dk-search{flex:1;min-width:220px}
.dk-search input{border:0;background:transparent;font-family:inherit;font-size:14px;color:var(--text);width:100%;outline:none}
.dk-excel{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--blue-600);background:#fff;color:var(--blue-600);border-radius:var(--radius-sm);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.dk-excel:hover{background:var(--blue-050)}
.dk-table-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.dk-table{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.dk-table th:nth-child(1){width:16%}
.dk-table th:nth-child(2){width:11%}
.dk-table th:nth-child(3){width:13%}
.dk-table th:nth-child(5){width:16%}
.dk-table thead th{background:var(--navy-800);color:#fff;text-align:left;padding:12px 12px;font-weight:600;font-size:12.5px;line-height:1.3;vertical-align:middle}
.dk-table tbody td{padding:11px 12px;border-top:1px solid var(--border);color:var(--text);vertical-align:middle;line-height:1.4;word-break:normal;overflow-wrap:normal}
.dk-table tbody tr:hover td{background:var(--blue-050)}
.dk-table .dk-tingkat{background:#f6f8fd;font-weight:700;color:var(--heading);vertical-align:middle;border-left:3px solid var(--gold-500);font-size:13px}
.dk-table .dk-kelas{font-weight:600;color:var(--heading)}
.dk-table .dk-ruang{white-space:nowrap}
.dk-table .dk-num{text-align:center}
.dk-table thead th:nth-child(3){text-align:center}
.dk-empty{padding:30px;text-align:center;color:var(--muted)}
.dk-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:14px 4px 0;font-size:13px;color:var(--muted)}
.dk-foot b{color:var(--heading)}
.dk-pager{margin-top:16px}
.dk-main{min-width:0}
.dk-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.dk-widgets .widget{padding:18px;margin-bottom:0}
.dk-widgets .widget h5{display:flex;align-items:center;gap:8px;color:var(--heading)}
@media(max-width:900px){.dk-widgets{grid-template-columns:1fr}}
.dk-sum-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dk-sum-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text)}
.dk-sum-list li:last-child{border-bottom:0;padding-bottom:0}
.dk-sum-list li span{display:flex;align-items:center;gap:8px}
.dk-sum-list li b{color:var(--heading);font-size:15px}
.dk-note p{margin:0 0 14px;font-size:13.5px;color:var(--muted);line-height:1.6}
.dk-note-ill{font-size:46px;text-align:center;background:var(--blue-050);border-radius:var(--radius-sm);padding:18px 0}
.dk-quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:0 0 14px}
.dk-chip{padding:8px 0;border:1px solid var(--border);background:#fff;border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--blue-600);cursor:pointer;transition:.15s}
.dk-chip:hover{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.dk-quick-all{display:block;width:100%;padding:11px 0;background:var(--navy-800);color:#fff;border:0;border-radius:var(--radius-sm);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.dk-quick-all:hover{background:var(--blue-600)}
@media(max-width:560px){.dk-table thead th,.dk-table tbody td{padding:11px 10px;font-size:13px}.dk-quick-grid{grid-template-columns:repeat(4,1fr)}}

/* ===== Modal Detail Berita OSIS ===== */
.obl-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.obl-modal[hidden]{display:none}
.obl-modal-overlay{position:absolute;inset:0;background:rgba(16,42,112,.55)}
.obl-modal-box{position:relative;background:#fff;border-radius:var(--radius);max-width:640px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:oblpop .18s ease}
@keyframes oblpop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.obl-modal-x{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--heading);font-size:24px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm)}
.obl-modal-x:hover{background:#fff;color:var(--blue-600)}
.obl-modal-thumb{height:240px;background:var(--blue-050) center/cover no-repeat;border-radius:var(--radius) var(--radius) 0 0}
.obl-modal-content{padding:24px}
.obl-modal-tag{display:inline-block;margin-bottom:12px}
.obl-modal-title{margin:0 0 10px;color:var(--heading);font-size:22px;line-height:1.3}
.obl-modal-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:16px}
.obl-modal-body{color:var(--text);font-size:15px;line-height:1.7;white-space:pre-line}
.news-readmore{cursor:pointer}
@media(max-width:560px){.obl-modal-thumb{height:170px}.obl-modal-content{padding:18px}}

/* ===== Berita OSIS (postingan) ===== */
.osis-berita-list a.obl-thumb{display:block}
.osis-berita-list .obl-body h3 a{color:inherit;text-decoration:none}
.osis-berita-list .obl-body h3 a:hover{color:var(--blue-600)}
.obl-noposts{padding:30px;text-align:center;color:var(--muted)}

/* ===== Tata Tertib Parkir ===== */
.ttp-hero .breadcrumb{margin-bottom:14px}
.ttp-hero-zones{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.ttp-zone{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:30px;color:#fff;font-weight:700;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ttp-zone.green{background:#16a34a}
.ttp-zone.blue{background:#2563eb}
.ttp-zone.orange{background:#ea7317}
.ttp-speed{display:inline-flex;align-items:center;gap:9px;margin-top:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);padding:7px 16px 7px 7px;border-radius:30px;color:#fff;font-weight:600;font-size:13px}
.ttp-speed strong{background:#fff;color:#b91c1c;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:15px;border:3px solid #b91c1c}
.ttp-speed span{font-weight:800;letter-spacing:.04em}

.ttp-row1,.ttp-row2,.ttp-row4{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start}
.ttp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ttp-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.ttp-card-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.ttp-num{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:15px}
.ttp-num.blue{background:#2563eb}.ttp-num.green{background:#16a34a}.ttp-num.purple{background:#7c3aed}.ttp-num.red{background:#dc2626}
.ttp-card-head h3{margin:0;font-size:15.5px;color:var(--heading);line-height:1.3}
.ttp-card-head p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.ttp-check{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:11px}
.ttp-check li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--text);line-height:1.45}
.ttp-check li svg{flex:0 0 auto;color:#2563eb;margin-top:1px}
.ttp-link{margin-top:auto;font-weight:700;font-size:13px;color:var(--blue-600);text-decoration:none;display:flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:10px;padding:11px 14px;justify-content:center}
.ttp-link:hover{background:var(--blue-050)}

.ttp-zonebox{border-radius:12px;padding:13px 15px;margin-bottom:12px}
.ttp-zonebox h4{margin:0 0 3px;font-size:13.5px;display:flex;align-items:center;gap:7px}
.ttp-zonebox .sub{font-size:11.5px;color:var(--muted);margin:0 0 8px;font-weight:600}
.ttp-zonebox ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px 14px}
.ttp-zonebox li{font-size:12.5px;color:var(--text);position:relative;padding-left:13px}
.ttp-zonebox li::before{content:"\2022";position:absolute;left:2px;opacity:.6}
.ttp-zonebox.green{background:#eafaf0;border:1px solid #bfe9cd}.ttp-zonebox.green h4{color:#15803d}
.ttp-zonebox.blue{background:#eaf1fe;border:1px solid #c5d8fb}.ttp-zonebox.blue h4{color:#1d4ed8}
.ttp-zonebox.orange{background:#fdf1e6;border:1px solid #f6d9bb}.ttp-zonebox.orange h4{color:#c2620f}

.ttp-info,.ttp-stat{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);overflow:hidden}
.ttp-info{padding:0 22px 22px}.ttp-stat{padding:0 22px 18px}
.ttp-info > h3,.ttp-stat > h3{margin:0 -22px 18px;padding:15px 20px;background:linear-gradient(135deg,#0a2c63,#13458f);color:#fff;font-size:15px}
.ttp-info-block{display:flex;gap:12px;margin-bottom:16px}
.ttp-info-ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--blue-050);display:grid;place-items:center;font-size:19px}
.ttp-info-block h4{margin:0 0 6px;font-size:13.5px;color:var(--heading)}
.ttp-info-block p{margin:0 0 8px;font-size:12.5px;color:var(--text);line-height:1.5}
.btn-block{display:block;text-align:center;width:100%}

.ttp-panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow-md)}
.ttp-panel-title{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:17px;color:var(--heading)}
.ttp-panel-title .ttp-num{width:30px;height:30px;font-size:14px}
.ttp-panel-sub{margin:0 0 20px;font-size:13px;color:var(--muted)}
.ttp-steps{display:flex;gap:6px;align-items:flex-start}
.ttp-step{flex:1;text-align:center}
.ttp-step .ic{width:62px;height:62px;border-radius:50%;background:var(--blue-050);display:grid;place-items:center;font-size:26px;margin:0 auto 10px;border:2px solid #d8e4fb}
.ttp-step h5{margin:0 0 5px;font-size:12.5px;color:var(--heading);line-height:1.3}
.ttp-step p{margin:0;font-size:11px;color:var(--muted);line-height:1.4}
.ttp-arrow{flex:0 0 auto;align-self:center;color:#b9c6e0;font-size:20px;font-weight:700;margin-top:-18px}

.ttp-stat-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.ttp-stat-row:last-of-type{border-bottom:none}
.ttp-stat-row .lbl{display:flex;align-items:center;gap:9px;color:var(--text)}
.ttp-stat-row .val{font-weight:800;color:var(--heading)}
.ttp-stat-upd{margin:12px 0 0;font-size:11.5px;color:var(--muted);text-align:center}

.ttp-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;background:#f5f8ff;border:1px solid var(--border);border-radius:16px;padding:26px}
.ttp-mini-item{display:flex;gap:14px}
.ttp-mini-ic{flex:0 0 auto;width:50px;height:50px;border-radius:12px;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff}
.ttp-mini-ic.red{background:#dc2626}.ttp-mini-ic.blue{background:#2563eb}.ttp-mini-ic.orange{background:#ea7317}
.ttp-mini-item h4{margin:0 0 6px;font-size:14px;color:var(--heading)}
.ttp-mini-item p,.ttp-mini-item ul{margin:0;font-size:12.5px;color:var(--text);line-height:1.55}
.ttp-mini-item ul{padding-left:16px}

.ttp-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ttp-tier{border-radius:14px;padding:18px;border:1px solid}
.ttp-tier .tag{font-weight:800;font-size:13px;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.ttp-tier p:last-child{margin:0;font-size:12.5px;line-height:1.55;color:var(--text)}
.ttp-tier.t1{background:#fffbeb;border-color:#fce8b2}.ttp-tier.t1 .tag{color:#b45309}
.ttp-tier.t2{background:#fff4ed;border-color:#fad3bd}.ttp-tier.t2 .tag{color:#c2410c}
.ttp-tier.t3{background:#fef2f2;border-color:#f8cccc}.ttp-tier.t3 .tag{color:#b91c1c}
.ttp-quote{background:linear-gradient(135deg,#0a2c63,#1e57c9);color:#fff;border-radius:16px;padding:26px;display:flex;flex-direction:column;justify-content:center}
.ttp-quote .em{font-size:40px;margin-bottom:10px}
.ttp-quote p{margin:0;font-size:16px;font-weight:700;line-height:1.45}

.ttp-cta{background:linear-gradient(135deg,#0a2c63,#13458f);border-radius:18px;padding:30px 34px;display:flex;align-items:center;gap:20px;color:#fff}
.ttp-cta .ic{font-size:36px;flex:0 0 auto}
.ttp-cta h3{margin:0 0 6px;font-size:21px}
.ttp-cta p{margin:0;font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.55}

@media(max-width:980px){.ttp-row1,.ttp-row2,.ttp-row4{grid-template-columns:1fr}.ttp-steps{flex-wrap:wrap}}
@media(max-width:680px){.ttp-cards,.ttp-mini,.ttp-tiers{grid-template-columns:1fr}.ttp-steps{display:grid;grid-template-columns:1fr;gap:14px}.ttp-arrow{display:none}.ttp-cta{flex-direction:column;text-align:center}}

/* ===== Halaman Layanan (Informasi) ===== */
.svc-pill{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;margin-left:10px;vertical-align:middle}
.svc-2col{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start}
.svc-3col{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:22px;align-items:start}
.svc-2big{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svc-panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow-md)}
.svc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 16px}
.svc-head h3{margin:0;font-size:16px;color:var(--heading)}
.svc-head a{font-size:12px;color:var(--blue-600);text-decoration:none;font-weight:700;white-space:nowrap}
.svc-cico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px}
.svc-cico.blue{background:var(--blue-050)}.svc-cico.green{background:#eafaf0}.svc-cico.purple{background:#f3edfe}.svc-cico.orange{background:#fdf1e6}.svc-cico.red{background:#fef2f2}
.ttp-check.green li svg{color:#16a34a}
.ttp-check.purple li svg{color:#7c3aed}
.svc-flow{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;justify-content:center}
.svc-flow .st{flex:1 1 60px;min-width:60px;text-align:center}
.svc-flow .st .ic{width:46px;height:46px;border-radius:50%;background:var(--blue-050);display:grid;place-items:center;font-size:18px;margin:0 auto 7px;border:2px solid #dbe6fb}
.svc-flow .st b{display:block;font-size:11px;color:var(--heading);margin-bottom:3px;line-height:1.25}
.svc-flow .st span{font-size:10px;color:var(--muted);line-height:1.3;display:block}
.svc-flow .ar{align-self:flex-start;color:#b9c6e0;font-weight:700;margin-top:14px}
.svc-ann{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.svc-ann li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px}
.svc-ann .d{flex:0 0 auto;color:var(--muted);font-size:11px;min-width:62px}
.svc-ann .t{color:var(--text);line-height:1.4}
.svc-docs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.svc-docs li{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--border);border-radius:10px;background:#fcfdff}
.svc-docs .fic{flex:0 0 auto;font-size:17px}
.svc-docs .meta{flex:1;min-width:0}
.svc-docs .meta b{display:block;font-size:12.5px;color:var(--heading);font-weight:600}
.svc-docs .meta span{font-size:11px;color:var(--muted)}
.svc-docs .dl{flex:0 0 auto;color:var(--blue-600);font-size:15px}
.svc-btn{display:block;text-align:center;width:100%;margin-top:16px;border:1px solid var(--border);border-radius:10px;padding:11px;font-weight:700;font-size:13px;color:var(--blue-600);text-decoration:none}
.svc-btn:hover{background:var(--blue-050)}
.svc-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:13px}
.svc-prod{text-align:center}
.svc-prod .ph{height:88px;border-radius:12px;background:var(--blue-050);display:grid;place-items:center;font-size:32px;margin-bottom:8px;border:1px solid var(--border)}
.svc-prod b{display:block;font-size:12px;color:var(--heading)}
.svc-prod span{font-size:12px;color:var(--blue-600);font-weight:700}
.svc-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.svc-logo{border:1px solid var(--border);border-radius:12px;padding:15px 12px;text-align:center;background:#fff}
.svc-logo .lg{height:30px;display:grid;place-items:center;font-weight:800;color:#0a2c63;font-size:13.5px;margin-bottom:6px;letter-spacing:.02em}
.svc-logo span{font-size:11px;color:var(--muted)}
.svc-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc-gal{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.svc-gal .img{height:84px;background:linear-gradient(135deg,#dbe6fb,#eef3ff);display:grid;place-items:center;font-size:24px}
.svc-gal span{display:block;padding:8px 10px;font-size:11.5px;color:var(--heading);font-weight:600;background:#fff}
.svc-links{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.svc-links li{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;font-size:12.5px;color:var(--text);line-height:1.4}
.svc-links li .ic{flex:0 0 auto;font-size:16px}
.svc-links li .ar{margin-left:auto;color:#b9c6e0}
.svc-cond{background:#eafaf0;border:1px solid #bfe9cd;border-radius:16px;box-shadow:var(--shadow-md);overflow:hidden;padding:0 22px 20px}
.svc-cond > h3{margin:0 -22px 16px;padding:14px 20px;background:#16a34a;color:#fff;font-size:14.5px}
.svc-cond .face{font-size:46px;text-align:center}
.svc-cond .big{font-size:22px;font-weight:800;color:#15803d;text-align:center;margin:4px 0}
.svc-cond p{margin:6px 0 0;font-size:12px;color:var(--text);text-align:center}
.svc-cond .upd{margin-top:12px;font-size:11px;color:var(--muted);text-align:center}
.svc-hours{background:var(--blue-050);border-radius:10px;padding:11px 13px;margin:14px 0;font-size:12.5px;line-height:1.6}
.svc-hours b{color:var(--heading)}
.svc-help{display:flex;align-items:center;gap:18px;background:#eef3ff;border:1px solid #d6e2fb;border-radius:16px;padding:22px 26px}
.svc-help .ic{font-size:30px;flex:0 0 auto}
.svc-help h3{margin:0 0 5px;font-size:17px;color:var(--heading)}
.svc-help p{margin:0;font-size:13px;color:var(--text);line-height:1.5}
.svc-help-btn{margin-left:auto;flex:0 0 auto;background:#103a8e;color:#fff;border-radius:10px;padding:11px 18px;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
@media(max-width:980px){.svc-2col,.svc-3col{grid-template-columns:1fr}.svc-logos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.svc-2big{grid-template-columns:1fr}.svc-gallery{grid-template-columns:1fr}.svc-help{flex-direction:column;text-align:center}.svc-help-btn{margin-left:0}}


/* === Rapikan jarak section halaman Tata Tertib Parkir === */
body:not(.home) .section.ttp-sec{padding-top:16px!important;padding-bottom:16px!important}
body:not(.home) .section.ttp-sec-first{padding-top:30px!important}
body:not(.home) .section.ttp-sec-last{padding-bottom:46px!important}
.ttp-cta h3{line-height:1.25;color:#fff}
.ttp-cta p{color:rgba(255,255,255,.88)}
@media(max-width:768px){
  body:not(.home) .section.ttp-sec{padding-top:14px!important;padding-bottom:14px!important}
  body:not(.home) .section.ttp-sec-first{padding-top:24px!important}
  body:not(.home) .section.ttp-sec-last{padding-bottom:36px!important}
}


/* === Rapikan halaman Laboratorium (hilangkan ruang kosong) === */
.svc-labgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.svc-labgrid > .svc-panel:first-child{grid-column:1 / -1}
.svc-labtypes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media(max-width:880px){.svc-labgrid{grid-template-columns:1fr}}
@media(max-width:680px){.svc-labtypes{grid-template-columns:1fr}}

/* ====== Bimbingan Konseling: rapatkan jarak antar section/widget ====== */
body:not(.home) .section.bk-sec{padding-top:10px!important;padding-bottom:10px!important}
body:not(.home) .section.bk-sec-first{padding-top:40px!important}
body:not(.home) .section.bk-sec-last{padding-bottom:24px!important}
.bk-sec .svc-2col{gap:18px;align-items:stretch}
.bk-sec .svc-3col{gap:16px;align-items:stretch}
@media(max-width:680px){
  body:not(.home) .section.bk-sec{padding-top:10px!important;padding-bottom:10px!important}
  body:not(.home) .section.bk-sec-first{padding-top:40px!important}
  body:not(.home) .section.bk-sec-last{padding-bottom:24px!important}
}

/* BK: jarak antar widget seragam 16px (8 + 8) di semua section, termasuk blok bantuan */
body:not(.home) .section.bk-help{padding-top:10px!important;padding-bottom:10px!important}

/* BK baris Alur: lebarkan kolom Alur Konsultasi (1 baris) & kecilkan Informasi Kesehatan */
@media(min-width:981px){body:not(.home) .bk-row-alur .svc-3col{grid-template-columns:1.9fr 0.8fr 1fr!important;align-items:stretch!important}}
/* BK: samakan tinggi semua panel dalam 1 baris (bawah sejajar) */
body:not(.home) .bk-sec .svc-3col{align-items:stretch!important}
body:not(.home) .bk-sec .svc-3col > .svc-panel{height:100%}
/* BK: Jam Layanan (kolom kanan) setinggi kolom kartu di kiri */
body:not(.home) .bk-sec .svc-2col{align-items:stretch!important}
body:not(.home) .bk-sec .svc-2col > .ttp-info{height:100%}

/* ===== Koperasi & Kantin: samakan tinggi antar widget (sama seperti BK) ===== */
body:not(.home) .kop-sec .svc-2col{align-items:stretch!important}
body:not(.home) .kop-sec .svc-2col > .ttp-info{height:100%}
body:not(.home) .kop-sec .svc-2big{align-items:stretch}
body:not(.home) .kop-sec .svc-2big > .svc-panel{height:100%}
/* ttp-info: isi terdistribusi rapi & tombol menempel ke bawah (BK + Koperasi) */
body:not(.home) .bk-sec .ttp-info,
body:not(.home) .kop-sec .ttp-info{display:flex;flex-direction:column;justify-content:space-between}
body:not(.home) .bk-sec .ttp-info > .btn-block,
body:not(.home) .kop-sec .ttp-info > .btn-block{margin-top:auto}

/* ===== Koperasi & Kantin: jarak antar widget seragam (sama seperti BK) ===== */
body:not(.home) .section.kop-sec{padding-top:10px!important;padding-bottom:10px!important}
body:not(.home) .section.kop-sec-first{padding-top:40px!important}
body:not(.home) .section.kop-sec-last{padding-bottom:24px!important}
.kop-sec .svc-2col{gap:18px}
.kop-sec .svc-2big{gap:16px}
body:not(.home) .section.kop-help{padding-top:10px!important;padding-bottom:24px!important}
@media(max-width:680px){
  body:not(.home) .section.kop-sec{padding-top:10px!important;padding-bottom:10px!important}
  body:not(.home) .section.kop-sec-first{padding-top:40px!important}
  body:not(.home) .section.kop-sec-last{padding-bottom:24px!important}
  body:not(.home) .section.kop-help{padding-top:10px!important;padding-bottom:24px!important}
}

/* ===== Halaman Layanan (PKL, UKS, Lab, Kurikulum, TU, Parkir): tinggi widget sama + jarak seragam (sama seperti BK) ===== */
body:not(.home) .section.lyn-sec{padding-top:10px!important;padding-bottom:10px!important}
body:not(.home) .section.lyn-sec-first{padding-top:40px!important}
body:not(.home) .section.lyn-sec-last{padding-bottom:24px!important}
/* GLOBAL: hero->widget pertama 40px & widget terakhir->footer 40px (semua halaman non-home).
   Jarak bawah BERSUMBER dari padding-bottom elemen terakhir (bukan margin footer), agar dimiliki tiap halaman. */
body:not(.home) .footer{margin-top:0!important}
body:not(.home) .page-body{padding-bottom:40px!important}
/* Halaman ber-.section (archive, single, page, search, index, spmb): padding-bottom section terakhir = 40px (jarak ke footer) */
body:not(.home) .site-main > .section:last-child{padding-bottom:40px!important}
.lyn-sec .svc-2col{gap:18px;align-items:stretch}
.lyn-sec .svc-3col{gap:16px;align-items:stretch}
.lyn-sec .svc-2big{gap:16px;align-items:stretch}
.lyn-sec .ttp-row1{align-items:stretch}
body:not(.home) .lyn-sec .svc-2col{align-items:stretch!important}
body:not(.home) .lyn-sec .svc-3col{align-items:stretch!important}
body:not(.home) .lyn-sec .svc-2big{align-items:stretch!important}
body:not(.home) .lyn-sec .svc-2col > .ttp-info{height:100%}
body:not(.home) .lyn-sec .ttp-row1 > .ttp-info{height:100%}
body:not(.home) .lyn-sec .svc-3col > .svc-panel{height:100%}
body:not(.home) .lyn-sec .svc-2big > .svc-panel{height:100%}
body:not(.home) .lyn-sec .ttp-info{display:flex;flex-direction:column;justify-content:space-between}
body:not(.home) .lyn-sec .ttp-info > .btn-block{margin-top:auto}
body:not(.home) .section.pkl-help{padding-top:10px!important;padding-bottom:10px!important}
body:not(.home) .section.lab-help,
body:not(.home) .section.kur-help,
body:not(.home) .section.tu-help{padding-top:10px!important;padding-bottom:24px!important}
@media(max-width:680px){
  body:not(.home) .section.lyn-sec{padding-top:10px!important;padding-bottom:10px!important}
  body:not(.home) .section.lyn-sec-first{padding-top:40px!important}
  body:not(.home) .section.lyn-sec-last{padding-bottom:24px!important}
  body:not(.home) .section.pkl-help{padding-top:10px!important;padding-bottom:10px!important}
  body:not(.home) .section.lab-help,
  body:not(.home) .section.kur-help,
  body:not(.home) .section.tu-help{padding-top:10px!important;padding-bottom:24px!important}
}

/* ===== Jarak widget terakhir ke footer ===== */
/* BK & Koperasi: tetap rapat (~20px) seperti penyetelan sebelumnya */
body:not(.home) .site-main > .bk-sec:last-child,
body:not(.home) .site-main > .kop-sec:last-child,
body:not(.home) .site-main > .bk-help:last-child,
body:not(.home) .site-main > .kop-help:last-child{padding-bottom:40px!important}
/* 6 halaman layanan (PKL, UKS, Lab, Kurikulum, TU, Parkir): jarak ke footer = sama spt halaman Profil (page-body padding-bottom 64px) */
body:not(.home) .site-main > .lyn-sec:last-child,
body:not(.home) .site-main > .lab-help:last-child,
body:not(.home) .site-main > .kur-help:last-child,
body:not(.home) .site-main > .tu-help:last-child{padding-bottom:40px!important}

/* Filter tambahan Data Siswa */
.sma-siswa-extra-filter{display:flex;align-items:center;gap:10px;margin:10px 0 14px;flex-wrap:wrap}
.sma-siswa-extra-filter label{font-size:13px;font-weight:700;color:var(--navy-800)}
.sma-siswa-extra-filter select{height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;padding:0 12px;color:var(--text);font-family:var(--font-body)}

/* Rapikan baris kontrol Data Siswa: filter gender kiri, tombol tampilan kanan */
.sma-siswa-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 16px;flex-wrap:wrap}
.sma-siswa-controls .sma-siswa-extra-filter{margin:0}
.sma-siswa-controls .grid-view-toggle{margin:0}
@media(max-width:640px){.sma-siswa-controls{align-items:stretch}.sma-siswa-controls .sma-siswa-extra-filter,.sma-siswa-controls .grid-view-toggle{width:100%;justify-content:flex-start}.sma-siswa-controls .sma-siswa-extra-filter select{flex:1;min-width:0}}

/* Button label filter jenis kelamin */
.sma-siswa-extra-filter .sma-filter-pill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;background:linear-gradient(135deg,var(--navy-800),var(--blue-600));color:#fff;font-size:13px;font-weight:800;box-shadow:0 8px 18px rgba(37,99,235,.18);white-space:nowrap}
.sma-siswa-extra-filter .sma-filter-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;opacity:.9;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.sma-siswa-extra-filter select{min-width:210px}
@media(max-width:640px){.sma-siswa-extra-filter .sma-filter-pill{justify-content:center}.sma-siswa-extra-filter select{min-width:0}}

/* Logo custom WordPress: paksa menyesuaikan tinggi header */
.brand .custom-logo-link{width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex:0 0 46px;border-radius:8px;overflow:hidden;background:#fff}
.brand .custom-logo-link img,
.brand img.custom-logo{max-width:46px!important;max-height:46px!important;width:auto!important;height:auto!important;object-fit:contain;display:block}
.header .custom-logo-link{line-height:0}
@media(max-width:768px){.brand .custom-logo-link{width:42px;height:42px;flex-basis:42px}.brand .custom-logo-link img,.brand img.custom-logo{max-width:42px!important;max-height:42px!important}}

/* Header logo final fix: jangan biarkan logo upload melebihi navbar */
.brand .sma-logo-wrap{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;flex:0 0 46px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border-radius:8px;background:#fff;line-height:0}
.brand .sma-logo-img{display:block!important;width:100%!important;height:100%!important;max-width:46px!important;max-height:46px!important;object-fit:contain!important;object-position:center!important}
.brand .custom-logo-link,.header .custom-logo-link{width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;overflow:hidden!important;flex:0 0 46px!important;line-height:0!important}
.brand .custom-logo-link img,.header img.custom-logo{width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;object-fit:contain!important;object-position:center!important;display:block!important}
@media(max-width:768px){.brand .sma-logo-wrap,.brand .custom-logo-link,.header .custom-logo-link{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;flex-basis:42px!important}.brand .sma-logo-img,.brand .custom-logo-link img,.header img.custom-logo{width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important}}

/* Filter jenis kelamin Data Staff */
.ds-gender-wrap select{min-width:180px}


/* Rapikan toolbar Data Staff: tabs, filter, dan search sejajar */
.ds-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.ds-toolbar .spacer{display:none!important}
.ds-toolbar .ds-tabs{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.ds-toolbar .ds-more{position:relative;flex:0 0 auto}
.ds-toolbar .ds-select-wrap{flex:0 0 auto;height:38px;display:inline-flex;align-items:center;padding:0;border:0;background:transparent}
.ds-toolbar .ds-select-wrap select{height:38px;max-width:170px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;padding:0 10px;font-size:13px;color:var(--text)}
.ds-toolbar .ds-bidang{width:138px}
.ds-toolbar .ds-gender{width:170px}
.ds-toolbar .field{height:38px;flex:0 0 170px;padding:0 10px;box-sizing:border-box}
.ds-toolbar .field input{width:125px;min-width:0}
@media(max-width:980px){.ds-toolbar{flex-wrap:wrap}.ds-toolbar .ds-tabs{flex:1 1 100%;flex-wrap:wrap}.ds-toolbar .ds-select-wrap,.ds-toolbar .field{flex:1 1 180px}.ds-toolbar .ds-select-wrap select,.ds-toolbar .ds-bidang,.ds-toolbar .ds-gender{width:100%;max-width:none}.ds-toolbar .field input{width:100%}}


/* Data Staff: samakan pola toolbar dengan Data Guru */
.ds-main .ds-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ds-main .ds-toolbar .ds-tabs{flex:1 1 auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.ds-main .ds-toolbar .spacer{display:block!important;margin-left:auto}
.ds-main .ds-toolbar .field{height:44px;flex:0 0 260px;padding:0 14px;box-sizing:border-box;border-radius:12px}
.ds-main .ds-toolbar .field input{width:210px;min-width:0}
.ds-staff-controls{justify-content:flex-start;margin-top:10px;margin-bottom:18px}
.ds-staff-controls .sma-siswa-extra-filter{margin:0}
.ds-staff-controls .sma-filter-pill{height:42px;padding:0 16px}
.ds-staff-controls select{height:42px;min-width:210px;border:1px solid var(--border);border-radius:10px;background:#fff;padding:0 12px;color:var(--text);font-family:var(--font-body)}
.ds-staff-controls .ds-bidang{min-width:170px}
@media(max-width:760px){.ds-main .ds-toolbar .field{flex:1 1 100%}.ds-main .ds-toolbar .field input{width:100%}.ds-staff-controls{align-items:stretch}.ds-staff-controls .sma-siswa-extra-filter{width:100%;justify-content:flex-start}.ds-staff-controls select{flex:1;min-width:0}}


/* Homepage berita: penggalan artikel maksimal 3 baris */
.news-card .body .news-excerpt{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.65;max-height:calc(1.65em * 3);min-height:calc(1.65em * 3);margin-bottom:18px;color:var(--muted);font-size:13.5px}


/* Footer: sejajarkan judul Buletin Sekolah dengan kolom lain */
.footer .newsletter{margin-top:0!important}
.footer .cols > div{align-self:start}


/* Footer logo mengikuti logo Customizer */
.footer .footer-brand-logo{align-items:center;gap:12px;margin-bottom:14px}
.footer .footer-logo-wrap{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;flex:0 0 46px!important;background:rgba(255,255,255,.08)!important;border-radius:8px!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}
.footer .footer-logo-img{width:100%!important;height:100%!important;max-width:46px!important;max-height:46px!important;object-fit:contain!important;object-position:center!important;display:block!important}
.footer .footer-brand-logo .logo{width:46px;height:46px}


/* Homepage Tentang Kami: tambah batas atas/bawah agar statistik tidak dempet */
.home .about-section{padding-top:46px!important;padding-bottom:42px!important}
.home .about-section + .section{padding-top:34px!important}
.home .about-grid{align-items:center}
.home .about-stats{padding-top:16px!important;padding-bottom:16px!important}
.home .about-stats .stat{padding:2px 0}
@media(max-width:980px){.home .about-section{padding-top:38px!important;padding-bottom:38px!important}.home .about-section + .section{padding-top:28px!important}.home .about-stats{padding-top:12px!important;padding-bottom:12px!important}}


/* Homepage: satukan background feature banner dengan section Tentang Kami */
.home .feature-wrap{background:var(--bg)!important;margin-bottom:0!important;padding-bottom:0!important}
.home .feature-wrap .container{position:relative;z-index:2}
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:34px!important;padding-bottom:46px!important}
.home .about-section + .section{background:#fff!important;padding-top:34px!important}
.home .news-section{background:#fff!important;margin-top:0!important}


/* Fix background feature banner: wrapper full-width, kartu tidak meninggalkan blok putih */
.home .feature-wrap{width:100%!important;background:var(--bg)!important;margin-top:0!important;margin-bottom:0!important;padding:0 0 26px!important;position:relative;z-index:3}
.home .feature-wrap .container{background:transparent!important;position:relative;z-index:2}
.home .feature-wrap .home-features{margin-top:-66px!important;margin-bottom:0!important;background:#fff!important}
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:10px!important}


/* Homepage: feature card melayang tepat di garis pertemuan hero dan background */
.home .home-hero{position:relative!important;z-index:1!important}
.home .feature-wrap{width:100%!important;background:linear-gradient(to bottom, transparent 0 50%, var(--bg) 50% 100%)!important;margin-top:-56px!important;margin-bottom:0!important;padding:0 0 28px!important;position:relative!important;z-index:4!important}
.home .feature-wrap .container{background:transparent!important;position:relative!important;z-index:2!important}
.home .feature-wrap .home-features{margin-top:0!important;margin-bottom:0!important;background:#fff!important;box-shadow:0 22px 48px rgba(0,33,81,.16)!important}
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:28px!important}
@media(max-width:980px){.home .feature-wrap{margin-top:-44px!important;background:var(--bg)!important;padding-top:0!important}.home .feature-wrap .home-features{margin-top:0!important}}


/* Homepage: hilangkan bidang putih di sekitar feature banner */
.home .feature-wrap{width:100%!important;background:var(--bg)!important;margin-top:-56px!important;margin-bottom:0!important;padding:0 0 28px!important;position:relative!important;z-index:4!important}
.home .feature-wrap .container{background:transparent!important;position:relative!important;z-index:2!important}
.home .feature-wrap .home-features{margin-top:0!important;margin-bottom:0!important;background:#fff!important;box-shadow:0 22px 48px rgba(0,33,81,.16)!important}
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:28px!important}
@media(max-width:980px){.home .feature-wrap{margin-top:-44px!important;background:var(--bg)!important}}


/* FINAL homepage feature: banner ditinggikan, card berada di garis potong banner/abu-abu */
.home .home-hero .container{padding-block:92px 190px!important}
.home .feature-wrap{width:100%!important;margin-top:-92px!important;margin-bottom:0!important;padding:0 0 34px!important;position:relative!important;z-index:4!important;background:linear-gradient(to bottom, transparent 0 92px, var(--bg) 92px 100%)!important}
.home .feature-wrap .container{background:transparent!important;position:relative!important;z-index:2!important}
.home .feature-wrap .home-features{margin-top:0!important;margin-bottom:0!important;background:#fff!important;box-shadow:0 22px 48px rgba(0,33,81,.16)!important}
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:18px!important;padding-bottom:46px!important}
.home .about-section + .section{background:#fff!important;padding-top:34px!important}
.home .news-section{background:#fff!important;margin-top:0!important}
@media(max-width:980px){.home .home-hero .container{padding-block:74px 150px!important}.home .feature-wrap{margin-top:-72px!important;background:linear-gradient(to bottom, transparent 0 72px, var(--bg) 72px 100%)!important}}


/* FINAL spacing: rapatkan area feature ke Tentang Kami, total jarak sekitar 40px */
.home .home-hero .container{padding-block:92px 150px!important}
.home .feature-wrap{width:100%!important;margin-top:-52px!important;margin-bottom:0!important;padding:0 0 20px!important;position:relative!important;z-index:4!important;background:linear-gradient(to bottom, transparent 0 52px, var(--bg) 52px 100%)!important}
.home .feature-wrap .container{background:transparent!important;position:relative!important;z-index:2!important}
.home .feature-wrap .home-features{margin-top:0!important;margin-bottom:0!important;background:#fff!important;box-shadow:0 22px 48px rgba(0,33,81,.16)!important}
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:20px!important;padding-bottom:40px!important}
.home .about-section + .section{background:#fff!important;padding-top:30px!important}
@media(max-width:980px){.home .home-hero .container{padding-block:74px 132px!important}.home .feature-wrap{margin-top:-48px!important;padding-bottom:18px!important;background:linear-gradient(to bottom, transparent 0 48px, var(--bg) 48px 100%)!important}.home .about-section{padding-top:18px!important;padding-bottom:34px!important}}


/* FINAL spacing 2: kurangi jarak atas feature sekitar setengah */
.home .home-hero .container{padding-block:92px 110px!important}
.home .feature-wrap{width:100%!important;margin-top:-52px!important;margin-bottom:0!important;padding:0 0 20px!important;position:relative!important;z-index:4!important;background:linear-gradient(to bottom, transparent 0 52px, var(--bg) 52px 100%)!important}
.home .feature-wrap .container{background:transparent!important;position:relative!important;z-index:2!important}
.home .feature-wrap .home-features{margin-top:0!important;margin-bottom:0!important;background:#fff!important;box-shadow:0 22px 48px rgba(0,33,81,.16)!important}
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:20px!important;padding-bottom:40px!important}
.home .about-section + .section{background:#fff!important;padding-top:30px!important}
@media(max-width:980px){.home .home-hero .container{padding-block:74px 96px!important}.home .feature-wrap{margin-top:-48px!important;padding-bottom:18px!important;background:linear-gradient(to bottom, transparent 0 48px, var(--bg) 48px 100%)!important}.home .about-section{padding-top:18px!important;padding-bottom:34px!important}}


/* FINAL spacing 3: jarak bawah feature ke Tentang Kami total 10px */
.home .home-hero .container{padding-block:92px 110px!important}
.home .feature-wrap{width:100%!important;margin-top:-52px!important;margin-bottom:0!important;padding:0 0 5px!important;position:relative!important;z-index:4!important;background:linear-gradient(to bottom, transparent 0 52px, var(--bg) 52px 100%)!important}
.home .feature-wrap .container{background:transparent!important;position:relative!important;z-index:2!important}
.home .feature-wrap .home-features{margin-top:0!important;margin-bottom:0!important;background:#fff!important;box-shadow:0 22px 48px rgba(0,33,81,.16)!important}
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:5px!important;padding-bottom:40px!important}
.home .about-section + .section{background:#fff!important;padding-top:30px!important}
@media(max-width:980px){.home .home-hero .container{padding-block:74px 96px!important}.home .feature-wrap{margin-top:-48px!important;padding-bottom:5px!important;background:linear-gradient(to bottom, transparent 0 48px, var(--bg) 48px 100%)!important}.home .about-section{padding-top:5px!important;padding-bottom:34px!important}}


/* FINAL spacing 4: jarak bawah Tentang Kami ke section berikutnya 10px */
.home .home-hero .container{padding-block:92px 110px!important}
.home .feature-wrap{width:100%!important;margin-top:-52px!important;margin-bottom:0!important;padding:0 0 5px!important;position:relative!important;z-index:4!important;background:linear-gradient(to bottom, transparent 0 52px, var(--bg) 52px 100%)!important}
.home .feature-wrap .container{background:transparent!important;position:relative!important;z-index:2!important}
.home .feature-wrap .home-features{margin-top:0!important;margin-bottom:0!important;background:#fff!important;box-shadow:0 22px 48px rgba(0,33,81,.16)!important}
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:5px!important;padding-bottom:10px!important}
.home .about-section + .section{background:#fff!important;padding-top:0!important}
.home .news-section{background:#fff!important;margin-top:0!important}
@media(max-width:980px){.home .home-hero .container{padding-block:74px 96px!important}.home .feature-wrap{margin-top:-48px!important;padding-bottom:5px!important;background:linear-gradient(to bottom, transparent 0 48px, var(--bg) 48px 100%)!important}.home .about-section{padding-top:5px!important;padding-bottom:10px!important}.home .about-section + .section{padding-top:0!important}}


/* FINAL spacing 5: jarak BERITA TERBARU ke atas 10px */
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:5px!important;padding-bottom:10px!important}
.home .about-section + .news-section,
.home .news-section{background:#fff!important;margin-top:0!important;padding-top:10px!important}
@media(max-width:980px){.home .about-section{padding-bottom:10px!important}.home .about-section + .news-section,.home .news-section{padding-top:10px!important}}


/* FINAL spacing 6: jarak BERITA TERBARU ke atas 20px */
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:5px!important;padding-bottom:10px!important}
.home .about-section + .news-section,
.home .news-section{background:#fff!important;margin-top:0!important;padding-top:20px!important}
@media(max-width:980px){.home .about-section{padding-bottom:10px!important}.home .about-section + .news-section,.home .news-section{padding-top:20px!important}}


/* FINAL spacing CTA: jarak atas dan bawah Penerimaan Peserta Didik Baru sama */
.home .cta-band{margin-top:40px!important;margin-bottom:40px!important}
.home .site-main > section.container:last-of-type{padding-bottom:0!important}


/* FINAL spacing 7: jarak BERITA TERBARU ke atas 40px */
.home .about-section{background:var(--bg)!important;margin-top:0!important;padding-top:5px!important;padding-bottom:10px!important}
.home .about-section + .news-section,
.home .news-section{background:#fff!important;margin-top:0!important;padding-top:40px!important}
@media(max-width:980px){.home .about-section{padding-bottom:10px!important}.home .about-section + .news-section,.home .news-section{padding-top:40px!important}}


/* Visi Misi: ganti ilustrasi footer agar tidak seperti kantong belanja */
.vm-footer .vf-icon-edu{right:20px;bottom:10px;opacity:.14}
.vm-footer .vf-icon-edu svg{display:block;filter:drop-shadow(0 8px 18px rgba(14,63,134,.10))}


/* Visi Misi: ornamen kompas */
.vm-footer .vf-icon-compass{right:18px;bottom:8px;opacity:.14;transform:rotate(-8deg)}
.vm-footer .vf-icon-compass svg{display:block;filter:drop-shadow(0 10px 20px rgba(14,63,134,.12))}



/* Halaman /berita/: penggalan isi maksimal 3 baris lalu elipsis */
.berita-main .news-card .nc-body p,
.berita-main .news-featured .nf-body p{
	display:-webkit-box!important;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis;
	line-height:1.55;
	max-height:calc(1.55em * 3);
}


/* Halaman /berita/: paksa excerpt tampil 3 baris lalu elipsis */
.berita-main .news-card .nc-body p,
.berita-main .news-featured .nf-body p{
	display:-webkit-box!important;
	-webkit-line-clamp:3!important;
	-webkit-box-orient:vertical!important;
	overflow:hidden!important;
	text-overflow:ellipsis!important;
	line-height:1.55!important;
	max-height:calc(1.55em * 3)!important;
	min-height:calc(1.55em * 3)!important;
}



/* Banner Berita: tampilkan gambar utuh seperti fit di layar laptop */
.page-hero.berita-hero{
	background-size:contain!important;
	background-position:center center!important;
	background-repeat:no-repeat!important;
	background-color:#0a2c63!important;
}


/* Semua banner halaman: tampilkan gambar upload full/utuh seperti fit layar */
.page-hero.has-img{
	background-size:contain!important;
	background-position:center center!important;
	background-repeat:no-repeat!important;
	background-color:#0a2c63!important;
}

/* Total + sortir untuk halaman grid seperti Karya Siswa */
.sma-grid-total{margin:4px 0 18px;font-weight:700;color:#0f172a}
.toolbar .sma-grid-sort-wrap{margin-left:auto}
.toolbar .sma-grid-sort{min-width:130px}
@media(max-width:760px){.toolbar .sma-grid-sort-wrap{margin-left:0}.toolbar .sma-grid-sort{width:100%}}

/* Frame/panel daftar data seperti Galeri */
.sma-grid-frame{padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.sma-grid-frame>.toolbar,.sma-grid-frame .ds-toolbar{margin-top:0}
.sma-grid-frame>.grid,.sma-grid-frame>.ds-grid{margin-top:18px}
.sma-grid-frame .sma-siswa-controls{margin:10px 0 14px}
.sma-grid-frame .pagination,.sma-grid-frame .ds-pager{margin-top:22px}
.ds-main.panel.sma-grid-frame{min-width:0;container-type:inline-size}
@media(max-width:760px){.sma-grid-frame{padding:16px 14px;border-radius:14px}}

/* Warna Jabatan / Mata Pelajaran pada Data Guru */
.card-profile .role.role-pill{display:inline-flex;align-items:center;justify-content:center;align-self:center;padding:5px 10px;border-radius:999px;font-weight:700;font-size:12px;line-height:1.25;margin:2px auto 8px;max-width:100%}

/* Thumbnail kartu konten dapat diklik menuju detail, termasuk Data Siswa */
.card-content a.thumb{display:block;text-decoration:none;color:inherit}
.card-content a.thumb:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:3px}

/* Susun badge Jabatan dan Kategori Staff ke bawah */
.ds-item .role.role-pill{display:flex;width:fit-content;max-width:100%;margin:2px auto 8px;text-align:center}
.ds-item > .badge{display:flex;width:fit-content;max-width:100%;margin:0 auto 10px;text-align:center}

/* Popup foto siswa pada kartu Data Siswa */
.card-content button.thumb{display:block;width:100%;border:0;padding:0;cursor:zoom-in;text-decoration:none;color:inherit}
.sma-photo-modal{position:fixed;inset:0;background:rgba(10,28,77,.68);display:none;align-items:center;justify-content:center;z-index:9999;padding:22px}
.sma-photo-modal.open{display:flex}
.sma-photo-card{position:relative;background:#fff;border-radius:18px;box-shadow:0 22px 70px rgba(15,23,42,.35);padding:16px;max-width:min(720px,94vw);max-height:90vh}
.sma-photo-card img{display:block;max-width:100%;max-height:76vh;border-radius:12px;object-fit:contain}
.sma-photo-x{position:absolute;right:8px;top:6px;width:34px;height:34px;border:0;border-radius:999px;background:#0a2c63;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.sma-photo-caption{text-align:center;font-weight:800;color:#0a2c63;margin-top:10px}

/* Detail album Galeri: gambar besar + thumbnail slider */
.sg-card .sg-thumb{display:block;color:inherit;text-decoration:none}
.sg-card h4 a{color:inherit;text-decoration:none}
.sg-card h4 a:hover{color:var(--blue-600)}
.gal-single{padding:24px}
.gal-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;color:var(--muted);font-weight:700;font-size:13px}
.gal-viewer{display:block}
.gal-main-img{background:var(--blue-050);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
.gal-main-img img{display:block;width:100%;height:min(58vw,560px);object-fit:contain;background:#071f49}
.gal-thumbs{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 4px;scroll-snap-type:x proximity}
.gal-thumb{flex:0 0 112px;height:78px;border:2px solid transparent;border-radius:12px;padding:0;background:#fff;overflow:hidden;cursor:pointer;scroll-snap-align:start;box-shadow:var(--shadow-sm);opacity:.75;transition:.18s}
.gal-thumb:hover,.gal-thumb.active{opacity:1;border-color:var(--blue-600);transform:translateY(-1px)}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-desc{margin-top:18px;color:var(--text);line-height:1.8}
.gal-back{margin:18px 0 0}
@media(max-width:760px){.gal-single{padding:16px}.gal-main-img img{height:62vw}.gal-thumb{flex-basis:88px;height:64px}}

/* Panah slider album galeri */
.gal-main-img{position:relative}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:var(--blue-700);font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 28px rgba(7,31,73,.24);transition:.18s;z-index:2}
.gal-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.gal-prev{left:14px}.gal-next{right:14px}
.gal-thumbs-wrap{position:relative;display:flex;align-items:center;gap:8px;margin-top:12px}
.gal-thumbs-wrap .gal-thumbs{flex:1;padding:4px 2px 6px;margin:0}
.gal-thumb-nav{flex:0 0 36px;width:36px;height:36px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--blue-700);font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:.18s}
.gal-thumb-nav:hover{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
@media(max-width:760px){.gal-nav{width:38px;height:38px;font-size:30px}.gal-prev{left:8px}.gal-next{right:8px}.gal-thumb-nav{flex-basis:32px;width:32px;height:32px}}

/* Detail Prestasi Sekolah */
.pr-card h4 a{color:inherit;text-decoration:none}
.pr-card h4 a:hover{color:var(--blue-600)}
.prestasi-single{padding:24px}
.prestasi-cover{border-radius:18px;overflow:hidden;margin-bottom:18px;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--blue-050)}
.prestasi-cover img{display:block;width:100%;max-height:460px;object-fit:cover}
.prestasi-detail-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.prestasi-detail-top .pr-badge{display:inline-flex;align-items:center;border-radius:999px;padding:7px 12px;color:#fff;font-weight:800;font-size:12px}
.prestasi-detail-top .pr-gold{background:#d97706}.prestasi-detail-top .pr-blue{background:var(--blue-600)}.prestasi-detail-top .pr-green{background:#059669}.prestasi-detail-top .pr-purple{background:#7c3aed}
.prestasi-single h2{margin:0 0 12px;font-size:clamp(24px,3vw,34px);color:var(--blue-900)}
.prestasi-winner{margin:0 0 16px;color:var(--muted);font-size:15px}
.prestasi-content{line-height:1.8;color:var(--text)}
.prestasi-back{margin:20px 0 0}
@media(max-width:760px){.prestasi-single{padding:16px}.prestasi-cover img{max-height:320px}}

/* Detail Fasilitas Sekolah */
.sg-card .sg-thumb{display:block;color:inherit;text-decoration:none}
.fac-body h4 a{color:inherit;text-decoration:none}
.fac-body h4 a:hover{color:var(--blue-600)}
.fasilitas-single{padding:24px}
.fasilitas-cover{border-radius:18px;overflow:hidden;margin-bottom:18px;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--blue-050)}
.fasilitas-cover img{display:block;width:100%;max-height:460px;object-fit:cover}
.fasilitas-detail-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.fasilitas-emoji{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:14px;background:var(--blue-050);border:1px solid var(--blue-100);font-size:24px}
.fasilitas-single h2{margin:0 0 12px;font-size:clamp(24px,3vw,34px);color:var(--blue-900)}
.fasilitas-content{line-height:1.8;color:var(--text)}
.fasilitas-back{margin:20px 0 0}
@media(max-width:760px){.fasilitas-single{padding:16px}.fasilitas-cover img{max-height:320px}}

/* Pengumuman: teks kategori berwarna dibuat hitam agar terbaca */
.pg-cat-tag.pr-blue,.pg-cat-tag.pr-green,.pg-cat-tag.pr-purple,.pg-cat-tag.pr-gold,.pg-cat-tag.pr-gray{color:#111827!important}

/* Pengumuman Kelulusan: hasil cek siswa */
.kel-result{margin-top:16px;border-radius:16px;padding:16px 18px;border:1px solid var(--border);background:#f8fafc}
.kel-result h4{margin:0 0 6px;color:var(--heading);font-size:18px}
.kel-result p{margin:8px 0 0;color:var(--text);line-height:1.6}
.kel-result-label{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#047857;margin-bottom:6px}
.kel-result-success{background:#ecfdf5;border-color:#a7f3d0}
.kel-result-success strong{display:inline-flex;border-radius:999px;background:#059669;color:#fff;padding:7px 14px;font-size:18px;letter-spacing:.04em}
.kel-result-notfound,.kel-result-error{background:#fff7ed;border-color:#fed7aa}
.kel-result-notfound h4,.kel-result-error h4{color:#9a3412}

.kel-result-year{margin:0 0 8px!important;color:#475569!important;font-weight:700}

.kel-result-failed{background:#fef2f2!important;border-color:#fecaca!important}
.kel-result-failed .kel-result-label{color:#b91c1c!important}
.kel-result-failed h4{color:#7f1d1d!important}
.kel-result-failed strong{background:#dc2626!important;color:#fff!important}

.pg-top h3 a{color:inherit;text-decoration:none}
.pg-top h3 a:hover{color:#1d4ed8;text-decoration:underline}


/* Alumni card cleanup: tinggi kartu lebih rapi dan isi tidak meluber */
#alumniApp.panel{padding:22px}
.al-grid{align-items:stretch}
.al-card{height:100%;min-height:430px;border-radius:16px;overflow:hidden}
.al-photo{aspect-ratio:16/10;min-height:190px;max-height:220px}
.al-photo-ph{font-size:52px;letter-spacing:.03em}
.al-body{min-height:220px;padding:18px 20px 20px;gap:10px}
.al-head{display:block;min-height:58px}
.al-name{font-size:17px;line-height:1.28;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.al-year-lbl{display:inline-flex;align-items:center;width:max-content;max-width:100%;font-size:12px;line-height:1.2;background:#eef4ff;color:#1d4ed8;border-radius:999px;padding:5px 10px;white-space:normal}
.al-tag{font-size:12px;padding:5px 13px}
.al-prof{min-height:38px;font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.al-prof strong,.al-prof span{display:inline;color:var(--heading)}
.al-prof span:before{content:' — ';color:var(--muted)}
.al-quote{min-height:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px}
.al-more{margin-top:auto;width:100%;justify-content:center;background:#f3f7ff;border:1px solid #dbe7ff;border-radius:12px;padding:10px 12px;color:#0b5cab;font-weight:700}
.al-more:hover{background:#e8f0ff;color:#083f7c;text-decoration:none}
.al-modal-box .al-card{min-height:0;height:auto}
.al-modal-box .al-body{min-height:0}
.al-modal-box .al-head{min-height:0}
.al-modal-box .al-prof,.al-modal-box .al-quote{display:block;min-height:0;overflow:visible}
@media(max-width:1100px){.al-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#alumniApp.panel{padding:16px}.al-grid{grid-template-columns:1fr}.al-card{min-height:0}.al-photo{min-height:170px}.al-body{min-height:0}.al-head{min-height:0}}


/* Alumni modal detail fix: foto penuh, tidak ada ruang kosong di kanan */
.al-modal{z-index:99999;padding:24px;background:rgba(15,23,42,.18)}
.al-modal-box{max-width:520px;width:min(92vw,520px);border-radius:18px;overflow:hidden;background:#fff}
.al-modal-box .al-card{display:block;width:100%;height:auto;min-height:0;background:#fff;border:0;border-radius:0;box-shadow:none;overflow:hidden}
.al-modal-box .al-card:hover{transform:none;box-shadow:none}
.al-modal-box .al-photo{display:block;width:100%;height:240px;min-height:240px;max-height:240px;aspect-ratio:auto;border-radius:0;background:linear-gradient(135deg,#3b82f6,#1e3a8a)}
.al-modal-box .al-photo img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}
.al-modal-box .al-photo-ph{height:100%;display:flex;align-items:center;justify-content:center;font-size:64px}
.al-modal-box .al-star{top:14px;right:56px;z-index:3}
.al-modal-x{top:12px;right:12px;width:36px;height:36px;background:#fff;color:#0f2d5c;box-shadow:0 8px 22px rgba(15,23,42,.18)}
.al-modal-box .al-body{padding:22px 24px 24px;min-height:0;gap:10px}
.al-modal-box .al-head{display:block;min-height:0;margin-bottom:2px}
.al-modal-box .al-name{display:block;overflow:visible;font-size:20px;line-height:1.25;margin:0 0 10px}
.al-modal-box .al-year-lbl{margin:0 6px 6px 0}
.al-modal-box .al-tag{margin-bottom:8px}
.al-modal-box .al-prof{display:block;min-height:0;overflow:visible;font-size:14.5px;line-height:1.55;margin:2px 0;color:var(--heading)}
.al-modal-box .al-prof strong{display:inline;font-weight:700}
.al-modal-box .al-prof span{display:inline;color:var(--muted)}
.al-modal-box .al-quote{display:block;min-height:0;overflow:visible;font-size:14px;line-height:1.65;margin-top:4px}
.al-modal-box .al-contact{display:flex;flex-direction:column;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
@media(max-width:560px){.al-modal{padding:14px}.al-modal-box{width:94vw}.al-modal-box .al-photo{height:200px;min-height:200px;max-height:200px}.al-modal-box .al-body{padding:18px}.al-modal-box .al-name{font-size:18px}}


/* Alumni photo/initial center fix */
.al-photo{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
.al-photo img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}
.al-photo-ph{width:100%;height:100%;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1!important;margin:0!important;padding:0!important;transform:translateY(-1px)}
.al-modal-box .al-photo{display:flex!important;align-items:center!important;justify-content:center!important}
.al-modal-box .al-photo-ph{width:100%;height:100%;display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;margin:0!important;padding:0!important}

.al-contact-row[href*='instagram.com']{color:#c13584}
.al-contact-row[href*='instagram.com']:hover{color:#833ab4}


/* Alumni thumbnail centering + focal support */
.al-card .al-photo{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background-position:center center!important}
.al-card .al-photo img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:var(--al-focal-x,50%) var(--al-focal-y,50%)!important;margin:0!important;transform:none!important;max-width:none!important;max-height:none!important}
.al-card .al-photo-ph{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;text-align:center!important}
.al-modal-box .al-card .al-photo img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:var(--al-focal-x,50%) var(--al-focal-y,50%)!important;margin:0!important;transform:none!important;max-width:none!important;max-height:none!important}

.al-jurusan{align-self:flex-start;display:inline-block;width:max-content;max-width:100%;font-size:12px;font-weight:700;color:#0f766e;background:#d6f3ef;border-radius:999px;padding:5px 12px;margin-bottom:2px}


/* Alumni thumbnail final override: pakai focal point, bukan paksa 50% */
#alumniApp .al-card .al-photo{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background-position:center center!important}
#alumniApp .al-card .al-photo>img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:var(--al-focal-x,50%) var(--al-focal-y,50%)!important;margin:0!important;padding:0!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
#alumniApp .al-card .al-photo>.al-photo-ph{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1!important;margin:0!important;padding:0!important;transform:none!important}
.al-modal-box #alumniApp .al-card .al-photo>img,.al-modal-box .al-card .al-photo>img{object-position:var(--al-focal-x,50%) var(--al-focal-y,50%)!important}


/* Fix icon Alumni Berprestasi: emoji bintang jangan ikut CSS foto thumbnail */
#alumniApp .al-card .al-photo>img.al-photo-img,
#alumniApp .al-card .al-photo>img:not(.emoji){display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:var(--al-focal-x,50%) var(--al-focal-y,50%)!important;margin:0!important;padding:0!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
#alumniApp .al-star{position:absolute!important;top:12px!important;right:12px!important;z-index:5!important;width:30px!important;height:30px!important;border-radius:999px!important;background:#ffb32c!important;border:2px solid rgba(255,255,255,.9)!important;box-shadow:0 6px 14px rgba(15,23,42,.22)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;line-height:1!important;overflow:hidden!important;filter:none!important}
#alumniApp .al-star img,
#alumniApp .al-star .emoji{display:block!important;width:17px!important;height:17px!important;max-width:17px!important;max-height:17px!important;min-width:17px!important;min-height:17px!important;object-fit:contain!important;object-position:center!important;margin:0!important;padding:0!important;transform:none!important;position:static!important}
.al-modal-box .al-star{top:12px!important;right:54px!important}


/* OSIS gallery real photo cards */
.osis-galeri-grid .okg-photo-link{display:block;overflow:hidden;border-radius:12px 12px 0 0;background:#e5e7eb}
.osis-galeri-grid .okg-photo-link img{display:block;width:100%;height:190px;object-fit:cover;transition:transform .2s}
.osis-galeri-grid .okg-photo-link:hover img{transform:scale(1.04)}


/* Ekstrakurikuler: info deskripsi/kategori/pembina tampil lewat tombol Detail */
.eks-detail{margin-top:10px}
.eks-detail summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--blue-600);color:#fff;font-size:13px;font-weight:800;line-height:1;text-decoration:none;box-shadow:0 8px 18px rgba(37,99,235,.18)}
.eks-detail summary::-webkit-details-marker{display:none}
.eks-detail summary:after{content:'+';font-weight:900}
.eks-detail[open] summary:after{content:'–'}
.eks-detail-box{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.eks-detail-box p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}


/* OSIS: Kalender Kegiatan real seperti Kalender Akademik */
.osis-real-kal{margin-top:20px;grid-template-columns:220px minmax(360px,1fr) 280px}
.osis-real-kal .kal-side,.osis-real-kal .kal-main,.osis-real-kal .kal-events{min-width:0}
.osis-kal-period{background:var(--blue-050);border:1px solid var(--blue-100);border-radius:10px;padding:10px 12px;color:var(--navy-800);font-weight:800;text-align:center}
.osis-kal-bottom{margin-top:16px}
.kal-bdg.cat-teal{background:#14b8a6}.kal-bdg.cat-pink{background:#ec4899}.kal-bdg.cat-gray{background:#6b7280}
.cat-txt-teal{color:#0f766e}.cat-txt-pink{color:#db2777}.cat-txt-gray{color:#6b7280}
.kal-wk-ev.cat-teal{background:#ccfbf1;border-color:#14b8a6;color:#0f766e}
.kal-wk-ev.cat-pink{background:#fce7f3;border-color:#ec4899;color:#be185d}
.kal-wk-ev.cat-gray{background:#f3f4f6;border-color:#6b7280;color:#374151}
@media(max-width:1200px){.osis-real-kal{grid-template-columns:1fr}.osis-real-kal .kal-side,.osis-real-kal .kal-events{order:3}.osis-real-kal[data-view="tahun"]{grid-template-columns:1fr}}


/* Pengumuman: tombol semua kategori di sidebar */
.pg-cats a.active{background:var(--blue-050);font-weight:800;color:var(--navy-800)}
.pg-cats a.active b{background:var(--blue-600);color:#fff}


/* Pengumuman Kelulusan: kotak cek hasil dibuat biru dan mudah ditemukan */
.kel-formbox{position:relative;overflow:hidden;border:0!important;background:linear-gradient(135deg,#12317f 0%,#1d4fc2 58%,#2563eb 100%)!important;color:#fff!important;box-shadow:0 22px 50px rgba(18,49,127,.22)!important;padding:0!important}
.kel-formbox:before{content:"";position:absolute;inset:-80px -90px auto auto;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.13);pointer-events:none}
.kel-formbox:after{content:"";position:absolute;left:-70px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:rgba(125,255,176,.12);pointer-events:none}
.kel-form-head{position:relative;z-index:1;display:flex;gap:16px;align-items:flex-start;padding:24px 26px 18px;border-bottom:1px solid rgba(255,255,255,.18)}
.kel-form-ic{flex:0 0 auto;width:50px;height:50px;border-radius:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.kel-formbox h3{margin:0 0 6px!important;color:#fff!important;font-size:22px!important;letter-spacing:.01em}
.kel-formbox .kontak-lead{margin:0!important;color:#dce7ff!important;font-size:14.5px!important;line-height:1.6!important}
.kel-formbox .kel-form{position:relative;z-index:1;max-width:none!important;margin:0!important;padding:22px 26px 26px;background:rgba(255,255,255,.98);color:var(--text);border-radius:0 0 var(--radius) var(--radius)}
.kel-formbox .kf-field{margin-bottom:16px}
.kel-formbox .kf-field label{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:var(--navy-800);font-weight:800;font-size:13.5px}
.kel-formbox .kf-field label:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue-600);box-shadow:0 0 0 4px var(--blue-050)}
.kel-formbox .kf-field input{height:50px;border:1px solid #cdd9f5!important;background:#fff;border-radius:12px;padding:0 14px;font-size:14.5px;box-shadow:0 1px 0 rgba(15,23,42,.03)}
.kel-formbox .kf-field input:focus{outline:0;border-color:var(--blue-600)!important;box-shadow:0 0 0 4px rgba(37,99,235,.13)}
.kel-formbox .kontak-submit{width:100%;height:52px;border:0;border-radius:13px;background:linear-gradient(135deg,#0f2f79,#1d4fc2)!important;color:#fff!important;font-weight:900;font-size:15px;letter-spacing:.01em;box-shadow:0 13px 28px rgba(18,49,127,.24);display:flex;align-items:center;justify-content:center;gap:8px}
.kel-formbox .kontak-submit:before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.18);font-size:12px}
.kel-formbox .kontak-submit:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(18,49,127,.3)}
.kel-formbox .kel-result{position:relative;z-index:1;margin:0 26px 26px!important}
@media(max-width:640px){.kel-form-head{padding:20px;gap:12px}.kel-form-ic{width:44px;height:44px}.kel-formbox .kel-form{padding:20px}.kel-formbox .kel-result{margin:0 20px 20px!important}}


/* ============================================================
 * Versi Tema: Luxury & Soft Modern
 * Diatur dari Dashboard → Tampilan Website → Versi Tema
 * ============================================================ */
body.sma-theme-luxury{
  --radius:22px;
  --shadow-sm:0 10px 28px rgba(10,44,99,.08);
  --shadow-md:0 18px 48px rgba(10,44,99,.14);
  --shadow-lg:0 28px 80px rgba(10,44,99,.20);
  background:
    radial-gradient(circle at 8% 8%, rgba(37,99,235,.13), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(246,192,73,.15), transparent 30%),
    linear-gradient(180deg,#f7faff 0%,#eef4ff 46%,#f8fafc 100%);
}
body.sma-theme-luxury .site-frame{background:rgba(255,255,255,.78);backdrop-filter:blur(14px);box-shadow:0 30px 90px rgba(10,44,99,.14)}
body.sma-theme-luxury .topbar{background:linear-gradient(90deg,#071b42,#0f347f,#174db8);box-shadow:0 10px 30px rgba(10,44,99,.18)}
body.sma-theme-luxury .header{background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(205,217,245,.72);box-shadow:0 14px 38px rgba(10,44,99,.10)}
body.sma-theme-luxury .brand .logo,body.sma-theme-luxury .sma-logo-wrap{box-shadow:0 14px 34px rgba(18,49,127,.22);border-radius:18px}
body.sma-theme-luxury .nav .menu>li>a{border-radius:999px}
body.sma-theme-luxury .nav .menu>li>a:hover,body.sma-theme-luxury .nav .menu>li.current-menu-item>a{background:linear-gradient(135deg,#eef4ff,#ffffff);box-shadow:inset 0 0 0 1px rgba(37,99,235,.14),0 10px 22px rgba(10,44,99,.08)}
body.sma-theme-luxury .page-hero{border-radius:0!important;box-shadow:0 24px 70px rgba(10,44,99,.18);overflow:hidden}
body.sma-theme-luxury .page-hero:before{background:linear-gradient(135deg,rgba(5,18,45,.74),rgba(18,49,127,.58),rgba(37,99,235,.33))}
body.sma-theme-luxury .panel,
body.sma-theme-luxury .widget,
body.sma-theme-luxury .pr-box,
body.sma-theme-luxury .kal-card,
body.sma-theme-luxury .kal-main,
body.sma-theme-luxury .kal-events,
body.sma-theme-luxury .sg-card,
body.sma-theme-luxury .news-card,
body.sma-theme-luxury .al-card,
body.sma-theme-luxury .kel-info-card,
body.sma-theme-luxury .side-nav,
body.sma-theme-luxury .side-cta{border:1px solid rgba(205,217,245,.82)!important;border-radius:22px!important;background:rgba(255,255,255,.92)!important;box-shadow:var(--shadow-sm)!important}
body.sma-theme-luxury .panel:hover,
body.sma-theme-luxury .sg-card:hover,
body.sma-theme-luxury .news-card:hover,
body.sma-theme-luxury .al-card:hover,
body.sma-theme-luxury .kel-info-card:hover{box-shadow:var(--shadow-md)!important;transform:translateY(-2px)}
body.sma-theme-luxury .btn,
body.sma-theme-luxury button,
body.sma-theme-luxury input,
body.sma-theme-luxury select,
body.sma-theme-luxury textarea{border-radius:14px}
body.sma-theme-luxury .btn-primary,
body.sma-theme-luxury .btn-blue,
body.sma-theme-luxury .kontak-submit{background:linear-gradient(135deg,#0f2f79,#1d4fc2)!important;box-shadow:0 14px 30px rgba(18,49,127,.22)}
body.sma-theme-luxury .btn-primary:hover,
body.sma-theme-luxury .btn-blue:hover,
body.sma-theme-luxury .kontak-submit:hover{box-shadow:0 18px 40px rgba(18,49,127,.30);transform:translateY(-1px)}
body.sma-theme-luxury .sg-thumb,
body.sma-theme-luxury .al-photo,
body.sma-theme-luxury .news-thumb,
body.sma-theme-luxury .art-figure{border-radius:18px;overflow:hidden}
body.sma-theme-luxury .page-body{position:relative}
body.sma-theme-luxury .page-body:before{content:"";position:absolute;inset:20px auto auto -45px;width:130px;height:130px;border-radius:50%;background:rgba(246,192,73,.10);filter:blur(2px);pointer-events:none;z-index:-1}
body.sma-theme-luxury .footer{background:linear-gradient(135deg,#061936,#0a2c63 58%,#123f91);box-shadow:0 -18px 60px rgba(10,44,99,.16)}
body.sma-theme-luxury .pg-cats a.active,body.sma-theme-luxury .side-nav a.active{background:linear-gradient(135deg,#eaf1ff,#fff);box-shadow:inset 0 0 0 1px rgba(37,99,235,.12);font-weight:800}
body.sma-theme-luxury table,body.sma-theme-luxury .dk-table{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}

body.sma-theme-soft{background:linear-gradient(180deg,#f8fafc,#f3f7fb);--radius:18px;--shadow-sm:0 8px 22px rgba(15,23,42,.06);--shadow-md:0 14px 36px rgba(15,23,42,.10)}
body.sma-theme-soft .site-frame{background:#fff}
body.sma-theme-soft .panel,body.sma-theme-soft .widget,body.sma-theme-soft .pr-box,body.sma-theme-soft .sg-card,body.sma-theme-soft .side-nav,body.sma-theme-soft .side-cta{border-radius:18px!important;box-shadow:var(--shadow-sm)!important;border-color:#e7edf6!important}
body.sma-theme-soft .header{box-shadow:0 8px 28px rgba(15,23,42,.06)}
body.sma-theme-soft .page-hero{border-radius:0!important}


/* Hero banner: tetap kotak, tanpa rounded pada semua versi tema */
.page-hero,
.page-hero.has-img,
.page-hero.berita-hero,
body.sma-theme-luxury .page-hero,
body.sma-theme-soft .page-hero{border-radius:0!important}


/* ============================================================
 * Versi Tema: Mewah 2 & Mewah 3 — premium tanpa rounded
 * ============================================================ */
body.sma-theme-luxury2,
body.sma-theme-luxury3{
  --radius:0px;
  --radius-sm:0px;
  --shadow-sm:0 12px 0 rgba(10,44,99,.06),0 18px 40px rgba(10,44,99,.10);
  --shadow-md:0 14px 0 rgba(10,44,99,.07),0 26px 70px rgba(10,44,99,.16);
  --shadow-lg:0 18px 0 rgba(10,44,99,.08),0 34px 92px rgba(10,44,99,.22);
}
body.sma-theme-luxury2 *,
body.sma-theme-luxury3 *{border-radius:0!important}
body.sma-theme-luxury2{background:linear-gradient(180deg,#f4f8ff 0%,#eef4ff 42%,#f8fafc 100%)}
body.sma-theme-luxury2 .site-frame{background:#fff;box-shadow:0 35px 100px rgba(10,44,99,.14)}
body.sma-theme-luxury2 .topbar{background:linear-gradient(90deg,#061936,#0f347f,#1d4fc2);box-shadow:0 12px 34px rgba(10,44,99,.18)}
body.sma-theme-luxury2 .header{background:#fff;border-bottom:3px solid #dbe7ff;box-shadow:0 16px 44px rgba(10,44,99,.10)}
body.sma-theme-luxury2 .brand .logo,body.sma-theme-luxury2 .sma-logo-wrap{box-shadow:10px 10px 0 rgba(29,79,194,.12),0 18px 35px rgba(18,49,127,.18)}
body.sma-theme-luxury2 .nav .menu>li>a:hover,body.sma-theme-luxury2 .nav .menu>li.current-menu-item>a{background:#eef4ff;box-shadow:inset 0 -3px 0 #1d4fc2;color:#0a2c63}
body.sma-theme-luxury2 .page-hero{border-radius:0!important;box-shadow:0 18px 0 rgba(10,44,99,.08),0 30px 70px rgba(10,44,99,.18);overflow:hidden}
body.sma-theme-luxury2 .page-hero:before{background:linear-gradient(135deg,rgba(4,18,45,.78),rgba(18,49,127,.58),rgba(29,79,194,.30))}
body.sma-theme-luxury2 .panel,
body.sma-theme-luxury2 .widget,
body.sma-theme-luxury2 .pr-box,
body.sma-theme-luxury2 .kal-card,
body.sma-theme-luxury2 .kal-main,
body.sma-theme-luxury2 .kal-events,
body.sma-theme-luxury2 .sg-card,
body.sma-theme-luxury2 .news-card,
body.sma-theme-luxury2 .al-card,
body.sma-theme-luxury2 .kel-info-card,
body.sma-theme-luxury2 .side-nav,
body.sma-theme-luxury2 .side-cta{background:#fff!important;border:1px solid #dbe7ff!important;box-shadow:var(--shadow-sm)!important}
body.sma-theme-luxury2 .panel:hover,
body.sma-theme-luxury2 .sg-card:hover,
body.sma-theme-luxury2 .news-card:hover,
body.sma-theme-luxury2 .al-card:hover,
body.sma-theme-luxury2 .kel-info-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md)!important}
body.sma-theme-luxury2 .btn-primary,
body.sma-theme-luxury2 .btn-blue,
body.sma-theme-luxury2 .kontak-submit{background:linear-gradient(135deg,#09265f,#1d4fc2)!important;box-shadow:8px 8px 0 rgba(29,79,194,.16),0 16px 32px rgba(18,49,127,.22)}
body.sma-theme-luxury2 input,body.sma-theme-luxury2 select,body.sma-theme-luxury2 textarea{border:1px solid #cdd9f5!important;box-shadow:inset 4px 0 0 #eef4ff}
body.sma-theme-luxury2 .footer{background:linear-gradient(135deg,#061936,#0a2c63 58%,#123f91);box-shadow:0 -16px 0 rgba(10,44,99,.08)}

body.sma-theme-luxury3{
  background:
    linear-gradient(90deg,rgba(10,44,99,.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,44,99,.045) 1px,transparent 1px),
    radial-gradient(circle at 15% 10%,rgba(246,192,73,.16),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(37,99,235,.15),transparent 32%),
    #f7f9ff;
  background-size:44px 44px,44px 44px,auto,auto,auto;
}
body.sma-theme-luxury3 .site-frame{background:rgba(255,255,255,.90);box-shadow:0 0 0 1px rgba(10,44,99,.08),0 40px 110px rgba(10,44,99,.16)}
body.sma-theme-luxury3 .topbar{background:#061936;border-bottom:4px solid #f6c049;box-shadow:0 14px 40px rgba(6,25,54,.20)}
body.sma-theme-luxury3 .header{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(10,44,99,.14);box-shadow:0 16px 46px rgba(10,44,99,.10)}
body.sma-theme-luxury3 .nav .menu>li>a:hover,body.sma-theme-luxury3 .nav .menu>li.current-menu-item>a{background:linear-gradient(90deg,#0a2c63 0 4px,#eef4ff 4px 100%);color:#0a2c63;box-shadow:0 10px 26px rgba(10,44,99,.08)}
body.sma-theme-luxury3 .page-hero{position:relative;border-radius:0!important;box-shadow:0 22px 70px rgba(10,44,99,.18);overflow:hidden}
body.sma-theme-luxury3 .page-hero:before{background:linear-gradient(120deg,rgba(4,18,45,.82) 0%,rgba(10,44,99,.70) 52%,rgba(246,192,73,.20) 100%)}
body.sma-theme-luxury3 .page-hero:after{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:linear-gradient(90deg,#f6c049,#1d4fc2,#7dffb0);z-index:1}
body.sma-theme-luxury3 .panel,
body.sma-theme-luxury3 .widget,
body.sma-theme-luxury3 .pr-box,
body.sma-theme-luxury3 .kal-card,
body.sma-theme-luxury3 .kal-main,
body.sma-theme-luxury3 .kal-events,
body.sma-theme-luxury3 .sg-card,
body.sma-theme-luxury3 .news-card,
body.sma-theme-luxury3 .al-card,
body.sma-theme-luxury3 .kel-info-card,
body.sma-theme-luxury3 .side-nav,
body.sma-theme-luxury3 .side-cta{position:relative;background:rgba(255,255,255,.96)!important;border:1px solid rgba(10,44,99,.14)!important;box-shadow:0 0 0 6px rgba(255,255,255,.62),var(--shadow-sm)!important}
body.sma-theme-luxury3 .panel:before,
body.sma-theme-luxury3 .widget:before,
body.sma-theme-luxury3 .pr-box:before,
body.sma-theme-luxury3 .sg-card:before,
body.sma-theme-luxury3 .news-card:before,
body.sma-theme-luxury3 .al-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#f6c049,#1d4fc2);opacity:.9}
body.sma-theme-luxury3 .panel:hover,
body.sma-theme-luxury3 .sg-card:hover,
body.sma-theme-luxury3 .news-card:hover,
body.sma-theme-luxury3 .al-card:hover,
body.sma-theme-luxury3 .kel-info-card:hover{transform:translateY(-3px);box-shadow:0 0 0 6px rgba(255,255,255,.72),var(--shadow-md)!important}
body.sma-theme-luxury3 .btn-primary,
body.sma-theme-luxury3 .btn-blue,
body.sma-theme-luxury3 .kontak-submit{background:linear-gradient(90deg,#061936,#0f347f 58%,#1d4fc2)!important;border-left:5px solid #f6c049!important;box-shadow:0 18px 40px rgba(18,49,127,.24)}
body.sma-theme-luxury3 input,body.sma-theme-luxury3 select,body.sma-theme-luxury3 textarea{border:1px solid rgba(10,44,99,.16)!important;background:rgba(255,255,255,.92)!important;box-shadow:inset 0 -3px 0 #eef4ff}
body.sma-theme-luxury3 .footer{background:linear-gradient(120deg,#04122d,#061936 45%,#0a2c63);border-top:6px solid #f6c049;box-shadow:0 -20px 70px rgba(10,44,99,.16)}


/* ============================================================
 * Versi Tema: Klasik 2 — tampilan klasik + glass lembut
 * ============================================================ */
body.sma-theme-classic2{
  background:
    radial-gradient(circle at 12% 8%,rgba(37,99,235,.08),transparent 28%),
    radial-gradient(circle at 90% 14%,rgba(246,192,73,.10),transparent 26%),
    var(--bg);
}
body.sma-theme-classic2 .site-frame{background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 70px rgba(10,44,99,.10)}
body.sma-theme-classic2 .topbar{background:rgba(0,33,81,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.sma-theme-classic2 .header{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(205,217,245,.72);box-shadow:0 8px 28px rgba(10,44,99,.08)}
body.sma-theme-classic2 .nav .sub-menu{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.sma-theme-classic2 .panel,
body.sma-theme-classic2 .widget,
body.sma-theme-classic2 .pr-box,
body.sma-theme-classic2 .kal-card,
body.sma-theme-classic2 .kal-main,
body.sma-theme-classic2 .kal-events,
body.sma-theme-classic2 .sg-card,
body.sma-theme-classic2 .news-card,
body.sma-theme-classic2 .al-card,
body.sma-theme-classic2 .kel-info-card,
body.sma-theme-classic2 .side-nav,
body.sma-theme-classic2 .side-cta,
body.sma-theme-classic2 .obl-item,
body.sma-theme-classic2 .pg-item{background:rgba(255,255,255,.76)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(205,217,245,.75)!important;box-shadow:0 10px 30px rgba(10,44,99,.075)!important}
body.sma-theme-classic2 .panel:hover,
body.sma-theme-classic2 .sg-card:hover,
body.sma-theme-classic2 .news-card:hover,
body.sma-theme-classic2 .al-card:hover,
body.sma-theme-classic2 .obl-item:hover,
body.sma-theme-classic2 .pg-item:hover{box-shadow:0 16px 42px rgba(10,44,99,.12)!important}
body.sma-theme-classic2 input,
body.sma-theme-classic2 select,
body.sma-theme-classic2 textarea{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(205,217,245,.9)!important}
body.sma-theme-classic2 .page-hero{border-radius:0!important;box-shadow:0 16px 42px rgba(10,44,99,.12)}
body.sma-theme-classic2 .footer{background:rgba(0,33,81,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.sma-theme-classic2 .kel-formbox{background:linear-gradient(135deg,rgba(18,49,127,.94),rgba(29,79,194,.90))!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}


/* Header menu mengikuti isi sidebar */
.nav > ul.sma-header-sidebar-menu{flex-wrap:wrap;justify-content:flex-end;row-gap:3px;max-width:880px}
.nav > ul.sma-header-sidebar-menu > li > a{padding:8px 10px;font-size:13.2px;white-space:nowrap}
.nav > ul.sma-header-sidebar-menu ul.sub-menu{max-height:70vh;overflow:auto}
.nav > ul.sma-header-sidebar-menu ul.sub-menu li a{white-space:nowrap}
@media(max-width:1180px){.nav > ul.sma-header-sidebar-menu{max-width:720px}.nav > ul.sma-header-sidebar-menu > li > a{padding:7px 8px;font-size:12.8px}}
@media(max-width:768px){.nav > ul.sma-header-sidebar-menu{max-width:none;flex-wrap:nowrap;justify-content:flex-start}.nav ul.sub-menu{position:static!important;display:none;box-shadow:none!important;border:0!important;padding:0 0 0 14px!important;max-height:none}.nav li.menu-item-has-children.open > ul.sub-menu{display:block!important}.nav li.menu-item-has-children:hover > ul.sub-menu{display:none}.nav li.menu-item-has-children.open:hover > ul.sub-menu{display:block!important}}


/* Header: mode ringkas rapi + tombol SPMB tetap tampil */
.nav > ul.sma-header-sidebar-menu.sma-header-mode-compact{max-width:720px;flex-wrap:nowrap;justify-content:flex-end}
.nav > ul.sma-header-sidebar-menu.sma-header-mode-compact > li > a{padding:8px 12px;font-size:13.5px}
.nav > ul.sma-header-sidebar-menu.sma-header-mode-sidebar{max-width:880px;flex-wrap:wrap;justify-content:flex-end;row-gap:3px}
.header .btn-cta-header{flex:0 0 auto;white-space:nowrap}
@media(max-width:1180px){.nav > ul.sma-header-sidebar-menu.sma-header-mode-compact{max-width:610px}.nav > ul.sma-header-sidebar-menu.sma-header-mode-compact > li > a{padding:7px 9px;font-size:12.8px}.header .btn-cta-header{padding:10px 14px;font-size:13px}}
@media(max-width:768px){.header .btn-cta-header{display:none}.nav > ul.sma-header-sidebar-menu.sma-header-mode-compact,.nav > ul.sma-header-sidebar-menu.sma-header-mode-sidebar{max-width:none;flex-wrap:nowrap;justify-content:flex-start}}


/* Header submenu: area tombol penuh, panah tidak mengganggu hover/klik */
.nav li.menu-item-has-children > a{position:relative;z-index:62;display:flex!important;align-items:center;gap:6px;cursor:pointer;pointer-events:auto}
.nav li.menu-item-has-children > a .caret{pointer-events:none;display:inline-block;line-height:1}
@media(min-width:769px){
  .nav li.menu-item-has-children > ul.sub-menu{top:100%!important;margin-top:0!important;z-index:61}
  .nav li.menu-item-has-children:hover > ul.sub-menu,
  .nav li.menu-item-has-children:focus-within > ul.sub-menu{display:block!important}
  .nav > ul.sma-header-sidebar-menu > li.menu-item-has-children{padding-bottom:0}
  .nav > ul.sma-header-sidebar-menu ul.sub-menu{padding-top:10px!important;padding-bottom:10px!important}
}


/* PKL: rapikan alur 5 langkah — nomor 4 dan 5 turun rapi di baris kedua */
body.page-template-tpl-hubungan-industri .svc-flow{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;gap:10px 8px;align-items:start;justify-content:center}
body.page-template-tpl-hubungan-industri .svc-flow .st{min-width:0;max-width:120px;justify-self:center;width:100%}
body.page-template-tpl-hubungan-industri .svc-flow .ar{margin-top:18px;align-self:start;justify-self:center}
body.page-template-tpl-hubungan-industri .svc-flow .ar-3{display:block;grid-column:2;grid-row:2;margin-top:38px;justify-self:center;color:#b9c6e0;position:relative;width:auto;height:auto;transform:none}
body.page-template-tpl-hubungan-industri .svc-flow .ar-3::before{content:none!important}
body.page-template-tpl-hubungan-industri .svc-flow .st-4{grid-column:3;grid-row:2;max-width:130px;margin-top:10px}
body.page-template-tpl-hubungan-industri .svc-flow .ar-4{display:block;grid-column:4;grid-row:2;margin-top:38px;transform:none}
body.page-template-tpl-hubungan-industri .svc-flow .st-5{grid-column:5;grid-row:2;max-width:130px;margin-top:10px}
body.page-template-tpl-hubungan-industri .svc-docs .dl{font-size:18px;line-height:1;color:#0a3d8f;font-weight:900}
@media(max-width:980px){body.page-template-tpl-hubungan-industri .svc-flow{display:flex;flex-wrap:wrap}body.page-template-tpl-hubungan-industri .svc-flow .st{max-width:140px}body.page-template-tpl-hubungan-industri .svc-flow .ar-3{display:block;grid-column:auto;grid-row:auto;margin-top:18px;color:#b9c6e0;width:auto;height:auto}body.page-template-tpl-hubungan-industri .svc-flow .ar-3::before{content:none!important}body.page-template-tpl-hubungan-industri .svc-flow .ar-4{display:block;grid-column:auto;grid-row:auto;margin-top:18px}}
@media(max-width:560px){body.page-template-tpl-hubungan-industri .svc-flow{display:grid;grid-template-columns:1fr;gap:12px}body.page-template-tpl-hubungan-industri .svc-flow .st,body.page-template-tpl-hubungan-industri .svc-flow .st-4,body.page-template-tpl-hubungan-industri .svc-flow .st-5{grid-column:auto;grid-row:auto;max-width:none;margin-top:0}body.page-template-tpl-hubungan-industri .svc-flow .ar{display:none!important}}


/* PKL: lebarkan kartu layanan dan rapikan tombol agar panah tidak turun */
@media(min-width:981px){
  body.page-template-tpl-hubungan-industri .lyn-sec-first .svc-2col{grid-template-columns:minmax(0,1fr) 300px!important;gap:16px!important}
  body.page-template-tpl-hubungan-industri .lyn-sec-first .ttp-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  body.page-template-tpl-hubungan-industri .lyn-sec-first .ttp-card{padding:20px 18px}
  body.page-template-tpl-hubungan-industri .lyn-sec-first .ttp-info{padding-left:20px;padding-right:20px}
  body.page-template-tpl-hubungan-industri .lyn-sec-first .ttp-info > h3{margin-left:-20px;margin-right:-20px;padding-left:18px;padding-right:18px;font-size:14.5px;line-height:1.25}
}
body.page-template-tpl-hubungan-industri .ttp-link{white-space:nowrap;gap:6px;line-height:1.25;padding-left:10px;padding-right:10px}
body.page-template-tpl-hubungan-industri .ttp-link .arr{display:inline-block;flex:0 0 auto}


/* PKL: judul informasi pakai ikon seperti list agar teks tidak turun di bawah ikon */
body.page-template-tpl-hubungan-industri .ttp-info > h3.ttp-info-title-list{display:flex!important;align-items:flex-start;gap:8px;line-height:1.25}
body.page-template-tpl-hubungan-industri .ttp-info > h3.ttp-info-title-list .ti-ic{flex:0 0 auto;width:20px;text-align:center;line-height:1.25}
body.page-template-tpl-hubungan-industri .ttp-info > h3.ttp-info-title-list .ti-text{display:block;min-width:0;flex:1}


/* Topbar: info tulisan berjalan */
.topbar .container{justify-content:space-between!important;gap:16px!important;overflow:visible}
.topbar-actions{display:inline-flex;align-items:center;gap:16px;flex:0 0 auto}
.topbar-ticker{min-width:0;flex:1;display:flex;align-items:center;gap:10px;height:38px;overflow:hidden;color:#dbe6ff}
.topbar-ticker .ticker-label{flex:0 0 auto;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.topbar-ticker .ticker-mask{min-width:0;flex:1;overflow:hidden;white-space:nowrap;position:relative}
.topbar-ticker .ticker-mask::before,.topbar-ticker .ticker-mask::after{content:"";position:absolute;top:0;bottom:0;width:28px;z-index:2;pointer-events:none}
.topbar-ticker .ticker-mask::before{left:0;background:linear-gradient(90deg,var(--navy-950,#08183f),transparent)}
.topbar-ticker .ticker-mask::after{right:0;background:linear-gradient(270deg,var(--navy-950,#08183f),transparent)}
.topbar-ticker .ticker-track{display:inline-flex;gap:48px;align-items:center;min-width:max-content;animation:sma-topbar-marquee 26s linear infinite;will-change:transform}
.topbar-ticker .ticker-track span{display:inline-block;color:#dbe6ff;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.topbar-ticker:hover .ticker-track{animation-play-state:paused}
@keyframes sma-topbar-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:760px){.topbar .container{gap:10px!important}.topbar-actions{gap:11px}.topbar-ticker .ticker-label{display:none}.topbar-ticker .ticker-track{animation-duration:20s}.topbar-ticker .ticker-track span{font-size:12px}}
@media(max-width:520px){.topbar-ticker{max-width:calc(100vw - 126px)}}


/* ============================================================
   Mobile Friendly Final Pass — header, grid, tabel, dan overflow
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,embed,object{max-width:100%;height:auto}
*{box-sizing:border-box}
.site-main,.container,.panel,.svc-panel,.ttp-info,.sidebar,.berita-main,.ds-main,.ks-main,.kontak-main{min-width:0}

@media(max-width:980px){
  .container{padding-inline:16px}
  body.sma-layout-full .container{padding-inline:16px}
  .site-frame{margin:0!important;border-radius:0!important;border-left:0!important;border-right:0!important}
  .site-frame>.topbar,.site-frame>.footer{border-radius:0!important}
  .section,.page-body{padding-left:0!important;padding-right:0!important}
  .page-hero .container{padding-block:34px 38px}
  .page-hero h1{font-size:clamp(27px,7vw,34px);line-height:1.12;word-break:normal;overflow-wrap:anywhere}
  .page-hero p{font-size:14px;line-height:1.55;max-width:100%}
  .breadcrumb{overflow-x:auto;white-space:nowrap;padding-bottom:2px;scrollbar-width:none}
  .breadcrumb::-webkit-scrollbar{display:none}

  .topbar .container{height:34px!important;padding-inline:12px;gap:10px!important}
  .topbar-ticker{height:34px;min-width:0;flex:1 1 auto}
  .topbar-actions{gap:10px;flex:0 0 auto}
  .topbar-search-pop{top:42px!important;left:12px!important;right:12px!important;min-width:0!important;width:auto!important;max-width:none!important;position:fixed!important}

  .header{top:0;z-index:80}
  .header .container{height:66px;gap:10px;padding-inline:12px}
  .brand{min-width:0;gap:9px;flex:1 1 auto}
  .brand .brand-text{min-width:0;line-height:1.1}
  .brand .brand-text strong{font-size:13.5px;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .brand .brand-text span{display:none}
  .nav-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:24px;line-height:1;flex:0 0 auto;z-index:100}
  .nav{position:fixed!important;left:0!important;right:0!important;top:66px!important;bottom:auto!important;max-height:calc(100vh - 66px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;background:#fff!important;border-bottom:1px solid var(--border)!important;box-shadow:0 18px 40px rgba(10,44,99,.18)!important;margin:0!important;padding:12px 14px 18px!important;display:none!important;z-index:90!important}
  .nav.open{display:block!important}
  .nav>ul,.nav>ul.sma-header-sidebar-menu,.nav>ul.sma-header-sidebar-menu.sma-header-mode-compact,.nav>ul.sma-header-sidebar-menu.sma-header-mode-sidebar{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:4px!important;max-width:none!important;width:100%!important;flex-wrap:nowrap!important}
  .nav>ul>li>a,.nav>ul.sma-header-sidebar-menu>li>a,.nav>ul.sma-header-sidebar-menu.sma-header-mode-compact>li>a{width:100%;justify-content:space-between;padding:12px 14px!important;font-size:14px!important;border-radius:10px;background:#f8fafc;white-space:normal!important;line-height:1.35}
  .nav ul.sub-menu,.nav .dropdown{position:static!important;min-width:0!important;width:100%!important;max-height:none!important;overflow:visible!important;box-shadow:none!important;border:0!important;border-left:3px solid #dbe7ff!important;border-radius:0!important;margin:4px 0 8px 12px!important;padding:4px 0 4px 10px!important;background:#fff!important;display:none!important;opacity:1!important;visibility:visible!important;transform:none!important}
  .nav li.open>ul.sub-menu,.nav li.open>.dropdown{display:block!important}
  .nav li.menu-item-has-children:hover>ul.sub-menu{display:none!important}
  .nav li.menu-item-has-children.open:hover>ul.sub-menu{display:block!important}
  .nav ul.sub-menu li a,.nav .dropdown a{white-space:normal!important;padding:10px 12px!important;line-height:1.35}
  .header .btn-cta-header{display:none!important}
  body.sma-nav-open{overflow:hidden}
}

@media(max-width:760px){
  .container{padding-inline:14px}
  .page-body{padding-block:26px 40px!important}
  .panel,.svc-panel,.ttp-card,.ttp-info,.side-cta,.widget,.kontak-socials-wrap,#alumniApp.panel,.sma-grid-frame{padding:16px!important;border-radius:14px!important}
  .sidebar{position:static!important;margin-bottom:18px}
  .side-nav{overflow-x:auto;display:flex;gap:8px;padding:8px;scroll-snap-type:x proximity}
  .side-nav a,.side-nav .sn-parent{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
  .sn-children{min-width:100%}

  .toolbar,.berita-toolbar,.al-controls,.pg-toolbar,.obl-toolbar,.ogl-toolbar,.ds-toolbar,.sma-siswa-controls{align-items:stretch!important;gap:10px!important}
  .toolbar>* , .berita-toolbar>* , .al-controls>* , .pg-toolbar>* , .obl-toolbar>* , .ogl-toolbar>* , .ds-toolbar>*{max-width:100%}
  .field,.field input,.field select,.select,.toolbar select,.toolbar input,.berita-search,.berita-search input,.pg-search,.pg-search input,.sma-grid-search{width:100%!important;min-width:0!important}
  .tabs,.ds-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:4px;scrollbar-width:none}
  .tabs::-webkit-scrollbar,.ds-tabs::-webkit-scrollbar{display:none}
  .tab,.ds-tab{flex:0 0 auto;white-space:nowrap}

  .home-hero .container{padding-block:58px 78px!important}
  .home-hero h1{font-size:clamp(30px,9vw,40px);line-height:1.1}
  .home-hero p{font-size:14.5px;max-width:100%}
  .home-features{grid-template-columns:1fr!important;padding:18px!important;margin-top:0!important;gap:14px!important}
  .feature-wrap{margin-top:0!important;background:var(--bg)!important}
  .about-img{width:100%;height:auto;min-height:210px}
  .about-stats{grid-template-columns:1fr 1fr!important;gap:14px!important}
  .news-grid,.al-grid,.site-grid.cols-3,.site-grid.cols-4,.site-grid.cols-5,.mp-pilar-grid,.osis-galeri-grid,.kontak-info,.kel-info,.spmb-info,.dk-widgets,.svc-logos{grid-template-columns:1fr!important}
  .spmb-hero-meta,.jalur,.info-cards{grid-template-columns:1fr!important;margin-top:16px}
  .feature-news,.kontak-grid,.berita-inner,.obl-item,.kepsek-hero,.ps-about,.panel.ks-profile,.ks-cols,.kontak-main .kontak-grid{grid-template-columns:1fr!important}
  .cta-band,.osis-cta,.svc-help{flex-direction:column!important;text-align:center!important;align-items:center!important;padding:22px 18px!important}

  table{max-width:100%}
  .dk-table,.wp-list-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .cal-grid,.kal-grid,.kal-ym-grid,.omc-row{min-width:420px}
  .kal-main,.kal-year-wrap,.osis-real-kal .kal-main{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kal-layout,.kal-layout[data-view="tahun"],.osis-real-kal{grid-template-columns:1fr!important}

  .modal,.al-modal{padding:14px!important}
  .modal-box,.al-modal-box{width:94vw!important;max-height:90vh;overflow:auto}
  .topbar-search-pop .tsp-row{flex-wrap:wrap}.topbar-search-pop .tsp-select,.topbar-search-pop button[type="submit"]{width:100%}
}

@media(max-width:520px){
  .container{padding-inline:12px}
  .brand .brand-text strong{font-size:12.5px}
  .page-hero .container{padding-block:28px 32px}
  .page-hero h1{font-size:26px}
  .topbar-actions a{display:none!important}.topbar-actions .topbar-searchwrap{display:inline-flex!important}
  .topbar-ticker{max-width:none!important}
  .about-stats{grid-template-columns:1fr!important}
  .btn,.btn-primary,.btn-blue,.btn-gold,.btn-outline,.ttp-link,.svc-btn{width:100%;justify-content:center;text-align:center}
  .form-row,.kontak-form .kf-row,.ks-meta,.osis-stat{grid-template-columns:1fr!important}
  .oo-row,.oo-lead-row{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
  .oo-card,.oo-head{width:100%;min-width:0!important;max-width:none!important}
  .al-modal-box .al-photo{height:190px!important;min-height:190px!important}
  .search-bigform{display:grid!important;grid-template-columns:1fr!important}.search-bigform .sb-sep{display:none}
}


/* ============================================================
   Mobile Friendly Per-Page Audit Fix v2 — halaman demi halaman
   ============================================================ */
@media(max-width:980px){
  /* Semua layout utama halaman */
  .berita-layout,.peng-layout,.layout-sidebar,.layout-sidebar.right,.struktur-layout,.struktur-layout.has-sidebar,
  .ks-layout.has-sidebar,.ds-layout.has-sidebar,.kontak-layout.has-sidebar,.osis-layout-2,
  .svc-2col,.svc-3col,.svc-2big,.svc-labgrid,.ttp-row1,.ttp-row2,.ttp-row4,
  .kontak-grid,.kepsek-hero,.ps-about,.feature-news,.nf-top,.berita-inner,
  .kal-layout,.kal-layout[data-view="tahun"],.osis-real-kal{grid-template-columns:1fr!important;display:grid!important}
  .berita-aside,.peng-right,.kal-side,.kal-events{order:3;width:100%;max-width:100%}
  .berita-aside{display:grid!important;grid-template-columns:1fr 1fr;gap:16px}
  .sidebar{position:static!important;top:auto!important;width:100%}

  /* Header mobile memakai tinggi yang sama dengan offset menu */
  .topbar + .header .nav{top:66px!important}
  body.admin-bar .nav{top:98px!important;max-height:calc(100vh - 98px)!important}
}

@media(max-width:760px){
  /* Global typo & jarak */
  h1,h2,h3,h4{overflow-wrap:anywhere}
  p,li,td,th,a,span{overflow-wrap:anywhere}
  .page-body>.container,.site-main>.container{max-width:100%}
  .panel,.widget,.svc-panel,.ttp-card,.ttp-panel,.ttp-info,.ttp-stat,.ttp-quote,.svc-cond,.kal-card,.kal-main,.kal-events,
  .kontak-form-wrap,.kontak-socials-wrap,.ki-card,.dept-card,.pr-box,.spmb-cta,.news-featured{max-width:100%;overflow-wrap:anywhere}

  /* Sidebar / menu samping per halaman */
  .side-nav{display:block!important;overflow:visible!important;padding:10px!important}
  .side-nav a,.side-nav .sn-parent{white-space:normal!important;width:100%;flex:none!important}
  .side-nav .sn-children{min-width:0!important;width:100%;padding-left:8px}
  .side-cta{margin-top:12px}

  /* Header/topbar */
  .topbar{font-size:12px}
  .topbar .container{min-width:0;overflow:hidden}
  .topbar-ticker .ticker-mask{min-width:0}
  .topbar-search-pop{max-height:calc(100vh - 70px);overflow:auto}
  .brand .custom-logo-link,.header .custom-logo-link,.brand .sma-logo-wrap{flex:0 0 40px!important;width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important}
  .brand .custom-logo-link img,.header img.custom-logo,.brand .sma-logo-img{width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important}

  /* Homepage */
  .home-hero .hero-text{max-width:100%!important}
  .home-hero .actions,.hero-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .home-hero .actions .btn,.hero-actions .btn{width:100%;justify-content:center}
  .home-features .feature{padding:8px 0!important;text-align:left;display:flex;gap:14px;align-items:flex-start}
  .home-features .feature .fic{margin:0;flex:0 0 48px;width:48px;height:48px}
  .about-grid{grid-template-columns:1fr!important;gap:18px!important}
  .about-stats .stat{align-items:flex-start}
  .cta-band .cta-text h3{font-size:20px}

  /* Berita, pengumuman, grid CPT */
  .berita-toolbar,.pg-toolbar,.ogl-toolbar,.obl-toolbar,.al-controls,.dk-toolbar,.ds-toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .berita-select,.berita-select select,.berita-sort,.ogl-sort,.al-mode-wrap,.al-mode-wrap select{width:100%!important;min-width:0!important;margin:0!important}
  .berita-aside{display:grid!important;grid-template-columns:1fr!important}
  .news-featured{padding:16px!important}
  .news-featured h2{font-size:20px}
  .news-card .nc-img{height:160px}
  .pg-item{display:flex;gap:12px;padding:14px}
  .pg-top{align-items:flex-start;flex-direction:column;gap:6px}
  .pg-top h3{font-size:15.5px;line-height:1.35}
  .pg-meta{align-items:flex-start}
  .pagination,.al-pager,.pg-pager,.osis-pagination{overflow-x:auto;justify-content:flex-start;padding-bottom:4px;scrollbar-width:none}
  .pagination::-webkit-scrollbar,.al-pager::-webkit-scrollbar,.pg-pager::-webkit-scrollbar,.osis-pagination::-webkit-scrollbar{display:none}

  /* OSIS semua halaman */
  .osis-tabs{display:flex!important;flex-direction:row!important;overflow-x:auto;gap:8px;padding:0 0 8px;margin-bottom:14px;scroll-snap-type:x proximity;scrollbar-width:none}
  .osis-tabs::-webkit-scrollbar{display:none}
  .osis-tab{flex:0 0 auto!important;width:auto!important;white-space:nowrap;text-align:center!important;scroll-snap-align:start}
  .osis-top,.osis-3col,.osis-prog-info,.osis-keg-info,.oa2{grid-template-columns:1fr!important;display:grid!important}
  .osis-about{flex-direction:column}.osis-about img{width:100%;max-width:none;height:auto}
  .osis-tentang .osis-meta{grid-template-columns:1fr!important}
  .osis-filter{display:flex;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none}.osis-filter::-webkit-scrollbar{display:none}
  .of-btn{flex:0 0 auto;white-space:nowrap}
  .osis-program-grid,.osis-kegiatan-grid{grid-template-columns:1fr!important}
  .osis-berita-head,.osis-prestasi-head,.osis-prog-head,.osis-keg-head{display:flex;flex-direction:column!important;align-items:stretch!important;gap:12px}
  .osis-berita-head .berita-search,.obl-toolbar .berita-search{flex:1 1 auto!important;width:100%}
  .obl-item{grid-template-columns:1fr!important}.obl-thumb{min-height:180px}
  .opl-item{display:grid!important;grid-template-columns:48px 1fr!important;gap:12px!important}.opl-meta{grid-column:1 / -1;justify-content:flex-start!important}
  .osis-juara-wrap .osis-juara-carousel{padding-left:0!important;padding-right:0!important}.osis-juara-wrap .ojc-item{flex-basis:82%!important;min-width:220px}
  .osis-juara-wrap .ocn-prev,.osis-juara-wrap .ocn-next{display:none!important}
  .galeri-foot{display:flex;flex-direction:column;gap:16px}.galeri-foot .gal-sub-widget{flex:1 1 auto!important;width:100%}
  .osis-cta-banner{flex-direction:column!important;text-align:center!important;align-items:center!important}.osis-cta-banner .btn{width:100%;justify-content:center}

  /* Struktur organisasi sekolah dan OSIS */
  .struktur-chart,.osis-org{overflow-x:visible!important;padding-inline:0!important}
  .oo-row,.oo-lead-row,.oo-row-lead{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
  .oo-row::before,.oo-row::after,.oo-lead-row::before,.oo-lead-row::after,.oo-seksi::before,.oo-seksi::after,.oo-head::after{display:none!important}
  .oo-card,.oo-head{width:100%!important;min-width:0!important;max-width:none!important}.oo-wide{grid-column:auto!important}
  .oo-seksi{grid-template-columns:1fr!important;gap:14px!important}
  .struktur-legend,.org-legend{display:flex;flex-direction:column;align-items:flex-start!important;gap:8px}

  /* Data kelas/staf/guru dan toolbar */
  .dk-field,.dk-field input,.dk-field select,.dk-excel{width:100%!important;min-width:0!important}
  .dk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.dk-table{min-width:620px}
  .dk-quick-grid{grid-template-columns:repeat(3,1fr)!important}
  .ds-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .card-profile{padding:16px 12px}.card-profile .avatar{width:76px;height:76px}.card-profile h3{font-size:14px}
  .ds-more-menu{left:0;right:auto;max-width:calc(100vw - 40px);overflow:auto}

  /* Galeri, video, fasilitas, prestasi, ekskul */
  .site-grid,.site-grid.cols-3,.site-grid.cols-4,.site-grid.cols-5{grid-template-columns:1fr!important;gap:14px!important}
  .sg-card{max-width:100%}.sg-thumb,.sg-card .thumb{min-height:180px}
  .gal-single,.prestasi-single,.fasilitas-single{padding:16px!important}.gal-main-img img{height:auto!important;max-height:70vh;object-fit:contain}

  /* Pengumuman, kelulusan, SPMB */
  .peng-main{gap:16px}.peng-right{gap:14px}
  .kel-hero h2{font-size:20px}.kel-status-big{font-size:24px;line-height:1.2}.kel-status{padding:16px}
  .kel-form{max-width:none;width:100%}.kel-form-head{display:flex;align-items:flex-start}.kel-formbox .kel-result{margin-inline:0!important}
  .spmb-year{display:inline-block;margin-top:8px}.spmb-cta{padding:22px 18px}.spmb-timeline li{padding-left:24px}

  /* Kalender akademik + OSIS */
  .kal-side{display:grid;grid-template-columns:1fr;gap:12px}.kal-main{padding:14px!important}.kal-events{padding:16px!important}
  .kal-bar{align-items:stretch}.kal-nav{justify-content:space-between;width:100%}.kal-month-label{min-width:0;flex:1;font-size:15px}
  .kal-view-toggle{width:100%;display:grid;grid-template-columns:1fr 1fr}.kal-view-toggle button{width:100%}
  .kal-main{overflow-x:auto}.kal-grid{min-width:430px}.kal-legend-row{justify-content:flex-start}
  .kal-bottom{padding:16px!important}.kal-note{flex-direction:column}.kal-sub-btn{white-space:normal;text-align:center;width:100%;justify-content:center}

  /* Layanan: BK, PKL, Koperasi, UKS, Lab, Kurikulum, TU, Parkir */
  body:not(.home) .section.lyn-sec,body:not(.home) .section.bk-sec,body:not(.home) .section.kop-sec{padding-top:14px!important;padding-bottom:14px!important}
  .ttp-cards,.ttp-mini,.ttp-tiers,.svc-labtypes,.svc-logos,.svc-gallery,.svc-products{grid-template-columns:1fr!important}
  .ttp-card-head,.svc-head{align-items:flex-start}.svc-head{flex-direction:column}.svc-head a{white-space:normal}
  .ttp-steps{display:grid!important;grid-template-columns:1fr!important}.ttp-arrow{display:none!important}.ttp-step{text-align:left;display:flex;gap:12px}.ttp-step .ic{margin:0;flex:0 0 54px;width:54px;height:54px}
  .ttp-mini-item,.ttp-info-block{align-items:flex-start}.ttp-quote{padding:22px 18px}.ttp-cta{padding:22px 18px!important}
  .svc-flow{display:grid!important;grid-template-columns:1fr!important}.svc-flow .st{max-width:none!important}.svc-flow .ar{display:none!important}
  body.page-template-tpl-hubungan-industri .ttp-link{white-space:normal!important}

  /* Kontak */
  .kontak-map,.kontak-map iframe,.kontak-map-empty{min-height:260px}.kontak-map-btn{position:static;display:flex;margin:12px;justify-content:center}
  .kontak-socials{display:grid;grid-template-columns:1fr}.ks-link{text-align:center}.dept-grid{grid-template-columns:1fr!important}

  /* Profil, kepala sekolah, visi misi, sejarah */
  .ps-stats{flex-wrap:wrap!important}.ps-stat{white-space:normal!important}.panel>.ps-stats{justify-content:flex-start!important}
  .grid.cols-3,.pillars{grid-template-columns:1fr!important}.tl-item{grid-template-columns:40px 1fr!important}.tl-item .tl-img{display:none!important}
  .ks-photo{max-width:220px;margin-inline:auto}.ks-intro{text-align:left}.ks-rule{margin-inline:0}.ks-aside{grid-template-columns:1fr!important}.ks-timeline li{grid-template-columns:14px 1fr!important}.ks-tl-year{grid-column:2;white-space:normal}
}

@media(max-width:520px){
  .berita-aside,.peng-right{display:flex!important;flex-direction:column!important}
  .pg-item{flex-direction:column}.pg-ic{width:38px;height:38px}
  .ds-grid{grid-template-columns:1fr!important}
  .dk-quick-grid{grid-template-columns:repeat(2,1fr)!important}
  .al-bar,.al-controls{flex-direction:column;align-items:stretch}.al-tabs{min-width:0;width:100%;overflow-x:auto;flex-wrap:nowrap!important}.al-tab{flex:0 0 auto}
  .al-head{flex-direction:column}.al-year-lbl{white-space:normal}.al-contact-row{font-size:13px}
  .kal-grid{min-width:390px}.kal-cell{min-height:50px;padding:6px 5px}.kal-dow{font-size:11px}.kal-num{font-size:12px}
  .topbar-search-pop{left:8px!important;right:8px!important}.topbar-search-pop .tsp-row{display:grid!important;grid-template-columns:1fr!important}.topbar-search-pop input[type="search"]{width:100%}
  .search-item{padding:12px}.search-bigform button[type="submit"]{width:100%}
}


/* ============================================================
   Mobile Sidebar Menu as Dropdown
   ============================================================ */
@media(max-width:760px){
  .sidebar .side-nav{display:block!important;position:relative;padding:0!important;overflow:hidden!important;border-radius:14px!important;background:#fff!important;box-shadow:0 10px 28px rgba(10,44,99,.10)!important}
  .sidebar .side-nav .side-head{margin:0!important;border-radius:13px!important;min-height:48px;cursor:pointer;user-select:none;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:13px 16px!important}
  .sidebar .side-nav .side-head::after{content:"▾";display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.16);font-size:13px;line-height:1;transition:transform .18s ease;flex:0 0 auto}
  .sidebar .side-nav.open .side-head::after{transform:rotate(180deg)}
  .sidebar .side-nav > a,
  .sidebar .side-nav > .sn-group,
  .sidebar .side-nav > .side-nav-mobile-body{display:none!important}
  .sidebar .side-nav.open > a,
  .sidebar .side-nav.open > .sn-group,
  .sidebar .side-nav.open > .side-nav-mobile-body{display:block!important}
  .sidebar .side-nav.open{padding-bottom:8px!important;overflow:visible!important}
  .sidebar .side-nav.open > a{display:flex!important;margin:6px 10px 0;width:auto!important;white-space:normal!important}
  .sidebar .side-nav.open > .sn-group{margin:6px 10px 0}
  .sidebar .side-nav .sn-parent{width:100%!important;white-space:normal!important;background:#f8fafc!important;border:1px solid #eef2f8!important;border-radius:10px!important;padding:11px 12px!important}
  .sidebar .side-nav .sn-group.open .sn-parent{background:var(--blue-050)!important;color:var(--navy-800)!important;border-color:#dbe7ff!important}
  .sidebar .side-nav .sn-children{display:none!important;min-width:0!important;width:auto!important;margin:6px 0 0 8px!important;padding:4px 0 4px 10px!important;border-left:2px solid var(--blue-100)!important}
  .sidebar .side-nav .sn-group.open .sn-children{display:block!important}
  .sidebar .side-nav .sn-children a{display:flex!important;white-space:normal!important;width:auto!important;padding:9px 10px!important}
  .sidebar .side-nav a.active{background:var(--blue-100)!important;color:var(--blue-600)!important;font-weight:700!important}
  .sidebar .side-cta{margin-top:12px!important}
}