/* custom dropdown caret + alpine cloak */
[x-cloak]{display:none!important;}

/* supaya teks + caret sejajar rapi */
.navbar a.navbar-link.dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* caret default ke kanan (>) */
.nav-caret{
  display:inline-block;
  margin-left:2px;
  transition:transform .18s ease;
  transform:rotate(0deg);
  font-weight:700;
}

/* saat open muter jadi bawah */
.nav-caret.is-open{
  transform:rotate(90deg);
}

/* =========================
   NAV FIX BLUESSH
   ========================= */

[x-cloak]{
  display:none !important;
}

/* matikan efek active lama yang bikin semua link jadi biru */
.navbar ul:not(.dropdown-menu) li.active a{
  color:inherit !important;
}

/* top level */
.navbar > ul:not(.dropdown-menu){
  display:flex;
  align-items:center;
}

.navbar > ul:not(.dropdown-menu) > li{
  position:relative;
}

.navbar > ul:not(.dropdown-menu) > li > a.navbar-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding-left:1rem;
  padding-right:1rem;
  color:#444 !important;
  font-weight:500;
  font-size:1rem;
  text-decoration:none;
}

/* link aktif parent menu */
.navbar > ul:not(.dropdown-menu) > li > a.navbar-link.is-parent-current,
.navbar > ul:not(.dropdown-menu) > li > a.navbar-link.is-current{
  color:#3867d6 !important;
}

/* dropdown */
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:12rem;
  background:#fff;
  border:1px solid #f2f2f2;
  border-radius:.25rem;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  padding:.5rem 0;
  margin-top:.75rem;
  z-index:200;
}

.dropdown-menu li{
  position:relative;
}

.dropdown-menu .navbar-link{
  display:block;
  width:100%;
  padding:.5rem 1rem !important;
  color:#444 !important;
  font-weight:500;
  text-decoration:none;
  background:transparent !important;
}

/* hover dropdown */
.dropdown-menu .navbar-link:hover{
  color:#3867d6 !important;
  background:#edf2f7 !important;
}

/* item dropdown aktif: hanya item itu saja */
.dropdown-menu .navbar-link.is-current{
  color:#3867d6 !important;
  background:#edf2f7 !important;
}

/* caret */
.navbar a.navbar-link.dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.nav-caret{
  display:inline-block;
  margin-left:2px;
  transition:transform .18s ease;
  transform:rotate(0deg);
  font-weight:700;
  line-height:1;
}

.nav-caret.is-open{
  transform:rotate(90deg);
}

/* mobile */
@media screen and (max-width:767px){
  .navbar{
    width:100%;
  }

  .navbar.active{
    display:block !important;
  }

  .navbar > ul:not(.dropdown-menu){
    display:block;
    border-top:1px solid #f2f2f2;
    margin-top:1rem;
    padding-top:.5rem;
  }

  .navbar > ul:not(.dropdown-menu) > li > a.navbar-link{
    display:flex;
    justify-content:space-between;
    width:100%;
    padding:.65rem 0 !important;
  }

  .dropdown-menu{
    position:static;
    min-width:100%;
    width:100%;
    margin-top:.25rem;
    margin-bottom:.75rem;
    box-shadow:none;
    border:1px solid #f2f2f2;
    padding:.35rem 0;
  }

  .dropdown-menu .navbar-link{
    padding:.55rem 1rem !important;
  }
}
/* =========================
   BLOG
   Mengikuti warna dan komponen utama BlueSSH
   ========================= */

.blog-header{
  padding-top:2.75rem;
  padding-bottom:2.75rem;
}

.blog-header__title{
  margin-bottom:1.25rem;
}

.blog-header__description{
  max-width:720px;
  margin:0 auto;
  color:rgba(255,255,255,.86);
}

.blog-section{
  padding-top:2.75rem;
  padding-bottom:4.25rem;
}

.blog-ad{
  width:100%;
  text-align:center;
}

.blog-ad_top{
  margin-bottom:2rem;
}

.blog-ad_bottom{
  margin-top:1rem;
}

.blog-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:2rem;
}

.blog-category-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
}

.blog-category-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:.45rem 1rem;
  border:1px solid #e3e7ee;
  border-radius:9999px;
  background:#fff;
  color:#555 !important;
  font-size:.875rem;
  font-weight:500;
  line-height:1.2;
  text-decoration:none !important;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:all .2s ease;
}

.blog-category-link:hover{
  border-color:#b8c8ee;
  background:#f2f6ff;
  color:#3867d6 !important;
}

.blog-category-link.is-active{
  border-color:#3867d6;
  background:#3867d6;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(56,103,214,.18);
}

.blog-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:270px;
  overflow:hidden;
  background:#fff;
  border-color:#e6e9ef;
  padding:0;
}

.blog-card__thumbnail{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:16 / 9;
  background:#e9eef8;
  text-decoration:none !important;
}

.blog-card__thumbnail img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}

.blog-card:hover .blog-card__thumbnail img{
  transform:scale(1.035);
}

.blog-card__body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  padding:1.5rem;
}

.blog-card:hover{
  border-color:#cbd7f1;
  transform:translateY(-3px);
}

.blog-card__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem;
  margin-bottom:1rem;
}

.blog-card__category{
  display:inline-flex;
  align-items:center;
  padding:.25rem .65rem;
  border-radius:9999px;
  background:#edf2ff;
  color:#3867d6 !important;
  font-size:.75rem;
  font-weight:600;
  line-height:1.35;
  text-decoration:none !important;
  transition:all .2s ease;
}

.blog-card__category:hover{
  background:#3867d6;
  color:#fff !important;
}

.blog-card__date{
  color:#8a94a6;
  font-size:.78rem;
  white-space:nowrap;
}

