/*
Theme Name: superfasttheme-beninginfo
Theme URI: https://github.com/asepnoerjaman/superfasttheme
Author: asepnoerjaman
Description: Ultra-fast, Headless-like speed WordPress Theme. Mobile First.
Version: 2.0
Text Domain: superfasttheme

NON-CRITICAL CSS - Dimuat terakhir setelah critical.css
Berisi CSS untuk Horizontal Grid, Footer, dan elemen non-kritis lainnya
*/

/* ==========================================
   FONT DECLARATIONS - Must be in main stylesheet for correct paths
   ========================================== */

/* ==========================================
   CSS NON-CRITICAL (Horizontal Grid, Footer, dll)
   CSS Variabel dan Font Declarations telah dipindahkan ke critical.css
   ========================================== */

/* ==========================================
   CSS Khusus untuk Horizontal Grid
   Dipindahkan dari inline style di index.php
   untuk optimasi dan maintainability
   ========================================== */

/* Grid sections - Performance optimization */
.grid-static {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  padding-top: var(--spacing-xl);
  content-visibility: auto;
  contain-intrinsic-size: 400px;
}

.grid-sec {
  padding: var(--spacing-xl) 0;
  margin: 0;
}

.grid-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid section title */
.grid-section-title {
  font-family: var(--font-family-heading);
  padding: var(--spacing-xs) 0 0 var(--spacing-xs);
  font-size: var(--font-size-title-grid);
  line-height: 1.4;
  font-weight: var(--font-weight-bold);
  color: var(--contrast);
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Grid card title (different from grid section title) */
.grid-card-title {
  font-size: var(--font-size-title-grid);
  line-height: 1.4;
  font-weight: var(--font-weight-semibold);
  color: var(--base);
  margin: var(--spacing-sm) 0;
  padding: 0;
}

.grid-head a {
  font-size: var(--font-size-xs);
  color: var(--primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  padding: var(--spacing-xs);
}

/* Images and media for grid */
.grid-img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
}

.grid-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transform-origin: center center;
}

/* Grid card styling */
.grid-card {
  background: var(--bg);
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* Grid card link styling */
.grid-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.grid-card a:hover {
  color: inherit;
  text-decoration: none;
}

/* Grid card content padding */
.grid-card .grid-img-wrap + .grid-card-title,
.carousel-card .grid-card-title {
    margin-top: var(--spacing-md);
    padding: 0;
}

/* Responsive for grid - Fixed 3 columns for all devices */
.grid-static {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 768px) {
  .grid-card-title {
    font-size: var(--font-size-title-grid-desktop);
  }
}

@media (max-width: 767px) {
  .grid-card-title {
    font-size: 14px;
  }
}

/* Hover states for grid */
.grid-head a:hover {
  color: var(--primary);
}

/* ==========================================
   CSS Dipindahkan dari Inline Styles
   Sumber: index.php dan singular.php
   Duplikasi telah dihapus untuk menghindari redundansi
   ========================================== */

/* Font declarations dan CSS Custom Properties telah dipindahkan ke critical.css */

/* Layout */
.cnt {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 15px;
}

.grid-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxl);
  margin-top: var(--spacing-xxl);
}

