.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-220 .elementor-element.elementor-element-4e0dc95{text-align:center;}.elementor-220 .elementor-element.elementor-element-4e0dc95 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:42px;font-weight:800;color:#FFFFFF;}.elementor-widget-archive-posts .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-archive-posts .elementor-post__title, .elementor-widget-archive-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-archive-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-archive-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-archive-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-archive-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-archive-posts .elementor-post__card .elementor-post__badge{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-archive-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-archive-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-archive-posts .elementor-posts-nothing-found{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-220 .elementor-element.elementor-element-b221ed7{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-220 .elementor-element.elementor-element-b221ed7:after{content:"0.66";}.elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-post__thumbnail__link{width:100%;}.elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-post__meta-data span + span:before{content:"///";}.elementor-220 .elementor-element.elementor-element-b221ed7.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-220 .elementor-element.elementor-element-b221ed7.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-220 .elementor-element.elementor-element-b221ed7.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}.elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}@media(max-width:767px){.elementor-220 .elementor-element.elementor-element-4e0dc95 .elementor-heading-title{font-size:28px;}.elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-220 .elementor-element.elementor-element-b221ed7:after{content:"0.5";}.elementor-220 .elementor-element.elementor-element-b221ed7 .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS for archive-posts, class: .elementor-element-b221ed7 *//* ========================================
   RAHMANREVIEW ARCHIVE/POSTS GRID
   Design System Override
   ======================================== */

/* Design Tokens */
:root {
  --rr-primary: #5D4DF7;
  --rr-primary-hover: #4838E4;
  --rr-accent: #FF8A3D;
  --rr-cyan: #66E6FF;
  --rr-dark: #121826;
  --rr-text: #2F2F33;
  --rr-text-light: #6B7280;
  --rr-card: #FFFFFF;
  --rr-bg: #F7F8FC;
  --rr-border: #E8EAF3;
  --rr-shadow: 0 12px 40px rgba(15,23,42,.05);
  --rr-shadow-hover: 0 20px 60px rgba(15,23,42,.08);
  --rr-transition: .28s cubic-bezier(.4,0,.2,1);
  --rr-radius: 22px;
  --rr-radius-small: 16px;
}

/* ========================================
   1. GRID CONTAINER
   ======================================== */

/* Main posts grid */
.elementor-posts-masonry,
.elementor-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin: 0 !important;
}

/* Tablet */
@media (max-width: 991px) {
  .elementor-posts-masonry,
  .elementor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .elementor-posts-masonry,
  .elementor-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ========================================
   2. POST CARD
   ======================================== */

.elementor-post {
  background: var(--rr-card) !important;
  border: 1px solid var(--rr-border) !important;
  border-radius: var(--rr-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--rr-shadow) !important;
  transition: all var(--rr-transition) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.elementor-post:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--rr-shadow-hover) !important;
  border-color: rgba(102,230,255,.45) !important;
}

/* Remove default padding */
.elementor-post__card {
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ========================================
   3. FEATURED IMAGE
   ======================================== */

.elementor-post__thumbnail {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 16/9 !important;
  margin: 0 !important;
}

.elementor-post__thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1) !important;
}

/* Image zoom on hover */
.elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.05) !important;
}

/* Category Badge */
.elementor-post__thumbnail::before {
  content: attr(data-category);
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--rr-accent);
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(255,138,61,.3);
}

/* Fallback kalau data-category tidak ada */
.elementor-post__thumbnail::before {
  content: 'ARTIKEL';
}

/* Overlay gradient */
.elementor-post__thumbnail::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,.4), transparent);
  opacity: 0;
  transition: opacity var(--rr-transition);
}

.elementor-post:hover .elementor-post__thumbnail::after {
  opacity: 1;
}

/* ========================================
   4. POST TITLE
   ======================================== */

.elementor-post__title {
  padding: 24px 22px !important;
  margin: 0 !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.elementor-post__title a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--rr-text) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: color var(--rr-transition) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.elementor-post__title a:hover {
  color: var(--rr-primary) !important;
}