.blog-card__title{
  margin:0 0 .7rem;
  color:#333;
  font-size:1.12rem;
  font-weight:700;
  line-height:1.45;
}

.blog-card__title a{
  color:#333 !important;
  text-decoration:none !important;
  transition:color .2s ease;
}

.blog-card__title a:hover,
.blog-card:hover .blog-card__title a{
  color:#3867d6 !important;
}

.blog-card__excerpt{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  margin:0 0 1.25rem;
  color:#666;
  font-size:.9rem;
  line-height:1.7;
}

.blog-card__footer{
  margin-top:auto;
  padding-top:.15rem;
}

.blog-card__readmore{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#3867d6 !important;
  font-size:.875rem;
  font-weight:600;
  text-decoration:none !important;
  transition:gap .2s ease,color .2s ease;
}

.blog-card__readmore:hover{
  gap:.65rem;
  color:#2f58bd !important;
}

.blog-empty{
  padding:3.5rem 1.5rem;
  border:1px solid #e6e9ef;
  border-radius:.625rem;
  background:#fff;
  text-align:center;
}

.blog-empty .title-item{
  margin-bottom:.5rem;
}

.blog-empty .description{
  margin-bottom:1.25rem;
}

@media screen and (max-width:767px){
  .blog-header{
    padding-top:2.1rem;
    padding-bottom:2.1rem;
  }

  .blog-header__title{
    font-size:1.75rem;
    line-height:1.4;
  }

  .blog-header__description{
    padding:0 .5rem;
    font-size:.95rem;
    line-height:1.65;
  }

  .blog-section{
    padding-top:2rem;
    padding-bottom:3rem;
  }

  .blog-toolbar{
    justify-content:flex-start;
    margin-bottom:1.5rem;
    overflow:hidden;
  }

  .blog-category-list{
    flex-wrap:nowrap;
    justify-content:flex-start;
    width:100%;
    overflow-x:auto;
    padding-bottom:.35rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .blog-category-list::-webkit-scrollbar{
    display:none;
  }

  .blog-category-link{
    flex:0 0 auto;
  }

  .blog-card{
    min-height:0;
  }

  .blog-card__body{
    padding:1.35rem;
  }
}


/* Blog article featured image */
.article-featured-image{
  margin:0 0 2rem;
  overflow:hidden;
  border:1px solid #e6e9ef;
  border-radius:.625rem;
  background:#f3f6fb;
  box-shadow:0 8px 24px rgba(31,45,61,.07);
}

.article-featured-image img{
  display:block;
  width:100%;
  max-height:560px;
  object-fit:cover;
}

@media screen and (max-width:767px){
  .article-featured-image{
    margin-bottom:1.5rem;
    border-radius:.5rem;
  }
}


/* Blog pagination */
.blog-pagination-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  margin-top:.25rem;
  padding-top:1.5rem;
  border-top:1px solid #e8ebf1;
}

.blog-pagination-info{
  flex:0 0 auto;
  color:#7b8494;
  font-size:.82rem;
  line-height:1.5;
}

.blog-pagination-modern{
  min-width:0;
}

.blog-pagination-modern .pagination{
  justify-content:flex-end;
  margin:0;
  flex-direction:row;
}

.blog-pagination-modern .pagination__control{
  margin:0 .65rem 0 0;
  box-shadow:none;
  border-radius:.55rem;
  overflow:hidden;
}

.blog-pagination-modern .pagination__control .pagination__btn{
  height:40px;
  padding:.5rem .9rem;
  border-color:#dfe4ec;
  background:#fff;
  color:#596273 !important;
  font-size:.82rem;
  box-shadow:none;
}

.blog-pagination-modern .pagination__control .pagination__btn:hover{
  border-color:#afc0e8;
  background:#f2f6ff;
  color:#3867d6 !important;
}

.blog-pagination-modern .pagination__elements{
  flex-wrap:wrap;
  gap:.35rem;
}

.blog-pagination-modern .pagination__elements .pagination__btn{
  width:40px;
  height:40px;
  margin:0;
  border:1px solid #dfe4ec;
  border-radius:.55rem;
  background:#fff;
  color:#596273 !important;
  box-shadow:0 1px 2px rgba(31,45,61,.03);
  font-size:.84rem;
  transition:all .2s ease;
}

.blog-pagination-modern .pagination__elements .pagination__btn:hover{
  border-color:#afc0e8;
  background:#f2f6ff;
  color:#3867d6 !important;
  transform:translateY(-1px);
}

.blog-pagination-modern .pagination__elements .pagination__btn_active{
  border-color:#3867d6;
  background:#3867d6;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(56,103,214,.18);
}

.blog-pagination-modern .pagination__btn.is-disabled{
  border-color:#e8ebf1 !important;
  background:#f6f7f9 !important;
  color:#b2b9c4 !important;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none !important;
  transform:none !important;
}

@media screen and (max-width:767px){
  .blog-pagination-wrap{
    flex-direction:column;
    align-items:stretch;
    gap:.85rem;
    margin-top:0;
    padding-top:1.15rem;
  }

  .blog-pagination-info{
    text-align:center;
  }

  .blog-pagination-modern .pagination{
    flex-direction:column;
    margin:0;
  }

  .blog-pagination-modern .pagination__control{
    margin:0 0 .65rem;
    justify-content:center;
  }

  .blog-pagination-modern .pagination__control .pagination__btn{
    height:38px;
    padding:.45rem .8rem;
  }

  .blog-pagination-modern .pagination__elements{
    justify-content:center;
  }

  .blog-pagination-modern .pagination__elements .pagination__btn{
    width:38px;
    height:38px;
  }
}