/* Site Analizi aracı — site tema token'larını kullanır (style.css :root) */
.sa-tool .container { max-width: 860px; }
.sa-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.sa-head h1 { margin: 10px 0 12px; }
.sa-sub { color: var(--ink-2); max-width: 640px; margin: 0 auto; line-height: 1.65; }

.sa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sa-form { max-width: 640px; margin: 0 auto; }
.sa-input-row { display: flex; gap: 10px; }
.sa-input-row input { flex: 1; min-width: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); font: inherit; font-size: 1.05rem; }
.sa-input-row input:focus { outline: none; border-color: var(--accent); }
.sa-hint { font-family: var(--mono); font-size: .74rem; color: var(--muted); text-align: center; margin: 10px 0 0; }

.sa-error { margin-top: 14px; padding: 11px 14px; border: 1px solid var(--line); border-left: 3px solid var(--err, #ff6b5a); background: var(--surface); color: var(--ink); font-size: .92rem; }

.sa-loading { max-width: 640px; margin: 28px auto 0; text-align: center; }
.sa-loading-bar { height: 2px; background: var(--line); overflow: hidden; position: relative; }
.sa-loading-bar span { position: absolute; inset: 0; width: 34%; background: var(--accent); animation: saSlide 1.3s ease-in-out infinite; }
@keyframes saSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
.sa-loading p { margin: 14px 0 0; font-family: var(--mono); font-size: .8rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .sa-loading-bar span { animation: none; width: 100%; opacity: .4; } }

.sa-result { max-width: 720px; margin: clamp(32px, 5vw, 48px) auto 0; }
.sa-score-row { display: flex; gap: clamp(18px, 3vw, 32px); align-items: center; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--line); background: var(--surface); }
.sa-score { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.sa-score strong { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; color: var(--accent-ink); line-height: 1; }
.sa-score span { font-family: var(--mono); color: var(--muted); }
.sa-host { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.sa-verdict p { margin: 0; color: var(--ink-2); line-height: 1.6; }

.sa-highlights { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
.sa-highlights li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 2px; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.55; }
.sa-highlights li::before { font-family: var(--mono); font-weight: 700; flex: none; }
.sa-highlights li.iyi::before { content: '+'; color: var(--ok, #2ea66a); }
.sa-highlights li.sorun::before { content: '!'; color: var(--err, #ff6b5a); }

.sa-gate { margin-top: 26px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--accent); background: var(--surface); }
.sa-gate h3 { margin: 0 0 8px; }
.sa-gate p { margin: 0 0 14px; color: var(--ink-2); }
.sa-gate-form { display: flex; gap: 10px; flex-wrap: wrap; }
.sa-gate-form input { flex: 1; min-width: 220px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line-2); color: var(--ink); font: inherit; }
.sa-gate-form input:focus { outline: none; border-color: var(--accent); }
.sa-privacy { font-size: .76rem; color: var(--muted); margin: 10px 0 0 !important; }

.sa-detail { margin-top: 26px; }
.sa-cat { border: 1px solid var(--line); background: var(--surface); padding: clamp(16px, 2.5vw, 22px); margin-bottom: 14px; }
.sa-cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sa-cat-head h4 { margin: 0; font-size: 1.02rem; }
.sa-cat-score { font-family: var(--mono); font-size: .82rem; color: var(--accent-ink); white-space: nowrap; }
.sa-cat-bar { height: 3px; background: var(--line); margin-bottom: 12px; }
.sa-cat-bar span { display: block; height: 100%; background: var(--accent); }
.sa-cat h5 { margin: 12px 0 6px; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 400; }
.sa-cat ul { margin: 0; padding-left: 18px; color: var(--ink-2); line-height: 1.6; }
.sa-cat li { margin-bottom: 4px; }

.sa-quickwins { margin-top: 22px; padding: clamp(16px, 2.5vw, 22px); border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); }
.sa-quickwins h3 { margin: 0 0 10px; }
.sa-quickwins ul { margin: 0; padding-left: 18px; color: var(--ink-2); line-height: 1.7; }

.sa-cta { margin-top: 26px; text-align: center; padding: clamp(18px, 3vw, 26px); border-top: 1px solid var(--line); }
.sa-cta p { color: var(--ink-2); margin: 0 0 14px; }
.sa-cta .btn { margin: 0 6px 6px 0; }

.sa-remaining { text-align: center; font-family: var(--mono); font-size: .74rem; color: var(--muted); margin-top: 18px; }

.sa-how { max-width: 720px; margin: clamp(48px, 7vw, 72px) auto 0; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.sa-how h2 { margin: 0 0 16px; }
.sa-how ol { margin: 0; padding-left: 20px; color: var(--ink-2); line-height: 1.7; }
.sa-how li { margin-bottom: 10px; }

.sa-faq .container.narrow { max-width: 720px; }

@media (max-width: 560px) {
    .sa-input-row { flex-direction: column; }
    .sa-score-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}