/* ===================================
   ARTICLES BASE - SHARED STYLES
   ✅ v3: overflow-x:hidden ke .articles-container sebagai
          global safety net agar tidak ada elemen anak yang
          bisa memaksa horizontal scroll di seluruh halaman.
   ✅ v2: Tambah toast animation
   (sebelumnya di-inject via addAnimations() di base.js — anti-pattern)
   =================================== */

:root {
    --article-primary:    #193c76;
    --article-secondary:  #2c5aa0;
    --article-accent:     #4a90e2;
    --article-text:       #2d3748;
    --article-text-light: #718096;
    --article-border:     #e2e8f0;
    --article-bg-light:   #f7fafc;
    --article-white:      #ffffff;
    --article-shadow:     0 1px 3px rgba(0,0,0,.1);
    --article-shadow-lg:  0 10px 25px rgba(0,0,0,.1);
}

/* ===================================
   GENERAL LAYOUT
   =================================== */
html { scroll-behavior: smooth; }

/*
 * ✅ FIX v3: overflow-x:hidden sebagai safety net global.
 *    Jika ada elemen di dalam artikel yang lebih lebar dari viewport
 *    (URL panjang, product card, tabel, dsb.), halaman tidak akan
 *    mengalami horizontal scroll yang membuat semua teks terlihat
 *    melebar / terpotong di sisi kanan.
 */
.articles-container {
    padding: 40px 0;
    min-height: 60vh;
    overflow-x: hidden;
    max-width: 100vw;
}

.main-content {
    padding-top: 20px;
    padding-bottom: 60px;
}

/* ===================================
   BREADCRUMB
   =================================== */
.breadcrumb {
    background: transparent;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.breadcrumb-item a {
    color: var(--article-primary);
    text-decoration: none;
    transition: color .2s ease;
}

.breadcrumb-item a:hover  { color: var(--article-secondary); }
.breadcrumb-item.active   { color: var(--article-text-light); }

/* ===================================
   SIDEBAR WIDGETS
   =================================== */
.articles-sidebar { position: sticky; top: 100px; }

.sidebar-widget,
.sidebar-card {
    background: var(--article-white);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--article-shadow);
    transition: box-shadow .25s ease;
}

.sidebar-widget:hover,
.sidebar-card:hover { box-shadow: var(--article-shadow-lg); }

.sidebar-widget-title,
.sidebar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--article-text);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--article-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-widget-title i,
.sidebar-title i { color: var(--article-primary); }

/* ===================================
   CATEGORY LIST
   =================================== */
.category-list { display: flex; flex-direction: column; gap: 10px; }

.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--article-bg-light);
    border-radius: 8px;
    text-decoration: none;
    color: var(--article-text);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    border: 1px solid transparent;
}

.category-item:hover,
.category-item.active {
    background: var(--article-primary);
    color: var(--article-white);
    transform: translateX(5px);
    border-color: var(--article-primary);
    box-shadow: 0 4px 8px rgba(25,60,118,.2);
}

.category-name { font-weight: 500; }

.category-count {
    background: var(--article-white);
    color: var(--article-primary);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    min-width: 32px;
    text-align: center;
}

/* ===================================
   TAG CLOUD
   =================================== */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }

.tag-item {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--article-bg-light);
    border-radius: 20px;
    text-decoration: none;
    color: var(--article-text);
    font-size: .9rem;
    white-space: nowrap;
    transition: background-color .2s ease, transform .2s ease;
    border: 1px solid transparent;
}

.tag-item:hover {
    background: var(--article-primary);
    color: var(--article-white);
    border-color: var(--article-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(25,60,118,.15);
}

/* ===================================
   FEATURED ARTICLES
   =================================== */
.featured-list { display: flex; flex-direction: column; gap: 12px; }

.featured-item,
.featured-article-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--article-bg-light);
    border-radius: 8px;
    text-decoration: none;
    color: var(--article-text);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    border: 1px solid transparent;
}

.featured-item:hover,
.featured-article-item:hover {
    background: var(--article-primary);
    color: var(--article-white);
    border-color: var(--article-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(25,60,118,.2);
}

.featured-thumb,
.featured-article-image {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.featured-item:hover .featured-thumb,
.featured-article-item:hover .featured-article-image { transform: scale(1.05); }

.featured-info,
.featured-article-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* ✅ FIX: prevent flex child from overflowing */
}

.featured-title,
.featured-article-title {
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    word-break: break-word; /* ✅ FIX */
}

.featured-meta,
.featured-article-date {
    font-size: .8rem;
    opacity: .8;
    display: flex;
    gap: 12px;
}

.featured-meta span { display: flex; align-items: center; gap: 4px; }

/* ===================================
   EMPTY STATE
   =================================== */
.empty-state,
.no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--article-bg-light);
    border-radius: 12px;
    border: 2px dashed var(--article-border);
}

.empty-state i,
.no-results-icon  { font-size: 4rem; color: var(--article-border); margin-bottom: 20px; }

.empty-state h4,
.no-results-title { font-size: 1.5rem; font-weight: 600; color: var(--article-text); margin-bottom: 10px; }

.empty-state p,
.no-results-text  { color: var(--article-text-light); margin-bottom: 0; }

/* ===================================
   LOADING STATE
   =================================== */
.loading-spinner { display: flex; justify-content: center; align-items: center; padding: 40px; }

.spinner-border { width: 3rem; height: 3rem; border-width: .3rem; color: var(--article-primary); }

/* ===================================
   TOAST NOTIFICATION
   ✅ Dipindah dari addAnimations() di base.js (anti-pattern)
   =================================== */
.articles-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 9999;
    opacity: 0;
    transform: translateX(calc(100% + 24px));
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    max-width: calc(100vw - 40px); /* ✅ FIX: tidak overflow di mobile */
    word-break: break-word;
}

.articles-toast--success { background: #10b981; }
.articles-toast--error   { background: #ef4444; }
.articles-toast--warning { background: #f59e0b; }

.articles-toast--visible {
    opacity: 1;
    transform: translateX(0);
}

/* ===================================
   UTILITY CLASSES
   =================================== */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===================================
   FOCUS STATES (Accessibility)
   =================================== */
.category-item:focus,
.tag-item:focus,
.featured-item:focus {
    outline: 2px solid var(--article-accent);
    outline-offset: 2px;
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 992px) {
    .articles-sidebar { position: static; margin-top: 40px; }
    .sidebar-widget, .sidebar-card { margin-bottom: 20px; }
}

@media (max-width: 768px) {
    .main-content { padding-top: 15px; padding-bottom: 40px; }
    .sidebar-widget, .sidebar-card { padding: 20px; margin-bottom: 16px; }
    .featured-thumb, .featured-article-image { width: 60px; height: 60px; }
    .featured-title, .featured-article-title { font-size: .85rem; }
    .category-item { padding: 10px 12px; }
    .category-name { font-size: .9rem; }
    .empty-state, .no-results { padding: 40px 15px; }
    .empty-state i, .no-results-icon { font-size: 3rem; }
    .empty-state h4, .no-results-title { font-size: 1.25rem; }
}

@media (max-width: 480px) {
    .sidebar-widget-title, .sidebar-title { font-size: 1rem; }
    .featured-meta, .featured-article-date { font-size: .75rem; gap: 8px; }
    .category-item { padding: 8px 10px; }
    .tag-item { padding: 6px 12px; font-size: .85rem; }
}

/* ===================================
   PRINT
   =================================== */
@media print {
    .sidebar-widget, .sidebar-card,
    .pagination, .breadcrumb { display: none; }
}