*{
  margin:0;
  padding:0;
  box-sizing:border-box
}

html{scroll-behavior:smooth}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  line-height:1.6;
  color:#333;
  background:#fff
}

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

a{
  text-decoration:none;
  color:inherit;
  transition:color .3s ease
}
a:hover{color:#5a3fc0} /* diseragamkan ke ungu yg senada header/footer */

/* ---------- Container ---------- */
.container{
  max-width:1200px;
  margin:0 auto;
  padding: 0 1rem;
}

/* ---------- Header ---------- */
.header{
  background:#594892;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  position:sticky;top:0;z-index:1000
}
.header-content{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 0
}

/* Logo */
.logo img{height:90px;width:auto} /* memindahkan inline-style ke CSS */

/* ---------- Navigation ---------- */
.nav{display:flex;align-items:center}

.nav-list{
  display:flex;gap:2rem;list-style:none;margin:0
}

.nav-link{
  font-weight:500;padding:.5rem 1rem;border-radius:5px;
  color: #fff;
  transition:background .3s ease,color .3s ease
}
.nav-link:hover,
.nav-link.active{color:#fff}
@media (max-width: 768px) {
  .nav-list .nav-link {     /* menu di layar ≤768 px */
    color: #333;            /* abu tua agar kontras di latar putih */
  }

  .nav-list .nav-link:hover,
  .nav-list .nav-link.active {
    background-color: #007cba;
    color: #fff;            /* tetap putih saat dipilih / hover */
  }
}
/* Mobile menu button */
.mobile-menu-toggle{
  display:none;flex-direction:column;background:none;border:none;
  font-weight:500;padding:.5rem 1rem;border-radius:5px;
  color: #555;
  cursor:pointer;padding:.5rem
}
.mobile-menu-toggle span{
  width:25px;height:3px;background:#fff;margin:3px 0;transition:.3s
}

/* ---------- Main ---------- */
.main{min-height:calc(100vh - 200px);padding:2rem 0}

/* ---------- Hero Section ---------- */
.hero-section{
  text-align:center;padding:3rem 0;
  background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;            /* rata sampai tepi */
  margin-bottom:3rem;border-radius:10px
}
.hero-section img{          /* batas tinggi agar tidak “membengkak” */
  max-height:160px;width:auto;height:auto;
  object-fit:contain;margin:0 auto
}
.hero-section h1{
  font-size:2.5rem;font-weight:700;margin:1rem 0;color:#333
}
.hero-section h2{
  font-size:2.0rem;font-weight:700;margin:1rem 0;color:#333
}
.hero-section p{
  font-size:1.2rem;color:#666;max-width:600px;margin:0 auto
}
.full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);  /* tarik keluar wrapper */
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

/* perbesar gambar hero */
.full-width img {
  max-height: 500px;
  max-width: 500px;
  object-fit: contain;
}

/* ---------- Blog Posts Grid ---------- */
.blog-posts{margin-bottom:3rem}
.blog-posts h3{
  font-size:2rem;margin-bottom:2rem;color:#fff;text-align:center
}
.posts-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:2rem
}

/* ---------- Post Cards ---------- */
.post-card{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  transition:transform .3s ease,box-shadow .3s ease;
  animation:fadeIn .6s ease-out
}
.post-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,.15)
}
.post-card.featured{
  grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0
}

.post-image{height:200px;overflow:hidden}
.featured .post-image{height:300px}
.post-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.post-card:hover .post-image img{transform:scale(1.05)}

