/* ══════════════════════════════════════════════════════════════
   DKO Global CSS — v5c (2026-02-19)
   PHILOSOPHY: Work WITH the template, don't fight it.
   Template container = var(--container-max, 1200px) — we respect that.
   Only override what genuinely needs fixing.
   v5c: btn-secondary, hero polish, related-articles fix, hide imqc-payment
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   1. BASIC FIXES
   ══════════════════════════════════════════════════ */

body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }


/* ══════════════════════════════════════════════════
   2. JAWABAN CEPAT / QUICK ANSWER
   Nice compact box within article container.
   Both .quick-answer and .quick-answer-box variants.
   ══════════════════════════════════════════════════ */

.quick-answer-box,
.quick-answer,
.jawaban-cepat {
  display: block !important;
  margin: 16px 0 24px !important;
  padding: 16px 20px !important;
  background: #f0fdfa !important;
  border: 1px solid #ccfbf1 !important;
  border-left: 1px solid #ccfbf1 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #1e293b !important;
  box-sizing: border-box !important;
  max-width: none !important;
  width: auto !important;
}

/* Reset children: no inherited border-left, no stray backgrounds */
.quick-answer-box *,
.quick-answer *,
.jawaban-cepat * {
  border-left: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Header: icon + title on one line */
.quick-answer-box .quick-answer-header,
.quick-answer .quick-answer-header,
.quick-answer-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0d9488 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: none !important;
}

.quick-answer-header .icon,
.quick-answer-header .quick-answer-icon,
.quick-answer-icon {
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.quick-answer-header strong,
.quick-answer-header .quick-answer-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0d9488 !important;
}

/* Content text */
.quick-answer-text,
.quick-answer-content,
.quick-answer-content p,
.quick-answer-box p,
.quick-answer p {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.quick-answer a,
.quick-answer-box a,
.quick-answer-content a {
  color: #0d9488 !important;
  text-decoration: underline !important;
}

/* Hide Jawaban Singkat (duplicate) */
.direct-answer,
.jawaban-singkat,
[class*="jawaban-singkat"],
.quick-summary {
  display: none !important;
}


/* ══════════════════════════════════════════════════
   3. RELATED ARTICLES
   Clean 2-col grid, override inline styles
   Uses body prefix for higher specificity over
   inline <style id="im-global-css"> blocks.
   ══════════════════════════════════════════════════ */

body .related-articles {
  margin: 48px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

body .related-articles h2,
body .related-articles h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 16px 0 !important;
  color: #0f172a !important;
  padding: 0 !important;
  border: none !important;
}

body .related-articles ul {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body .related-articles li {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s, transform 0.15s !important;
}

body .related-articles li:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  transform: translateY(-1px) !important;
  border-color: #0d9488 !important;
}

body .related-articles li a {
  display: block !important;
  padding: 14px 16px !important;
  color: #1e293b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

body .related-articles li a:hover {
  color: #0d9488 !important;
}

/* Related Articles — expanded variant (yellow gradient) */
body .related-articles-expanded {
  margin: 32px 0 !important;
  padding: 24px !important;
  background: #f0fdfa !important;
  border: 1px solid #ccfbf1 !important;
  border-radius: 12px !important;
}

body .related-articles-expanded h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
}

body .related-articles-expanded > p {
  color: #64748b !important;
  font-size: 14px !important;
  margin: 0 0 16px 0 !important;
}

body .related-articles-expanded .articles-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

body .related-articles-expanded .article-card-mini {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  color: #1e293b !important;
  transition: box-shadow 0.15s, transform 0.15s !important;
  display: block !important;
}

body .related-articles-expanded .article-card-mini:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  transform: translateY(-1px) !important;
  border-color: #0d9488 !important;
}

body .related-articles-expanded .article-card-mini h3 {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  margin: 0 !important;
}

body .related-articles-expanded .article-card-mini:hover h3 {
  color: #0d9488 !important;
}

