/* Hepsia website audit */
.ha{
  --ha-indigo:#3E4095; --ha-deep:#24265A; --ha-tint:#EEF0FA; --ha-cyan:#00AFEF; --ha-cyan-deep:#0089BC;
  --ha-ink:#14152B; --ha-soft:#4A4B66; --ha-line:#D5DAEC;
  --ha-good:#17915A; --ha-ok:#C98A00; --ha-poor:#C8334B;
  font-family:'Inter','Segoe UI',sans-serif; color:var(--ha-ink); font-size:16px; line-height:1.55; max-width:980px; margin:0 auto;
}
.ha *, .ha *::before, .ha *::after{ box-sizing:border-box; }
.ha h3{ font-family:'Space Grotesk','Segoe UI',sans-serif; color:var(--ha-deep); font-size:1.3rem; font-weight:600; margin:0 0 10px; letter-spacing:-.01em; }

.ha-label{ display:block; font-weight:600; color:var(--ha-deep); margin-bottom:8px; }
.ha-input{ display:flex; border:2px solid var(--ha-indigo); background:#fff; }
.ha-input input{ flex:1; min-width:0; font:inherit; font-size:1.1rem; padding:16px 18px; border:0; background:transparent; color:var(--ha-ink); }
.ha-input input:focus{ outline:none; }
.ha-input:focus-within{ outline:3px solid var(--ha-cyan); outline-offset:2px; }
.ha-input .ha-btn{ border:0; }
.ha-hint{ font-size:.86rem; color:var(--ha-soft); margin:8px 0 0; }
.ha-error{ margin:12px 0 0; padding:10px 14px; border-left:4px solid var(--ha-poor); background:#FDF1F3; color:#7A1A2C; font-size:.9rem; }

.ha-btn{ font:inherit; font-weight:600; font-size:.95rem; padding:14px 24px; cursor:pointer; border:2px solid var(--ha-indigo); background:transparent; color:var(--ha-deep); text-decoration:none; display:inline-block; border-radius:0; transition:background .15s ease, color .15s ease; }
.ha-btn:hover{ background:var(--ha-indigo); color:#fff; }
.ha-btn--primary{ background:var(--ha-cyan); border-color:var(--ha-cyan); color:#06263A; }
.ha-btn--primary:hover{ background:var(--ha-cyan-deep); border-color:var(--ha-cyan-deep); color:#fff; }
.ha-btn:focus-visible{ outline:3px solid var(--ha-cyan); outline-offset:2px; }
.ha-btn[disabled]{ opacity:.6; cursor:progress; }

/* progress */
.ha-progress{ display:flex; gap:20px; align-items:center; margin-top:28px; padding:22px; background:var(--ha-deep); color:#C9D3EF; }
.ha-progress strong{ color:#fff; font-family:'Space Grotesk',sans-serif; font-size:1.05rem; }
.ha-progress p{ margin:4px 0 0; font-size:.88rem; }
.ha-scan{ width:44px; height:76px; border:3px solid #fff; position:relative; overflow:hidden; flex-shrink:0; }
.ha-scan span{ position:absolute; left:0; right:0; height:2px; background:var(--ha-cyan); box-shadow:0 0 12px 2px rgba(0,175,239,.8); animation:ha-scan 1.6s ease-in-out infinite; }
@keyframes ha-scan{ 0%{ top:4px; } 50%{ top:calc(100% - 6px); } 100%{ top:4px; } }

/* results */
.ha-results{ margin-top:32px; outline:none; }
.ha-top{ display:grid; grid-template-columns:180px 1fr; gap:32px; align-items:center; margin-bottom:34px; }
.ha-shot{ margin:0; border:6px solid var(--ha-deep); border-top-width:16px; border-bottom-width:22px; background:var(--ha-tint); aspect-ratio:9/17; overflow:hidden; }
.ha-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.ha-site{ font-weight:600; color:var(--ha-deep); margin:0 0 14px; word-break:break-all; }
.ha-scores{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ha-gauge{ text-align:center; }
.ha-gauge svg{ width:100%; max-width:120px; height:auto; display:block; margin:0 auto 6px; }
.ha-gauge .track{ stroke:var(--ha-line); }
.ha-gauge .arc{ transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); transform:rotate(-90deg); transform-origin:50% 50%; }
.ha-gauge text{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:28px; }
.ha-gauge span{ font-size:.88rem; font-weight:600; color:var(--ha-deep); }
.ha-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--ha-soft); margin:14px 0 0; }
.ha-legend span::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px; }
.ha-legend .g::before{ background:var(--ha-good); } .ha-legend .o::before{ background:var(--ha-ok); } .ha-legend .p::before{ background:var(--ha-poor); }

.ha-metrics{ list-style:none; margin:0 0 34px; padding:0; border-top:1px solid var(--ha-line); }
.ha-metrics li{ display:grid; grid-template-columns:14px 1fr auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--ha-line); margin:0; }
.ha-metrics i{ width:12px; height:12px; display:block; }
.ha-metrics .good i{ background:var(--ha-good); } .ha-metrics .ok i{ background:var(--ha-ok); } .ha-metrics .poor i{ background:var(--ha-poor); } .ha-metrics .na i{ background:var(--ha-line); }
.ha-metrics strong{ display:block; font-weight:600; color:var(--ha-deep); font-size:.95rem; }
.ha-metrics small{ color:var(--ha-soft); font-size:.82rem; }
.ha-metrics b{ font-family:'Space Grotesk',sans-serif; font-size:1.1rem; color:var(--ha-deep); white-space:nowrap; }

.ha-gate{ padding:26px; background:var(--ha-tint); border-left:5px solid var(--ha-cyan); margin-bottom:34px; }
.ha-gate p{ color:var(--ha-soft); margin:0 0 16px; max-width:60ch; }
.ha-lead-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.ha-lead-fields label{ display:flex; flex-direction:column; gap:6px; font-size:.86rem; font-weight:600; color:var(--ha-deep); }
.ha-lead-fields small{ font-weight:400; color:var(--ha-soft); font-size:inherit; }
.ha-lead-fields input{ font:inherit; font-weight:400; padding:12px 14px; border:1px solid var(--ha-line); background:#fff; border-radius:0; width:100%; }
.ha-lead-fields input:focus{ outline:3px solid var(--ha-cyan); outline-offset:1px; border-color:var(--ha-indigo); }
.ha-hp{ position:absolute !important; left:-9999px !important; }

.ha-fixes{ margin-bottom:34px; }
.ha-fixes ol{ margin:14px 0 0; padding:0; list-style:none; counter-reset:fix; }
.ha-fixes li{ counter-increment:fix; display:grid; grid-template-columns:40px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--ha-line); margin:0; }
.ha-fixes li::before{ content:counter(fix); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.2rem; color:var(--ha-indigo); }
.ha-fixes strong{ display:block; color:var(--ha-deep); font-weight:600; }
.ha-fixes small{ color:var(--ha-soft); font-size:.84rem; }
.ha-fixes li{ animation:ha-in .4s ease both; }
@keyframes ha-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.ha-cta{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding:26px; background:var(--ha-deep); }
.ha-cta h3{ color:#fff; margin:0 0 4px; }
.ha-cta p{ color:#C9D3EF; margin:0; font-size:.92rem; max-width:48ch; }
.ha-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.ha-cta .ha-btn:not(.ha-btn--primary){ border-color:rgba(255,255,255,.55); color:#fff; }
.ha-cta .ha-btn:not(.ha-btn--primary):hover{ background:#fff; color:var(--ha-deep); }

@media (max-width: 720px){
  .ha-input{ flex-direction:column; }
  .ha-top{ grid-template-columns:1fr; }
  .ha-shot{ width:150px; }
  .ha-scores{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ha-lead-fields{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .ha *{ animation:none !important; transition:none !important; }
}

.ha [hidden]{ display:none !important; }