/* =============================================================
   KEMAHASISWAAN UNTAN — Modern Design System
   Style: Modern clean & professional · UNTAN blue identity
   ============================================================= */

:root {
    --brand: #3B5997;
    --brand-600: #2c447a;
    --brand-700: #22365f;
    --brand-050: #eef2fb;
    --brand-100: #dde5f6;
    --gold: #F5A800;
    --gold-600: #d99400;
    --gold-050: #fff6e0;
    --accent: #16a34a;
    --accent-050: #e7f6ec;
    --amber: #f59e0b;
    --amber-050: #fff4e0;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e8edf5;
    --bg: #ffffff;
    --bg-soft: #f6f8fc;
    --shadow-sm: 0 2px 10px rgba(30, 41, 59, .05);
    --shadow: 0 10px 30px rgba(30, 41, 59, .08);
    --shadow-lg: 0 20px 48px rgba(59, 89, 151, .16);
    --radius: 16px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --container: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--bg);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

a { text-decoration: none; color: inherit; }

img { max-width: 100%; height: auto; }

.mk-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.mk-section { padding: 72px 0; }
.mk-section-sm { padding: 48px 0; }
.mk-soft { background: var(--bg-soft); }

/* ---------- Eyebrow + section heads ---------- */
.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--brand);
    background: var(--brand-050);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.mk-h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 12px; }
.mk-lead { color: var(--muted); font-size: 1.05rem; max-width: 640px; margin: 0; }

.mk-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.mk-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .95rem;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.mk-btn-primary { background: var(--brand); color: #fff; }
.mk-btn-primary:hover { background: var(--brand-600); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }

.mk-btn-light { background: #fff; color: var(--brand); border-color: var(--line); }
.mk-btn-light:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }

.mk-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.mk-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

.mk-btn-sm { padding: 9px 16px; font-size: .85rem; }

/* =============================================================
   TOPBAR + NAVBAR
   ============================================================= */
.mk-topbar {
    background: var(--brand-700);
    color: rgba(255,255,255,.85);
    font-size: .82rem;
}
.mk-topbar .mk-container { display: flex; justify-content: space-between; align-items: center; height: 40px; gap: 16px; }
.mk-topbar a { color: rgba(255,255,255,.85); transition: color .2s; }
.mk-topbar a:hover { color: #fff; }
.mk-topbar-left { display: flex; gap: 20px; align-items: center; }
.mk-topbar-left .sep { opacity: .4; }
.mk-topbar-social { display: flex; gap: 14px; align-items: center; font-size: .95rem; }

.mk-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s;
}
.mk-nav.scrolled { box-shadow: var(--shadow-sm); }
.mk-nav .mk-container { display: flex; align-items: center; height: 74px; gap: 20px; }

.mk-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mk-brand img { height: 44px; width: auto; }
.mk-brand .bt { font-weight: 800; font-size: 1.02rem; line-height: 1.1; color: var(--ink); }
.mk-brand .bs { font-size: .72rem; color: var(--muted); font-weight: 600; }

.mk-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.mk-menu > li { position: relative; }
.mk-menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: .92rem;
    color: #334155;
    border-radius: 10px;
    transition: all .18s;
}
.mk-menu > li > a:hover { color: var(--brand); background: var(--brand-050); }
.mk-menu > li.active > a { color: var(--brand); background: var(--brand-050); }

.mk-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .2s;
}
.mk-menu > li:hover .mk-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.mk-dropdown a { display: block; padding: 9px 12px; border-radius: 9px; font-size: .9rem; color: #334155; font-weight: 500; }
.mk-dropdown a:hover { background: var(--brand-050); color: var(--brand); }

.mk-nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.mk-burger {
    display: none;
    background: var(--brand-050);
    border: none;
    width: 46px; height: 46px;
    border-radius: 12px;
    color: var(--brand);
    font-size: 1.3rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* Mobile drawer */
.mk-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 340px);
    background: #fff;
    z-index: 2000;
    transform: translateX(100%);
    transition: transform .3s ease;
    padding: 24px;
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0,0,0,.12);
}
.mk-drawer.open { transform: translateX(0); }
.mk-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mk-drawer a { display: block; padding: 12px 10px; border-radius: 10px; font-weight: 600; color: #334155; border-bottom: 1px solid var(--line); }
.mk-drawer a:hover { color: var(--brand); background: var(--brand-050); }
.mk-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    z-index: 1500; opacity: 0; visibility: hidden; transition: opacity .3s;
}
.mk-overlay.open { opacity: 1; visibility: visible; }

/* =============================================================
   HERO
   ============================================================= */
.mk-hero {
    position: relative;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(59,89,151,.10), transparent 60%),
        radial-gradient(800px 500px at 0% 110%, rgba(22,163,74,.08), transparent 55%),
        var(--bg);
    overflow: hidden;
    padding: 72px 0 60px;
}
.mk-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.mk-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); margin: 0 0 18px; }
.mk-hero h1 .hl { color: var(--brand); }
.mk-hero p { font-size: 1.12rem; color: var(--muted); margin: 0 0 28px; max-width: 540px; }

.mk-search {
    display: flex;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 7px 7px 7px 20px;
    box-shadow: var(--shadow-sm);
    max-width: 520px;
}
.mk-search input { flex: 1; border: none; outline: none; font-size: .98rem; font-family: inherit; background: transparent; }
.mk-search .mk-btn { padding: 11px 22px; }

.mk-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mk-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--line);
    padding: 8px 15px; border-radius: var(--radius-pill);
    font-size: .86rem; font-weight: 600; color: #334155;
    transition: all .18s;
}
.mk-chip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mk-chip i { color: var(--brand); }

.mk-hero-visual { position: relative; }
.mk-hero-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 3.3;
    object-fit: cover;
    width: 100%;
}
.mk-hero-float {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.mk-hero-float.f1 { bottom: 26px; left: -22px; }
.mk-hero-float.f2 { top: 26px; right: -18px; }
.mk-hero-float .ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; }
.mk-hero-float .n { font-weight: 800; font-size: 1.15rem; line-height: 1; }
.mk-hero-float .l { font-size: .74rem; color: var(--muted); }

/* ---------- Stats band ---------- */
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mk-stat { text-align: center; }
.mk-stat .n { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: var(--brand); line-height: 1; }
.mk-stat .l { color: var(--muted); font-size: .92rem; margin-top: 8px; }

/* ---------- Service cards ---------- */
.mk-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mk-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.mk-service {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: all .25s;
    height: 100%;
    display: block;
}
.mk-service:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.mk-service .ic {
    width: 56px; height: 56px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 18px;
    background: var(--brand-050); color: var(--brand);
}
.mk-service h3 { font-size: 1.12rem; margin: 0 0 8px; }
.mk-service p { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.mk-service .go { color: var(--brand); font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }
.mk-service:hover .go { gap: 10px; }

/* ---------- Content cards (berita/beasiswa/prestasi) ---------- */
.mk-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.mk-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.mk-card-thumb { aspect-ratio: 16/10; object-fit: cover; width: 100%; background: var(--bg-soft); }
.mk-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.mk-tag {
    display: inline-block; font-size: .72rem; font-weight: 700;
    color: var(--brand); background: var(--brand-050);
    padding: 4px 11px; border-radius: var(--radius-pill); margin-bottom: 10px;
}
.mk-card-body h3 { font-size: 1.04rem; margin: 0 0 8px; line-height: 1.35; }
.mk-card-body h3 a:hover { color: var(--brand); }
.mk-card-meta { font-size: .8rem; color: var(--muted); margin-top: auto; padding-top: 12px; display: flex; gap: 14px; }
.mk-card-meta i { color: var(--brand); margin-right: 4px; }

/* ---------- Agenda mini ---------- */
.mk-agenda-item {
    display: flex; gap: 16px; align-items: center;
    background: #fff; border: 1px solid var(--line);
    border-radius: 14px; padding: 16px; transition: all .2s;
}
.mk-agenda-item:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.mk-agenda-date {
    flex-shrink: 0; width: 64px; height: 70px; border-radius: 12px;
    background: var(--brand); color: #fff; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.mk-agenda-date .d { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.mk-agenda-date .m { font-size: .72rem; text-transform: uppercase; margin-top: 3px; }

/* ---------- CTA band ---------- */
.mk-cta {
    background: linear-gradient(135deg, var(--brand), var(--brand-700));
    border-radius: var(--radius-lg);
    padding: 56px 48px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mk-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 12px; }
.mk-cta p { color: rgba(255,255,255,.88); max-width: 560px; margin: 0 auto 28px; }

/* =============================================================
   FOOTER
   ============================================================= */
.mk-footer { background: var(--brand-700); color: rgba(255,255,255,.75); padding: 60px 0 0; }
.mk-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 44px; }
.mk-footer h4 { color: #fff; font-size: 1rem; margin: 0 0 18px; }
.mk-footer a { color: rgba(255,255,255,.75); transition: color .2s; }
.mk-footer a:hover { color: #fff; }
.mk-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; font-size: .92rem; }
.mk-footer-brand img { height: 50px; margin-bottom: 16px; }
.mk-footer-brand p { font-size: .92rem; line-height: 1.7; max-width: 320px; }
.mk-footer-contact { font-size: .92rem; display: flex; flex-direction: column; gap: 12px; }
.mk-footer-contact div { display: flex; gap: 10px; align-items: flex-start; }
.mk-footer-contact i { color: #8fa6d4; margin-top: 3px; }
.mk-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.mk-footer-social a {
    width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.mk-footer-social a:hover { background: var(--brand); }
.mk-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; font-size: .85rem; text-align: center; }

/* ---------- WA float ---------- */
.mk-wa {
    position: fixed; bottom: 26px; right: 26px; z-index: 1200;
    background: #25D366; color: #fff; display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 20px; border-radius: var(--radius-pill); font-weight: 700;
    box-shadow: 0 8px 24px rgba(37,211,102,.4); transition: all .2s;
}
.mk-wa:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(37,211,102,.5); }

/* ---------- Breadcrumb (inner pages) ---------- */
.mk-page-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 36px 0; }
.mk-breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .86rem; color: var(--muted); }
.mk-breadcrumb a:hover { color: var(--brand); }
.mk-breadcrumb .sep { opacity: .5; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 991px) {
    .mk-menu, .mk-nav-cta .mk-btn { display: none; }
    .mk-burger { display: inline-flex; }
    .mk-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .mk-hero-visual { order: -1; }
    .mk-hero-float.f1 { left: 10px; }
    .mk-hero-float.f2 { right: 10px; }
    .mk-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .mk-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 767px) {
    .mk-section { padding: 52px 0; }
    .mk-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .mk-grid-4, .mk-grid-3, .mk-grid-2 { grid-template-columns: 1fr; }
    .mk-footer-grid { grid-template-columns: 1fr; }
    .mk-topbar-left .hide-sm { display: none; }
    .mk-cta { padding: 40px 24px; }
    .mk-hero-float { display: none; }
}

/* =============================================================
   TAMBAHAN: Aksen Emas UNTAN + Komponen (gaya UPA PKK)
   ============================================================= */
.mk-btn-gold { background: var(--gold); color: #1f2937; }
.mk-btn-gold:hover { background: var(--gold-600); color: #1f2937; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245,168,0,.3); }

/* Highlight judul (garis bawah kuning seperti stabilo) */
.mk-hl {
    background: linear-gradient(transparent 62%, rgba(245,168,0,.55) 62%);
    padding: 0 4px;
    border-radius: 2px;
}

.mk-eyebrow.gold { color: var(--gold-600); background: var(--gold-050); }

/* ---------- Sambutan Pimpinan ---------- */
.mk-pimpinan {
    background:
        radial-gradient(900px 400px at 100% 0%, rgba(245,168,0,.10), transparent 55%),
        var(--bg-soft);
}
.mk-pimpinan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 760px; margin: 0 auto; }
.mk-leader {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform .25s;
}
.mk-leader:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.mk-leader-photo {
    width: 100%;
    aspect-ratio: 3 / 3.4;
    object-fit: cover;
    object-position: center top;
    background: linear-gradient(160deg, #e9eef8, #dce4f3);
    display: block;
}
.mk-leader-body { padding: 20px 18px 24px; position: relative; }
.mk-leader-role {
    display: inline-block;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--brand); background: var(--brand-050);
    padding: 5px 14px; border-radius: var(--radius-pill);
    margin: -34px 0 12px; position: relative; z-index: 2;
}
.mk-leader-role.gold { color: var(--gold-600); background: var(--gold-050); }
.mk-leader h3 { font-size: 1.12rem; margin: 0 0 4px; }
.mk-leader p { color: var(--muted); font-size: .86rem; margin: 0; }
.mk-leader-strip { height: 5px; background: linear-gradient(90deg, var(--brand), var(--gold)); }

/* ---------- Galeri slider ---------- */
.mk-gallery .carousel-item img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius-lg); }
.mk-gallery .carousel-caption {
    background: linear-gradient(transparent, rgba(15,23,42,.82));
    left: 0; right: 0; bottom: 0; padding: 60px 28px 24px; text-align: left; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mk-gallery .carousel-caption h3 { color: #fff; font-size: 1.3rem; }
.mk-gallery .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.mk-gallery-wrap { position: relative; }
.mk-gallery-wrap::before {
    content: ""; position: absolute; right: -14px; bottom: -14px; left: 40px; top: 40px;
    background: var(--gold); border-radius: var(--radius-lg); z-index: 0; opacity: .35;
}
.mk-gallery-wrap .carousel { position: relative; z-index: 1; }

/* ---------- Instagram 3 postingan ---------- */
.mk-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mk-ig-post {
    position: relative; display: block; border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 1; background: var(--bg-soft); border: 1px solid var(--line);
}
.mk-ig-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mk-ig-post:hover img { transform: scale(1.06); }
.mk-ig-post .ov {
    position: absolute; inset: 0; background: rgba(131,58,180,.0); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.8rem; opacity: 0; transition: all .25s;
}
.mk-ig-post:hover .ov { background: rgba(131,58,180,.45); opacity: 1; }

@media (max-width: 767px) {
    .mk-pimpinan-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .mk-gallery .carousel-item img { height: 280px; }
    .mk-gallery-wrap::before { display: none; }
    .mk-ig-grid { grid-template-columns: 1fr; }
}

/* ---------- Hero background slider (dinamis) ---------- */
.mk-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mk-hero-bg .slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.2s ease-in-out;
}
.mk-hero-bg .slide.active { opacity: var(--hero-op, 1); }
.mk-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 42%, rgba(255,255,255,.35) 100%);
}
.mk-hero .mk-container { position: relative; z-index: 2; }
/* Media kotak kanan (video) */
.mk-hero-img.as-video { padding: 0; }
.mk-hero-video { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; background:#000; }
.mk-hero-visual iframe.mk-hero-video { border: 0; }
@media (max-width: 991px) {
    .mk-hero-overlay { background: rgba(255,255,255,.86); }
}

/* =============================================================
   POLISH (Okt 2026): navbar responsif, aksesibilitas, mobile, pencarian
   ============================================================= */

/* ---------- Navbar ---------- */
.mk-menu { gap: 2px; }
.mk-menu > li > a { padding: 10px 11px; }
.mk-nav-cta { margin-left: auto; }
.mk-menu > li:focus-within .mk-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.mk-dropdown-end { left: auto; right: 0; }
.mk-icon-btn {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #334155; background: transparent; transition: all .18s;
}
.mk-icon-btn:hover { color: var(--brand); background: var(--brand-050); }

@media (max-width: 1199px) and (min-width: 992px) {
    .mk-brand > span { display: none; }
    .mk-menu > li > a { padding: 10px 8px; font-size: .88rem; }
    .mk-nav .mk-container { gap: 12px; }
}

/* ---------- Aksesibilitas ---------- */
:focus-visible { outline: 3px solid rgba(245,168,0,.85); outline-offset: 2px; border-radius: 6px; }
.mk-skip {
    position: absolute; left: 12px; top: -60px; z-index: 3000;
    background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700;
    transition: top .2s;
}
.mk-skip:focus { top: 12px; color: #fff; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Drawer ---------- */
.mk-drawer a.active { color: var(--brand); background: var(--brand-050); }
.mk-drawer a.sub { padding-left: 18px; font-weight: 500; font-size: .95rem; }
.mk-drawer-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); padding: 18px 10px 6px;
}
.mk-drawer-search {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
    padding: 0 14px; margin-bottom: 10px; color: var(--muted);
}
.mk-drawer-search input { flex: 1; border: 0; outline: 0; background: transparent; padding: 12px 0; font: inherit; min-width: 0; }
.mk-drawer a.mk-drawer-cta { display: flex; justify-content: center; margin-top: 18px; border: 0; color: #fff; }
.mk-drawer a.mk-drawer-cta:hover { color: #fff; background: var(--brand-600); }

/* ---------- Tombol mengambang ---------- */
.mk-top {
    position: fixed; right: 26px; bottom: 90px; z-index: 1200;
    width: 46px; height: 46px; border-radius: 50%; border: 0;
    background: #fff; color: var(--brand); box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s;
}
.mk-top.show { opacity: 1; visibility: visible; transform: none; }
.mk-top:hover { background: var(--brand); color: #fff; }

/* ---------- Animasi muncul ---------- */
.mk-js .mk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.mk-js .mk-reveal.mk-in { opacity: 1; transform: none; }

/* ---------- Berita list (homepage) ---------- */
.mk-news-item { display: flex; gap: 16px; align-items: center; border-radius: 14px; padding: 6px; margin: -6px; transition: background .2s; }
.mk-news-item:hover { background: var(--bg-soft); }
.mk-news-item:hover div div:last-child { color: var(--brand); }

/* ---------- Pagination Bootstrap ikut warna brand ---------- */
.pagination {
    --bs-pagination-color: var(--brand);
    --bs-pagination-hover-color: var(--brand-600);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(59,89,151,.2);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-border-radius: 10px;
    flex-wrap: wrap; gap: 4px;
}

/* ---------- Halaman pencarian ---------- */
.mk-empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.mk-empty i { font-size: 2.6rem; color: var(--brand); opacity: .5; display: block; margin-bottom: 12px; }
.mk-result-group { margin-bottom: 36px; }
.mk-result-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mk-result-head h2 { font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.mk-result-head h2 i { color: var(--brand); }
.mk-result-head h2 span { font-size: .75rem; background: var(--brand-050); color: var(--brand); padding: 3px 10px; border-radius: var(--radius-pill); }
.mk-link { color: var(--brand); font-weight: 700; font-size: .88rem; }
.mk-link:hover { color: var(--brand-600); }
.mk-result-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mk-result {
    display: flex; flex-direction: column; gap: 4px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; transition: all .2s;
}
.mk-result:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.mk-result strong { font-weight: 700; line-height: 1.35; }
.mk-result span { font-size: .82rem; color: var(--muted); }

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
    .mk-hero-visual { order: 0; }
    .mk-nav-cta .mk-icon-btn { display: none; }
}
@media (max-width: 767px) {
    .mk-hero { padding: 40px 0 44px; }
    .mk-hero-img, .mk-hero-video { aspect-ratio: 16 / 10; }
    .mk-hero-chips { gap: 8px; }
    .mk-chip { padding: 7px 12px; font-size: .82rem; }

    .mk-grid-4:has(> .mk-service) { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mk-grid-4 > .mk-service { padding: 18px 14px; }
    .mk-grid-4 > .mk-service .ic { width: 44px; height: 44px; font-size: 1.2rem; border-radius: 12px; margin-bottom: 12px; }
    .mk-grid-4 > .mk-service h3 { font-size: .98rem; }
    .mk-grid-4 > .mk-service p { font-size: .8rem; margin-bottom: 8px; }
    .mk-grid-4 > .mk-service .go { font-size: .8rem; }

    .mk-gallery .carousel-caption { padding: 40px 16px 34px; }
    .mk-gallery .carousel-caption h3 { font-size: 1rem; line-height: 1.35; }
    .mk-gallery .carousel-indicators { margin-bottom: .6rem; }

    .mk-result-list { grid-template-columns: 1fr; }
    .mk-breadcrumb { flex-wrap: wrap; }

    .mk-wa { padding: 0; width: 54px; height: 54px; justify-content: center; bottom: 18px; right: 18px; }
    .mk-wa span { display: none; }
    .mk-wa i { font-size: 1.5rem !important; }
    .mk-top { right: 22px; bottom: 82px; width: 44px; height: 44px; }
}
@media (max-width: 575px) {
    .mk-leader-body { padding: 16px 10px 18px; }
    .mk-leader-role { font-size: .6rem; padding: 4px 9px; letter-spacing: .03em; margin-top: -30px; }
    .mk-leader h3 { font-size: .92rem; }
}
.mk-search input { min-width: 0; }

/* ---------- Hero: slider media kotak kanan (foto / video / YouTube) ---------- */
.mk-media {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.3; background: #0f172a;
}
.mk-media-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.mk-media-item.active { opacity: 1; visibility: visible; }
.mk-media-item img, .mk-media-item video, .mk-media-item iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.mk-media-cap {
    position: absolute; left: 14px; top: 14px; max-width: 58%;
    background: rgba(15,23,42,.62); backdrop-filter: blur(6px); color: #fff;
    font-weight: 600; font-size: .8rem; padding: 6px 12px; border-radius: var(--radius-pill);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-media-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.85); color: var(--brand); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s;
}
.mk-media-nav.prev { left: 12px; }
.mk-media-nav.next { right: 12px; }
.mk-media:hover .mk-media-nav, .mk-media-nav:focus-visible { opacity: 1; }
.mk-media-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; justify-content: center; gap: 7px; }
.mk-media-dots button { width: 9px; height: 9px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.6); transition: all .25s; cursor: pointer; }
.mk-media-dots button.active { width: 24px; background: var(--gold); }
.mk-media-item[data-type="youtube"].active ~ .mk-media-dots,
.mk-media-item[data-type="video"].active ~ .mk-media-dots { bottom: auto; top: 12px; }
@media (hover: none) { .mk-media-nav { opacity: 1; width: 34px; height: 34px; } }
@media (max-width: 767px) { .mk-media { aspect-ratio: 16 / 10; } }

/* ---------- Sambutan / Sekapur Sirih ---------- */
.mk-sambutan { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; }
.mk-sambutan-photo { position: relative; }
.mk-sambutan-photo::before {
    content: ""; position: absolute; left: -16px; top: -16px; right: 24px; bottom: 24px;
    border-radius: var(--radius-lg); background: var(--gold); opacity: .28; z-index: 0;
}
.mk-sambutan-photo .mk-leader { position: relative; z-index: 1; }
.mk-sambutan-photo .mk-leader:hover { transform: none; }
.mk-sambutan-text .mk-eyebrow { margin-bottom: 12px; }
.mk-sambutan-text .mk-h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 16px; }
.mk-sambutan-body {
    position: relative; color: #334155; font-size: .98rem; line-height: 1.75;
    padding-left: 20px; border-left: 3px solid var(--gold); overflow: hidden;
}
.mk-sambutan-body p { margin: 0 0 12px; }
.mk-sambutan-body p:last-child { margin-bottom: 0; }
.mk-sambutan-body .salam { font-weight: 600; color: var(--ink); }
.mk-sambutan-body .penutup { font-style: italic; }
.mk-sambutan-body.clamped::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
    background: linear-gradient(rgba(246,248,252,0), var(--bg-soft));
}
.mk-sambutan-more {
    margin: 12px 0 0 20px; background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--brand); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px;
}
.mk-sambutan-more:hover { color: var(--brand-600); }
@media (max-width: 991px) {
    .mk-sambutan { grid-template-columns: 1fr; gap: 36px; }
    .mk-sambutan-photo { max-width: 320px; margin: 0 auto; width: 100%; }
}
@media (max-width: 575px) {
    .mk-sambutan-photo { max-width: 260px; }
    .mk-sambutan-body { padding-left: 16px; font-size: .95rem; }
}