.main-col {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.page-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Widgets and sidebar */
.widget {
  margin-bottom: 20px;
}

.w-title {
  border-left: none;
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: var(--spacing-md);
}

.pop-list {
    padding: var(--spacing-xl) 0;
}

.pop-item {
  display: flex;
  gap: 0;
  margin: 0;
  padding: var(--spacing-md) 0;
  align-items: center;
}

.pop-num {
  font-size: var(--font-size-popular-num);
  font-weight: var(--font-weight-bold);
  color: color-mix(in srgb, var(--base) 30%, var(--bg));
  line-height: 1;
  min-width: var(--popular-num-width);
  text-align: left;
}

.pop-title {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Banner */
.sf-bnr {
  display: block;
  margin: var(--spacing-xxl) 0;
  text-align: center;
}

/* Footer */
.site-foot {
  background: var(--contrast);
  color: var(--bg);
  padding: var(--spacing-section) 0;
  margin-top: var(--spacing-section-large);
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

.foot-rows {
  /* Single column layout */
  text-align: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--bg);
  margin: 15px 0;
}

.footer-logo img {
  max-width: 100%;
  height: auto;
  max-height: 60px;
}

.footer-logo:hover {
  color: rgba(var(--bg), 0.9);
}

.footer-menu {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin: 0;
}

.foot-head {
  font-family: var(--font-family-heading);
  border-bottom: 1px solid rgba(var(--base), 0.3);
  padding-bottom: 0;
  margin-bottom: 0;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
  color: var(--bg);
}

.foot-desc {
  font-size: inherit;
  color: rgba(var(--bg), 0.7);
  line-height: 1.6;
}

.site-foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-foot li {
  margin-bottom: var(--spacing-sm);
}

.site-foot a {
  color: rgba(var(--bg), 0.7);
  text-decoration: none;
}

.foot-copy {
  border-top: 1px solid rgba(var(--base), 0.3);
  margin-top: 0;
  padding-top: 0;
  font-size: inherit;
  text-align: center;
  color: rgba(var(--bg), 0.5);
}

/* Homepage */
.home-news-title {
  font-family: var(--font-family-heading);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  margin-bottom: var(--spacing-xs);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 767px) {
  .home-news-title {
    font-size: 16px;
    font-weight: 600;
  }
}

.home-news-title a {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
}

.home-item {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: var(--spacing-md);
  align-items: start;
  border-bottom: 1px solid #f0f0f0;
  padding: var(--spacing-xl) 0;
}

.news-meta-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: 0;
  font-size: var(--font-size-meta);
  line-height: 1;
}

.cat-label a {
  font-family: var(--font-family-heading);
  color: var(--primary);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  padding: var(--spacing-xs) 0;
  display: inline-block;
}

.date-label {
  color: #808080;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  line-height: 1;
}

@media (max-width: 767px) {
  .date-label {
    font-size: 11px;
  }
}

.date-label .dashicons {
  font-size: 14px;
  line-height: 1;
  height: 14px;
  width: 14px;
}

.date-label time {
  line-height: 1;
}


/* Pagination and buttons */
.index-wrapper {
  text-align: center;
  margin-top: var(--spacing-xxxxl);
}

.index-button {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xxxxl);
  background: var(--primary);
  color: var(--bg);
  border-radius: var(--border-radius-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.pagination {
  margin-top: var(--spacing-xxxxl);
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.pagination .page-numbers {
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--form-border);
  border-radius: var(--border-radius-small);
  color: var(--base);
  font-weight: var(--font-weight-semibold);
  margin: 0 2px;
  white-space: nowrap;
}

.pagination .page-numbers.current {
  background: var(--primary);
  color: var(--bg);
  padding: var(--spacing-md) var(--spacing-xxl);
}

/* Search filter */
.search-filter-bar {
  background: color-mix(in srgb, var(--bg) 85%, var(--base));
  border: 1px solid var(--form-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  margin: var(--spacing-xxl) 0;
}

.search-filter-form {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-wrap: wrap;
}

.search-filter-form label {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--base);
  min-width: 80px;
}

.search-filter-form select {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--form-border);
  border-radius: var(--border-radius-small);
  background: var(--bg);
  font-size: var(--font-size-small);
  min-width: 100px;
  cursor: pointer;
}

.search-filter-form select:focus {
  outline: none;
  border-color: var(--primary);
}

.filter-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--primary);
  color: var(--bg);
  border: none;
  border-radius: var(--border-radius-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-size: var(--font-size-small);
}

.clear-filter {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: color-mix(in srgb, var(--base) 40%, var(--bg));
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
}

.filter-notice {
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-small);
}

.filter-notice::before {
  content: "ℹ️ ";
  margin-right: var(--spacing-xs);
}

/* 404 page styles */
.error-404-content {
  text-align: center;
  padding: 80px 0;
}

.error-404-title {
  font-size: 72px;
  margin-bottom: var(--spacing-md);
}

.error-404-text {
  font-size: 18px;
  margin-bottom: 25px;
}

/* Tags */
.entry-tags {
  margin-top: var(--spacing-xxxxl);
  border-top: 1px solid var(--form-border);
  padding-top: var(--spacing-xl);
}

