/* Hesapoo SEO content blocks — matches engine.css tokens */
.hp-seo {
  --hp-primary: #2563EB;
  --hp-primary-dark: #1E40AF;
  --hp-accent: #F59E0B;
  --hp-heading: #0F172A;
  --hp-body: #334155;
  --hp-muted: #64748B;
  --hp-border: #E2E8F0;
  --hp-surface: #F8FAFC;
  --hp-bg: #FFFFFF;

  color: var(--hp-body);
  margin: 0 0 28px;
}
.hp-seo *, .hp-seo *::before, .hp-seo *::after { box-sizing: border-box; }

.hp-seo-block { margin: 0 0 30px; }
.hp-seo-block > h2 {
  font-size: 22px; line-height: 1.3; font-weight: 700;
  color: var(--hp-heading); margin: 0 0 12px;
  padding-left: 12px; border-left: 4px solid var(--hp-primary);
}
.hp-seo-block p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; }

.hp-seo-steps {
  margin: 14px 0 0; padding: 16px 16px 16px 36px;
  background: var(--hp-surface); border: 1px solid var(--hp-border);
  border-radius: 12px;
}
.hp-seo-steps li { margin: 0 0 8px; font-size: 15.5px; line-height: 1.65; }
.hp-seo-steps li:last-child { margin-bottom: 0; }

/* FAQ accordion */
.hp-faq { border: 1px solid var(--hp-border); border-radius: 12px; overflow: hidden; }
.hp-faq-item { border-bottom: 1px solid var(--hp-border); background: var(--hp-bg); }
.hp-faq-item:last-child { border-bottom: 0; }
.hp-faq-item > summary {
  cursor: pointer; list-style: none; padding: 15px 44px 15px 16px;
  font-size: 16px; font-weight: 600; color: var(--hp-heading);
  position: relative; transition: background .15s ease;
}
.hp-faq-item > summary::-webkit-details-marker { display: none; }
.hp-faq-item > summary:hover { background: var(--hp-surface); }
.hp-faq-item > summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--hp-primary); border-bottom: 2px solid var(--hp-primary);
  transform: rotate(45deg); transition: transform .2s ease;
}
.hp-faq-item[open] > summary { background: var(--hp-surface); }
.hp-faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.hp-faq-a { padding: 0 16px 16px; }
.hp-faq-a p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--hp-body); }

/* Related tools */
.hp-related {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px;
}
.hp-related-card {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 14px; border: 1px solid var(--hp-border); border-radius: 10px;
  background: var(--hp-bg); text-decoration: none;
  color: var(--hp-primary-dark); font-size: 15px; font-weight: 600; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hp-related-card:hover {
  border-color: var(--hp-primary); text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .10); transform: translateY(-1px);
}
.hp-related-card.is-soon { color: var(--hp-muted); }
.hp-related-badge {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px;
  background: #FEF3C7; color: #92400E;
}
.hp-seo-more { margin: 14px 0 0; font-size: 15.5px; }
.hp-seo-more a { color: var(--hp-primary); font-weight: 600; text-decoration: none; }
.hp-seo-more a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .hp-seo-block > h2 { font-size: 20px; }
  .hp-related { grid-template-columns: 1fr; }
}

/* Related tools — icon + name, published tools only */
.hp-related-card{display:flex;align-items:center;gap:9px}
.hp-related-icon{flex:0 0 auto;font-size:17px;line-height:1}

/* Other categories — built live from the registry */
.hp-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px}
@media(max-width:860px){.hp-cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hp-cats{grid-template-columns:1fr}}
.hp-cat{display:flex;align-items:center;gap:11px;padding:14px 15px;border-radius:13px;
  color:#fff;text-decoration:none;background:linear-gradient(135deg,#2563EB 0%,#1E40AF 100%);
  transition:transform .1s ease,box-shadow .15s ease}
.hp-cat:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.30);color:#fff}
.hp-cat-icon{font-size:20px;line-height:1}
.hp-cat-body{display:flex;flex-direction:column;line-height:1.3}
.hp-cat-body b{font-size:14.5px;color:#fff}
.hp-cat-body small{font-size:12px;color:rgba(255,255,255,.82)}