/* Mobile title size */
@media (max-width: 768px) {
  .elementor-post__title a {
    font-size: 16px !important;
  }
  
  .elementor-post__title {
    padding: 20px 18px !important;
  }
}

/* ========================================
   5. HIDE UNWANTED ELEMENTS
   ======================================== */

/* Hide excerpt */
.elementor-post__excerpt {
  display: none !important;
}

/* Hide read more button */
.elementor-post__read-more {
  display: none !important;
}

/* Hide meta (date, author) */
.elementor-post__meta-data {
  display: none !important;
}

/* Hide avatar */
.elementor-post__avatar {
  display: none !important;
}

/* ========================================
   6. PAGINATION
   ======================================== */

.elementor-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 48px !important;
  padding: 0 !important;
}

/* Page numbers */
.elementor-pagination__number,
.elementor-pagination__current,
.elementor-pagination__prev,
.elementor-pagination__next {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  min-width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  border-radius: var(--rr-radius-small) !important;
  text-decoration: none !important;
  transition: all var(--rr-transition) !important;
}

/* Default state */
.elementor-pagination__number,
.elementor-pagination__prev,
.elementor-pagination__next {
  background: var(--rr-card) !important;
  color: var(--rr-text-light) !important;
  border: 1px solid var(--rr-border) !important;
}

.elementor-pagination__number:hover,
.elementor-pagination__prev:hover,
.elementor-pagination__next:hover {
  background: var(--rr-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--rr-primary) !important;
  transform: translateY(-2px) !important;
}

/* Current/Active page */
.elementor-pagination__current,
.elementor-pagination .current {
  background: linear-gradient(135deg, var(--rr-primary), var(--rr-cyan)) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(93,77,247,.3) !important;
}

/* Prev/Next text */
.elementor-pagination__prev::before {
  content: '← ' !important;
}

.elementor-pagination__next::after {
  content: ' →' !important;
}

/* Mobile pagination */
@media (max-width: 768px) {
  .elementor-pagination {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  
  .elementor-pagination__number,
  .elementor-pagination__current,
  .elementor-pagination__prev,
  .elementor-pagination__next {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }
  
  /* Hide middle pages on mobile */
  .elementor-pagination__number:nth-child(n+4):nth-child(-n+6) {
    display: none !important;
  }
}

/* ========================================
   7. EMPTY STATE (No Posts Found)
   ======================================== */

.elementor-posts--no-posts {
  text-align: center !important;
  padding: 80px 24px !important;
  background: var(--rr-bg) !important;
  border: 2px dashed var(--rr-border) !important;
  border-radius: var(--rr-radius) !important;
}

.elementor-posts--no-posts::before {
  content: '📄';
  font-size: 64px !important;
  display: block !important;
  margin-bottom: 24px !important;
  opacity: 0.5;
}

.elementor-posts--no-posts h2,
.elementor-posts--no-posts p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--rr-text-light) !important;
  margin: 0 !important;
}

.elementor-posts--no-posts h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  color: var(--rr-text) !important;
}

.elementor-posts--no-posts p {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* ========================================
   8. LOADING STATE (Optional)
   ======================================== */

.elementor-posts-loading .elementor-post {
  animation: rrPulse 1.5s ease-in-out infinite !important;
}

@keyframes rrPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* ========================================
   9. ADDITIONAL UTILITIES
   ======================================== */

/* Smooth scroll */
html {
  scroll-behavior: smooth !important;
}

/* Focus states for accessibility */
.elementor-post__title a:focus,
.elementor-pagination__number:focus,
.elementor-pagination__prev:focus,
.elementor-pagination__next:focus {
  outline: 3px solid var(--rr-cyan) !important;
  outline-offset: 2px !important;
}

/* Print styles */
@media print {
  .elementor-post {
    break-inside: avoid !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}/* End custom CSS */