:root{
    --navy:#061b36;
    --navy2:#092449;
    --cyan:#079ab0;
    --cyan2:#28bad4;
    --orange:#ff8b1f;
    --orange2:#f4b000;
    --cream:#f7f0e5;
    --paper:#fffaf1;
    --text:#0a1833;
    --muted:#64748b;
    --line:#e7edf3;
    --shadow:0 22px 55px rgba(5,22,42,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Poppins,Arial,sans-serif;color:var(--text);background:#fff;overflow-x:hidden}
a{text-decoration:none;color:inherit} img{max-width:100%;display:block}
.osim-topbar{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,#061b36 0%,#08264e 100%);color:#fff;box-shadow:0 10px 26px rgba(4,14,30,.14)}
.topbar-inner{max-width:1480px;margin:auto;min-height:92px;padding:12px 42px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:14px;min-width:310px}.brand img,.logo-fallback{width:62px;height:62px;border-radius:16px;object-fit:contain;background:rgba(255,255,255,.09);padding:5px}.logo-fallback{display:grid;place-items:center;font-size:38px;background:linear-gradient(135deg,#098fa5,#6fd5ea);color:#fff}
.brand b{display:block;font-size:23px;line-height:1.05;letter-spacing:.2px;font-weight:700;color:#fff}.brand small{display:block;margin-top:4px;color:#ffb13d;font-size:15px;font-weight:600;letter-spacing:.2px}
.nav-menu{flex:1;display:flex;justify-content:center;align-items:center;gap:18px}.nav-menu a{color:#fff;font-weight:700;font-size:14px;padding:14px 20px;border-radius:999px;transition:.25s ease;white-space:nowrap}.nav-menu a:hover,.nav-menu a.active{background:linear-gradient(135deg,#079ab0,#34bfd8);transform:translateY(-1px);color:#fff}
.latest-pill{display:flex;align-items:center;gap:10px;background:#fff;color:#061b36;padding:13px 18px;border-radius:18px;min-width:158px;box-shadow:0 8px 24px rgba(0,0,0,.08)}.latest-pill span{font-size:20px;color:var(--cyan)}.latest-pill b{display:block;font-size:12px;line-height:1;font-weight:800}.latest-pill small{display:block;font-size:12px;font-weight:700;color:#092449;margin-top:3px}.nav-toggle{display:none;background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:14px;padding:10px 14px;font-size:22px}

.osim-sub-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#fffaf1,#f7f0e5);padding:76px 0 70px;border-bottom:1px solid rgba(8,38,72,.08)}
.osim-sub-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(8,38,72,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(8,38,72,.06) 1px,transparent 1px);background-size:82px 82px;pointer-events:none}.osim-sub-hero::after{content:"";position:absolute;right:-130px;bottom:-170px;width:430px;height:430px;background:radial-gradient(circle,#079ab0 0 34%,transparent 35%),linear-gradient(135deg,#079ab0,#28bad4);border-radius:50%;opacity:.18}.sub-hero-inner{width:min(1160px,92vw);margin:auto;position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e7edf3;border-radius:999px;padding:8px 15px;color:#067d91;font-size:13px;font-weight:700;box-shadow:0 10px 24px rgba(8,30,60,.06)}.osim-sub-hero h1{margin:18px 0 12px;font-size:clamp(36px,4.2vw,64px);font-weight:700;line-height:1.05;letter-spacing:-1.6px;color:#071b39}.osim-sub-hero p{margin:0;max-width:620px;color:#52677e;font-size:17px;line-height:1.7}.hero-accent-line{width:82px;height:5px;background:linear-gradient(90deg,var(--orange),var(--cyan));border-radius:99px;margin-top:24px}

.osim-page-section{position:relative;padding:78px 0}.osim-page-section.soft{background:#fffaf1}.osim-page-container{width:min(1160px,92vw);margin:auto}.page-section-heading{text-align:center;margin:0 auto 42px;width:min(760px,92vw)}.page-section-heading span{color:var(--cyan);font-weight:700;letter-spacing:.3px;font-size:14px}.page-section-heading h2{margin:8px 0 10px;font-size:clamp(32px,3.6vw,54px);line-height:1.05;font-weight:700;color:#071b39;letter-spacing:-1.2px}.page-section-heading p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}.osim-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.osim-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.osim-card{background:#fff;border:1px solid #edf2f7;border-radius:24px;box-shadow:0 18px 42px rgba(8,30,60,.09);overflow:hidden;transition:.25s ease;height:100%;color:var(--text)}.osim-card:hover{transform:translateY(-7px);box-shadow:0 25px 55px rgba(8,30,60,.13)}.img-cover{width:100%;height:230px;object-fit:cover}.placeholder-img{width:100%;height:230px;background:linear-gradient(135deg,#e6fbff,#fff3de);display:grid;place-items:center;color:#0d95aa;font-size:52px}.osim-card-body{padding:23px}.osim-badge{display:inline-flex;align-items:center;gap:6px;background:#eefcff;color:#067d91;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;margin-bottom:12px}.osim-badge.orange{background:#fff4e4;color:#d96a00}.osim-card h3,.osim-card h4{font-weight:700;color:#081b39;line-height:1.24;letter-spacing:-.4px;margin:0 0 10px}.osim-card h3{font-size:21px}.osim-card h4{font-size:20px}.osim-card p,.desc{color:var(--muted);line-height:1.7}.read-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:#078aa0;font-weight:700;font-size:14px}.read-link:hover{color:#ff8b1f}.date-line{display:flex;align-items:center;gap:7px;color:#7890a8;font-size:13px;margin-top:12px}

.program-card{display:grid;grid-template-columns:68px 1fr 24px;align-items:center;gap:18px;background:#fff;border:1px solid #edf2f7;border-radius:22px;padding:24px;box-shadow:0 16px 36px rgba(8,30,60,.08);transition:.25s ease}.program-card:hover{transform:translateY(-5px);box-shadow:0 24px 48px rgba(8,30,60,.12)}.program-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#079ab0,#16bddb);color:#fff;font-size:27px}.program-card:nth-child(even) .program-icon{background:linear-gradient(135deg,#ff8b1f,#f4b000)}.program-card b{display:block;font-size:19px;font-weight:700;margin-bottom:5px;color:#081b39}.program-card small{color:var(--muted);line-height:1.48}.program-card i{font-style:normal;font-size:30px;color:var(--cyan)}

.profile-box{background:#fff;border:1px solid #edf2f7;border-radius:28px;box-shadow:var(--shadow);padding:34px}.profile-highlight{position:relative;overflow:hidden;background:linear-gradient(135deg,#061b36,#08264e);color:#fff;border-radius:30px;padding:34px;box-shadow:0 22px 55px rgba(5,22,42,.15)}.profile-highlight::before{content:"";position:absolute;right:-70px;bottom:-70px;width:210px;height:210px;border-radius:50%;background:#079ab0;opacity:.28}.profile-highlight h3{position:relative;font-weight:700;margin-bottom:16px}.profile-highlight p,.profile-highlight li{position:relative;color:rgba(255,255,255,.78);line-height:1.7}.mini-value{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;background:#f8fafc;border:1px solid #edf2f7}.mini-value i{width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#079ab0,#28bad4);display:grid;place-items:center;color:#fff;font-size:20px;flex:0 0 auto}.mini-value:nth-child(even) i{background:linear-gradient(135deg,#ff8b1f,#f4b000)}

.pengurus-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}.pengurus-photo-card{width:min(300px,88vw);background:#fff;border:1px solid #edf2f7;border-radius:28px;box-shadow:0 18px 42px rgba(8,30,60,.09);padding:16px;text-align:center;transition:.25s ease}.pengurus-photo-card:hover{transform:translateY(-7px);box-shadow:0 25px 55px rgba(8,30,60,.13)}.pengurus-photo-card .foto-wrap{height:280px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#e6fbff,#fff3de);display:grid;place-items:center}.pengurus-photo-card img{width:100%;height:100%;object-fit:contain}.pengurus-photo-card .person-placeholder{font-size:70px;color:#079ab0}.pengurus-photo-card h3{font-size:19px;font-weight:700;margin:18px 0 6px;color:#081b39}.pengurus-photo-card .role{display:inline-block;background:#eefcff;color:#067d91;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700}.pengurus-photo-card small{display:block;color:var(--muted);margin-top:8px}

.gallery-card{cursor:pointer}.gallery-card .img-cover{height:270px}.gallery-card figcaption{padding:20px 22px}.video-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#079ab0,#28bad4);color:#fff;border-radius:999px;padding:10px 15px;font-weight:700;font-size:14px;margin-top:12px}.video-btn:hover{color:#fff;transform:translateY(-2px)}

.article-container{width:min(920px,92vw);margin:auto}.article-cover{width:100%;max-height:460px;object-fit:cover;border-radius:28px;box-shadow:var(--shadow);margin-bottom:28px}.article-box{background:#fff;border:1px solid #edf2f7;border-radius:28px;box-shadow:0 18px 42px rgba(8,30,60,.09);padding:34px}.article-box .desc{font-size:17px;color:#334155}.article-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;color:#078aa0;font-weight:700}

.aspirasi-card{width:min(860px,92vw);margin:auto;background:#fff;border:1px solid #edf2f7;border-radius:30px;box-shadow:var(--shadow);padding:34px}.form-label{font-weight:700;color:#122341}.form-control,.form-select{border-radius:15px;border-color:#dbe6f0;padding:12px 14px}.form-control:focus,.form-select:focus{border-color:#079ab0;box-shadow:0 0 0 .2rem rgba(7,154,176,.16)}.btn-osim-page{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;padding:13px 20px;background:linear-gradient(135deg,#079ab0,#28bad4);color:#fff;font-weight:700;box-shadow:0 16px 32px rgba(7,154,176,.22)}.btn-osim-page:hover{color:#fff;transform:translateY(-3px)}.alert-light{border:1px dashed #cbd5e1;background:#f8fafc;color:#64748b;border-radius:18px}.pagination{justify-content:center}.page-link{border-radius:12px!important;margin:0 4px;border:1px solid #dce7f1;color:#078aa0}.active>.page-link,.page-link.active{background:#079ab0;border-color:#079ab0}

.osim-page-footer{background:radial-gradient(circle at 0 100%,rgba(9,154,176,.24),transparent 26%),linear-gradient(135deg,#061b36,#08264e);color:#fff;padding:68px 48px}.footer-grid{width:min(1160px,92vw);margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:42px}.footer-grid b{display:block;font-size:21px;margin-bottom:14px}.footer-grid p,.footer-grid small,.footer-grid a{color:rgba(255,255,255,.78);line-height:1.7}.footer-grid a{display:block;margin:8px 0}.footer-brand{display:flex;gap:16px;align-items:center;margin-bottom:18px}.footer-brand img,.footer-logo-round{width:72px;height:72px;border-radius:20px;background:#fff;object-fit:contain;padding:8px;color:#078aa0;display:grid;place-items:center;font-weight:800}.socials{display:flex;gap:12px}.socials span{width:42px;height:42px;border-radius:12px;background:#079ab0;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}.socials span:nth-child(2){background:#111}.socials span:nth-child(3){background:#e11d48}.socials span:nth-child(4){background:#22c55e}

.page-reveal,.page-card,.stagger-page>*{opacity:0;transform:translateY(38px);transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1)}.page-reveal.is-visible,.page-card.is-visible,.stagger-page>*.is-visible{opacity:1;transform:translateY(0)}.stagger-page>*:nth-child(1),.stagger-page>*:nth-child(2),.stagger-page>*:nth-child(3){transition-delay:.05s}.stagger-page>*:nth-child(4),.stagger-page>*:nth-child(5),.stagger-page>*:nth-child(6){transition-delay:.18s}.stagger-page>*:nth-child(7),.stagger-page>*:nth-child(8),.stagger-page>*:nth-child(9){transition-delay:.3s}

@media(max-width:1100px){.topbar-inner{padding:12px 22px;gap:14px}.brand{min-width:auto}.brand b{font-size:18px}.brand small{font-size:12px}.nav-menu{gap:8px}.nav-menu a{font-size:13px;padding:12px 13px}.latest-pill{min-width:auto;padding:10px 12px}.osim-grid-3{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:780px){.topbar-inner{min-height:78px}.brand img,.logo-fallback{width:52px;height:52px}.nav-toggle{display:block;margin-left:auto}.nav-menu{position:absolute;left:16px;right:16px;top:84px;background:#061b36;border-radius:20px;padding:14px;display:none;flex-direction:column;box-shadow:0 18px 45px rgba(0,0,0,.2)}.nav-menu.show{display:flex}.latest-pill{display:none}.osim-sub-hero{padding:58px 0 50px}.osim-page-section{padding:58px 0}.osim-grid-3,.osim-grid-2{grid-template-columns:1fr}.program-card{grid-template-columns:58px 1fr 20px;padding:20px}.program-icon{width:54px;height:54px}.footer-grid{grid-template-columns:1fr}.osim-page-footer{padding:54px 24px}.article-box,.aspirasi-card,.profile-box,.profile-highlight{padding:25px}.img-cover,.placeholder-img{height:220px}}

/* PATCH: posisi logo kiri, menu kanan, dan tombol Aspirasi mengikuti konsep Home */
.topbar-inner{justify-content:flex-start;gap:22px;}
.brand{flex:0 0 auto;min-width:330px;}
.nav-menu{margin-left:auto;flex:0 1 auto;justify-content:flex-end;gap:13px;}
.nav-menu a.aspirasi-link{background:linear-gradient(135deg,#1558d6,#079ab0);box-shadow:0 12px 28px rgba(21,88,214,.18);}
.nav-menu a.aspirasi-link:hover,.nav-menu a.aspirasi-link.active{background:linear-gradient(135deg,#0f4cc2,#11a9c8);}
.latest-pill{flex:0 0 auto;}
@media(max-width:1100px){.brand{min-width:260px}.nav-menu{gap:6px}.nav-menu a{padding:11px 10px;font-size:12px}.latest-pill{padding:10px 12px}}
@media(max-width:780px){.nav-menu{margin-left:0;justify-content:flex-start}.brand{min-width:0}}

/* =========================================================
   FIX FINAL TOPBAR HALAMAN DALAM: logo kiri, menu kanan
   ========================================================= */
.osim-topbar .topbar-inner,
.page-topbar .topbar-inner{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:36px !important;
    padding-right:36px !important;
    justify-content:space-between !important;
    gap:20px !important;
}
.osim-topbar .brand,
.page-topbar .brand{
    flex:0 0 auto !important;
    min-width:0 !important;
    margin-right:auto !important;
}
.osim-topbar .brand img,
.page-topbar .brand img,
.osim-topbar .logo-fallback,
.page-topbar .logo-fallback{
    width:64px !important;
    height:64px !important;
    flex:0 0 auto !important;
}
.osim-topbar .brand b,
.page-topbar .brand b{
    font-size:24px !important;
    max-width:330px !important;
}
.osim-topbar .brand small,
.page-topbar .brand small{
    font-size:16px !important;
}
.osim-topbar .nav-menu,
.page-topbar .nav-menu{
    flex:0 1 auto !important;
    margin-left:auto !important;
    justify-content:flex-end !important;
    gap:12px !important;
}
.osim-topbar .nav-menu a,
.page-topbar .nav-menu a{
    padding:14px 20px !important;
    font-size:14px !important;
}
.osim-topbar .latest-pill,
.page-topbar .latest-pill{
    flex:0 0 auto !important;
    margin-left:8px !important;
}
@media(max-width:1250px){
    .osim-topbar .topbar-inner,.page-topbar .topbar-inner{padding-left:22px !important;padding-right:22px !important;}
    .osim-topbar .brand b,.page-topbar .brand b{font-size:19px !important;max-width:230px !important;}
    .osim-topbar .brand small,.page-topbar .brand small{font-size:13px !important;}
    .osim-topbar .brand img,.page-topbar .brand img,.osim-topbar .logo-fallback,.page-topbar .logo-fallback{width:54px !important;height:54px !important;}
    .osim-topbar .nav-menu,.page-topbar .nav-menu{gap:6px !important;}
    .osim-topbar .nav-menu a,.page-topbar .nav-menu a{padding:11px 10px !important;font-size:12px !important;}
    .osim-topbar .latest-pill,.page-topbar .latest-pill{padding:10px 12px !important;min-width:140px !important;}
}
@media(max-width:780px){
    .osim-topbar .topbar-inner,.page-topbar .topbar-inner{padding-left:16px !important;padding-right:16px !important;}
    .osim-topbar .brand,.page-topbar .brand{margin-right:0 !important;}
    .osim-topbar .nav-menu,.page-topbar .nav-menu{margin-left:0 !important;justify-content:flex-start !important;}
}