/* =============================================================
   LAYANAN — Bento grid (fresh & youthful)
   ============================================================= */
.mk-bento-section { position: relative; overflow: hidden; }
.mk-bento-section::before {
    content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
    right: -160px; top: -180px; background: radial-gradient(circle, rgba(245,168,0,.14), transparent 65%); pointer-events: none;
}
.mk-bento-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; position: relative; }
.mk-bento-head .mk-h2 { margin: 0; max-width: 560px; }
.mk-bento-head .mk-lead { max-width: 400px; }

.mk-bento {
    display: grid; gap: 18px; position: relative;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "beasiswa beasiswa prestasi ormawa"
        "beasiswa beasiswa agenda konseling"
        "ebook pengumuman kontak kontak";
}
.bt-beasiswa { grid-area: beasiswa; } .bt-prestasi { grid-area: prestasi; } .bt-ormawa { grid-area: ormawa; }
.bt-agenda { grid-area: agenda; } .bt-konseling { grid-area: konseling; } .bt-ebook { grid-area: ebook; }
.bt-pengumuman { grid-area: pengumuman; } .bt-kontak { grid-area: kontak; }

.bento-card {
    --c: var(--brand); --bg: #eef2fb; --ink: var(--ink);
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
    min-height: 200px; padding: 22px; border-radius: 26px;
    background: var(--bg); color: var(--ink);
    border: 1.5px solid transparent;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.bento-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--c) 55%, transparent); border-color: color-mix(in srgb, var(--c) 35%, transparent); color: var(--ink); }
.bt-top { display: flex; justify-content: space-between; align-items: flex-start; }
.bt-ic {
    width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
    font-size: 1.4rem; color: #fff; background: var(--c);
    box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--c) 70%, transparent);
    transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.bento-card:hover .bt-ic { transform: scale(1.08) rotate(-8deg); }
.bt-go {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; color: var(--c); font-size: 1rem;
    box-shadow: 0 4px 12px rgba(15,23,42,.08); transition: transform .3s, background .3s, color .3s;
}
.bento-card:hover .bt-go { transform: rotate(45deg); background: var(--c); color: #fff; }
.bento-card h3 { font-size: 1.22rem; margin: 0 0 6px; color: inherit; letter-spacing: -.02em; }
.bento-card p { margin: 0; font-size: .9rem; line-height: 1.55; opacity: .78; }
.bt-num { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--c); margin-bottom: 8px; }
.bt-num small { font-size: 1.4rem; }
.bt-pill {
    display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700;
    padding: 5px 12px; border-radius: 99px; margin-bottom: 14px;
    background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(6px);
}
.bt-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.3); }