@media (max-width: 639px) {
  body .related-articles ul,
  body .related-articles-expanded .articles-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════
   4. DISCLOSURE / PENGUNGKAPAN
   Subtle, bottom placement. Must NOT constrain footer.
   ══════════════════════════════════════════════════ */

/* Only style disclosure divs that are NOT wrapping the footer */
.article-body .affiliate-disclosure,
.article-body + .affiliate-disclosure,
.disclosure-content,
aside.affiliate-disclosure {
  margin: 32px 0 0 !important;
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  box-sizing: border-box !important;
}

.affiliate-disclosure strong,
.disclosure-content strong {
  color: #475569 !important;
}

/* CRITICAL: When affiliate-disclosure wraps the footer (homepage bug),
   don't let it constrain the footer */
.affiliate-disclosure:has(> .site-footer),
.affiliate-disclosure:has(> footer) {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}


/* ══════════════════════════════════════════════════
   5. AUTHOR BOX
   Clean card within article container
   ══════════════════════════════════════════════════ */

.author-box,
.author-card {
  margin: 48px 0 0 !important;
  padding: 24px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

.author-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0d9488, #134e4a) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.author-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.author-title {
  font-size: 14px !important;
  color: #0d9488 !important;
  margin-top: 2px !important;
}

.author-bio {
  font-size: 14px !important;
  color: #64748b !important;
  margin-top: 8px !important;
  line-height: 1.6 !important;
}

.article-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.author-avatar-small {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0d9488, #134e4a) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Homepage author box (large variant) */
.author-box-large {
  text-align: center !important;
}

@media (max-width: 639px) {
  .author-box,
  .author-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}


/* ══════════════════════════════════════════════════
   6. FOOTER
   Let template gradient work. Just ensure grid looks good.
   ══════════════════════════════════════════════════ */

.footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 32px !important;
}

.footer-heading {
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 16px !important;
  color: #e2e8f0 !important;
}

.footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-links li {
  margin-bottom: 8px !important;
}

.footer-links li a {
  font-size: 14px !important;
  line-height: 1.6 !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s !important;
  text-decoration: none !important;
}

.footer-links li a:hover {
  opacity: 1 !important;
}

@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 639px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════
   7. BREADCRUMB
   Subtle, muted colors
   ══════════════════════════════════════════════════ */

nav[aria-label="Breadcrumb"],
.breadcrumb,
.breadcrumbs {
  font-size: 13px !important;
  color: #64748b !important;
}

.breadcrumb a {
  color: #64748b !important;
  text-decoration: none !important;
}

.breadcrumb a:hover {
  color: #0d9488 !important;
}


/* ══════════════════════════════════════════════════
   8. HERO & BUTTONS
   Polish hero fonts, fix btn-secondary visibility
   ══════════════════════════════════════════════════ */

/* Hero title — polished typography */
.hero-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}

.hero-title .highlight {
  color: #2dd4bf !important;
}

.hero-subtitle {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  opacity: 0.9 !important;
  max-width: 640px !important;
}

/* Hero stats */
.hero-stats {
  margin-top: 24px !important;
}

.hero-stats .stat-number {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* btn-secondary — teal outline, visible everywhere */
.btn.btn-secondary {
  display: inline-block !important;
  padding: 12px 28px !important;
  border: 2px solid #0d9488 !important;
  color: #0d9488 !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
  cursor: pointer !important;
}

.btn.btn-secondary:hover {
  background: #0d9488 !important;
  color: #fff !important;
}

/* On dark hero backgrounds, use white outline */
.hero .btn.btn-secondary,
.site-hero .btn.btn-secondary,
.hero-section .btn.btn-secondary,
[class*="hero"] .btn.btn-secondary {
  border-color: rgba(255,255,255,0.7) !important;
  color: #fff !important;
}

.hero .btn.btn-secondary:hover,
.site-hero .btn.btn-secondary:hover,
.hero-section .btn.btn-secondary:hover,
[class*="hero"] .btn.btn-secondary:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* btn-primary polish */
.btn.btn-primary {
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}

.btn.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}