.tags-label {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-small);
  margin-right: var(--spacing-md);
  color: var(--base);
}

.entry-tags a {
  display: inline-block;
  background: color-mix(in srgb, var(--form-border) 70%, var(--bg));
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-small);
  color: var(--base);
  font-size: var(--font-size-xxs);
  margin-right: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.entry-tags a:hover {
  background: var(--secondary);
  color: var(--bg);
}

/* Topik Styling - Optimized */
.entry-topik {
  margin-bottom: var(--spacing-md);
  line-height: 1.4;
  font-size: var(--font-size-meta);
}

.entry-topik .topik-link,
.entry-topik .topik-name {
  display: inline-block;
  background: #e5e5e5;
  color: #333333;
  padding: var(--spacing-xs) var(--spacing-xs);
  border-radius: var(--border-radius-small);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  text-decoration: none;
  margin-right: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.entry-topik .topik-link a {
  color: inherit;
  text-decoration: none;
}

/* Hover state - simplified */
.entry-topik .topik-link:hover,
.entry-topik .topik-name:hover {
  background: #d5d5d5;
  color: #222222;
}

/* Hover states - simplified */
a:hover, .cat-label a:hover, .home-news-title a:hover, .pagination .page-numbers:hover, .pop-title:hover {
  color: var(--primary);
}

.search-btn:hover, .pagination .page-numbers.current:hover, .index-button:hover {
  background: var(--secondary);
  color: var(--bg);
}

/* Related News - Performance optimization */
.related-section {
  padding-top: var(--spacing-xl);
  margin-bottom:  var(--spacing-xxl);
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

.related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-md);
}

.related-item {
  display: flex;
  align-items: flex-start;
  width: calc(50% - 8px);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted #c0c0c0;
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.related-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.related-thumb {
  flex-shrink: 0;
  width: 30%;
  margin-right: var(--spacing-sm);
}

.related-thumb img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: var(--border-radius-small);
  transform: scale(1.05);
  transform-origin: center center;
}

.related-title-wrap {
  flex: 1;
}

.related-title {
  font-size: var(--font-size-small);
  line-height: 1.3;
  margin: 0 0 4px 0;
  font-weight: var(--font-weight-semibold);
}

.related-item:hover .related-title {
  color: var(--primary);
}

@media (min-width: 768px) {
  .grid-main {
    flex-direction: row;
  }

  .main-col {
    width: 769px;
  }

  .side-col {
    width: 315px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    content-visibility: auto;
    contain-intrinsic-size: 400px;
  }

  .side-col .widget {
    margin-bottom: var(--spacing-xxxxl);
  }


  .home-item {
    grid-template-columns: 24% 1fr;
    gap: var(--spacing-md);
  }

}

/* Print styles */
@media print {
  .side-col, .share-box, .site-foot, .entry-tags, .sf-bnr, .related-posts-inline {
    display: none;
  }

  p img, .entry-featured {
    width: 40%;
    margin: 0 10px 10px 0;
    float: left;
  }

  .entry-meta {
    margin-bottom: var(--spacing-xxl);
  }
}

/* ==========================================
   CSS KHUSUS UNTUK RELATED POSTS INLINE
   Dipindahkan dari inc/related-posts-inline.php
   ========================================== */

.related-posts-inline {
    margin: 20px 0;
    padding: 5px 15px;
    background: #f8f9fa;
    border-radius: 4px;
}

.related-posts-inline-label {
    font-weight: 700;
    color: var(--primary);
    font-size: 18px;
    text-transform: none;
    letter-spacing: 0.5px;
    display: inline;
}

.related-posts-inline-item {
    margin-bottom: 0;
}

.related-posts-inline-link {
    display: inline;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    line-height: 1.4;
}

.related-posts-inline-link:hover {
    text-decoration: none;
    color: #0d36c9;
}

/* Responsive adjustments for related posts inline */
@media (max-width: 768px) {
    .related-posts-inline {
        margin: 5px 0;
        padding: 12px;
    }

    .related-posts-inline-link {
        font-size: 16px;
    }
}

/* ==========================================
   CAROUSEL CSS - Horizontal Grid Carousel
   ========================================== */