/* Warna per layanan */
.bt-prestasi   { --c: #d99400; --bg: linear-gradient(150deg, #fff6e0, #ffe9b0); }
.bt-ormawa     { --c: #7c3aed; --bg: linear-gradient(150deg, #f3edff, #e6dbff); }
.bt-agenda     { --c: #0891b2; --bg: linear-gradient(150deg, #e6f8fc, #cdf0f8); }
.bt-konseling  { --c: #e11d74; --bg: linear-gradient(150deg, #ffeef5, #ffd9e8); }
.bt-ebook      { --c: #16a34a; --bg: linear-gradient(150deg, #eafaf0, #d3f3df); }
.bt-pengumuman { --c: #ea580c; --bg: linear-gradient(150deg, #fff1e8, #ffdfca); }
.bt-kontak     { --c: #3B5997; --bg: linear-gradient(120deg, #eef2fb, #dde5f6); }
.bt-kontak .bt-body { max-width: 360px; }

/* Kartu besar Beasiswa */
.bt-beasiswa {
    --c: var(--gold); --ink: #fff;
    background: radial-gradient(500px 300px at 90% 0%, rgba(245,168,0,.35), transparent 60%),
                linear-gradient(150deg, #2c447a 0%, #3B5997 55%, #4f6fb3 100%);
    padding: 30px; min-height: 418px;
}
.bt-beasiswa h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 10px; }
.bt-beasiswa p { font-size: 1rem; max-width: 380px; opacity: .88; }
.bt-beasiswa .bt-ic { color: #1f2937; width: 60px; height: 60px; font-size: 1.6rem; }
.bt-beasiswa .bt-go { background: rgba(255,255,255,.14); color: #fff; }
.bt-beasiswa:hover .bt-go { background: var(--gold); color: #1f2937; }
.bt-beasiswa:hover { box-shadow: 0 26px 50px -20px rgba(34,54,95,.7); border-color: transparent; color: #fff; }
.bt-cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
    background: var(--gold); color: #1f2937; font-weight: 800; font-size: .92rem;
    padding: 12px 20px; border-radius: 99px; transition: gap .25s;
}
.bt-beasiswa:hover .bt-cta { gap: 12px; }
.bt-deco { position: absolute; right: -30px; bottom: -50px; font-size: 15rem; color: rgba(255,255,255,.06); z-index: -1; transform: rotate(-12deg); transition: transform .5s; }
.bt-beasiswa:hover .bt-deco { transform: rotate(-4deg) scale(1.05); }

@media (max-width: 991px) {
    .mk-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "beasiswa beasiswa"
            "prestasi ormawa"
            "agenda konseling"
            "ebook pengumuman"
            "kontak kontak";
    }
    .bt-beasiswa { min-height: 320px; }
}
@media (max-width: 575px) {
    .mk-bento { gap: 12px; }
    .bento-card { min-height: 170px; padding: 16px; border-radius: 22px; gap: 14px; }
    .bt-ic { width: 44px; height: 44px; font-size: 1.15rem; border-radius: 13px; }
    .bt-go { width: 34px; height: 34px; font-size: .85rem; }
    .bento-card h3 { font-size: 1.02rem; }
    .bento-card p { font-size: .8rem; }
    .bt-num { font-size: 2rem; }
    .bt-beasiswa { padding: 22px; min-height: 0; }
    .bt-deco { font-size: 10rem; }
}
@media (prefers-reduced-motion: reduce) { .bento-card:hover { transform: none; } }

/* =============================================================
   HERO — Akses Cepat (tab + grid ikon kecil)
   ============================================================= */
.mk-quick {
    margin-top: 22px; max-width: 560px;
    background: rgba(255,255,255,.78); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 22px; padding: 14px;
    box-shadow: 0 14px 34px -18px rgba(34,54,95,.35);
}
.mk-quick-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.mk-quick-title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; }
.mk-quick-title i { color: var(--gold); }
.mk-quick-tabs { display: inline-flex; background: var(--bg-soft); border-radius: 99px; padding: 3px; gap: 2px; }
.mk-quick-tabs button {
    border: 0; background: transparent; font: inherit; font-size: .76rem; font-weight: 700; color: var(--muted);
    padding: 6px 12px; border-radius: 99px; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.mk-quick-tabs button:hover { color: var(--brand); }
.mk-quick-tabs button.active { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(15,23,42,.1); }
.mk-quick-grid { display: none; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-quick-grid.active { display: grid; animation: mkQuickIn .35s ease; }
@keyframes mkQuickIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mk-q {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 9px 4px 8px; border-radius: 14px; color: #334155; transition: background .2s, transform .2s;
}
.mk-q:hover { background: color-mix(in srgb, var(--qc) 10%, #fff); transform: translateY(-3px); color: var(--qc); }
.mk-q-ic {
    position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    font-size: 1.08rem; color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--qc) 78%, #fff), var(--qc));
    box-shadow: 0 6px 14px -6px var(--qc);
    transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.mk-q:hover .mk-q-ic { transform: rotate(-8deg) scale(1.08); }
.mk-q-ext {
    position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; color: var(--qc); font-size: .55rem; display: grid; place-items: center;
    box-shadow: 0 1px 4px rgba(15,23,42,.2);
}
.mk-q-label { font-size: .72rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 575px) {
    .mk-quick { padding: 12px; border-radius: 18px; }
    .mk-quick-head { flex-direction: column; align-items: flex-start; }
    .mk-quick-tabs { width: 100%; }
    .mk-quick-tabs button { flex: 1; padding: 6px 6px; }
    .mk-q-ic { width: 38px; height: 38px; }
    .mk-q-label { font-size: .68rem; }
}

/* =============================================================
   ETALASE PRESTASI (navy + emas, interaktif)
   ============================================================= */
.mk-prest {
    position: relative; overflow: hidden; color: #fff; padding: 76px 0;
    background:
        radial-gradient(700px 380px at 0% 0%, rgba(245,168,0,.18), transparent 60%),
        radial-gradient(600px 420px at 100% 100%, rgba(79,111,179,.45), transparent 60%),
        linear-gradient(160deg, #1a2a4d, #22365f 55%, #2c447a);
}
.mk-prest::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px;
}
.mk-prest .mk-container { position: relative; z-index: 1; }
.mk-prest-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.mk-prest-intro h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 14px; }
.mk-prest-intro h2 span { color: var(--gold); }
.mk-prest-intro > p { color: rgba(255,255,255,.78); font-size: 1.02rem; margin: 0 0 26px; max-width: 480px; }
.mk-prest .mk-eyebrow.gold { background: rgba(245,168,0,.16); color: var(--gold); }

.mk-prest-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; max-width: 480px; }
.mk-ps {
    position: relative; padding: 16px 18px; border-radius: 18px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    transition: background .25s, transform .25s, border-color .25s;
}
.mk-ps:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); border-color: rgba(245,168,0,.5); }
.mk-ps > i { position: absolute; right: 16px; top: 14px; font-size: 1.2rem; color: var(--gold); opacity: .85; }
.mk-ps .n { font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mk-ps .l { font-size: .8rem; color: rgba(255,255,255,.7); margin-top: 6px; }

.mk-prest-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.mk-prest-badges a {
    display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700;
    padding: 7px 13px; border-radius: 99px; color: #fff;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); transition: all .2s;
}
.mk-prest-badges a i { color: var(--gold); }
.mk-prest-badges a:hover { background: rgba(245,168,0,.18); border-color: var(--gold); color: #fff; }

/* Dinding kartu prestasi bergerak (2 kolom berlawanan arah) */
.mk-prest-wall {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: 520px; overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.mk-prest-track { display: flex; flex-direction: column; gap: 14px; animation: mkPrestUp 48s linear infinite; }
.mk-prest-col.rev .mk-prest-track { animation-direction: reverse; animation-duration: 56s; }
.mk-prest-wall:hover .mk-prest-track { animation-play-state: paused; }
@keyframes mkPrestUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }

.mk-pc {
    --tc: #94a3b8;
    display: block; padding: 16px; border-radius: 18px; color: var(--ink);
    background: #fff; border-top: 4px solid var(--tc);
    box-shadow: 0 10px 26px -14px rgba(0,0,0,.45); transition: transform .25s, box-shadow .25s;
}
.mk-pc:hover { transform: scale(1.03) rotate(-.5deg); box-shadow: 0 18px 36px -14px rgba(0,0,0,.55); color: var(--ink); }
.mk-pc.tk-internasional { --tc: #F5A800; }
.mk-pc.tk-nasional { --tc: #3B5997; }
.mk-pc.tk-regional, .mk-pc.tk-provinsi { --tc: #16a34a; }
.mk-pc.tk-lainnya { --tc: #7c3aed; }
.mk-pc-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; align-items: flex-start; }
.mk-pc-rank { font-size: .74rem; font-weight: 800; color: #b45309; background: #fff4e0; padding: 4px 9px; border-radius: 99px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mk-pc-tk { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tc); white-space: nowrap; padding-top: 4px; }
.mk-pc-komp { font-weight: 800; font-size: .92rem; line-height: 1.35; margin-bottom: 8px; }
.mk-pc-who { font-size: .78rem; color: #475569; line-height: 1.4; }
.mk-pc-who i { color: var(--brand); margin-right: 3px; }
.mk-pc-meta { font-size: .72rem; color: var(--muted); margin-top: 4px; }

@media (max-width: 991px) {
    .mk-prest { padding: 56px 0; }
    .mk-prest-grid { grid-template-columns: 1fr; gap: 32px; }
    .mk-prest-wall { height: 400px; }
}
@media (max-width: 575px) {
    .mk-prest-wall { grid-template-columns: 1fr; height: 360px; }
    .mk-prest-col.rev { display: none; }
    .mk-ps .n { font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mk-prest-track { animation: none; }
    .mk-prest-wall { height: auto; max-height: 520px; overflow-y: auto; }
}

/* =============================================================
   HERO v3 — judul lebih ringkas, kolom kiri & kanan sama tinggi
   ============================================================= */
.mk-hero { padding: 48px 0 52px; }
.mk-hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.mk-hero-text { display: flex; flex-direction: column; }
.mk-hero h1 { font-size: clamp(1.75rem, 3vw, 2.45rem); margin: 0 0 18px; max-width: 540px; }
.mk-hero .mk-quick { margin-top: 0; max-width: none; }
.mk-hero-search { margin-top: 14px; max-width: none; }
.mk-hero-visual { display: flex; flex-direction: column; }
.mk-hero-visual .mk-media { flex: 1; aspect-ratio: auto; min-height: 400px; }
/* Titik penanda disembunyikan saat video/YouTube aktif agar tidak menutupi judul & kontrol video */
.mk-media-item[data-type="youtube"].active ~ .mk-media-dots,
.mk-media-item[data-type="video"].active ~ .mk-media-dots { display: none; }
@media (max-width: 991px) {
    .mk-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .mk-hero-visual { order: 0; }
    .mk-hero-visual .mk-media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 575px) {
    .mk-hero { padding: 32px 0 40px; }
}
.mk-hero-text > .mk-eyebrow { align-self: flex-start; }

/* =============================================================
   AGENDA & KABAR (timeline + berita utama)
   ============================================================= */
.mk-kabar { background: linear-gradient(180deg, #fff, var(--bg-soft)); }
.mk-kabar-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.mk-kabar-head .mk-h2 { margin: 0; }
.mk-kabar-head .mk-lead { max-width: 420px; }
.mk-kabar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.mk-kabar-sub { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mk-kabar-sub h3 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.mk-kabar-sub h3 i { color: var(--brand); }

/* Timeline agenda */
.mk-tl { position: relative; display: flex; flex-direction: column; gap: 10px; }
.mk-tl::before { content: ""; position: absolute; left: 33px; top: 18px; bottom: 18px; width: 2px; background: repeating-linear-gradient(var(--brand-100) 0 6px, transparent 6px 12px); }
.mk-tl-item {
    position: relative; display: flex; gap: 14px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px 12px 12px;
    transition: transform .25s, box-shadow .25s, border-color .25s; color: var(--ink);
}
.mk-tl-item:hover { transform: translateX(6px); border-color: var(--brand); box-shadow: 0 12px 26px -16px rgba(34,54,95,.5); color: var(--ink); }
.mk-tl-date {
    position: relative; z-index: 1; flex-shrink: 0; width: 44px; height: 52px; margin-left: 0;
    border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--brand), var(--brand-700)); color: #fff; line-height: 1;
    box-shadow: 0 8px 16px -8px rgba(34,54,95,.7);
}
.mk-tl-date .d { font-size: 1.2rem; font-weight: 800; }
.mk-tl-date .m { font-size: .62rem; font-weight: 700; text-transform: uppercase; margin-top: 3px; letter-spacing: .04em; }
.mk-tl-date .y { font-size: .58rem; opacity: .8; margin-top: 3px; }
.mk-tl-item.is-tentatif .mk-tl-date { background: #fff; color: var(--brand); border: 2px dashed var(--brand-100); box-shadow: none; }
.mk-tl-item.is-tentatif .mk-tl-date .m { font-size: .78rem; margin: 0; }
.mk-tl-body { flex: 1; min-width: 0; }
.mk-tl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.mk-tl-cd { font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--brand-050); color: var(--brand); display: inline-flex; gap: 4px; align-items: center; }
.mk-tl-cd.hot { background: #fee2e2; color: #dc2626; animation: mkPulse 1.6s ease-in-out infinite; }
.mk-tl-cd.soft { background: #fff4e0; color: #b45309; }
@keyframes mkPulse { 50% { box-shadow: 0 0 0 4px rgba(220,38,38,.12); } }
.mk-tl-kat { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--bg-soft); color: var(--muted); }
.mk-tl-title { font-weight: 800; font-size: .95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-tl-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); margin-top: 4px; }
.mk-tl-meta i { color: var(--brand); }
.mk-tl-go { color: var(--muted); transition: transform .25s, color .25s; }
.mk-tl-item:hover .mk-tl-go { transform: translateX(3px); color: var(--brand); }

/* Berita utama + daftar */
.mk-news-hero { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--brand-700); }
.mk-news-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.mk-news-hero:hover img { transform: scale(1.05); }
.mk-news-hero-body {
    position: absolute; inset: auto 0 0 0; padding: 60px 22px 20px; color: #fff;
    background: linear-gradient(transparent, rgba(15,23,42,.88));
}
.mk-news-hero h4 { color: #fff; font-size: 1.2rem; line-height: 1.35; margin: 8px 0 10px; }
.mk-news-read { font-size: .82rem; font-weight: 800; color: var(--gold); display: inline-flex; gap: 6px; align-items: center; transition: gap .2s; }
.mk-news-hero:hover .mk-news-read { gap: 10px; }
.mk-news-chips { display: flex; gap: 8px; align-items: center; font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.85); }
.mk-news-chips .k { background: var(--gold); color: #1f2937; padding: 3px 10px; border-radius: 99px; font-weight: 800; }
.mk-news-chips.sm { color: var(--muted); font-size: .7rem; }
.mk-news-chips.sm .k { background: var(--brand-050); color: var(--brand); padding: 2px 8px; }
.mk-news-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mk-news-row { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 16px; color: var(--ink); transition: background .2s; }
.mk-news-row:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.mk-news-row img { width: 92px; height: 64px; object-fit: cover; border-radius: 12px; flex-shrink: 0; background: var(--bg-soft); }
.mk-news-row .t { font-weight: 700; font-size: .9rem; line-height: 1.35; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-news-row:hover .t { color: var(--brand); }

@media (max-width: 991px) { .mk-kabar-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 575px) {
    .mk-tl::before { left: 31px; }
    .mk-tl-item { padding: 10px; gap: 12px; }
    .mk-tl-item:hover { transform: none; }
    .mk-news-hero h4 { font-size: 1.02rem; }
}

/* ---------- Instagram: 5 postingan terbaru ---------- */
.mk-ig5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mk-ig5-post {
    position: relative; display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
    background: var(--bg-soft); box-shadow: 0 8px 20px -14px rgba(15,23,42,.5);
}
.mk-ig5-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mk-ig5-post:hover img { transform: scale(1.08); }
.mk-ig5-ov {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; text-align: center; color: #fff; opacity: 0; transition: opacity .3s;
    background: linear-gradient(150deg, rgba(131,58,180,.82), rgba(253,29,29,.72), rgba(252,176,69,.72));
}
.mk-ig5-ov i { font-size: 1.7rem; }
.mk-ig5-ov .c { font-size: .78rem; font-weight: 600; line-height: 1.4; }
.mk-ig5-post:hover .mk-ig5-ov, .mk-ig5-post:focus-visible .mk-ig5-ov { opacity: 1; }
.mk-ig5-empty {
    display: grid; place-items: center; color: #fff; font-size: 2rem;
    background: linear-gradient(150deg, #833ab4, #fd1d1d 55%, #fcb045);
    transition: transform .3s, filter .3s;
}
.mk-ig5-empty:nth-child(2n) { background: linear-gradient(150deg, #fd1d1d, #fcb045); }
.mk-ig5-empty:nth-child(3n) { background: linear-gradient(150deg, #5b51d8, #833ab4 50%, #e1306c); }
.mk-ig5-empty:hover { transform: translateY(-4px) rotate(-2deg); color: #fff; filter: saturate(1.2); }
@media (max-width: 991px) {
    .mk-ig5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; scrollbar-width: none; }
    .mk-ig5::-webkit-scrollbar { display: none; }
    .mk-ig5-post { flex: 0 0 32%; scroll-snap-align: start; }
}
@media (max-width: 575px) { .mk-ig5-post { flex-basis: 46%; border-radius: 14px; } }

/* =============================================================
   FOOTER v3 — fresh & youthful
   ============================================================= */
.mk-foot {
    position: relative; overflow: hidden; color: rgba(255,255,255,.78); padding: 44px 0 0;
    background:
        radial-gradient(520px 320px at 8% 10%, rgba(167,139,250,.16), transparent 60%),
        radial-gradient(600px 360px at 95% 30%, rgba(34,211,238,.12), transparent 60%),
        radial-gradient(700px 400px at 50% 110%, rgba(245,168,0,.12), transparent 60%),
        #18284a;
}
.mk-foot::before { display: none; }
.mk-foot a { color: inherit; }

/* CTA mengambang di atas footer */
.mk-foot-cta {
    position: relative; margin: 0 0 40px;
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 24px 28px; border-radius: 26px; color: #1f2937;
    background: linear-gradient(120deg, #F5A800, #ffd166 55%, #ffe8a3);
    box-shadow: 0 24px 50px -24px rgba(245,168,0,.7);
}
.mk-foot-cta-text { display: flex; gap: 16px; align-items: center; }
.mk-foot-cta .wave { font-size: 2.2rem; display: inline-block; animation: mkWave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes mkWave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.mk-foot-cta h3 { margin: 0 0 4px; font-size: 1.3rem; color: #1f2937; }
.mk-foot-cta p { margin: 0; font-size: .9rem; color: #4b3b0f; max-width: 520px; }
.mk-foot-cta-btn { display: flex; gap: 10px; flex-wrap: wrap; }
.mk-foot-cta-btn a { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .9rem; padding: 12px 18px; border-radius: 14px; transition: transform .2s, box-shadow .2s; }
.mk-foot-cta-btn .wa { background: #1f2937; color: #fff; }
.mk-foot-cta-btn .wa i { color: #4ade80; }
.mk-foot-cta-btn .mail { background: #fff; color: #1f2937; }
.mk-foot-cta-btn a:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); }
.mk-foot-cta-btn .wa:hover { color: #fff; } .mk-foot-cta-btn .mail:hover { color: #1f2937; }

.mk-foot-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 36px; }
.mk-foot-logo { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.mk-foot-logo .lg { width: 56px; height: 56px; border-radius: 18px; background: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 4px 4px 0 var(--gold); transform: rotate(-4deg); transition: transform .3s; }
.mk-foot-logo:hover .lg { transform: rotate(4deg); }
.mk-foot-logo .lg img { width: 40px; height: 40px; object-fit: contain; }
.mk-foot-logo .eb { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.mk-foot-logo .tt { display: block; font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1.2; }
.mk-foot-logo .tt b { background: linear-gradient(90deg, var(--gold), #ffd166); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-foot-brand p { font-size: .92rem; line-height: 1.7; max-width: 380px; margin: 0 0 18px; }
.mk-foot-social { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-foot-social a {
    width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 1.05rem; color: #fff;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); transition: all .25s cubic-bezier(.3,1.6,.5,1);
}
.mk-foot-social a:hover { transform: translateY(-4px) rotate(-6deg); border-color: transparent; color: #fff; }
.mk-foot-social .s-ig:hover { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.mk-foot-social .s-wa:hover { background: #25D366; }
.mk-foot-social .s-yt:hover { background: #ff0000; }
.mk-foot-social .s-fb:hover { background: #1877f2; }
.mk-foot-social .s-x:hover { background: #000; }
.mk-foot-social .s-mail:hover { background: var(--gold); color: #1f2937; }

.mk-foot-col h4 { color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 6px 0 16px; padding: 0; }
.mk-foot-col h4::after { display: none; }
.mk-foot-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-foot-links a {
    display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: rgba(255,255,255,.88);
    padding: 8px 13px 8px 9px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    transition: all .2s;
}
.mk-foot-links a i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; color: #18284a; background: var(--lc); }
.mk-foot-links a:hover { color: #fff; border-color: var(--lc); background: color-mix(in srgb, var(--lc) 16%, transparent); transform: translateY(-2px); }

/* Kantor + peta */
.mk-foot-office { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: 26px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.mk-foot-map { position: relative; min-height: 320px; background: #dbe3ef; }
.mk-foot-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mk-foot-map .sticker {
    position: absolute; left: 16px; bottom: 16px; z-index: 2; pointer-events: none;
    background: var(--gold); color: #1f2937; font-weight: 800; font-size: .82rem; padding: 8px 14px; border-radius: 99px;
    box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); transform: rotate(-3deg); display: inline-flex; gap: 6px; align-items: center;
}
.mk-foot-office-info { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.mk-foot-office .chip { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: rgba(245,168,0,.12); padding: 6px 12px; border-radius: 99px; display: inline-flex; gap: 6px; }
.mk-foot-office-info h3 { color: #fff; font-size: 1.25rem; margin: 0; line-height: 1.3; }
.mk-foot-office-info h3 span { color: var(--gold); }
.mk-foot-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .88rem; }
.mk-foot-facts li { display: flex; gap: 12px; align-items: center; }
.mk-foot-facts .ic { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: .85rem; color: var(--fc); background: color-mix(in srgb, var(--fc) 16%, transparent); }
.mk-foot-facts a:hover { color: #fff; text-decoration: underline; }
.mk-foot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.mk-foot-actions a { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .88rem; padding: 11px 18px; border-radius: 14px; transition: all .2s; }
.mk-foot-actions .go { background: var(--gold); color: #1f2937; }
.mk-foot-actions .go:hover { color: #1f2937; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(245,168,0,.8); }
.mk-foot-actions .alt { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
.mk-foot-actions .alt:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Pengunjung */
.mk-foot-visit { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 0; background: none; border: 0; }
.mk-foot-visit .lbl { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.mk-foot-visit .dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.2); animation: mkLive 1.6s ease-in-out infinite; }
.mk-foot-stats { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; flex: 1; max-width: 720px; }
.mk-foot-stats .st {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: transform .2s, border-color .2s;
}
.mk-foot-stats .st:hover { transform: translateY(-3px); border-color: var(--vc); }
.mk-foot-stats .st > i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--vc) 18%, transparent); color: var(--vc); font-size: .9rem; flex-shrink: 0; }
.mk-foot-stats .st b { display: block; color: #fff; font-size: 1.1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mk-foot-stats .st span { font-size: .72rem; color: rgba(255,255,255,.65); }

/* Wordmark besar */
.mk-foot-word {
    margin-top: 34px; text-align: center; white-space: nowrap; overflow: hidden; line-height: .85; user-select: none;
    font-weight: 800; letter-spacing: -.04em; font-size: clamp(1.5rem, 7.2vw, 6.4rem);
    color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 80%); -webkit-background-clip: text; background-clip: text;
}
.mk-foot-bottom { margin-top: 36px; border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0; font-size: .8rem; }
.mk-foot-bottom .mk-container { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mk-foot-bottom i { color: #f87171; }

@media (max-width: 991px) {
    .mk-foot-top { grid-template-columns: 1fr 1fr; }
    .mk-foot-brand { grid-column: 1 / -1; }
    .mk-foot-office { grid-template-columns: 1fr; }
    .mk-foot-map { min-height: 240px; }
    .mk-foot-stats { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
@media (max-width: 575px) {
    .mk-foot-cta { padding: 20px; margin-bottom: 30px; }
    .mk-foot-cta-text { align-items: flex-start; }
    .mk-foot-cta-btn, .mk-foot-cta-btn a { width: 100%; justify-content: center; }
    .mk-foot-top { grid-template-columns: 1fr; gap: 28px; }
    .mk-foot-office-info { padding: 20px; }
    .mk-foot-visit { flex-direction: column; align-items: stretch; }
    .mk-foot-bottom .mk-container { flex-direction: column; text-align: center; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .mk-foot-cta .wave { animation: none; } }
@keyframes mkLive { 50% { box-shadow: 0 0 0 7px rgba(239,68,68,.05); } }

/* ---------- CTA + foto tim (polaroid) ---------- */
.mk-cta-team {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; text-align: left;
    padding: 48px 52px; overflow: visible;
    background: radial-gradient(500px 300px at 100% 100%, rgba(245,168,0,.28), transparent 60%), linear-gradient(135deg, var(--brand), var(--brand-700));
}
.mk-cta-team p { margin: 0 0 26px; max-width: 520px; }
.mk-cta-eyebrow { display: inline-flex; gap: 7px; align-items: center; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); background: rgba(245,168,0,.14); padding: 6px 13px; border-radius: 99px; margin-bottom: 14px; }
.mk-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.mk-cta-photo { position: relative; display: flex; justify-content: center; margin: -86px 0 -86px; }
.mk-polaroid {
    margin: 0; background: #fff; padding: 12px 12px 14px; border-radius: 14px; width: min(340px, 100%);
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); transform: rotate(3deg); transition: transform .4s cubic-bezier(.3,1.4,.5,1);
}
.mk-cta-team:hover .mk-polaroid { transform: rotate(-1deg) scale(1.02); }
.mk-polaroid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: #eef2fb; }
.mk-polaroid figcaption { color: #1f2937; font-weight: 800; font-size: .92rem; text-align: center; padding-top: 10px; }
.mk-cta-sticker { position: absolute; z-index: 2; font-weight: 800; font-size: .85rem; padding: 8px 14px; border-radius: 99px; box-shadow: 0 10px 22px -10px rgba(0,0,0,.5); display: inline-flex; gap: 6px; align-items: center; }
.mk-cta-sticker.s1 { top: 4%; left: 2%; background: var(--gold); color: #1f2937; transform: rotate(-10deg); }
.mk-cta-sticker.s2 { bottom: 8%; right: 0; background: #fff; color: var(--brand); transform: rotate(6deg); }
.mk-cta-sticker.s2 i { color: var(--gold); }
@media (max-width: 991px) {
    .mk-cta-team { grid-template-columns: 1fr; text-align: center; padding: 40px 28px 48px; }
    .mk-cta-team p { margin-left: auto; margin-right: auto; }
    .mk-cta-btns { justify-content: center; }
    .mk-cta-photo { margin: 6px 0 0; order: -1; }
    .mk-polaroid { width: min(280px, 82%); }
}
@media (prefers-reduced-motion: reduce) { .mk-cta-team:hover .mk-polaroid { transform: rotate(3deg); } }

/* =============================================================
   FOOTER v3.1 — lebih sederhana & kalem (nuansa kampus)
   Satu aksen warna (emas UNTAN) di atas navy; tanpa warna-warni.
   ============================================================= */
.mk-foot { background: linear-gradient(180deg, #1c2d52, #182747); }

/* Ajakan kontak: kartu transparan, aksen emas secukupnya */
.mk-foot-cta { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); box-shadow: none; color: #fff; padding: 22px 26px; }
.mk-foot-cta h3 { color: #fff; font-size: 1.15rem; }
.mk-foot-cta p { color: rgba(255,255,255,.7); }
.mk-foot-cta .cta-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: rgba(245,168,0,.14); color: var(--gold); font-size: 1.3rem; }
.mk-foot-cta-btn .wa { background: var(--gold); color: #1f2937; }
.mk-foot-cta-btn .wa i { color: #1f2937; }
.mk-foot-cta-btn .wa:hover { color: #1f2937; }
.mk-foot-cta-btn .mail { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); }
.mk-foot-cta-btn .mail:hover { color: #fff; background: rgba(255,255,255,.08); }
.mk-foot-cta-btn a:hover { transform: translateY(-2px); box-shadow: none; }

/* Logo tanpa kemiringan */
.mk-foot-logo .lg { transform: none; box-shadow: 0 0 0 3px rgba(245,168,0,.35); border-radius: 14px; }
.mk-foot-logo:hover .lg { transform: none; }
.mk-foot-logo .tt b { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--gold); }

/* Sosial: monokrom, hover emas */
.mk-foot-social a { border-radius: 12px; width: 40px; height: 40px; font-size: 1rem; }
.mk-foot-social a:hover,
.mk-foot-social .s-ig:hover, .mk-foot-social .s-wa:hover, .mk-foot-social .s-yt:hover,
.mk-foot-social .s-fb:hover, .mk-foot-social .s-x:hover, .mk-foot-social .s-mail:hover {
    background: var(--gold); color: #1f2937; transform: translateY(-2px);
}

/* Tautan: daftar teks sederhana */
.mk-foot-col h4 { font-size: .95rem; letter-spacing: 0; text-transform: none; margin-bottom: 14px; }
.mk-foot-links { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.mk-foot-links a { padding: 0; border: 0; background: none; border-radius: 0; font-size: .92rem; font-weight: 500; color: rgba(255,255,255,.72); gap: 0; }
.mk-foot-links a i { display: none; }
.mk-foot-links a:hover { background: none; border: 0; color: var(--gold); transform: translateX(3px); }

/* Kantor: ikon satu warna */
.mk-foot-office { background: rgba(255,255,255,.035); }
.mk-foot-office .chip { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); }
.mk-foot-office-info h3 { font-size: 1.12rem; }
.mk-foot-facts .ic { color: var(--gold); background: rgba(245,168,0,.12); }
.mk-foot-actions .alt { background: transparent; }

/* Pengunjung: satu warna aksen */
.mk-foot-stats .st { background: rgba(255,255,255,.035); }
.mk-foot-stats .st > i { color: var(--gold); background: rgba(245,168,0,.12); }
.mk-foot-stats .st:hover { border-color: rgba(245,168,0,.5); }
.mk-foot-bottom i { color: inherit; }

/* ===== INSTAGRAM — embed resmi dari URL postingan (admin) ===== */
.mk-igx-wrap { position: relative; }
.mk-igx { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: thin; align-items: flex-start; }
.mk-igx-item { flex: 0 0 min(340px, 100%); scroll-snap-align: start; min-width: 0; }
.mk-igx-item iframe { border-radius: 16px !important; box-shadow: 0 6px 22px rgba(34,54,95,.08) !important; }
.mk-igx-fallback { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 380px; border-radius: 16px; background: #fff; border: 1px solid #e6ebf3; color: #3B5997; font-weight: 700; }
.mk-igx-nav { position: absolute; top: 180px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #e6ebf3; background: #fff; color: #22365f; box-shadow: 0 6px 18px rgba(34,54,95,.15); display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background .2s, color .2s; }
.mk-igx-nav:hover { background: #22365f; color: #fff; }
.mk-igx-nav.prev { left: -14px; }
.mk-igx-nav.next { right: -14px; }
@media (max-width: 767px) { .mk-igx-nav { display: none; } }

/* ===== FOOTER — kartu pengunjung website (ganti kolom link) ===== */
.mk-foot-top { grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start; }
.mk-foot-pv .pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.mk-foot-pv h4 { color: #fff; font-size: .95rem; font-weight: 800; margin: 0; }
.pv-live { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #F5A800; background: rgba(245,168,0,.1); border: 1px solid rgba(245,168,0,.25); padding: 4px 10px; border-radius: 999px; }
.pv-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #F5A800; box-shadow: 0 0 0 0 rgba(245,168,0,.6); animation: pvPulse 1.8s infinite; }
@keyframes pvPulse { 70% { box-shadow: 0 0 0 8px rgba(245,168,0,0); } 100% { box-shadow: 0 0 0 0 rgba(245,168,0,0); } }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pv-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); overflow: hidden; transition: transform .25s, background .25s, border-color .25s; }
.pv-card::after { content: ""; position: absolute; right: -26px; top: -26px; width: 80px; height: 80px; border-radius: 50%; background: var(--pv-glow); opacity: .14; transition: opacity .25s; }
.pv-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.pv-card:hover::after { opacity: .24; }
.pv-g { --pv-glow: #F5A800; }
.pv-b { --pv-glow: #8fb0ff; }
.pv-ic { flex: 0 0 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; }
.pv-g .pv-ic { background: linear-gradient(140deg, #ffc940, #F5A800); color: #22365f; box-shadow: 0 8px 18px rgba(245,168,0,.25); }
.pv-b .pv-ic { background: linear-gradient(140deg, #5b7cc4, #3B5997); color: #fff; box-shadow: 0 8px 18px rgba(59,89,151,.35); }
.pv-txt { min-width: 0; }
.pv-txt b { display: block; color: #fff; font-size: 1.45rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pv-txt span { display: block; font-size: .8rem; color: rgba(255,255,255,.62); margin-top: 3px; }
@media (max-width: 991px) { .mk-foot-top { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 400px) { .pv-card { padding: 12px; gap: 10px; } .pv-ic { flex-basis: 38px; height: 38px; border-radius: 12px; font-size: 1rem; } .pv-txt b { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .pv-live .dot { animation: none; } }

/* ===== LOMBA NASIONAL (Belmawa) — direktori ajang talenta ===== */
.lb-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 22px; }
.lb-filter button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid #dfe5f0; background: #fff; color: #33415c; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.lb-filter button b { font-size: .72rem; font-weight: 800; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #eef2fb; color: #3B5997; }
.lb-filter button:hover { border-color: #3B5997; transform: translateY(-1px); }
.lb-filter button.on { background: #22365f; border-color: #22365f; color: #fff; }
.lb-filter button.on b { background: #F5A800; color: #22365f; }
.lb-filter button i { font-size: .95rem; }

.lb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lb-card { position: relative; display: flex; flex-direction: column; padding: 18px 18px 16px; border-radius: 20px; background: #fff; border: 1px solid #e6ebf3; color: inherit; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; animation: lbIn .35s ease both; }
.lb-card[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lb-card:hover, .lb-card:focus-visible { transform: translateY(-4px); border-color: #c9d4ea; box-shadow: 0 14px 30px rgba(34,54,95,.10); color: inherit; }
.lb-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.lb-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 1.35rem; background: #eef2fb; color: #3B5997; transition: background .25s, color .25s, transform .25s; }
.lb-card:hover .lb-ic { background: linear-gradient(140deg, #ffc940, #F5A800); color: #22365f; transform: rotate(-6deg); }
.lb-go { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; color: #94a3b8; border: 1px solid #e6ebf3; transition: all .25s; }
.lb-card:hover .lb-go { background: #22365f; border-color: #22365f; color: #fff; transform: rotate(45deg); }
.lb-card h3 { margin: 0; font-size: 1.12rem; font-weight: 800; color: #1b2a4a; letter-spacing: -.01em; }
.lb-nm { margin: 3px 0 0; font-size: .8rem; font-weight: 600; color: #3B5997; line-height: 1.35; }
.lb-ds { margin: 8px 0 0; font-size: .82rem; color: #64748b; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
.lb-tag { font-size: .7rem; font-weight: 700; color: #64748b; background: #f3f5f9; padding: 4px 9px; border-radius: 999px; }
.lb-when { font-size: .74rem; font-weight: 700; color: #b4690e; display: inline-flex; align-items: center; gap: 5px; }

.lb-strip { margin-top: 26px; display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; background: linear-gradient(120deg, #22365f, #2f4a85); color: #fff; flex-wrap: wrap; }
.lb-strip-ic { flex: 0 0 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(245,168,0,.16); color: #F5A800; font-size: 1.2rem; }
.lb-strip-tx { flex: 1 1 320px; min-width: 0; }
.lb-strip-tx b { display: block; font-size: 1rem; }
.lb-strip-tx span { font-size: .85rem; color: rgba(255,255,255,.75); }
.lb-strip-btn { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 1199px) { .lb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .lb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
    .lb-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
    .lb-filter::-webkit-scrollbar { display: none; }
    .lb-filter button { flex: 0 0 auto; }
}
@media (max-width: 559px) {
    .lb-grid { grid-template-columns: 1fr; gap: 10px; }
    .lb-card { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; padding: 14px; }
    .lb-top { grid-row: span 4; margin: 0; }
    .lb-ic { width: 46px; height: 46px; font-size: 1.2rem; }
    .lb-go { display: none; }
    .lb-ds { display: none; }
    .lb-meta { padding-top: 8px; }
    .lb-strip-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lb-card { animation: none; } }
@media (max-width: 559px) {
    .lb-strip { padding: 16px; gap: 12px; }
    .lb-strip-tx { flex-basis: calc(100% - 62px); }
    .lb-strip-btn .mk-btn { flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
}

/* ===== AGENDA & PENGUMUMAN PENTING (beranda) ===== */
.agx-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: start; }
.agx-feat { background: #fff; border: 1px solid #e6ebf3; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(34,54,95,.06); }
.agx-poster { position: relative; aspect-ratio: 16 / 9; background: #22365f; overflow: hidden; }
.agx-poster.has-img { background: #eef2fb; }
.agx-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s; }
.agx-feat:hover .agx-poster img { transform: scale(1.04); }
.agx-poster-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 24px; color: #fff;
    background: radial-gradient(420px 220px at 90% 10%, rgba(245,168,0,.28), transparent 60%), linear-gradient(135deg, #22365f, #3B5997); }
.agx-poster-ph .d { font-size: 3.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.agx-poster-ph .m { font-size: 1rem; font-weight: 700; color: #F5A800; margin-top: 4px; }
.agx-poster-ph .big { position: absolute; right: 22px; top: 50%; transform: translateY(-50%) rotate(-10deg); font-size: 6.5rem; color: rgba(255,255,255,.1); }
.agx-ribbon { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #F5A800; color: #22365f; font-size: .75rem; font-weight: 800; box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.agx-feat-body { padding: 20px 22px 22px; }
.agx-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.agx-chips span { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.agx-chips.sm { margin-bottom: 6px; }
.agx-chips.sm span { font-size: .68rem; padding: 3px 8px; }
.agx-jenis { background: #eef2fb; color: #3B5997; }
.agx-jenis.pengumuman { background: #fff4d6; color: #a15c00; }
.agx-cd { background: #f1f5f9; color: #33415c; }
.agx-cd.hot { background: #22365f; color: #fff; }
.agx-kat { background: #f6f7fa; color: #64748b; }
.agx-feat h3 { font-size: 1.35rem; font-weight: 800; line-height: 1.3; margin: 0 0 12px; letter-spacing: -.01em; }
.agx-feat h3 a { color: #1b2a4a; }
.agx-feat h3 a:hover { color: #3B5997; }
.agx-facts { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.agx-facts li { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: #475569; }
.agx-facts i { color: #3B5997; margin-top: 2px; }
.agx-desc { font-size: .88rem; color: #64748b; line-height: 1.6; margin: 0 0 14px; }
.agx-deadline { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: #a15c00; background: #fff8e6; border: 1px dashed #f3c766; padding: 7px 12px; border-radius: 12px; margin-bottom: 14px; }
.agx-deadline.tutup, .agx-mini .dl.tutup { color: #64748b; background: #f3f5f9; border-color: #dfe5f0; }
.agx-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.agx-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 13px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.agx-btn:hover { transform: translateY(-2px); }
.agx-btn.gold { background: #F5A800; color: #22365f; box-shadow: 0 8px 18px rgba(245,168,0,.28); }
.agx-btn.gold:hover { color: #22365f; box-shadow: 0 10px 22px rgba(245,168,0,.38); }
.agx-btn.navy { background: #22365f; color: #fff; }
.agx-btn.navy:hover { color: #fff; background: #2f4a85; }
.agx-btn.line { background: #fff; color: #22365f; border-color: #d5deee; }
.agx-btn.line:hover { border-color: #22365f; color: #22365f; }

.agx-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #eef2fb; border-radius: 14px; margin-bottom: 12px; }
.agx-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #475569; font: inherit; font-size: .84rem; font-weight: 700; padding: 8px 14px; border-radius: 10px; cursor: pointer; transition: background .2s, color .2s; }
.agx-tabs button b { font-size: .68rem; background: #F5A800; color: #22365f; padding: 1px 7px; border-radius: 999px; }
.agx-tabs button.on { background: #fff; color: #22365f; box-shadow: 0 2px 8px rgba(34,54,95,.1); }
.agx-list { display: grid; gap: 10px; }
.agx-item { display: flex; gap: 14px; padding: 14px; background: #fff; border: 1px solid #e6ebf3; border-radius: 18px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.agx-item[hidden] { display: none; }
.agx-item:hover { border-color: #c9d4ea; box-shadow: 0 10px 24px rgba(34,54,95,.08); transform: translateY(-2px); }
.agx-date { flex: 0 0 56px; height: 60px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, #3B5997, #22365f); color: #fff; line-height: 1.05; }
.agx-date .d { font-size: 1.35rem; font-weight: 800; }
.agx-date .m { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #ffd36b; }
.agx-date .y { font-size: .66rem; font-weight: 700; opacity: .8; }
.agx-date.soft { background: #fff; color: #3B5997; border: 1.5px dashed #b9c6e2; }
.agx-date.soft .m { color: #3B5997; font-size: .8rem; }
.agx-date.pengumuman:not(.soft) { background: linear-gradient(160deg, #ffc940, #F5A800); color: #22365f; }
.agx-date.pengumuman:not(.soft) .m { color: #22365f; }
.agx-item-body { min-width: 0; flex: 1; }
.agx-title { display: block; font-weight: 800; font-size: .95rem; line-height: 1.35; color: #1b2a4a; }
.agx-title:hover { color: #3B5997; }
.agx-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: #64748b; margin-top: 4px; }
.agx-meta i { color: #3B5997; }
.agx-mini { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.agx-mini a, .agx-mini button { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 9px; border: 1px solid #dfe5f0; background: #fff; color: #33415c; cursor: pointer; transition: all .2s; }
.agx-mini a:hover, .agx-mini button:hover { border-color: #22365f; color: #22365f; }
.agx-mini .go { background: #F5A800; border-color: #F5A800; color: #22365f; }
.agx-mini .go:hover { background: #ffb61a; color: #22365f; border-color: #ffb61a; }
.agx-mini .dl { font-size: .7rem; font-weight: 700; color: #a15c00; background: #fff8e6; padding: 4px 8px; border-radius: 8px; }
.agx-none { text-align: center; color: #94a3b8; font-size: .88rem; padding: 26px 10px; border: 1px dashed #dfe5f0; border-radius: 18px; }
.agx-none[hidden] { display: none; }

.agx-lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 720px); max-height: 92vh; overflow: visible; }
.agx-lightbox::backdrop { background: rgba(15,23,42,.78); backdrop-filter: blur(3px); }
.agx-lightbox img { display: block; max-width: 100%; max-height: 82vh; border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.agx-lightbox .x { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #22365f; font-size: 1rem; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.agx-lightbox .dl { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; color: #fff; font-size: .85rem; font-weight: 700; }

@media (max-width: 991px) { .agx-grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
    .agx-feat-body { padding: 16px; }
    .agx-feat h3 { font-size: 1.15rem; }
    .agx-acts .agx-btn { flex: 1 1 auto; justify-content: center; }
    .agx-tabs { display: flex; width: 100%; }
    .agx-tabs button { flex: 1; justify-content: center; padding: 8px 6px; font-size: .78rem; }
    .agx-item { padding: 12px; gap: 12px; }
    .agx-date { flex-basis: 50px; height: 56px; }
    .agx-lightbox .x { top: 6px; right: 6px; }
}

/* ===== LOMBA NASIONAL v2 — ringkas, logo resmi, tidak panjang ===== */
.mk-lomba .lb-filter { margin: -8px 0 18px; gap: 6px; }
.mk-lomba .lb-filter button { padding: 7px 13px; font-size: .8rem; }
.lbx-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.lbx { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid #e6ebf3; color: inherit; text-decoration: none; transition: transform .22s, box-shadow .22s, border-color .22s; animation: lbIn .3s ease both; }
.lbx[hidden] { display: none; }
.lbx:hover, .lbx:focus-visible { transform: translateY(-3px); border-color: #F5A800; box-shadow: 0 12px 26px rgba(34,54,95,.10); color: inherit; }
.lbx-logo { width: 100%; height: 64px; border-radius: 13px; display: grid; place-items: center; background: #eef2fb; color: #3B5997; font-size: 1.6rem; transition: background .22s, color .22s; }
.lbx-logo.img { background: #f8fafc; }
.lbx-logo img { max-width: 86%; max-height: 54px; object-fit: contain; transition: transform .3s; }
.lbx:hover .lbx-logo:not(.img) { background: linear-gradient(140deg, #ffc940, #F5A800); color: #22365f; }
.lbx:hover .lbx-logo img { transform: scale(1.06); }
.lbx-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.lbx-tx b { font-size: .95rem; font-weight: 800; color: #1b2a4a; letter-spacing: -.01em; line-height: 1.2; }
.lbx-tx small { font-size: .74rem; color: #64748b; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lbx-tx em { font-style: normal; font-size: .68rem; font-weight: 700; color: #a15c00; margin-top: 4px; display: inline-flex; gap: 4px; align-items: center; }
.lbx-go { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; background: #fff; color: #94a3b8; border: 1px solid #e6ebf3; opacity: 0; transition: opacity .2s, background .2s, color .2s; }
.lbx:hover .lbx-go { opacity: 1; background: #22365f; color: #fff; border-color: #22365f; }
.mk-lomba .lb-strip { margin-top: 18px; padding: 14px 18px; }

@media (max-width: 1199px) { .lbx-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 991px) { .lbx-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) {
    /* Ponsel: 2 baris yang digeser ke samping, jadi section tetap pendek */
    .lbx-grid { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 8px; }
    .lbx-grid::-webkit-scrollbar { display: none; }
    .lbx { scroll-snap-align: start; }
    .lbx-go { display: none; }
}
@media (max-width: 420px) { .lbx-grid { grid-auto-columns: 46%; } .lbx-logo { height: 56px; } }

/* Lomba v2.1 — kartu horizontal (logo kiri) agar section lebih pendek */
.lbx-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lbx { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; }
.lbx-logo { flex: 0 0 64px; width: 64px; height: 56px; border-radius: 12px; font-size: 1.4rem; }
.lbx-logo img { max-width: 88%; max-height: 46px; }
.lbx-tx b { font-size: .9rem; }
.lbx-tx small { font-size: .72rem; -webkit-line-clamp: 1; }
.lbx-tx em { margin-top: 2px; font-size: .66rem; }
.lbx-go { top: 50%; right: 10px; transform: translateY(-50%); }
.lbx:hover .lbx-tx { padding-right: 22px; }
@media (max-width: 1199px) { .lbx-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) {
    .lbx-grid { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: minmax(250px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 8px; }
    .lbx-grid::-webkit-scrollbar { display: none; }
    .lbx { scroll-snap-align: start; }
    .lbx-go { display: none; }
}
@media (max-width: 575px) { .lbx-grid { grid-auto-columns: 82%; } .lbx-logo { height: 52px; } }

/* Lomba v2.2 — header & strip lebih ringkas */
.mk-lomba .mk-head-row { margin-bottom: 22px; }
.mk-lomba .lb-strip-ic { flex-basis: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
.mk-lomba .lb-strip-tx span { font-size: .8rem; }
.mk-lomba .lb-strip .mk-btn { padding: 9px 16px; font-size: .85rem; }
@media (max-width: 575px) {
    .mk-lomba .mk-head-row > .mk-btn { display: none; }
    .mk-lomba .lb-strip { gap: 10px; padding: 14px; }
    .mk-lomba .lb-strip-tx { flex-basis: calc(100% - 52px); }
    .mk-lomba .lb-strip-tx span { display: none; }
}

/* Etalase prestasi: foto kecil dari berita sumber */
.mk-pc-row { display: flex; gap: 12px; align-items: flex-start; }
.mk-pc-foto { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: #eef2fb; box-shadow: 0 4px 12px rgba(34,54,95,.15); margin-top: 2px; }
.mk-pc-tx { min-width: 0; flex: 1; }
@media (max-width: 575px) { .mk-pc-foto { flex-basis: 56px; width: 56px; height: 56px; border-radius: 12px; } }

/* Agenda v2 — kolom kiri & kanan seimbang (tinggi sama) */
.agx-grid { align-items: stretch; grid-template-columns: 1fr 1fr; }
.agx-feat { display: flex; flex-direction: column; }
.agx-poster { aspect-ratio: auto; flex: 0 0 240px; height: 240px; }
.agx-poster.has-img { background: #22365f; }
.agx-poster.has-img img { object-fit: cover; object-position: center 30%; }
.agx-feat-body { flex: 1; display: flex; flex-direction: column; }
.agx-feat-body .agx-acts { margin-top: auto; }
.agx-feat h3 { font-size: 1.25rem; }
.agx-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agx-side { display: flex; flex-direction: column; }
.agx-list { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.agx-item { flex: 1; align-items: center; }
.agx-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agx-mini { margin-top: 8px; }
.agx-contoh { background: #fdecef; color: #be123c; }
.agx-chips span.agx-contoh { font-weight: 800; letter-spacing: .02em; }
@media (max-width: 991px) { .agx-poster { flex-basis: 200px; height: 200px; } .agx-item { flex: none; } }

.agx-poster.has-img .bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(18px) saturate(1.2) brightness(.75); transform: none !important; }
.agx-poster .fg { position: absolute; top: 18px; bottom: 18px; right: 24px; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 28px rgba(0,0,0,.35); transform: rotate(2deg); transition: transform .3s; }
.agx-poster .fg img { height: 100%; width: auto; display: block; object-fit: contain; }
.agx-poster .fg span { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); color: #22365f; display: grid; place-items: center; font-size: .85rem; }
.agx-feat:hover .agx-poster .fg { transform: rotate(0) scale(1.03); }
.agx-feat:hover .agx-poster img.bg { transform: none; }
.agx-poster .fg { aspect-ratio: 4 / 5; }
.agx-poster .fg img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) { .agx-grid { grid-template-columns: 1fr; } .agx-item { flex: none; } }
@media (max-width: 575px) { .agx-poster .fg { right: 16px; top: 14px; bottom: 14px; } .agx-mini { gap: 5px; } }
@media (max-width: 575px) { .agx-chips.sm .agx-kat, .agx-meta span:nth-child(2), .agx-mini .dl { display: none; } .agx-title { font-size: .9rem; } .agx-mini { margin-top: 6px; } }

/* ===== LAYANAN v2 — berdasar kebutuhan mahasiswa & masyarakat (navy + emas, kalem) ===== */
.lyn .mk-head-row { margin-bottom: 24px; }
.lyn-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto auto; gap: 14px; }
.lyn-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #e6ebf3; color: inherit; text-decoration: none; transition: transform .22s, box-shadow .22s, border-color .22s; overflow: hidden; }
.lyn-card:hover, .lyn-mini:hover { transform: translateY(-3px); border-color: #c9d4ea; box-shadow: 0 14px 30px rgba(34,54,95,.09); color: inherit; }
.lyn-card h3 { font-size: 1.02rem; font-weight: 800; margin: 6px 0 0; color: #1b2a4a; line-height: 1.3; }
.lyn-card p { font-size: .82rem; color: #64748b; margin: 0; line-height: 1.5; }
.lyn-top { display: flex; justify-content: space-between; align-items: center; }
.lyn-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; background: #eef2fb; color: #3B5997; flex-shrink: 0; transition: background .22s, color .22s, transform .22s; }
.lyn-ic.sm { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
.lyn-card:hover .lyn-ic, .lyn-mini:hover .lyn-ic { background: linear-gradient(140deg, #ffc940, #F5A800); color: #22365f; transform: rotate(-6deg); }
.lyn-num { font-size: 1.6rem; font-weight: 800; color: #22365f; letter-spacing: -.02em; }
.lyn-num small { font-size: 1rem; color: #F5A800; }
.lyn-ext { color: #94a3b8; font-size: .85rem; }

.lyn-hero { grid-row: span 2; justify-content: flex-end; padding: 26px; color: #fff; border: 0;
    background: radial-gradient(420px 260px at 85% 0%, rgba(245,168,0,.22), transparent 60%), linear-gradient(150deg, #22365f, #3B5997); }
.lyn-hero:hover { color: #fff; box-shadow: 0 18px 36px rgba(34,54,95,.28); }
.lyn-hero .lyn-ic { position: absolute; top: 24px; left: 24px; width: 56px; height: 56px; font-size: 1.5rem; background: #F5A800; color: #22365f; }
.lyn-hero h3 { color: #fff; font-size: 1.7rem; margin: 10px 0 8px; letter-spacing: -.01em; }
.lyn-hero p { color: rgba(255,255,255,.8); font-size: .92rem; max-width: 440px; }
.lyn-body { position: relative; z-index: 1; margin-top: 80px; }
.lyn-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.14); }
.lyn-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.lyn-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 18px; border-radius: 13px; background: #F5A800; color: #22365f; font-weight: 800; font-size: .9rem; transition: gap .2s; }
.lyn-hero:hover .lyn-cta { gap: 12px; }
.lyn-deco { position: absolute; right: -10px; bottom: -30px; font-size: 11rem; color: rgba(255,255,255,.06); transform: rotate(-12deg); }

.lyn-mini { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #e6ebf3; color: inherit; text-decoration: none; transition: transform .22s, box-shadow .22s, border-color .22s; }
.lyn-mini b { display: block; font-size: .9rem; color: #1b2a4a; }
.lyn-mini small { display: block; font-size: .74rem; color: #64748b; }
.lyn-sos .lyn-ic { background: #fdecef; color: #be123c; }
.lyn-sos:hover { border-color: #fbc4cf; }

.lyn-public { margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 18px; background: #f3f6fc; border: 1px dashed #c9d4ea; }
.lyn-public-lbl { font-size: .82rem; font-weight: 800; color: #22365f; display: inline-flex; gap: 7px; align-items: center; }
.lyn-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lyn-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #e0e7f3; color: #33415c; font-size: .8rem; font-weight: 700; transition: all .2s; }
.lyn-chips a:hover { background: #22365f; border-color: #22365f; color: #fff; }
.lyn-chips a:first-child { background: #22365f; color: #fff; border-color: #22365f; }
.lyn-chips a:first-child:hover { background: #F5A800; color: #22365f; border-color: #F5A800; }

.lyn-minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 991px) {
    .lyn-grid { grid-template-columns: 1fr 1fr; }
    .lyn-hero { grid-column: 1 / -1; grid-row: auto; min-height: 300px; }
    .lyn-minis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .lyn-grid, .lyn-minis { gap: 10px; }
    .lyn-card { padding: 14px; }
    .lyn-card p { display: none; }
    .lyn-card h3 { font-size: .92rem; }
    .lyn-num { font-size: 1.25rem; }
    .lyn-ic { width: 40px; height: 40px; font-size: 1.05rem; }
    .lyn-hero { min-height: 0; padding: 20px; }
    .lyn-hero h3 { font-size: 1.35rem; }
    .lyn-body { margin-top: 64px; }
    .lyn-mini { padding: 10px; gap: 10px; }
    .lyn-mini small { display: none; }
    .lyn-public { padding: 12px; }
    .lyn-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
    .lyn-chips a { flex: 0 0 auto; }
}

/* ===== SHARE BAR ===== */
.shr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 22px; }
.shr-lbl { font-size: .8rem; font-weight: 800; color: #475569; margin-right: 4px; display: inline-flex; gap: 6px; align-items: center; }
.shr-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 10px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; color: #33415c; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.shr-b i { font-size: 1rem; }
.shr-b:hover { transform: translateY(-2px); color: #fff; }
.shr-b.wa:hover { background: #25d366; border-color: #25d366; }
.shr-b.fb:hover { background: #1877f2; border-color: #1877f2; }
.shr-b.x:hover { background: #0f172a; border-color: #0f172a; }
.shr-b.tg:hover { background: #229ed9; border-color: #229ed9; }
.shr-b.in:hover { background: #0a66c2; border-color: #0a66c2; }
.shr-b.cp:hover, .shr-b.nt:hover { background: #22365f; border-color: #22365f; }
.shr-b.cp.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.shr-b[hidden] { display: none; }

/* ===== HERO halaman prestasi (rekam jejak & kabar) ===== */
.rk-hero, .kb-hero { position: relative; overflow: hidden; color: #fff; padding: 120px 0 56px;
    background: radial-gradient(520px 300px at 88% 10%, rgba(245,168,0,.22), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(91,124,196,.35), transparent 60%), linear-gradient(150deg, #1c2d52, #2c4680); }
.mk-breadcrumb.light, .mk-breadcrumb.light a { color: rgba(255,255,255,.7); }
.mk-breadcrumb.light span:last-child { color: #fff; }
.rk-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #F5A800; background: rgba(245,168,0,.12); border: 1px solid rgba(245,168,0,.3); padding: 6px 12px; border-radius: 999px; }
.rk-hero h1, .kb-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 16px 0 12px; color: #fff; }
.rk-hero h1 span, .kb-hero h1 span { color: #F5A800; }
.rk-hero p, .kb-hero p { color: rgba(255,255,255,.78); max-width: 560px; margin: 0; }
.rk-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: end; margin-top: 18px; }
.rk-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.rk-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); }
.rk-badge.warn { background: #F5A800; color: #22365f; }
.rk-big { justify-self: end; text-align: right; padding: 22px 26px; border-radius: 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.rk-big .n { display: block; font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rk-big .l { display: block; color: rgba(255,255,255,.75); font-weight: 600; margin-top: 4px; }
.rk-big .g { display: inline-flex; gap: 5px; align-items: center; margin-top: 12px; font-size: .8rem; font-weight: 800; color: #4ade80; background: rgba(74,222,128,.12); padding: 5px 10px; border-radius: 999px; }
.rk-big .g.down { color: #fca5a5; background: rgba(252,165,165,.12); }

.rk-body { padding-top: 0; margin-top: -26px; position: relative; }
.rk-kpi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.rk-kpi .k { background: #fff; border: 1px solid #e6ebf3; border-radius: 20px; padding: 18px; box-shadow: 0 10px 26px rgba(34,54,95,.07); display: grid; grid-template-columns: 46px 1fr; column-gap: 12px; align-items: center; }
.rk-kpi .ic { grid-row: span 2; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #eef2fb; color: #3B5997; font-size: 1.2rem; }
.rk-kpi .ic.gold { background: linear-gradient(140deg, #ffc940, #F5A800); color: #22365f; }
.rk-kpi b { font-size: 1.7rem; font-weight: 800; color: #1b2a4a; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rk-kpi small { color: #64748b; font-size: .8rem; font-weight: 600; }
.rk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rk-card { background: #fff; border: 1px solid #e6ebf3; border-radius: 22px; padding: 18px 18px 14px; }
.rk-card.wide { grid-column: 1 / -1; }
.rk-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.rk-card-h h3 { font-size: .98rem; font-weight: 800; margin: 0; color: #1b2a4a; display: inline-flex; gap: 8px; align-items: center; }
.rk-card-h h3 i { color: #3B5997; }
.rk-card-h span { font-size: .76rem; color: #94a3b8; font-weight: 600; }
.rk-chart { position: relative; height: 260px; }
.rk-chart.tall { height: 300px; }
.rk-top { margin-top: 14px; }
.rk-top ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 8px 18px; }
.rk-top li { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px dashed #e6ebf3; }
.rk-top .no { flex: 0 0 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: #eef2fb; color: #3B5997; }
.rk-top li:nth-child(-n+3) .no { background: #F5A800; color: #22365f; }
.rk-top .tx { flex: 1; min-width: 0; }
.rk-top .tx b { display: block; font-size: .86rem; color: #1b2a4a; line-height: 1.35; }
.rk-top .tx small { font-size: .72rem; color: #94a3b8; }
.rk-top .tk { font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #eef2fb; color: #3B5997; white-space: nowrap; }
.rk-top .tk-internasional { background: #fff4d6; color: #a15c00; }
.rk-top .n { font-weight: 800; color: #22365f; font-size: .9rem; }
.rk-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.rk-cta .shr { margin: 0 0 0 auto; }

/* ===== KABAR PRESTASI ===== */
.kb-hero-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: end; margin-top: 18px; }
.kb-hero-stats { justify-self: end; display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.kb-hero-stats > div { padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.kb-hero-stats b { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1; }
.kb-hero-stats span { font-size: .78rem; color: rgba(255,255,255,.75); }
.kb-hero-link { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 16px; background: #F5A800; color: #22365f; font-weight: 800; font-size: .88rem; }
.kb-hero-link:hover { color: #22365f; background: #ffbb1f; }
.kb-body { padding-top: 0; margin-top: -26px; position: relative; }
.kb-feat { display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border-radius: 26px; overflow: hidden; border: 1px solid #e6ebf3; box-shadow: 0 14px 34px rgba(34,54,95,.10); color: inherit; margin-bottom: 22px; }
.kb-feat:hover { color: inherit; }
.kb-feat-img { min-height: 300px; overflow: hidden; background: #eef2fb; }
.kb-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.kb-feat:hover .kb-feat-img img { transform: scale(1.04); }
.kb-feat-tx { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.kb-chip { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; font-size: .74rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: #fff4d6; color: #a15c00; }
.kb-feat-tx h2 { font-size: 1.55rem; font-weight: 800; line-height: 1.25; margin: 12px 0 10px; color: #1b2a4a; letter-spacing: -.01em; }
.kb-feat-tx p { color: #64748b; font-size: .92rem; line-height: 1.6; margin: 0 0 14px; }
.kb-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: #64748b; }
.kb-meta i { color: #3B5997; }
.kb-meta.sm { font-size: .72rem; gap: 10px; }
.kb-read { margin-top: 18px; align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; padding: 11px 18px; border-radius: 13px; background: #22365f; color: #fff; font-weight: 800; font-size: .88rem; transition: gap .2s; }
.kb-feat:hover .kb-read { gap: 12px; }
.kb-layout { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.kb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.kb-card { background: #fff; border: 1px solid #e6ebf3; border-radius: 20px; overflow: hidden; color: inherit; display: flex; flex-direction: column; transition: transform .22s, box-shadow .22s; }
.kb-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(34,54,95,.10); color: inherit; }
.kb-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: #eef2fb; }
.kb-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.kb-card:hover .kb-card-img img { transform: scale(1.05); }
.kb-card-tx { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kb-card-tx h3 { font-size: 1rem; font-weight: 800; line-height: 1.35; margin: 0; color: #1b2a4a; }
.kb-min { margin-top: auto; font-size: .74rem; font-weight: 700; color: #a15c00; display: inline-flex; gap: 5px; align-items: center; }
.kb-side { position: sticky; top: 96px; display: grid; gap: 14px; }
.kb-box { background: #fff; border: 1px solid #e6ebf3; border-radius: 20px; padding: 18px; }
.kb-box h4 { font-size: .95rem; font-weight: 800; margin: 0 0 12px; display: flex; gap: 8px; align-items: center; color: #1b2a4a; }
.kb-box.navy { background: linear-gradient(150deg, #22365f, #3B5997); color: #fff; border: 0; }
.kb-box.navy h4 { color: #fff; }
.kb-box.navy p { font-size: .85rem; color: rgba(255,255,255,.8); }
.kb-pop { display: flex; gap: 12px; padding: 10px 0; border-top: 1px dashed #e6ebf3; color: inherit; }
.kb-pop:first-of-type { border-top: 0; }
.kb-pop .no { flex: 0 0 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: #eef2fb; color: #3B5997; }
.kb-pop:first-of-type .no { background: #F5A800; color: #22365f; }
.kb-pop b { display: block; font-size: .84rem; line-height: 1.35; color: #1b2a4a; }
.kb-pop small { font-size: .72rem; color: #94a3b8; }
.kb-pop:hover b { color: #3B5997; }

/* ===== ARTIKEL (detail berita) ===== */
.ar-head { padding: 120px 0 10px; background: linear-gradient(180deg, #f3f6fc, #fff); }
.ar-narrow { max-width: 900px; }
.ar-kat { display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; font-size: .76rem; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: #eef2fb; color: #3B5997; }
.ar-kat.gold { background: #fff4d6; color: #a15c00; }
.ar-head h1 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin: 14px 0 16px; color: #1b2a4a; }
.ar-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; font-size: .85rem; color: #64748b; }
.ar-meta i { color: #3B5997; }
.ar-meta .who { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: #33415c; }
.ar-meta .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #22365f; color: #fff; font-size: .8rem; font-weight: 800; }
.ar-meta .views { font-weight: 800; color: #a15c00; background: #fff8e6; padding: 4px 10px; border-radius: 999px; }
.ar-meta .views i { color: #F5A800; }
.ar-body { padding-top: 24px; }
.ar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.ar-cover { margin: 0 0 18px; border-radius: 22px; overflow: hidden; background: #eef2fb; }
.ar-cover img { width: 100%; display: block; max-height: 520px; object-fit: cover; }
.ar-content { font-size: 1.04rem; line-height: 1.85; color: #334155; }
.ar-content h2, .ar-content h3 { color: #1b2a4a; font-weight: 800; margin: 1.6em 0 .6em; line-height: 1.3; }
.ar-content h2 { font-size: 1.35rem; }
.ar-content h3 { font-size: 1.15rem; }
.ar-content blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 4px solid #F5A800; background: #fff8e6; border-radius: 0 14px 14px 0; font-weight: 600; color: #4b3b0f; }
.ar-content ul { padding-left: 1.2em; }
.ar-content img { max-width: 100%; height: auto; border-radius: 14px; }
.ar-content a { color: #3B5997; text-decoration: underline; }
.ar-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.ar-tags span { font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: #f3f5f9; color: #475569; }
.ar-end { margin-top: 30px; padding: 18px 20px 4px; border-radius: 20px; background: #f6f8fc; border: 1px solid #e6ebf3; }
.ar-end p { font-weight: 700; color: #1b2a4a; margin: 0 0 10px; }
.ar-end .shr { margin-bottom: 14px; }
.ar-promo { margin-top: 16px; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: linear-gradient(130deg, #22365f, #3B5997); color: #fff; }
.ar-promo:hover { color: #fff; }
.ar-promo .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #F5A800; color: #22365f; font-size: 1.2rem; flex-shrink: 0; }
.ar-promo span:nth-child(2) { flex: 1; }
.ar-promo b { display: block; }
.ar-promo small { color: rgba(255,255,255,.75); }
.ar-side { position: sticky; top: 96px; display: grid; gap: 14px; }
.ar-box { background: #fff; border: 1px solid #e6ebf3; border-radius: 20px; padding: 16px; }
.ar-box h4 { font-size: .95rem; font-weight: 800; margin: 0 0 10px; color: #1b2a4a; }
.ar-item { display: flex; gap: 12px; padding: 8px 0; color: inherit; }
.ar-item img { width: 76px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: #eef2fb; }
.ar-item b { display: block; font-size: .84rem; line-height: 1.35; color: #1b2a4a; }
.ar-item small { font-size: .72rem; color: #94a3b8; }
.ar-item:hover b { color: #3B5997; }

@media (max-width: 991px) {
    .rk-hero-grid, .kb-hero-row { grid-template-columns: 1fr; }
    .rk-big, .kb-hero-stats { justify-self: start; text-align: left; }
    .rk-kpi { grid-template-columns: repeat(2, 1fr); }
    .rk-grid { grid-template-columns: 1fr 1fr; }
    .rk-top ol { grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-flow: row; }
    .kb-feat { grid-template-columns: 1fr; }
    .kb-feat-img { min-height: 0; aspect-ratio: 16 / 9; }
    .kb-layout, .ar-layout { grid-template-columns: 1fr; }
    .kb-side, .ar-side { position: static; }
}
@media (max-width: 575px) {
    .rk-hero, .kb-hero { padding: 100px 0 48px; }
    .rk-grid { grid-template-columns: 1fr; }
    .rk-kpi { gap: 10px; }
    .rk-kpi .k { padding: 14px; grid-template-columns: 38px 1fr; column-gap: 10px; }
    .rk-kpi .ic { width: 38px; height: 38px; font-size: 1rem; }
    .rk-kpi b { font-size: 1.3rem; }
    .rk-chart { height: 240px; }
    .rk-cta .shr { margin-left: 0; }
    .kb-grid { grid-template-columns: 1fr; }
    .kb-feat-tx { padding: 18px; }
    .kb-feat-tx h2 { font-size: 1.2rem; }
    .ar-head { padding-top: 100px; }
    .shr-b.cp span { display: none; }
}

/* ===== LOMBA v3 — nasional & internasional + info otomatis ===== */
.lb-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: -8px 0 12px; }
.lb-cak { display: inline-flex; padding: 4px; gap: 4px; background: #e9eef8; border-radius: 14px; }
.lb-cak button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 9px 16px; border-radius: 10px; font: inherit; font-weight: 800; font-size: .88rem; color: #475569; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.lb-cak button b { font-size: .7rem; padding: 2px 7px; border-radius: 999px; background: #fff; color: #3B5997; }
.lb-cak button.on { background: #22365f; color: #fff; box-shadow: 0 6px 14px rgba(34,54,95,.22); }
.lb-cak button.on b { background: #F5A800; color: #22365f; }
.lb-live, .lb-auto { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.lb-live { background: #dcfce7; color: #166534; }
.lb-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: pvPulse 1.8s infinite; box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
.lb-auto { color: #64748b; background: #fff; border: 1px solid #e6ebf3; }
.mk-lomba .lb-filter { margin-top: 0; }
.lb-filter button[hidden] { display: none; }
.lbx-tx em.ng { color: #3B5997; }
.lbx.has-info { border-color: #86efac; }
.lbx-badge { position: absolute; top: -9px; right: 12px; font-size: .64rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; letter-spacing: .02em; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.lbx-badge.dibuka { background: #16a34a; color: #fff; }
.lbx-badge.info { background: #F5A800; color: #22365f; }
@media (max-width: 575px) {
    .lb-cak { width: 100%; }
    .lb-cak button { flex: 1; justify-content: center; padding: 8px 6px; font-size: .82rem; }
    .lb-auto { display: none; }
}
@media (max-width: 991px) { .lbx-grid { padding-top: 12px; } }
.mk-lomba .lbx-grid { padding-top: 10px; }
@media (max-width: 575px) { .rk-top li:nth-child(n+6) { display: none; } }

/* ===== LAYANAN v3 — lebih segar, senada logo UNTAN (navy · kuning emas · merah) ===== */
@media (min-width: 992px) {
    .lyn-grid { grid-template-columns: 1.25fr 1fr; grid-auto-rows: minmax(150px, auto); }
    .lyn-hero { grid-column: 1; grid-row: 1 / span 2; }
}
.lyn-hero { background: radial-gradient(460px 280px at 100% 0%, rgba(255,214,0,.30), transparent 60%), radial-gradient(360px 240px at 0% 100%, rgba(227,39,38,.22), transparent 65%), linear-gradient(150deg, #1d2f58, #34539a); }
.lyn-hero .lyn-ic { background: linear-gradient(140deg, #ffe14d, #F5A800); }
.lyn-hero::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 5px; border-radius: 5px 5px 0 0; background: linear-gradient(90deg, #F5A800 0 60%, #e32726 60% 100%); }
.lyn-card.c-red, .lyn-card.c-gold { border: 0; overflow: hidden; }
.lyn-card.c-red { background: linear-gradient(150deg, #fff1f0, #ffe2df); }
.lyn-card.c-gold { background: linear-gradient(150deg, #fff9df, #ffefb3); }
.lyn-card.c-red .lyn-ic { background: #e32726; color: #fff; box-shadow: 0 8px 18px rgba(227,39,38,.28); }
.lyn-card.c-gold .lyn-ic { background: #F5A800; color: #22365f; box-shadow: 0 8px 18px rgba(245,168,0,.32); }
.lyn-card.c-red::after, .lyn-card.c-gold::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; opacity: .5; }
.lyn-card.c-red::after { background: radial-gradient(circle, rgba(227,39,38,.18), transparent 70%); }
.lyn-card.c-gold::after { background: radial-gradient(circle, rgba(245,168,0,.28), transparent 70%); }
.lyn-card.c-red h3 { color: #8f1a19; }
.lyn-card.c-gold h3 { color: #6b4800; }
.lyn-card.c-red p { color: #8a4b4a; }
.lyn-card.c-gold p { color: #7a6233; }
.lyn-card.c-red:hover .lyn-ic, .lyn-card.c-gold:hover .lyn-ic { background: #22365f; color: #fff; }
.lyn-card.c-red:hover { box-shadow: 0 16px 32px rgba(227,39,38,.16); }
.lyn-card.c-gold:hover { box-shadow: 0 16px 32px rgba(245,168,0,.22); }
@media (min-width: 992px) { .lyn-card.c-red, .lyn-card.c-gold { padding: 24px; justify-content: center; } .lyn-card.c-red h3, .lyn-card.c-gold h3 { font-size: 1.2rem; } .lyn-card.c-red p, .lyn-card.c-gold p { font-size: .9rem; } }

.lyn-mini.c-gold { background: #fffaea; border-color: #fbe3a3; }
.lyn-mini.c-gold .lyn-ic { background: #F5A800; color: #22365f; }
.lyn-mini.c-blue { background: #f1f5ff; border-color: #d6e0f5; }
.lyn-mini.c-blue .lyn-ic { background: #3B5997; color: #fff; }
.lyn-mini.c-blue2 { background: #f3f6fb; border-color: #dbe3f0; }
.lyn-mini.c-blue2 .lyn-ic { background: #22365f; color: #ffd84d; }
.lyn-mini.c-red { background: #fff3f2; border-color: #fbcfcb; }
.lyn-mini.c-red .lyn-ic { background: #e32726; color: #fff; }
.lyn-mini:hover .lyn-ic { transform: rotate(-6deg) scale(1.05); }
.lyn-public { background: linear-gradient(90deg, #f3f6fc, #fffaea); border-color: #e8dcb0; }

/* ===== TIM HEBAT KEMAHASISWAAN — 9 foto anggota, gaya polaroid ===== */
.tim-wrap { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px; align-items: center; padding: 44px; border-radius: 32px; color: #fff; overflow: hidden;
    background: radial-gradient(520px 320px at 100% 0%, rgba(255,214,0,.22), transparent 60%), radial-gradient(420px 300px at 0% 100%, rgba(227,39,38,.18), transparent 62%), linear-gradient(140deg, #1d2f58, #3B5997); }
.tim-wrap::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.2px); background-size: 22px 22px; pointer-events: none; }
.tim-text { position: relative; }
.tim-text h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 14px 0 12px; color: #fff; }
.tim-text h2 span { color: #ffd84d; }
.tim-text p { color: rgba(255,255,255,.82); max-width: 460px; }
.tim-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.tim-chips span { display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.tim-chips i { color: #ffd84d; }
.tim-chips span:nth-child(2) i { color: #ff8a80; }

.tim-board { position: relative; }
.tim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tim-card { margin: 0; background: #fff; border-radius: 16px; padding: 8px 8px 10px; box-shadow: 0 12px 26px rgba(10,20,45,.28); color: #1b2a4a; transition: transform .3s cubic-bezier(.2,.8,.2,1.2), box-shadow .3s; }
.tim-card.t0 { transform: rotate(-2.5deg); }
.tim-card.t1 { transform: rotate(1.5deg) translateY(6px); }
.tim-card.t2 { transform: rotate(-1deg); }
.tim-card:hover { transform: rotate(0) translateY(-6px) scale(1.04); box-shadow: 0 20px 36px rgba(10,20,45,.35); z-index: 2; position: relative; }
.tim-pic { position: relative; aspect-ratio: 1 / 1; border-radius: 11px; overflow: hidden; display: grid; place-items: center; }
.tim-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.tim-pic.tone-g { background: linear-gradient(150deg, #ffe680, #F5A800); }
.tim-pic.tone-n { background: linear-gradient(150deg, #8fa9e0, #3B5997); }
.tim-pic.tone-r { background: linear-gradient(150deg, #ffb3a8, #e32726); }
.tim-ph { font-size: 1.9rem; font-weight: 800; color: rgba(255,255,255,.92); }
.tim-ph i { font-size: 2.6rem; opacity: .85; }
.tim-emo { position: absolute; right: 5px; bottom: 5px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: .85rem; box-shadow: 0 3px 8px rgba(0,0,0,.18); transform: scale(0); transition: transform .3s cubic-bezier(.2,.8,.2,1.4); }
.tim-card:hover .tim-emo { transform: scale(1); }
.tim-card figcaption { text-align: center; padding-top: 7px; line-height: 1.2; }
.tim-card b { display: block; font-size: .8rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tim-card small { display: block; font-size: .66rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.tim-sticker { position: absolute; z-index: 3; font-size: .8rem; font-weight: 800; padding: 7px 13px; border-radius: 999px; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.tim-sticker.s1 { top: -16px; left: -12px; background: #F5A800; color: #22365f; transform: rotate(-8deg); }
.tim-sticker.s2 { bottom: -14px; right: -8px; background: #fff; color: #3B5997; transform: rotate(5deg); }

@media (max-width: 991px) {
    .tim-wrap { grid-template-columns: 1fr; padding: 32px 24px 36px; gap: 30px; }
}
@media (max-width: 575px) {
    .tim-wrap { padding: 26px 16px 30px; border-radius: 24px; }
    .tim-grid { gap: 9px; }
    .tim-card { padding: 5px 5px 7px; border-radius: 12px; }
    .tim-card b { font-size: .7rem; }
    .tim-card small { font-size: .6rem; }
    .tim-ph { font-size: 1.4rem; }
    .tim-ph i { font-size: 1.9rem; }
    .tim-sticker { font-size: .7rem; padding: 5px 10px; }
    .tim-sticker.s1 { left: -4px; }
    .tim-sticker.s2 { right: -2px; }
}
@media (prefers-reduced-motion: reduce) { .tim-card, .tim-card:hover { transform: none; } }
@media (max-width: 991px) { .tim-board { width: 100%; max-width: 480px; margin: 0 auto; } }

/* ===== LAYANAN: 6 kartu mini (3 kolom) ===== */
.lyn-minis { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .lyn-minis { grid-template-columns: 1fr 1fr; } }

/* ===== HALAMAN LAYANAN (KKN, Satgas PPKPT) ===== */
.lh-hero { position: relative; overflow: hidden; color: #fff; padding: 120px 0 64px;
    background: radial-gradient(520px 300px at 92% 0%, rgba(255,214,0,.24), transparent 60%), linear-gradient(150deg, #1c2d52, #2f4c8c); }
.lh-hero.w-red { background: radial-gradient(520px 300px at 92% 0%, rgba(255,120,110,.35), transparent 60%), linear-gradient(150deg, #1c2d52, #6b1f2f); }
.lh-hero.w-gold { background: radial-gradient(520px 300px at 92% 0%, rgba(255,214,0,.38), transparent 60%), linear-gradient(150deg, #1c2d52, #3B5997); }
.lh-hero-row { display: flex; gap: 22px; align-items: flex-start; margin-top: 20px; }
.lh-ic { flex: 0 0 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 2rem; background: #F5A800; color: #22365f; box-shadow: 0 12px 26px rgba(0,0,0,.25); transform: rotate(-6deg); }
.lh-hero.w-red .lh-ic { background: #e32726; color: #fff; }
.lh-hero.w-navy .lh-ic { background: #fff; color: #22365f; }
.lh-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 10px; color: #fff; }
.lh-hero p { color: rgba(255,255,255,.82); max-width: 640px; font-size: 1.02rem; }
.lh-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.lh-body { padding-top: 0; margin-top: -28px; position: relative; }
.lh-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; background: #fff8e6; border: 1px solid #f6dc9a; color: #6b4800; font-weight: 600; box-shadow: 0 10px 26px rgba(34,54,95,.08); margin-bottom: 18px; }
.lh-note.w-red { background: #fff1f0; border-color: #f8c7c2; color: #8f1a19; }
.lh-note i { margin-top: 2px; }
.lh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 34px; }
.lh-card { position: relative; background: #fff; border: 1px solid #e6ebf3; border-radius: 20px; padding: 20px; transition: transform .22s, box-shadow .22s; }
.lh-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(34,54,95,.09); }
.lh-card .no { font-size: .78rem; font-weight: 800; color: #F5A800; letter-spacing: .06em; }
.lh-card h3 { font-size: 1.02rem; font-weight: 800; margin: 6px 0 6px; color: #1b2a4a; }
.lh-card p { font-size: .86rem; color: #64748b; margin: 0; line-height: 1.55; }
.lh-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; align-items: start; }
.lh-h2 { font-size: 1.35rem; font-weight: 800; color: #1b2a4a; margin: 0 0 14px; }
.lh-steps { list-style: none; padding: 0; margin: 0 0 26px; position: relative; }
.lh-steps::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(#cdd6ea 0 6px, transparent 6px 12px); }
.lh-steps li { position: relative; display: flex; gap: 14px; padding: 8px 0 14px; }
.lh-steps .dot { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #22365f; color: #fff; font-weight: 800; position: relative; z-index: 1; box-shadow: 0 0 0 5px #fff; }
.lh-steps li:first-child .dot { background: #F5A800; color: #22365f; }
.lh-steps b { display: block; color: #1b2a4a; margin-top: 6px; }
.lh-steps p { margin: 2px 0 0; font-size: .9rem; color: #64748b; }
.lh-isi { margin-bottom: 22px; }
.lh-side { position: sticky; top: 96px; display: grid; gap: 12px; }
.lh-box { border-radius: 20px; padding: 18px; color: #fff; background: linear-gradient(150deg, #22365f, #3B5997); }
.lh-box.w-red { background: linear-gradient(150deg, #7a1f2b, #c62f2a); }
.lh-box h4 { font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.lh-box .nm { font-size: .85rem; color: rgba(255,255,255,.8); margin-bottom: 10px; }
.lh-box .small { color: rgba(255,255,255,.8); }
.lh-k { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-weight: 700; font-size: .88rem; margin-top: 8px; transition: background .2s; }
.lh-k:hover { background: rgba(255,255,255,.2); color: #fff; }
.lh-k.wa { background: #25d366; }
.lh-other { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #e6ebf3; color: inherit; }
.lh-other .ic { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #22365f; color: #ffd84d; }
.lh-other.w-gold .ic { background: #F5A800; color: #22365f; }
.lh-other.w-red .ic { background: #e32726; color: #fff; }
.lh-other b { display: block; font-size: .88rem; color: #1b2a4a; }
.lh-other small { font-size: .74rem; color: #64748b; }
@media (max-width: 991px) {
    .lh-grid { grid-template-columns: 1fr 1fr; }
    .lh-layout { grid-template-columns: 1fr; }
    .lh-side { position: static; }
}
@media (max-width: 575px) {
    .lh-hero { padding: 100px 0 52px; }
    .lh-hero-row { flex-direction: column; gap: 14px; }
    .lh-ic { flex-basis: auto; width: 60px; height: 60px; font-size: 1.6rem; }
    .lh-grid { grid-template-columns: 1fr; }
}

/* Tim Hebat v2 — lebih ringkas, muat satu layar standar */
.tim-wrap { grid-template-columns: 1fr minmax(0, 470px); gap: 40px; padding: 32px 40px; border-radius: 28px; }
.tim-text h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin: 12px 0 10px; }
.tim-text p { font-size: .94rem; }
.tim-board { justify-self: end; width: 100%; max-width: 470px; }
.tim-grid { gap: 10px; }
.tim-card { padding: 6px 6px 8px; border-radius: 13px; box-shadow: 0 8px 18px rgba(10,20,45,.25); }
.tim-pic { aspect-ratio: 1 / 1; border-radius: 9px; }
.tim-card figcaption { padding-top: 6px; }
.tim-card b { font-size: .72rem; }
.tim-card small { font-size: .62rem; }
.tim-ph i { font-size: 2rem; }
.tim-sticker { font-size: .72rem; padding: 5px 11px; }
.tim-sticker.s1 { top: -12px; left: -10px; }
.tim-sticker.s2 { bottom: -10px; right: -6px; }
@media (max-width: 991px) { .tim-wrap { grid-template-columns: 1fr; padding: 28px 22px 32px; } .tim-board { justify-self: center; max-width: 440px; } }
@media (max-width: 575px) { .tim-wrap { padding: 24px 14px 28px; } .tim-board { max-width: 100%; } }

/* Tim Hebat v3 — kolom terkunci agar foto besar / nama panjang tidak memotong grid */
.tim-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.tim-board { min-width: 0; max-width: 440px; }
.tim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tim-card { min-width: 0; }
.tim-pic { width: 100%; }
.tim-pic img { display: block; max-width: 100%; min-width: 0; }
.tim-card figcaption { min-width: 0; }
.tim-card b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; min-height: 2.5em; font-size: .7rem; }
.tim-card small { font-size: .6rem; }
@media (max-width: 991px) { .tim-wrap { grid-template-columns: minmax(0, 1fr); } .tim-board { max-width: 420px; } }
@media (max-width: 575px) { .tim-board { max-width: 100%; } .tim-card b { font-size: .64rem; } }

/* Tim Hebat v4 — 12 anggota, 4 kolom, ringkas & minimalis */
.tim-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px; padding: 28px 36px; }
.tim-board { max-width: 560px; }
.tim-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tim-card { padding: 5px 5px 7px; border-radius: 11px; box-shadow: 0 6px 14px rgba(10,20,45,.22); }
.tim-card.t0 { transform: rotate(-1.5deg); }
.tim-card.t1 { transform: rotate(1deg); }
.tim-card.t2 { transform: rotate(-.6deg); }
.tim-card.t3 { transform: rotate(1.4deg); }
.tim-card:hover { transform: translateY(-4px) scale(1.04); }
.tim-pic { border-radius: 8px; }
.tim-card figcaption { padding-top: 5px; }
.tim-card b { font-size: .64rem; min-height: 2.5em; }
.tim-card small { font-size: .56rem; }
.tim-ph i { font-size: 1.6rem; }
.tim-emo { width: 22px; height: 22px; font-size: .72rem; }
@media (max-width: 991px) { .tim-board { max-width: 520px; } }
@media (max-width: 575px) { .tim-wrap { padding: 22px 12px 24px; } .tim-grid { gap: 6px; } .tim-card { padding: 4px 4px 6px; } .tim-card b { font-size: .58rem; } .tim-card small { display: none; } }
@media (max-width: 575px) { .tim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tim-card small { display: block; font-size: .55rem; } }

/* ===== PROFIL — segar & berwarna, senada logo UNTAN ===== */
.pf-hero { position: relative; overflow: hidden; color: #fff; padding: 118px 0 56px; background: linear-gradient(150deg, #1c2d52, #3B5997); }
.pf-hero.pf-gold { background: linear-gradient(150deg, #1c2d52 0%, #2f4c8c 60%, #6a5a1f 130%); }
.pf-hero.pf-red { background: linear-gradient(150deg, #1c2d52 0%, #3a3f86 55%, #8a2430 130%); }
.pf-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.pf-blob.b1 { width: 380px; height: 380px; right: -80px; top: -120px; background: #F5A800; opacity: .35; }
.pf-blob.b2 { width: 300px; height: 300px; left: -100px; bottom: -160px; background: #e32726; opacity: .28; }
.pf-hero.pf-navy .pf-blob.b2 { background: #6f9bff; }
.pf-hero-row { position: relative; display: flex; gap: 22px; align-items: center; margin-top: 18px; }
.pf-ic { flex: 0 0 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; font-size: 2rem; background: linear-gradient(140deg, #ffe14d, #F5A800); color: #22365f; box-shadow: 0 14px 30px rgba(0,0,0,.25); transform: rotate(-6deg); }
.pf-hero.pf-red .pf-ic { background: linear-gradient(140deg, #ff7a6e, #e32726); color: #fff; }
.pf-hero.pf-navy .pf-ic { background: #fff; color: #3B5997; }
.pf-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 8px; color: #fff; }
.pf-hero p { color: rgba(255,255,255,.82); max-width: 640px; margin: 0; }

.pf-nav { position: sticky; top: 70px; z-index: 20; margin-top: -26px; }
.pf-nav-in { display: flex; gap: 6px; padding: 6px; background: #fff; border-radius: 18px; box-shadow: 0 12px 30px rgba(34,54,95,.12); border: 1px solid #e6ebf3; overflow-x: auto; scrollbar-width: none; }
.pf-nav-in::-webkit-scrollbar { display: none; }
.pf-nav-in a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 13px; font-weight: 700; font-size: .88rem; color: #475569; transition: background .2s, color .2s; white-space: nowrap; }
.pf-nav-in a:hover { background: #f3f6fc; color: #22365f; }
.pf-nav-in a.on { background: #22365f; color: #fff; }
.pf-nav-in a.on i { color: #ffd84d; }
.pf-body { padding-top: 34px; }
.pf-narrow { max-width: 1000px; }

.pf-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: #fff4d6; color: #a15c00; }
.pf-tag.red { background: #fdecec; color: #b42320; }
.pf-sec-h { margin: 36px 0 16px; }
.pf-sec-h h2 { font-size: 1.5rem; font-weight: 800; color: #1b2a4a; margin: 10px 0 0; }
.pf-sec-h.center { text-align: center; }

.pf-visi { position: relative; overflow: hidden; padding: 34px 36px; border-radius: 28px; background: linear-gradient(140deg, #fffaea, #ffeeb8); border: 1px solid #f6dc9a; }
.pf-visi .pf-quote { position: absolute; right: 18px; top: -10px; font-size: 9rem; color: rgba(245,168,0,.25); line-height: 1; }
.pf-visi-tx { position: relative; margin-top: 14px; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.7; color: #3d2f08; font-weight: 600; }
.pf-visi-tx b, .pf-visi-tx strong { color: #22365f; }

.pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pf-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-card { position: relative; padding: 22px 22px 20px; border-radius: 22px; border: 1px solid transparent; transition: transform .22s, box-shadow .22s; }
.pf-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(34,54,95,.10); }
.pf-card p { margin: 12px 0 0; color: #334155; line-height: 1.65; font-size: .95rem; }
.pf-card-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; }
.pf-no { position: absolute; right: 18px; top: 16px; font-size: 1.6rem; font-weight: 800; opacity: .18; }
.pf-card.c0 { background: #f1f5ff; border-color: #dbe4f7; } .pf-card.c0 .pf-card-ic { background: #3B5997; color: #fff; }
.pf-card.c1 { background: #fff8e6; border-color: #f6e0a6; } .pf-card.c1 .pf-card-ic { background: #F5A800; color: #22365f; }
.pf-card.c2 { background: #fff2f1; border-color: #f8d0cc; } .pf-card.c2 .pf-card-ic { background: #e32726; color: #fff; }
.pf-card.c3 { background: #f2f7ff; border-color: #d5e4fb; } .pf-card.c3 .pf-card-ic { background: #22365f; color: #ffd84d; }
.pf-lead { font-size: 1.05rem; color: #475569; margin: 0 0 18px; }

.pf-box { background: #fff; border: 1px solid #e6ebf3; border-radius: 22px; padding: 24px 26px; color: #334155; line-height: 1.8; margin-top: 18px; }
.pf-box h3 { font-size: 1.05rem; font-weight: 800; color: #1b2a4a; display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.pf-rich strong, .pf-rich b { font-weight: 600; color: #1b2a4a; }

.pf-chart { margin: 0; background: #fff; border: 1px solid #e6ebf3; border-radius: 24px; overflow: hidden; box-shadow: 0 12px 30px rgba(34,54,95,.08); }
.pf-chart-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: #f6f8fc; border-bottom: 1px solid #e6ebf3; font-weight: 800; color: #22365f; font-size: .9rem; }
.pf-mini-btn { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 10px; background: #22365f; color: #fff; font-size: .8rem; font-weight: 700; }
.pf-mini-btn:hover { background: #F5A800; color: #22365f; }
.pf-chart-img { display: block; padding: 18px; background: repeating-linear-gradient(45deg, #fff 0 12px, #fafbfe 12px 24px); cursor: zoom-in; }
.pf-chart-img img { display: block; width: 100%; height: auto; border-radius: 10px; }
.pf-chart figcaption { padding: 10px 16px 14px; font-size: .8rem; color: #64748b; }
.pf-promo { margin-top: 18px; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: linear-gradient(130deg, #22365f, #3B5997); color: #fff; }
.pf-promo:hover { color: #fff; }
.pf-promo .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #F5A800; color: #22365f; font-size: 1.2rem; flex-shrink: 0; }
.pf-promo span:nth-child(2) { flex: 1; }
.pf-promo b { display: block; }
.pf-promo small { color: rgba(255,255,255,.75); }

.pf-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-doc { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #e6ebf3; transition: transform .2s, box-shadow .2s; }
.pf-doc:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(34,54,95,.08); }
.pf-doc p { margin: 0; font-weight: 700; color: #1b2a4a; font-size: .9rem; line-height: 1.45; }
.pf-doc-ic { flex: 0 0 58px; height: 64px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 1.3rem; }
.pf-doc-ic b { font-size: .62rem; font-weight: 800; letter-spacing: .03em; }
.pf-doc.t-gold .pf-doc-ic { background: #fff4d6; color: #a15c00; }
.pf-doc.t-navy .pf-doc-ic { background: #eef2fb; color: #22365f; }
.pf-doc.t-red .pf-doc-ic { background: #fdecec; color: #b42320; }
.pf-doc.t-blue .pf-doc-ic { background: #e8f1ff; color: #2563eb; }

/* Jejak Warek III */
.jw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.jw-stats div { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #e6ebf3; }
.jw-stats div:nth-child(1) { background: #fff8e6; border-color: #f6e0a6; }
.jw-stats div:nth-child(3) { background: #fff2f1; border-color: #f8d0cc; }
.jw-stats b { display: block; font-size: 1.7rem; font-weight: 800; color: #22365f; line-height: 1.1; }
.jw-stats span { font-size: .8rem; color: #64748b; font-weight: 600; }
.jw-now { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; padding: 26px; border-radius: 28px; color: #fff; background: radial-gradient(420px 260px at 100% 0%, rgba(255,214,0,.25), transparent 60%), linear-gradient(140deg, #1d2f58, #3B5997); }
.jw-now-pic { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #2f4c8c; border: 5px solid #fff; transform: rotate(-2deg); box-shadow: 0 16px 34px rgba(0,0,0,.3); }
.jw-now-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.jw-badge { position: absolute; left: 10px; bottom: 10px; display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: #fff; color: #166534; font-size: .72rem; font-weight: 800; }
.jw-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
.jw-now h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: #fff; margin: 12px 0 4px; }
.jw-now .jab { color: #ffd84d; font-weight: 700; margin: 0 0 6px; }
.jw-now .rk, .jw-card .rk { font-size: .85rem; opacity: .85; margin: 0; }
.jw-now blockquote { margin: 14px 0; padding: 12px 16px; border-left: 4px solid #F5A800; background: rgba(255,255,255,.08); border-radius: 0 14px 14px 0; font-style: italic; color: rgba(255,255,255,.92); }
.jw-cap { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.jw-cap li { display: flex; gap: 8px; font-size: .9rem; }
.jw-cap i { color: #4ade80; }
.jw-ini { width: 100%; height: 100%; display: grid; place-items: center; font-size: 3rem; font-weight: 800; color: #ffd84d; }
.jw-ini.sm { width: 54px; height: 66px; border-radius: 12px; background: #22365f; font-size: 1.1rem; flex-shrink: 0; }

.jw-line { list-style: none; padding: 0; margin: 10px auto 0; max-width: 980px; position: relative; }
.jw-line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: linear-gradient(#F5A800, #3B5997 50%, #e32726); border-radius: 3px; opacity: .45; }
.jw-line li { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-bottom: 18px; }
.jw-line li .yr { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 1; padding: 6px 12px; border-radius: 999px; background: #22365f; color: #fff; font-weight: 800; font-size: .8rem; box-shadow: 0 0 0 5px #f5f7fb; }
.jw-line li.now .yr { background: #F5A800; color: #22365f; }
.jw-line li.l .jw-card { grid-column: 1; }
.jw-line li.r .jw-card { grid-column: 2; }
.jw-line li.jw-start .jw-card { grid-column: 1 / -1; max-width: 420px; margin: 52px auto 0; text-align: center; }
.jw-card { background: #fff; border: 1px solid #e6ebf3; border-radius: 20px; padding: 16px; transition: transform .22s, box-shadow .22s; }
.jw-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(34,54,95,.10); }
.jw-card.ghost { background: #f6f8fc; border-style: dashed; }
.jw-card.ghost b { display: block; color: #22365f; }
.jw-card.ghost small { color: #64748b; }
.jw-line li.now .jw-card { border-color: #f6dc9a; background: #fffbef; }
.jw-card-top { display: flex; gap: 12px; align-items: center; }
.jw-card-top img { width: 54px; height: 66px; border-radius: 12px; object-fit: cover; object-position: center top; flex-shrink: 0; background: #eef2fb; }
.jw-card .per { display: inline-block; font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #eef2fb; color: #3B5997; margin-bottom: 4px; }
.jw-card b { display: block; color: #1b2a4a; font-size: .98rem; }
.jw-card small { display: block; color: #64748b; font-size: .8rem; }
.jw-card .rk { color: #475569; margin-top: 10px; }
.jw-cap.sm li { font-size: .82rem; color: #475569; gap: 2px; }
.jw-cap.sm i { color: #F5A800; }
.jw-card .src { display: inline-flex; gap: 4px; align-items: center; margin-top: 10px; font-size: .78rem; font-weight: 700; color: #3B5997; }
.jw-help { margin-top: 26px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 18px 20px; border-radius: 22px; background: #fff8e6; border: 1px dashed #f3c766; }
.jw-help .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #F5A800; color: #22365f; font-size: 1.3rem; }
.jw-help > div { flex: 1 1 300px; }
.jw-help b { display: block; color: #1b2a4a; }
.jw-help span { font-size: .88rem; color: #6b5a2a; }

@media (max-width: 991px) {
    .pf-cards.two, .pf-docs { grid-template-columns: 1fr; }
    .jw-now { grid-template-columns: 1fr; }
    .jw-now-pic { max-width: 220px; }
    .jw-line::before { left: 18px; }
    .jw-line li { grid-template-columns: 1fr; gap: 0; padding-left: 44px; }
    .jw-line li .yr { left: 18px; top: -4px; }
    .jw-line li.l .jw-card, .jw-line li.r .jw-card { grid-column: 1; margin-top: 26px; }
    .jw-line li.jw-start .jw-card { margin: 26px 0 0; text-align: left; }
}
@media (max-width: 575px) {
    .pf-hero { padding: 100px 0 48px; }
    .pf-hero-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .pf-ic { flex-basis: auto; width: 60px; height: 60px; font-size: 1.6rem; }
    .pf-nav { top: 62px; }
    .pf-visi { padding: 24px 20px; }
    .jw-stats { gap: 8px; }
    .jw-stats div { padding: 12px; }
    .jw-stats b { font-size: 1.3rem; }
    .jw-now { padding: 18px; }
}

/* Jejak Warek III v2 — daftar kartu (foto + periode + jabatan) */
.jw-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jw-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; border-radius: 24px; color: #fff;
    background: radial-gradient(320px 200px at 100% 0%, rgba(255,214,0,.16), transparent 60%), linear-gradient(140deg, #1d2f58, #3B5997); }
.jw-item.now { grid-column: 1 / -1; grid-template-columns: 170px minmax(0, 1fr); background: radial-gradient(420px 260px at 100% 0%, rgba(255,214,0,.26), transparent 60%), linear-gradient(140deg, #1d2f58, #3B5997); }
.jw-item-pic { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #2f4c8c; border: 4px solid #fff; transform: rotate(-2deg); box-shadow: 0 12px 26px rgba(0,0,0,.28); }
.jw-item-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.jw-item-pic .jw-ini { font-size: 2.2rem; }
.jw-item .jw-badge { left: 8px; bottom: 8px; font-size: .66rem; padding: 4px 9px; }
.jw-per { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: #fff4d6; color: #a15c00; }
.jw-item h3 { color: #fff; font-size: 1.25rem; font-weight: 800; margin: 10px 0 4px; letter-spacing: -.01em; }
.jw-item.now h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.jw-item .jab { color: #ffd84d; font-weight: 700; margin: 0 0 4px; font-size: .92rem; }
.jw-item .rk { color: rgba(255,255,255,.8); font-size: .84rem; margin: 0; }
.jw-item .src { display: inline-flex; gap: 4px; align-items: center; margin-top: 8px; font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.75); }
.jw-item .src:hover { color: #ffd84d; }
@media (max-width: 991px) { .jw-list { grid-template-columns: 1fr; } .jw-item.now { grid-template-columns: 140px minmax(0, 1fr); } }
@media (max-width: 575px) { .jw-item, .jw-item.now { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; } .jw-item h3 { font-size: 1.05rem; } .jw-item.now h3 { font-size: 1.2rem; } .jw-item .jab { font-size: .82rem; } }

/* ===== LAYANAN TERPADU (/layanan) ===== */
.ly-page .ly-sec { scroll-margin-top: 150px; margin-bottom: 38px; }
.ly-sec-h { margin-bottom: 16px; }
.ly-sec-h h2 { font-size: 1.45rem; font-weight: 800; color: #1b2a4a; margin: 10px 0 0; }
.ly-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ly-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 22px; border: 1px solid transparent; color: inherit; transition: transform .22s, box-shadow .22s; overflow: hidden; }
.ly-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(34,54,95,.12); color: inherit; }
.ly-card h3 { font-size: 1.08rem; font-weight: 800; color: #1b2a4a; margin: 8px 0 0; }
.ly-card p { font-size: .87rem; color: #5b6478; margin: 0; line-height: 1.55; flex: 1; }
.ly-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ly-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; transition: transform .22s; }
.ly-ic.sm { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
.ly-card:hover .ly-ic, .ly-mini:hover .ly-ic, .ly-nat-item:hover .ly-ic { transform: rotate(-6deg) scale(1.05); }
.ly-badge { font-size: .7rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.75); color: #33415c; }
.ly-go { margin-top: 8px; font-size: .82rem; font-weight: 800; display: inline-flex; gap: 6px; align-items: center; transition: gap .2s; }
.ly-card:hover .ly-go { gap: 10px; }
.t-gold.ly-card { background: linear-gradient(150deg, #fffaea, #ffefc0); border-color: #f6e0a6; } .t-gold .ly-ic { background: #F5A800; color: #22365f; } .t-gold .ly-go { color: #a15c00; }
.t-navy.ly-card { background: linear-gradient(150deg, #22365f, #3B5997); } .t-navy.ly-card h3 { color: #fff; } .t-navy.ly-card p { color: rgba(255,255,255,.8); } .t-navy .ly-ic { background: #fff; color: #22365f; } .t-navy .ly-go { color: #ffd84d; }
.t-blue.ly-card { background: linear-gradient(150deg, #f1f5ff, #e2eafc); border-color: #d6e0f5; } .t-blue .ly-ic { background: #3B5997; color: #fff; } .t-blue .ly-go { color: #3B5997; }
.t-red.ly-card { background: linear-gradient(150deg, #fff3f2, #ffe1de); border-color: #f8d0cc; } .t-red .ly-ic { background: #e32726; color: #fff; } .t-red .ly-go { color: #b42320; }
.ly-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ly-mini { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #e6ebf3; color: inherit; transition: transform .2s, box-shadow .2s; }
.ly-mini:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(34,54,95,.09); color: inherit; }
.ly-mini b { display: block; font-size: .9rem; color: #1b2a4a; }
.ly-mini small { display: block; font-size: .74rem; color: #64748b; }
.ly-mini > span:nth-child(2) { flex: 1; min-width: 0; }
.ly-mini.t-navy .ly-ic { background: #22365f; color: #ffd84d; }
.ly-arr { color: #94a3b8; font-size: .85rem; }
.ly-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ly-app { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #e6ebf3; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.ly-app:hover { transform: translateY(-3px); border-color: #c9d4ea; box-shadow: 0 14px 30px rgba(34,54,95,.10); color: inherit; }
.ly-app-ic { flex: 0 0 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: var(--c, #3B5997); }
.ly-app-tx { flex: 1; min-width: 0; }
.ly-app-tx b { display: block; font-size: 1.05rem; color: #1b2a4a; }
.ly-app-tx b small { font-weight: 600; color: #94a3b8; font-size: .78rem; }
.ly-app-tx > span { display: block; font-size: .86rem; color: #5b6478; margin-top: 4px; line-height: 1.5; }
.ly-app-tx em { display: inline-block; margin-top: 8px; font-style: normal; font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #eef2fb; color: #3B5997; }
.ly-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ly-chips a { display: inline-flex; gap: 7px; align-items: center; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #e0e7f3; font-weight: 700; font-size: .84rem; color: #33415c; }
.ly-chips a:hover { background: #22365f; color: #fff; border-color: #22365f; }
.ly-nat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ly-nat-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #e6ebf3; color: inherit; transition: transform .2s, box-shadow .2s; }
.ly-nat-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(34,54,95,.08); color: inherit; }
.ly-nat-item b { flex: 1; font-size: .9rem; color: #1b2a4a; }
.ly-nat-item:nth-child(3n+1) .ly-ic { background: #22365f; color: #ffd84d; }
.ly-nat-item:nth-child(3n+2) .ly-ic { background: #F5A800; color: #22365f; }
.ly-nat-item:nth-child(3n) .ly-ic { background: #e32726; color: #fff; }
.ly-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 20px 22px; border-radius: 24px; background: linear-gradient(90deg, #fffaea, #f3f6fc); border: 1px solid #ecdfb4; }
.ly-cta .ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: #22365f; color: #ffd84d; font-size: 1.3rem; }
.ly-cta > div:nth-child(2) { flex: 1 1 280px; }
.ly-cta b { display: block; color: #1b2a4a; font-size: 1.05rem; }
.ly-cta span { font-size: .88rem; color: #5b6478; }
.ly-cta .btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 991px) { .ly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ly-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ly-apps { grid-template-columns: 1fr; } .ly-nat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ly-grid, .ly-minis, .ly-nat { grid-template-columns: 1fr; } .ly-card { padding: 16px; } .ly-sec-h h2 { font-size: 1.2rem; } }
#dukungan .ly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 575px) { #dukungan .ly-grid { grid-template-columns: 1fr; } }

/* ===== BACAAN PILIHAN (beranda) — berita & artikel ===== */
.bc-sec { position: relative; background: linear-gradient(180deg, #fff 0%, #f6f8fc 100%); }
.bc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bc-feat { background: #fff; border: 1px solid #e6ebf3; border-radius: 26px; overflow: hidden; box-shadow: 0 14px 34px rgba(34,54,95,.08); transition: box-shadow .25s, transform .25s; }
.bc-feat:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(34,54,95,.12); }
.bc-feat-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eef2fb; }
.bc-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.bc-feat:hover .bc-feat-img img { transform: scale(1.05); }
.bc-chip { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: #F5A800; color: #22365f; font-size: .74rem; font-weight: 800; box-shadow: 0 6px 14px rgba(0,0,0,.15); }
.bc-feat-body { padding: 20px 22px 22px; }
.bc-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: #64748b; }
.bc-meta i { color: #3B5997; }
.bc-meta .v, .bc-item-foot .v { font-weight: 800; color: #a15c00; }
.bc-meta .v i, .bc-item-foot .v i { color: #F5A800; }
.bc-feat h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.3; margin: 10px 0 8px; letter-spacing: -.01em; }
.bc-feat h3 a { color: #1b2a4a; }
.bc-feat h3 a:hover { color: #3B5997; }
.bc-feat p { color: #5b6478; font-size: .92rem; line-height: 1.6; margin: 0; }
.bc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.bc-read { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 13px; background: #22365f; color: #fff; font-weight: 800; font-size: .86rem; transition: gap .2s, background .2s; }
.bc-read:hover { gap: 12px; color: #fff; background: #2f4a85; }

.bc-share { display: inline-flex; gap: 6px; align-items: center; }
.bc-share a, .bc-share button { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 1rem; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.bc-share a:hover, .bc-share button:hover { transform: translateY(-2px); color: #fff; }
.bc-share .wa:hover { background: #25d366; border-color: #25d366; }
.bc-share .fb:hover { background: #1877f2; border-color: #1877f2; }
.bc-share .cp:hover, .bc-share .cp.ok { background: #22365f; border-color: #22365f; color: #fff; }
.bc-share.sm a, .bc-share.sm button { width: 28px; height: 28px; border-radius: 9px; font-size: .82rem; }

.bc-side { display: flex; flex-direction: column; gap: 10px; }
.bc-tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; background: #eef2fb; border-radius: 14px; }
.bc-tabs button { display: inline-flex; gap: 6px; align-items: center; border: 0; background: transparent; padding: 8px 14px; border-radius: 10px; font: inherit; font-size: .84rem; font-weight: 800; color: #475569; cursor: pointer; }
.bc-tabs button.on { background: #fff; color: #22365f; box-shadow: 0 2px 8px rgba(34,54,95,.1); }
.bc-tabs button.on i { color: #F5A800; }
.bc-list { display: grid; gap: 10px; }
.bc-list[hidden] { display: none; }
.bc-item { display: flex; gap: 14px; padding: 12px; background: #fff; border: 1px solid #e6ebf3; border-radius: 18px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.bc-item:hover { transform: translateY(-2px); border-color: #c9d4ea; box-shadow: 0 12px 26px rgba(34,54,95,.08); }
.bc-thumb { position: relative; flex: 0 0 112px; height: 84px; border-radius: 13px; overflow: hidden; background: #eef2fb; }
.bc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bc-item:hover .bc-thumb img { transform: scale(1.06); }
.bc-thumb .rank { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #F5A800; color: #22365f; font-weight: 800; font-size: .78rem; }
.bc-item-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bc-item-tx .kat { font-size: .68rem; font-weight: 800; color: #3B5997; text-transform: uppercase; letter-spacing: .04em; }
.bc-item-tx .t { font-weight: 800; color: #1b2a4a; font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-item-tx .t:hover { color: #3B5997; }
.bc-item-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: .74rem; color: #64748b; }
.bc-item-foot .bc-share { margin-left: auto; }
.bc-more { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 16px; background: linear-gradient(90deg, #fffaea, #fff3d1); border: 1px solid #f6e0a6; color: #6b4800; font-weight: 800; font-size: .86rem; }
.bc-more i:first-child { color: #F5A800; }
.bc-more i:last-child { margin-left: auto; }
.bc-more:hover { color: #22365f; }
.bc-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 999px; background: #22365f; color: #fff; font-weight: 700; font-size: .86rem; box-shadow: 0 12px 26px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 60; }
.bc-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 991px) { .bc-grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
    .bc-feat-body { padding: 16px; }
    .bc-thumb { flex-basis: 92px; height: 74px; }
    .bc-item { gap: 10px; padding: 10px; }
    .bc-item-foot span:nth-child(2) { display: none; }
    .bc-foot .bc-read { flex: 1; justify-content: center; }
}
.jw-item .jw-ini i { font-size: 2.8rem; color: rgba(255,255,255,.55); }
.jw-soon { display: inline-flex; gap: 5px; align-items: center; margin-top: 8px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }

/* ===== DIREKTORI ORMAWA — minimalis, segar, elegan ===== */
.om-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.om-stats span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-size: .82rem; color: rgba(255,255,255,.85); }
.om-stats b { color: #ffd84d; font-weight: 800; }
.om-body { padding-top: 0; margin-top: -26px; position: relative; }
.om-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 8px; background: #fff; border: 1px solid #e6ebf3; border-radius: 20px; box-shadow: 0 12px 30px rgba(34,54,95,.10); position: sticky; top: 76px; z-index: 15; }
.om-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.om-tabs::-webkit-scrollbar { display: none; }
.om-tabs button { flex: 0 0 auto; display: inline-flex; gap: 7px; align-items: center; border: 0; background: transparent; padding: 10px 14px; border-radius: 13px; font: inherit; font-weight: 800; font-size: .86rem; color: #475569; cursor: pointer; transition: background .2s, color .2s; }
.om-tabs button b { font-size: .7rem; padding: 2px 7px; border-radius: 999px; background: #eef2fb; color: #3B5997; }
.om-tabs button:hover { background: #f3f6fc; }
.om-tabs button.on { background: #22365f; color: #fff; }
.om-tabs button.on b { background: #F5A800; color: #22365f; }
.om-search { flex: 1 1 240px; max-width: 340px; display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 44px; border-radius: 13px; background: #f6f8fc; border: 1px solid #e6ebf3; color: #94a3b8; margin: 0; }
.om-search:focus-within { border-color: #3B5997; background: #fff; }
.om-search input { flex: 1; border: 0; background: transparent; outline: 0; font: inherit; font-size: .9rem; color: #1b2a4a; min-width: 0; }
.om-fak { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.om-fak[hidden] { display: none; }
.om-fak button { border: 1px solid #e0e7f3; background: #fff; padding: 7px 13px; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 700; color: #475569; cursor: pointer; }
.om-fak button.on { background: #3B5997; border-color: #3B5997; color: #fff; }
.om-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.om-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e6ebf3; border-radius: 20px; padding: 14px; transition: transform .22s, box-shadow .22s, border-color .22s; }
.om-card[hidden] { display: none; }
.om-card:hover { transform: translateY(-3px); border-color: #c9d4ea; box-shadow: 0 14px 30px rgba(34,54,95,.10); }
.om-main { display: flex; gap: 12px; align-items: center; color: inherit; min-width: 0; }
.om-main:hover { color: inherit; }
.om-logo { flex: 0 0 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: .92rem; letter-spacing: -.02em; color: #fff; overflow: hidden; }
.om-logo.img { background: #fff !important; border: 1px solid #edf1f7; }
.om-logo img { width: 86%; height: 86%; object-fit: contain; }
.t-navy .om-logo { background: linear-gradient(140deg, #3B5997, #22365f); }
.t-gold .om-logo { background: linear-gradient(140deg, #ffd24d, #F5A800); color: #22365f; }
.t-blue .om-logo { background: linear-gradient(140deg, #8fa9e0, #4d6cb0); }
.om-card:nth-child(5n+2).t-blue .om-logo { background: linear-gradient(140deg, #ffb0a6, #e04b40); }
.om-card:nth-child(5n+4).t-gold .om-logo { background: linear-gradient(140deg, #ffb0a6, #e04b40); color: #fff; }
.om-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.om-kat { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-tx b { font-size: .92rem; color: #1b2a4a; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.om-tx small { font-size: .74rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-links { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #edf1f7; }
.om-links a { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; border: 1px solid #e6ebf3; color: #64748b; font-size: .9rem; transition: all .2s; }
.om-links .ig:hover { background: linear-gradient(140deg, #f58529, #dd2a7b 50%, #8134af); color: #fff; border-color: transparent; }
.om-links .web:hover { background: #3B5997; color: #fff; border-color: #3B5997; }
.om-links .go { background: #f3f6fc; color: #22365f; }
.om-links .go:hover { background: #F5A800; border-color: #F5A800; color: #22365f; }
.om-empty { text-align: center; padding: 36px 12px; color: #94a3b8; }
.om-note { margin-top: 22px; font-size: .84rem; color: #64748b; display: flex; gap: 8px; align-items: flex-start; }
.om-note a { color: #3B5997; font-weight: 700; }
.od-logo.img { background: #fff !important; padding: 6px; }
.od-logo.img img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1199px) { .om-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .om-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .om-search { max-width: none; } }
@media (max-width: 575px) {
    .om-bar { top: 66px; border-radius: 16px; }
    .om-grid { grid-template-columns: 1fr; gap: 10px; }
    .om-card { flex-direction: row; align-items: center; padding: 12px; }
    .om-main { flex: 1; }
    .om-links { margin: 0; padding: 0; border: 0; }
    .om-links .go { display: none; }
}
@media (max-width: 575px) { .om-grid { grid-template-columns: minmax(0, 1fr); } .om-main { min-width: 0; } .om-card { min-width: 0; } .om-tabs { min-width: 0; max-width: 100%; } .om-bar { min-width: 0; } }
.bc-auto { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: .78rem; font-weight: 700; color: #166534; background: #dcfce7; padding: 5px 12px; border-radius: 999px; } .bc-auto .dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: pvPulse 1.8s infinite; }

/* ===== SPASI RAPAT — jarak antar konten lebih padat & konsisten ===== */
.mk-section { padding: 46px 0; }
.mk-section-sm { padding: 32px 0; }
.mk-section + .mk-section { padding-top: 34px; }
.mk-head-row { margin-bottom: 22px; }
.mk-h2 { margin-bottom: 6px; }
.mk-bento-head, .mk-kabar-head { margin-bottom: 22px; }
.lyn .mk-head-row, .mk-lomba .mk-head-row { margin-bottom: 18px; }
.mk-hero { padding: 34px 0 38px; }
.mk-prest { padding: 52px 0; }
.mk-page-head { padding: 26px 0; }
/* Hero halaman dalam (navbar sticky, jadi tak perlu ruang besar di atas) */
.pf-hero, .rk-hero, .kb-hero, .lh-hero { padding: 40px 0 50px; }
.ar-head { padding: 34px 0 6px; }
.pf-body { padding-top: 26px; }
.pf-sec-h { margin: 26px 0 12px; }
.ly-page .ly-sec { margin-bottom: 26px; }
.rk-cta { margin-top: 18px; }
.lb-filter { margin-bottom: 14px; }
.agx-grid, .bc-grid { gap: 18px; }
.mk-foot { padding-top: 34px; }
.mk-foot-top { padding-bottom: 26px; }
.mk-foot-bottom { margin-top: 26px; }
@media (max-width: 991px) {
    .mk-section { padding: 36px 0; }
    .mk-section + .mk-section { padding-top: 28px; }
}
@media (max-width: 575px) {
    .mk-section { padding: 30px 0; }
    .mk-section + .mk-section { padding-top: 24px; }
    .mk-head-row { margin-bottom: 16px; gap: 12px; }
    .pf-hero, .rk-hero, .kb-hero, .lh-hero { padding: 30px 0 44px; }
    .ar-head { padding-top: 24px; }
    .mk-hero { padding: 24px 0 30px; }
    .mk-prest { padding: 40px 0; }
}
@media (max-width: 575px) { .pf-hero-row, .lh-hero-row { flex-direction: row; align-items: flex-start; gap: 12px; margin-top: 12px; } .pf-ic, .lh-ic { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 15px; font-size: 1.2rem; } .pf-hero h1, .lh-hero h1 { font-size: 1.6rem; margin: 8px 0 6px; } .pf-hero p, .lh-hero p { font-size: .9rem; } }

/* Ormawa tanpa logo: pakai logo UNTAN sementara */
.om-logo.def img { width: 78%; height: 78%; }

/* ===== Lomba: tombol Panduan di kartu ===== */
.lbx-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lbx-hit:focus-visible { outline: 2px solid #F5A800; outline-offset: 2px; }
.lbx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.lbx-meta:empty { display: none; }
.lbx-meta em { margin-top: 2px; }
.lbx-pd { position: relative; z-index: 2; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: .66rem; font-weight: 800; line-height: 1.3; color: #22365f; background: #eef2fb; border: 1px solid #dbe3f3; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.lbx-pd i { color: #e32726; font-size: .72rem; }
.lbx-pd:hover, .lbx-pd:focus-visible { background: #22365f; border-color: #22365f; color: #fff; }
.lbx-pd:hover i, .lbx-pd:focus-visible i { color: #F5A800; }
.lbx-badge, .lbx-go { z-index: 2; pointer-events: none; }

/* ===== BIMBINGAN KONSELING (desain baru, selaras halaman Profil) ===== */
.bk-layanan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-layanan .pf-card { color: inherit; text-decoration: none; display: block; }
.bk-card-h { font-size: 1.05rem; font-weight: 800; color: #1b2a4a; margin: 14px 0 0; display: flex; align-items: center; gap: 8px; }
.bk-card-h .bi-arrow-right { font-size: .85rem; color: #94a3b8; transition: transform .2s, color .2s; }
.bk-layanan .pf-card:hover .bi-arrow-right { transform: translateX(3px); color: #22365f; }
.bk-layanan .pf-card p { margin-top: 6px; font-size: .9rem; }
.bk-kontak { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; padding: 22px 24px; border-radius: 22px; background: linear-gradient(135deg, #22365f, #3B5997); color: #fff; }
.bk-kontak-tx { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1 1 320px; }
.bk-kontak-ic { flex: 0 0 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; background: #F5A800; color: #22365f; }
.bk-kontak h3 { margin: 0; font-size: 1.12rem; font-weight: 800; color: #fff; }
.bk-kontak p { margin: 3px 0 0; color: rgba(255,255,255,.8); font-size: .9rem; }
.bk-kontak-btn { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-kontak-btn .mk-btn { min-width: 0; }
.bk-kontak-btn .mk-btn-light { word-break: break-all; }
.bk-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 30px 0 14px; }
.bk-sec-head h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: #1b2a4a; display: flex; gap: 8px; align-items: center; }
.bk-sec-head h2 i { color: #3B5997; }
.bk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bk-art { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6ebf3; border-radius: 20px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .22s, box-shadow .22s, border-color .22s; }
.bk-art:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(34,54,95,.10); border-color: #c9d4ea; color: inherit; }
.bk-art-img { position: relative; aspect-ratio: 16 / 10; background: #eef2fb; overflow: hidden; }
.bk-art-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.bk-art:hover .bk-art-img img { transform: scale(1.04); }
.bk-art-img em { position: absolute; left: 12px; top: 12px; font-style: normal; font-size: .7rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: #22365f; }
.bk-art-tx { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.bk-art-tx small { color: #64748b; font-size: .76rem; }
.bk-art-tx b { color: #1b2a4a; font-size: .98rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bk-art-more { margin-top: auto; padding-top: 6px; font-size: .82rem; font-weight: 800; color: #3B5997; }
.bk-search { max-width: 560px; margin: 0 0 20px; }
.bk-side-help p { color: #64748b; font-size: .88rem; margin: 0 0 10px; }
.bk-side-help .mk-btn { margin: 0 6px 6px 0; }
.bk-sos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.bk-sos-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff2f1; border: 1px solid #f8d0cc; color: #1b2a4a; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.bk-sos-item:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(227,39,38,.12); color: #1b2a4a; }
.bk-sos-item b { flex: 0 0 auto; font-size: 1.7rem; font-weight: 800; color: #e32726; letter-spacing: -.02em; }
.bk-sos-item span { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.bk-sos-item small { font-weight: 500; color: #64748b; }
.bk-rich { margin-top: 8px; font-size: .92rem; line-height: 1.7; color: #334155; }
.bk-rich p { margin: 0; }
.bk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.bk-person { background: #fff; border: 1px solid #e6ebf3; border-radius: 22px; padding: 20px; text-align: center; }
.bk-person-foto { width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #eef2fb; color: #3B5997; font-size: 2.4rem; }
.bk-person-foto img { width: 100%; height: 100%; object-fit: cover; }
.bk-person h3 { font-size: 1rem; font-weight: 800; color: #1b2a4a; margin: 0; }
.bk-person-sub { color: #64748b; font-size: .84rem; margin: 2px 0 0; }
.bk-person-row { text-align: left; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e6ebf3; font-size: .86rem; }
.bk-person-row small { display: block; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; font-size: .66rem; margin-bottom: 2px; }
.bk-empty { text-align: center; padding: 36px 20px; background: #fff; border: 1px dashed #cfd9ec; border-radius: 22px; }
.bk-empty span { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; background: #eef2fb; color: #3B5997; font-size: 1.7rem; }
.bk-empty h3 { font-size: 1.08rem; font-weight: 800; color: #1b2a4a; margin: 0 0 6px; }
.bk-empty p { color: #64748b; margin: 0 auto; max-width: 480px; font-size: .92rem; }
.bk-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.bk-room { background: #fff; border: 1px solid #e6ebf3; border-radius: 22px; overflow: hidden; }
.bk-room h3 { font-size: 1rem; font-weight: 800; color: #1b2a4a; margin: 0; padding: 14px 16px; display: flex; gap: 8px; align-items: center; }
.bk-room h3 i { color: #3B5997; }
.bk-room-foto { aspect-ratio: 4 / 3; display: grid; background: #eef2fb; }
.bk-room-foto.dua { grid-template-columns: 1fr 1fr; gap: 2px; }
.bk-room-foto a, .bk-room-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-room-foto.kosong { place-items: center; align-content: center; gap: 4px; color: #94a3b8; font-size: 1.8rem; }
.bk-room-foto.kosong small { font-size: .8rem; font-weight: 700; }
.bk-sop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bk-sop.satu { grid-template-columns: minmax(0, 640px); justify-content: center; }
.bk-video { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #0f172a; }
.bk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 991px) { .bk-grid, .bk-layanan { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-sop { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) {
    .bk-grid, .bk-sos, .bk-layanan { grid-template-columns: minmax(0, 1fr); }
    .bk-kontak { padding: 18px; }
    .bk-kontak-btn, .bk-kontak-btn .mk-btn { width: 100%; justify-content: center; }
    .bk-sec-head h2 { font-size: 1.12rem; }
}

/* ===== Promo Tes Karier (UPA PKK) ===== */
.tkp-sec { padding: 6px 0 30px; }
.tkp { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px 40px; border-radius: 26px; color: #fff; text-decoration: none;
  background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 18px 18px, #182b55; box-shadow: 12px 12px 0 #F5A800; transition: transform .25s, box-shadow .25s; }
.tkp:hover { color: #fff; transform: translate(-2px, -2px); box-shadow: 15px 15px 0 #F5A800; }
.tkp-tx { max-width: 640px; min-width: 0; }
.tkp-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #e32726; font-size: .78rem; font-weight: 800; }
.tkp h2 { margin: 14px 0 8px; font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.2; }
.tkp p { margin: 0; color: rgba(255,255,255,.82); line-height: 1.65; }
.tkp p b { color: #fff; }
.tkp-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 24px; border-radius: 14px; background: #F5A800; color: #182b55; font-weight: 800; }
.tkp-btn i { transition: transform .2s; }
.tkp:hover .tkp-btn i { transform: translateX(3px); }
.tkp-chips { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, auto); gap: 12px; }
.tkp-chips span { padding: 14px 20px; border-radius: 14px; background: #fff; color: #182b55; font-weight: 800; text-align: center; border: 2px solid #182b55; box-shadow: 0 0 0 2px #fff; }
.tkp-chips span:nth-child(1) { transform: rotate(-2deg); } .tkp-chips span:nth-child(2) { transform: rotate(2deg); }
.tkp-chips span:nth-child(3) { transform: rotate(-1.5deg); } .tkp-chips span:nth-child(4) { transform: rotate(1deg); }
.tkp-src { position: absolute; right: 22px; bottom: 14px; font-size: .72rem; color: rgba(255,255,255,.55); }
@media (max-width: 991px) { .tkp { flex-direction: column; align-items: flex-start; padding: 28px 26px 40px; } .tkp-chips { display: none; } }
@media (max-width: 575px) { .tkp { padding: 24px 20px 40px; box-shadow: 8px 8px 0 #F5A800; } .tkp-btn { width: 100%; justify-content: center; } }