/* ══════════════════════════════════════════════════
   9. SEMUA-ARTIKEL / CATEGORY PAGES
   Hide payment boxes, clean category headers
   ══════════════════════════════════════════════════ */

/* Hide imqc-payment in category headers — they're noise */
.category-header .imqc-payment,
.category-header .payment-info-box {
  display: none !important;
}

/* Category count badge — subtle */
.category-count {
  font-size: 14px !important;
  color: #64748b !important;
  font-weight: 400 !important;
}

/* Articles grid on semua-artikel */
.articles-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

/* Article cards in grids */
.article-card,
a.article-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  background: #fff !important;
  text-decoration: none !important;
  color: #1e293b !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
  display: block !important;
}

.article-card:hover,
a.article-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

.article-card h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
}

.article-card p {
  font-size: 14px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Category section headers */
.category-section .category-header h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

/* Category nav (horizontal filter bar) */
.category-nav {
  margin: 0 0 24px !important;
}

/* Articles hero (search section) */
.articles-hero {
  text-align: center !important;
}

.articles-hero h1 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.025em !important;
}


/* ══════════════════════════════════════════════════
   10. QUICK LINK CARDS (category pages, homepage)
   ══════════════════════════════════════════════════ */

.quick-link-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  background: #fff !important;
  text-decoration: none !important;
  color: #1e293b !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

.quick-link-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

.quick-link-card h3 {
  font-size: 16px !important;
  margin: 8px 0 4px !important;
  color: #1e293b !important;
}

.quick-link-card p {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 0 !important;
}


/* ══════════════════════════════════════════════════
   11. ADDITIONAL COMPONENTS
   ══════════════════════════════════════════════════ */

/* Pros/cons grid */
.pros-cons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.pros { background: #f0fdf4 !important; border-radius: 8px !important; padding: 16px !important; }
.cons { background: #fef2f2 !important; border-radius: 8px !important; padding: 16px !important; }

/* Tables */
table {
  border-collapse: collapse !important;
  margin: 24px 0 !important;
}

th, td {
  padding: 10px 14px !important;
  border: 1px solid #e2e8f0 !important;
  text-align: left !important;
}

th {
  background: #f8fafc !important;
  font-weight: 600 !important;
}

/* IM-CTA bar links */
#im-cta a {
  text-decoration: none !important;
  color: inherit !important;
}

#im-cta a:hover .im-cta-title {
  text-decoration: underline !important;
}

/* 100-cara ideas grid */
.ideas-grid { display: grid !important; gap: 24px !important; }

.idea-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  transition: box-shadow 0.2s !important;
}

.idea-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; }

.idea-meta {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 8px 0 12px !important;
}

.idea-meta span {
  font-size: 13px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: #f0f9ff !important;
  color: #0369a1 !important;
}


/* ══════════════════════════════════════════════════
   12. INLINE STYLE OVERRIDES
   Override problematic inline <style> blocks
   that are injected in HTML <head> by builders.
   ══════════════════════════════════════════════════ */

/* Override im-hero-fix: it wrongly sets quick-answer to max-width:1200px */
.quick-answer,
[class*="quick-answer"],
.jawaban-cepat,
[class*="jawaban"] {
  max-width: none !important;
  width: auto !important;
}

/* Override im-container-fix .section full-width blowout */
.pro-tips-section,
.faq-section {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ══════════════════════════════════════════════════
   13. MOBILE
   ══════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .pros-cons {
    grid-template-columns: 1fr !important;
  }

  .articles-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-subtitle {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  .btn.btn-secondary,
  .btn.btn-primary {
    padding: 10px 20px !important;
    font-size: 15px !important;
  }
}