/* Carousel Section */
.carousel-section {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Desktop carousel container width - match main-col width */
@media (min-width: 768px) {
    .carousel-container {
        width: 769px;
        max-width: 100%;
    }
}

.carousel-container {
    position: relative;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 100%;
    padding: 10px 0 10px 10px; /* top right bottom left - padding-right 0 */
    box-sizing: border-box;
}

.carousel-track-wrapper {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    gap: var(--spacing-md);
    transition: transform 0.5s ease;
    width: 200%;
}

.carousel-card {
    flex: 0 0 calc(16.666% - var(--spacing-md));
    width: calc(16.666% - var(--spacing-md));
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--bg);
}

/* Desktop: 3 kolom per halaman, 2 halaman total */
.carousel-track.page-1 {
    transform: translateX(0);
}

.carousel-track.page-2 {
    transform: translateX(-50%);
}

/* Carousel card link */
.carousel-card > a {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

/* Carousel card image wrap - 16:9 aspect ratio */
.carousel-card .grid-img-wrap {
    aspect-ratio: 16 / 9;
}

/* Date label styling for carousel cards */
.carousel-card .date-label {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
}

.carousel-card .date-label,
.pop-meta,
.cat-card-meta {
    color: #808080 !important;
}

/* Carousel card title */
.carousel-card .grid-card-title {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  padding: 0 var(--spacing-sm);
}

/* Pagination Dots - Position top-right */
.carousel-dots {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: var(--spacing-xs);
    z-index: 10;
    align-items: center;
}

.carousel-dot {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg);
    font-size: 16px;
}

.carousel-dot.active {
    background: var(--primary);
}

.carousel-dot:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Mobile: 2 kolom 1 row dengan carousel navigation */
@media (max-width: 767px) {
    .carousel-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: var(--spacing-md) !important;
        width: 100% !important;
    }

    /* Setiap carousel card 50% lebar (2 kolom) - dikurangi gap */
    .carousel-card {
        flex: 0 0 calc(50% - var(--spacing-md)) !important;
        width: calc(50% - var(--spacing-md)) !important;
        min-width: calc(50% - var(--spacing-md)) !important;
        display: block !important;
    }

    /* Tampilkan navigasi dots pada mobile */
    .carousel-dots {
        display: flex;
    }

    /* Pastikan carousel card wrapper membatasi overflow */
    .carousel-track-wrapper {
        overflow: hidden;
    }

    /* Pastikan container membatasi overflow */
    .carousel-container {
        overflow: hidden;
    }
}

/* ==========================================
   POPULAR POST STYLES
   ========================================== */

/* Base Styles */
.popular-post-section {
    padding: 0;
    margin-bottom: 20px;
}

.popular-post-section .section-title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 24px;
    line-height: 1.4;
    font-weight: var(--font-weight-bold);
    color: var(--contrast);
}

/* Container with border */
.popular-post-container {
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 10px;
}

/* Featured Image Full Width */
.popular-featured-image {
    width: 100%;
    aspect-ratio: 16/9;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: var(--border-radius);
    display: block;
}

.popular-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ranking List 1-5 */
.popular-items-list {
    display: grid;
    gap: 0;
}

.popular-item.row {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.popular-item.row:last-child {
    border-bottom: none;
}

.rank-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

.ranking-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #dddddd;
    font-weight: 600;
    font-size: 60px;
    line-height: 1;
}

/* Ranking 1 - same style as others */
.popular-item.row:first-child .ranking-number {
    background: transparent;
    color: #dddddd;
    font-weight: 600;
    font-size: 60px;
}

.content-column {
    min-width: 0;
}

/* Typography */
.popular-item.row .post-title {
    font-size: 15px;
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
    color: var(--base);
}

.popular-item.row .post-title a {
    color: var(--base);
    text-decoration: none;
    transition: color 0.2s ease;
}

.popular-item.row .post-title a:hover {
    color: var(--primary);
}

.popular-item.row .post-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
}

.popular-item.row .views-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Tablet & Desktop */
@media (min-width: 768px) {
    .popular-post-section {
        padding: 48px 0;
    }
}

/* Performance */
.popular-featured-image {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

.popular-item.row {
    content-visibility: auto;
    contain-intrinsic-size: 80px;
}