.post-content{padding:1.5rem}
.post-content h4{font-size:1.3rem;margin-bottom:1rem;line-height:1.4}
.post-content h4 a{color:#333}
.post-content h4 a:hover{color:#007cba}
.post-excerpt{color:#666;margin-bottom:1rem;line-height:1.6}

.post-meta{
  display:flex;gap:1rem;margin-bottom:1rem;font-size:.9rem;color:#888
}
.read-more{
  display:inline-block;background:#007cba;color:#fff;padding:.5rem 1rem;
  border-radius:5px;font-weight:500;transition:background .3s ease
}
.read-more:hover{background:#005a8b}

/* ---------- Article Detail ---------- */
.content-wrapper{display:grid;grid-template-columns:2fr 1fr;gap:3rem;margin-top:2rem}
.article-content{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  animation:fadeIn .6s ease-out
}
.article-hero{position:relative}
.hero-image{width:100%;height:300px;object-fit:cover}
.article-title{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
  color:#fff;padding:2rem;font-size:2rem;font-weight:700;line-height:1.3
}
.article-body{padding:2rem}
.article-body h2{font-size:1.8rem;margin:2rem 0 1rem;color:#333}
.article-body h3{font-size:1.4rem;margin:1.5rem 0 1rem;color:#333}
.article-body p{margin-bottom:1rem;line-height:1.7;color:#555}
.article-body a{color:#007cba;font-weight:500}
.article-body a:hover{text-decoration:underline}

/* ---------- Sidebar ---------- */
.sidebar{display:flex;flex-direction:column;gap:2rem}
.widget{
  background:#fff;border-radius:10px;padding:1.5rem;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  animation:fadeIn .6s ease-out
}
.widget h3{
  font-size:1.3rem;margin-bottom:1rem;color:#333;
  border-bottom:2px solid #007cba;padding-bottom:.5rem
}
.related-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Related & Missed Posts */
.related-posts,.missed-posts{display:flex;flex-direction:column;gap:1rem}
.related-post,.missed-post{
  display:flex;gap:1rem;padding-bottom:1rem;border-bottom:1px solid #eee
}
.related-post:last-child,.missed-post:last-child{
  border-bottom:none;padding-bottom:0
}
.related-image,.missed-image{
  width: 120px;
  height: auto;
  flex-shrink: 0;
  border-radius: 5px;
  overflow: hidden;
}
.related-image img,.missed-image img{width:100%;height:100%;object-fit:cover}
.related-content,.missed-content{flex:1}
.related-category,.missed-category{
  font-size:.8rem;color:#007cba;font-weight:500;text-transform:uppercase
}
.related-content h4,.missed-content h4{font-size:.9rem;margin:.25rem 0;line-height:1.3}
.related-content h4 a,.missed-content h4 a{color:#333}
.related-content h4 a:hover,.missed-content h4 a:hover{color:#007cba}
.related-meta,.missed-meta{font-size:.8rem;color:#888}

/* Partner links */
.partner-links{display:flex;flex-direction:column;gap:.5rem}
.partner-link{
  display:block;background:#007cba;color:#fff;padding:.75rem 1rem;border-radius:5px;
  text-align:center;font-weight:500;transition:background .3s ease,color .3s ease
}
.partner-link:hover{background:#005a8b}

/* Search Widget */
.search-widget{display:flex;gap:.5rem}
.search-input{
  flex:1;padding:.5rem;border:1px solid #ddd;border-radius:5px;font-size:.9rem
}
.search-btn{
  background:#007cba;color:#fff;border:none;padding:.5rem 1rem;border-radius:5px;
  cursor:pointer;font-weight:500;transition:background .3s ease
}
.search-btn:hover{background:#005a8b}

/* Lists */
.recent-posts,.archives,.categories{list-style:none}
.recent-posts li,.archives li,.categories li{
  margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid #eee
}
.recent-posts li:last-child,.archives li:last-child,.categories li:last-child{
  border-bottom:none;margin-bottom:0;padding-bottom:0
}
.recent-posts a,.archives a,.categories a{color:#555;font-size:.9rem}
.recent-posts a:hover,.archives a:hover,.categories a:hover{color:#007cba}

.no-comments{color:#888;font-style:italic;font-size:.9rem}

/* ---------- Footer ---------- */
.footer{
  background:#594892;color:#fff;padding:3rem 0 1rem;margin-top:4rem
}
.footer-content{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;margin-bottom:2rem
}
.footer-section h4{font-size:1.2rem;margin-bottom:1rem;color:#fff}
.footer-section p{color:#ccc;line-height:1.6}
.footer-section ul{list-style:none}
.footer-section ul li{margin-bottom:.5rem}
.footer-section ul li a{
  color:#ccc;transition:color .3s ease
}
.footer-section ul li a:hover{color:#007cba}
.footer-bottom{
  text-align:center;padding-top:2rem;border-top:1px solid #555;color:#ccc
}

/* ---------- Transitions (nav & buttons) ---------- */
.nav-link,
.search-btn,
.partner-link{transition:background .3s ease,color .3s ease}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .container{padding:0 15px}
  .header-content{padding:.75rem 0}

  /* mobile nav */
  .nav-list{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;flex-direction:column;box-shadow:0 5px 15px rgba(248, 244, 244, 0.1);
    padding:1rem;gap:0
  }
  .nav-list.active{display:flex}
  .nav-list li{width:100%}
  .nav-link{display:block;width:100%;padding:1rem;border-radius:0;border-bottom:1px solid #eee}
  .nav-link:last-child{border-bottom:none}
  .mobile-menu-toggle{display:flex}

  .hero-section h2{font-size:2rem}
  .hero-section p{font-size:1rem}

  .posts-grid{grid-template-columns:1fr;gap:1.5rem}
  .post-card.featured{grid-template-columns:1fr}
  .post-card.featured .post-image{height:200px}

  .content-wrapper{grid-template-columns:1fr;gap:2rem}
  .article-title{font-size:1.5rem;padding:1.5rem}
  .article-body{padding:1.5rem}.article-body h2{font-size:1.5rem}.article-body h3{font-size:1.2rem}

  .footer-content{grid-template-columns:1fr;gap:1.5rem}
}

@media (max-width: 480px) {
  .hero-section {
    margin-left: -15px;        /* match padding .container di mobile */
    margin-right: -15px;
    border-radius: 0;
  }
}

/* --- Perbesar gambar hero biar “penuh” --- */
.hero-section img {
  max-height: 200px;           /* dari 140 → 200 px */
  max-width: 200px;
  object-fit: contain;
}

/* --- Perbesar gambar hero biar “penuh” --- */
.hero-section img {
  max-height: 200px;           /* dari 140 → 200 px */
  max-width: 200px;
  object-fit: contain;
}

/* ---------- Animations ---------- */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Focus States ---------- */
.nav-link:focus,
.read-more:focus,
.search-btn:focus,
.partner-link:focus{
  outline:2px solid #007cba;
  outline-offset:2px
}

/* ---------- Print ---------- */
@media print{
  .header,.sidebar,.footer{display:none}
  .content-wrapper{grid-template-columns:1fr}
  .article-content{box-shadow:none}
}
img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: none !important; /* Hapus efek blur apapun */
  image-rendering: auto;
}
.hero-section img {
  max-height: 140px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
.post-image {
  height: auto;
  max-height: 260px;     /* jangan lebih tinggi dari rata-rata gambar */
  overflow: hidden;
}
.post-image img {
  width: 100%;
  height: 100%;
  max-height: inherit;
  object-fit: cover;
  filter: none !important;
}

/* Saat hover, efek zoom tetap halus dan tidak blur */
.post-card:hover .post-image img {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

/* Retina support */
img[loading][srcset] {
  image-rendering: -webkit-optimize-contrast; /* perbaikan browser tertentu */
}
/* === Pagination Component === */
    .pagination{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;margin:3rem 0}
    .page-link{display:inline-block;padding:.5rem 1rem;border:1px solid #ccc;border-radius:4px;font-weight:500;color:#333;transition:background .3s,color .3s,border-color .3s}
    .page-link:hover{background:#007cba;color:#fff;border-color:#007cba}
    .page-link.active{background:#007cba;color:#fff;border-color:#007cba;cursor:default}
    .page-link.prev,.page-link.next{font-weight:600}
    .ellipsis{padding:.5rem 1rem;color:#888}

        .values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin:2rem 0}
    .value-card{background:#fff;border-radius:10px;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.07);text-align:center}
    .value-card h3{font-size:1.25rem;margin:.75rem 0}
    .stats-bar{display:flex;justify-content:space-around;flex-wrap:wrap;gap:1rem;margin:2.5rem 0;color:#fff}
    .stat-item{background:#007cba;border-radius:8px;padding:1rem 1.5rem;min-width:140px;text-align:center}
    .stat-item span{display:block;font-size:1.75rem;font-weight:700}
    .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2rem}
    .team-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.07);text-align:center}
    .team-card img{width:100%;height:240px;object-fit:cover}
    .team-card h4{margin:.75rem 0 .25rem;font-size:1.1rem}
    .team-card p{color:#666;font-size:.9rem;margin-bottom:1rem}