/* ================================================================
   assets/css/custom.css  —  Pintar EXIM News
   CSS tambahan yang tidak bisa di-handle Tailwind saja
   ================================================================ */

/* ---------- TICKER / RUNNING TEXT ---------- */
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 85s linear infinite;
}
.ticker-track:hover {
    animation-play-state: paused;
}
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- CARD HOVER ---------- */
.news-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 58, 95, 0.12);
}

/* ---------- HERO IMAGE OVERLAY ---------- */
.hero-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.10) 60%, transparent 100%);
}

/* ---------- ARTICLE CONTENT (untuk halaman detail) ---------- */
.article-body {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.article-body * {
    max-width: 100%;
}
.article-body p    { margin-bottom: 1.2rem; line-height: 1.85; }
.article-body h2   { font-size: 1.4rem; font-weight: 700; margin: 2rem 0 0.8rem; color: #1e3a5f; }
.article-body h3   { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 0.6rem; color: #1e3a5f; }
.article-body ul,
.article-body ol   { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.article-body li   { margin-bottom: 0.4rem; }
.article-body blockquote {
    border-left: 4px solid #f59e0b;
    padding: 0.8rem 1.2rem;
    margin: 1.5rem 0;
    background: #fffbeb;
    border-radius: 0 6px 6px 0;
    color: #78350f;
    font-style: italic;
}
.article-body img  { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }
.article-body a    { color: #1d4ed8; text-decoration: underline; }
.article-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.article-body pre,
.article-body code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.article-body iframe,
.article-body video {
    width: 100%;
}

@media (max-width: 640px) {
    .article-body {
        font-size: 0.96rem;
        line-height: 1.75;
    }
    .article-body h2 {
        font-size: 1.22rem;
        line-height: 1.35;
    }
    .article-body h3 {
        font-size: 1.08rem;
        line-height: 1.4;
    }
    .article-body blockquote {
        padding: 0.75rem 0.9rem;
    }
}

/* ---------- SIDEBAR IKLAN PLACEHOLDER ---------- */
.adsense-placeholder {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background: repeating-linear-gradient(
        45deg,
        #f8fafc,
        #f8fafc 10px,
        #f1f5f9 10px,
        #f1f5f9 20px
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    color: #94a3b8;
    min-height: 250px;
}

/* ---------- SCROLLBAR TIPIS ---------- */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: #f1f5f9; }
::-webkit-scrollbar-thumb  { background: #94a3b8; border-radius: 3px; }

/* ---------- UTIL ---------- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}