/* ============================================================
   Peganom SEO Analiz — Sağlık Turizmi Odaklı
   Modern Dark Theme + Glassmorphism
   ============================================================ */

/* --- Variables --- */
:root {
    --bg-body: #06060f;
    --bg-hero: linear-gradient(160deg, #06060f 0%, #120d2e 40%, #0d1a30 70%, #06060f 100%);
    --bg-card: rgba(255, 255, 255, 0.035);
    --bg-card-hover: rgba(255, 255, 255, 0.07);
    --bg-section: #0a0a18;
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --text: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent: #06b6d4;
    --accent2: #8b5cf6;
    --gradient: linear-gradient(135deg, #06b6d4, #8b5cf6);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-glow: 0 0 60px rgba(6, 182, 212, 0.08), 0 0 120px rgba(139, 92, 246, 0.06);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--bg-body);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: #22d3ee; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input { font-family: inherit; }

/* --- Container --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(6, 6, 15, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 0 0;
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}
.nav-logo:hover { color: #fff; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}
.nav-links a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-cta {
    background: var(--gradient);
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
}
.nav-cta:hover { opacity: 0.9; }

/* ============================================================
   HERO
   ============================================================ */
#hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0 60px;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--bg-hero);
    z-index: 0;
}
.hero-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
    animation: heroPulse 15s ease-in-out infinite alternate;
}
@keyframes heroPulse {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-3%, 3%) scale(1.05); }
}
.hero-content {
    position: relative;
    z-index: 1;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    color: var(--accent);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 32px;
    letter-spacing: 0.02em;
}
#hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}
.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-desc {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto 40px;
    line-height: 1.7;
}
.hero-desc strong { color: #fff; font-weight: 600; }

/* --- Form --- */
.hero-form {
    max-width: 600px;
    margin: 0 auto 32px;
}
.input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px 6px 6px 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.input-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.input-icon { color: var(--text-muted); flex-shrink: 0; }
.input-wrapper input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1rem;
    padding: 12px 12px;
    min-width: 0;
}
.input-wrapper input::placeholder { color: var(--text-muted); }
#analyzeBtn {
    flex-shrink: 0;
    background: var(--gradient);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.2s;
}
#analyzeBtn:hover { opacity: 0.9; transform: translateY(-1px); }
#analyzeBtn:active { transform: translateY(0); }
.form-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 10px;
    text-align: left;
}

/* --- Features Row --- */
.hero-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 28px;
}
.hero-features span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================================================
   LOADING
   ============================================================ */
#loading {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 0;
}
.loading-content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 24px 0 8px;
    color: #fff;
}
.loading-url {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 36px;
    word-break: break-all;
}
.loading-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lstep {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    transition: color 0.3s;
}
.lstep.active { color: var(--accent); }
.lstep.done { color: var(--success); }
.lstep-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background 0.3s, box-shadow 0.3s;
}
.lstep.active .lstep-dot {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
.lstep.done .lstep-dot { background: var(--success); }
.lstep + .lstep::before {
    content: '';
    width: 20px; height: 1px;
    background: var(--border);
    margin-right: 8px;
}

/* ============================================================
   RESULTS — Score Header
   ============================================================ */
.results-header {
    background: linear-gradient(180deg, #0d0d20 0%, var(--bg-body) 100%);
    padding: 100px 0 40px;
}
.score-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}
.score-circle-wrap {
    position: relative;
    width: 180px; height: 180px;
    flex-shrink: 0;
}
.score-circle { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 10;
}
.score-progress {
    fill: none;
    stroke: url(#scoreGradient);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.score-circle defs { display: block; }
.score-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.score-number {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.score-of {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}
.score-info { text-align: left; }
.score-info h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    word-break: break-all;
    margin-bottom: 8px;
}
.score-label-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 16px;
}
.summary-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}
.pill-pass { background: rgba(16, 185, 129, 0.12); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.2); }
.pill-warn { background: rgba(245, 158, 11, 0.12); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.2); }
.pill-fail { background: rgba(239, 68, 68, 0.12); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
    padding: 40px 0;
}
.section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--gradient);
    border-radius: 2px;
}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.cat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
    cursor: pointer;
}
.cat-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}
.cat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.cat-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.cat-card-score {
    font-size: 1.5rem;
    font-weight: 800;
}
.cat-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.cat-card-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.cat-card-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0;
}
.cat-card-checks {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ============================================================
   PAGESPEED BOX
   ============================================================ */
.pagespeed-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    min-height: 100px;
}
.ps-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.ps-loading svg { color: var(--accent); }
.ps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.ps-metric {
    text-align: center;
    padding: 16px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
}
.ps-metric-value {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.ps-metric-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.ps-score-big {
    text-align: center;
    margin-bottom: 24px;
}
.ps-score-big .score-number {
    font-size: 3rem;
}
.ps-error {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================================
   INSIGHTS
   ============================================================ */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.insight-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.insight-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.insight-icon.high { background: rgba(239, 68, 68, 0.12); }
.insight-icon.medium { background: rgba(245, 158, 11, 0.12); }
.insight-icon.success { background: rgba(16, 185, 129, 0.12); }
.insight-icon.info { background: rgba(6, 182, 212, 0.12); }
.insight-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ============================================================
   RECOMMENDATIONS
   ============================================================ */
.recs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rec-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.rec-priority {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rec-priority.high { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.rec-priority.medium { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.rec-body { flex: 1; }
.rec-check {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.rec-text {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.5;
}
.rec-group {
    margin-bottom: 18px;
}
.rec-group-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.rec-group-count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.rec-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.rec-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.rec-effort {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.rec-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 18px;
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 14px;
}

/* ============================================================
   DETAILED CHECKS (Accordion)
   ============================================================ */
.check-group {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--bg-card);
}
.check-group-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.check-group-header:hover { background: var(--bg-card-hover); }
.check-group-icon {
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}
.check-group-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
}
.check-group-score {
    font-size: 1.1rem;
    font-weight: 700;
    margin-right: 8px;
}
.check-group-arrow {
    color: var(--text-muted);
    transition: transform 0.3s;
}
.check-group.open .check-group-arrow { transform: rotate(180deg); }
.check-group-body {
    display: none;
    padding: 0 20px 16px;
}
.check-group.open .check-group-body { display: block; }

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.check-status {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 1px;
}
.check-status.pass { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.check-status.warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.check-status.fail { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.check-detail { flex: 1; min-width: 0; }
.check-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.check-value {
    font-size: 0.8rem;
    color: var(--text-muted);
    word-break: break-word;
}
.check-rec {
    font-size: 0.8rem;
    color: var(--warning);
    margin-top: 4px;
    line-height: 1.4;
}
.check-rec.fail-rec { color: var(--danger); }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
    padding: 60px 0;
}
.cta-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--radius);
    padding: 48px;
    text-align: center;
}
.cta-icon { margin-bottom: 20px; }
.cta-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.cta-card p {
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto 28px;
}
.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.btn-primary {
    background: var(--gradient);
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: opacity 0.2s, transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); color: #fff; }
.btn-whatsapp {
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.2);
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}
.btn-whatsapp:hover { background: rgba(37, 211, 102, 0.2); color: #25d366; }

/* ============================================================
   ACTIONS BAR
   ============================================================ */
.actions-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 60px;
}
.btn-action {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
.btn-action:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: #fff;
}
.btn-action.btn-accent {
    background: var(--gradient);
    color: #fff;
    border-color: transparent;
}
.btn-action.btn-accent:hover { opacity: 0.9; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    border-top: 1px solid var(--border);
    padding: 24px 0;
    text-align: center;
}
.footer p {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.footer a { color: var(--text-secondary); }
.footer a:hover { color: var(--accent); }

/* ============================================================
   MODAL
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}
.modal-content {
    position: relative;
    background: #14142a;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
    max-width: 440px;
    width: 90%;
    text-align: center;
}
.modal-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
}
.modal-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.modal-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 24px;
}
#emailForm {
    display: flex;
    gap: 8px;
}
#emailForm input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #fff;
    padding: 12px 16px;
    font-size: 0.95rem;
    outline: none;
}
#emailForm input:focus { border-color: var(--accent); }
#emailForm .btn-primary { padding: 12px 24px; }
.modal-skip {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 16px;
    text-decoration: underline;
}
.modal-skip:hover { color: var(--text-secondary); }

/* ============================================================
   SCORE COLORS
   ============================================================ */
.score-green { color: var(--success) !important; }
.score-yellow { color: var(--warning) !important; }
.score-red { color: var(--danger) !important; }
.bar-green { background: var(--success); }
.bar-yellow { background: var(--warning); }
.bar-red { background: var(--danger); }
.stroke-green { stroke: var(--success) !important; }
.stroke-yellow { stroke: var(--warning) !important; }
.stroke-red { stroke: var(--danger) !important; }

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    body { background: #fff; color: #222; }
    .navbar, .cta-section, .actions-bar, .footer, .modal,
    #hero, #loading, .hero-features, .hero-badge { display: none !important; }
    .results-header { background: #fff; padding: 20px 0; }
    .score-hero { gap: 20px; }
    .score-number { color: #222; }
    .section-title { color: #222; }
    .cat-card, .check-group, .insight-card, .rec-item, .pagespeed-box {
        background: #f8f8f8;
        border-color: #ddd;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .pill { border-color: #ccc; }
    .check-group-body { display: block !important; }
    .container { max-width: 100%; }
}

/* ============================================================
   FEATURES SHOWCASE
   ============================================================ */
#features {
    padding: 40px 0 80px;
    position: relative;
}

/* --- Stats Bar --- */
.stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 16px;
    margin-bottom: 72px;
    flex-wrap: wrap;
}
.stat-item {
    flex: 1;
    text-align: center;
    min-width: 120px;
    padding: 8px 0;
}
.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}
.stat-label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}
.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
    flex-shrink: 0;
}

/* --- Section Heading --- */
.feat-heading {
    text-align: center;
    margin-bottom: 64px;
}
.feat-overline {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.feat-heading h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.2;
}
.feat-heading p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto;
}

/* --- Feature Rows --- */
.feat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 80px;
}
.feat-row-reverse {
    direction: rtl;
}
.feat-row-reverse > * {
    direction: ltr;
}

/* --- Feature Info --- */
.feat-info {
    padding: 8px 0;
}
.feat-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.feat-icon-blue   { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.feat-icon-cyan   { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
.feat-icon-purple { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.feat-icon-violet { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.feat-icon-amber  { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.feat-icon-green  { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.feat-icon-teal   { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }

.feat-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    padding: 4px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.feat-info h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.feat-info > p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 20px;
}
.feat-info > p strong { color: #fff; }

.feat-list {
    list-style: none;
    padding: 0;
}
.feat-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.feat-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* --- Feature Mock-ups --- */
.feat-mockup {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.4s, box-shadow 0.4s;
}
.feat-mockup:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}
.feat-mockup-highlight {
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.06);
}

.mockup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border);
}
.mockup-header-purple { background: rgba(139, 92, 246, 0.06); }
.mockup-dots {
    display: flex;
    gap: 5px;
}
.mockup-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}
.mockup-dots span:first-child { background: #ef4444; }
.mockup-dots span:nth-child(2) { background: #f59e0b; }
.mockup-dots span:last-child { background: #10b981; }
.mockup-title {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.mockup-body {
    padding: 16px;
}

/* --- Mock checks (inside mockups) --- */
.mock-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s;
}
.mock-check:last-child { margin-bottom: 0; }
.mock-check.pass { background: rgba(16, 185, 129, 0.06); }
.mock-check.warn { background: rgba(245, 158, 11, 0.06); }
.mock-check.fail { background: rgba(239, 68, 68, 0.06); }
.mc-icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}
.mock-check.pass .mc-icon { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.mock-check.warn .mc-icon { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.mock-check.fail .mc-icon { background: rgba(239, 68, 68, 0.2); color: var(--danger); }

/* --- Mock metric bars --- */
.mock-metric {
    margin-bottom: 12px;
}
.mock-metric:last-child { margin-bottom: 0; }
.mm-bar-wrap {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-bottom: 6px;
}
.mm-bar {
    height: 100%;
    border-radius: 3px;
    width: var(--w);
    transition: width 1s ease;
}
.mm-bar[data-color="green"] { background: var(--success); }
.mm-bar[data-color="yellow"] { background: var(--warning); }
.mm-bar[data-color="red"] { background: var(--danger); }
.mm-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
}
.mm-info strong { color: var(--text); }
.mm-val { color: var(--text-muted); }
.pass-text { color: var(--success); }
.warn-text { color: var(--warning); }
.fail-text { color: var(--danger); }

/* --- AI card mockup --- */
.mock-ai-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    margin-bottom: 16px;
}
.ai-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}
.ai-score-ring {
    position: relative;
    width: 80px; height: 80px;
}
.ai-ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
}

/* --- Speed mockup --- */
.mockup-body-speed {
    text-align: center;
}
.speed-score-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}
.speed-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--warning);
}
.speed-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.sp-m {
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}
.sp-v {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.sp-l {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* --- Shield mockup --- */
.mock-shield {
    text-align: center;
    padding: 16px 0;
}
.shield-score {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--success);
    margin-top: 8px;
}
.mock-sec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 16px;
}
.sec-item {
    padding: 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}
.pass-bg { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.warn-bg { background: rgba(245, 158, 11, 0.1); color: var(--warning); }

/* --- Social mockup --- */
.mock-social-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.ms-item {
    padding: 10px 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 0.75rem;
    text-align: center;
    color: var(--text-secondary);
}
.ms-icon { margin-right: 3px; }

.mock-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.mx-tag {
    padding: 6px 12px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent);
}

/* --- How It Works --- */
.how-it-works {
    margin-top: 20px;
    margin-bottom: 64px;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.step-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    position: relative;
    transition: transform 0.3s, border-color 0.3s;
}
.step-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
}
.step-num {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 32px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
}
.step-icon-wrap {
    color: var(--accent);
    margin-bottom: 16px;
}
.step-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.step-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* --- Final CTA in features → Analysis Form Section --- */
.analyze-section {
    text-align: center;
    padding: 56px 32px 48px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(139, 92, 246, 0.12);
    border-radius: var(--radius);
    scroll-margin-top: 80px;
}
.analyze-section .feat-heading { margin-bottom: 32px; }
.analyze-form { max-width: 700px; margin: 0 auto; }
.form-fields { display: flex; flex-direction: column; gap: 12px; }
.input-wrapper-url, .input-wrapper-kw {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px 6px 6px 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.input-wrapper-url:focus-within, .input-wrapper-kw:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.input-wrapper-url input, .input-wrapper-kw input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1rem;
    padding: 12px 12px;
    min-width: 0;
}
.input-wrapper-url input::placeholder, .input-wrapper-kw input::placeholder {
    color: var(--text-muted);
}
.btn-analyze {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 28px;
    font-size: 1.05rem;
}
.btn-analyze .btn-text { display: flex; align-items: center; gap: 8px; }
.form-hint {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 12px;
}
.hero-scroll-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    margin-bottom: 8px;
}

.btn-lg {
    padding: 16px 36px;
    font-size: 1rem;
}

/* ============================================================
   AI PLATFORMS GRID (Results)
   ============================================================ */
.ai-platforms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.ai-platform-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: border-color 0.3s, background 0.3s;
}
.ai-platform-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}
.ai-plat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.ai-plat-icon {
    font-size: 1.8rem;
    line-height: 1;
}
.ai-plat-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
}
.ai-plat-score {
    margin-left: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    border: 3px solid;
}
.ai-plat-score.score-good { border-color: var(--success); color: var(--success); }
.ai-plat-score.score-mid { border-color: var(--warning); color: var(--warning); }
.ai-plat-score.score-low { border-color: var(--danger); color: var(--danger); }

.ai-plat-summary {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.ai-plat-checks { display: flex; flex-direction: column; gap: 8px; }
.ai-plat-check {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: start;
    gap: 8px;
}
.ai-plat-check .aic-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 2px;
}
.aic-pass { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.aic-warn { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.aic-fail { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.ai-plat-action {
    display: block;
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(6, 182, 212, 0.06);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--accent);
    line-height: 1.5;
}

/* ============================================================
   SERP BOX (Results)
   ============================================================ */
.serp-box { min-height: 100px; }
.serp-rankings {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.serp-rank-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.serp-rank-pos {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.serp-rank-pos span {
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.serp-pos-good { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.serp-pos-mid { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.serp-pos-bad { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.serp-pos-none { background: rgba(100, 116, 139, 0.12); color: var(--text-muted); }
.serp-rank-info { flex: 1; min-width: 0; }
.serp-rank-kw {
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.serp-rank-detail {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.serp-sub-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 28px 0 12px;
}
.competitors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.comp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}
.comp-pos {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.12);
    color: var(--accent2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.comp-domain {
    font-weight: 600;
    color: #fff;
    min-width: 0;
}
.comp-title {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.paa-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.paa-item {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--text);
    display: flex;
    align-items: start;
    gap: 8px;
}
.paa-icon {
    color: var(--accent2);
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================
   KEYWORDS BOX (Results)
   ============================================================ */
.keywords-box { min-height: 60px; }
.kw-groups { display: flex; flex-direction: column; gap: 24px; }
.kw-group-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.kw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kw-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 99px;
    font-size: 0.82rem;
    color: var(--text);
    transition: border-color 0.2s;
}
.kw-tag:hover { border-color: var(--accent); }
.kw-tag .kw-freq {
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.72rem;
}
.kw-tag.kw-phrase { border-color: rgba(139, 92, 246, 0.2); }
.kw-tag.kw-phrase .kw-freq {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent2);
}

/* ============================================================
   CONTENT SUGGESTIONS BOX (Results)
   ============================================================ */
.content-suggestions-box { display: flex; flex-direction: column; gap: 24px; }
.cs-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
}
.cs-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.cs-group-icon {
    font-size: 1.2rem;
    line-height: 1;
}
.cs-group-title {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
}
.cs-current {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    word-break: break-all;
}
.cs-current strong { color: var(--text-muted); font-weight: 500; }
.cs-items { display: flex; flex-direction: column; gap: 8px; }
.cs-item {
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: start;
    gap: 8px;
}
.cs-item-example {
    background: rgba(6, 182, 212, 0.06);
    border: 1px dashed rgba(6, 182, 212, 0.2);
    color: var(--text);
}
.cs-item-warning {
    background: rgba(245, 158, 11, 0.06);
    color: var(--warning);
}
.cs-item-critical {
    background: rgba(239, 68, 68, 0.06);
    color: var(--danger);
}
.cs-item-suggestion {
    background: rgba(139, 92, 246, 0.06);
    color: var(--accent2);
}
.cs-item-must {
    background: rgba(239, 68, 68, 0.05);
    border-left: 3px solid var(--danger);
    color: var(--text);
}
.cs-item-should {
    background: rgba(245, 158, 11, 0.05);
    border-left: 3px solid var(--warning);
    color: var(--text);
}
.cs-item-nice {
    background: rgba(16, 185, 129, 0.05);
    border-left: 3px solid var(--success);
    color: var(--text);
}
.cs-icon { flex-shrink: 0; font-size: 0.85rem; }

/* ============================================================
   CONTENT GAPS (İçerik Boşlukları)
   ============================================================ */
.cg-summary {
    margin-bottom: 20px;
}
.cg-summary-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.cg-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
}
.cg-stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
}
.cg-stat-num.cg-stat-high {
    color: var(--danger);
}
.cg-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cg-completeness {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.cg-comp-num {
    font-size: 1.6rem;
    font-weight: 800;
}
.cg-comp-good { color: var(--success); }
.cg-comp-mid  { color: var(--warning); }
.cg-comp-low  { color: var(--danger); }
.cg-comp-bar {
    width: 80px;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.cg-comp-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease;
}
.cg-comp-fill.cg-comp-good { background: var(--success); }
.cg-comp-fill.cg-comp-mid  { background: var(--warning); }
.cg-comp-fill.cg-comp-low  { background: var(--danger); }
.content-gaps-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cg-category {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.cg-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(99, 102, 241, 0.04);
    border-bottom: 1px solid var(--border);
}
.cg-cat-icon { font-size: 1.1rem; }
.cg-cat-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    flex: 1;
}
.cg-cat-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--border);
    padding: 2px 8px;
    border-radius: 10px;
}
.cg-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cg-card {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.cg-card:last-child { border-bottom: none; }
.cg-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.cg-card-icon { font-size: 1rem; flex-shrink: 0; }
.cg-card-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    flex: 1;
}
.cg-impact {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cg-card-why {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 6px;
    padding-left: 26px;
}
.cg-card-action {
    font-size: 0.82rem;
    color: var(--accent);
    line-height: 1.5;
    margin-bottom: 6px;
    padding-left: 26px;
}
.cg-card-examples {
    padding-left: 26px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.cg-examples-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.cg-example-item {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.6;
    padding: 2px 0;
}
.cg-no-gaps {
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    color: var(--success);
    font-size: 0.92rem;
    text-align: center;
}
@media (max-width: 640px) {
    .cg-summary-stats { gap: 16px; }
    .cg-stat { min-width: 70px; }
    .cg-stat-num, .cg-comp-num { font-size: 1.2rem; }
    .cg-card { padding: 12px 14px; }
    .cg-card-why, .cg-card-action, .cg-card-examples { padding-left: 0; }
}

.section-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: -4px;
    margin-bottom: 20px;
}
.serp-error-msg {
    padding: 16px 20px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: var(--radius-sm);
    color: var(--warning);
    font-size: 0.88rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .nav-links a:not(.nav-cta) { display: none; }
    .score-hero { flex-direction: column; text-align: center; }
    .score-info { text-align: center; }
    .summary-pills { justify-content: center; }
    .category-grid { grid-template-columns: 1fr 1fr; }
    .insights-grid { grid-template-columns: 1fr; }
    .actions-bar { flex-direction: column; }
    .ps-grid { grid-template-columns: 1fr 1fr; }
    .ai-platforms-grid { grid-template-columns: 1fr; }

    /* Analysis form responsive */
    .analyze-section { padding: 32px 16px; }
    .input-wrapper-url, .input-wrapper-kw { padding: 6px 8px 6px 10px; }
    .input-icon { display: none; }

    /* Features responsive */
    .feat-row, .feat-row-reverse {
        grid-template-columns: 1fr;
        gap: 28px;
        direction: ltr;
    }
    .feat-row { margin-bottom: 56px; }
    .feat-visual { order: -1; }
    .steps-grid { grid-template-columns: 1fr; gap: 32px; }
    .stats-bar { gap: 0; }
    .stat-divider { display: none; }
    .stats-bar { flex-direction: row; flex-wrap: wrap; }
    .stat-item { min-width: 50%; }
    .speed-metrics { grid-template-columns: repeat(3, 1fr); }
    .mock-sec-grid { grid-template-columns: repeat(3, 1fr); }
    .mock-social-row { grid-template-columns: repeat(3, 1fr); }
    .insight-cards-2col { grid-template-columns: 1fr; }
    .ght-keywords-grid { grid-template-columns: 1fr; }
    .kw-questions-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .category-grid { grid-template-columns: 1fr; }
    .hero-features { gap: 8px 16px; }
    .loading-steps { flex-direction: column; align-items: flex-start; }
    .lstep + .lstep::before { display: none; }
    .ps-grid { grid-template-columns: 1fr; }
    .speed-metrics { grid-template-columns: repeat(2, 1fr); }
    .mock-sec-grid { grid-template-columns: repeat(2, 1fr); }
    .mock-social-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   INSIGHT CARDS ROW (Search Intent + SEO Difficulty + Trend)
   ============================================================ */
.insight-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.insight-card-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(12px);
}
.icb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.icb-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.icb-icon {
    font-size: 1.3rem;
}
.icb-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.icb-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.icb-score-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}
.icb-big-score {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
}
.icb-of {
    font-size: 0.9rem;
    color: var(--text-muted);
}
.icb-bar {
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.icb-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease;
    width: 0;
}
.diff-easy    { color: var(--success); }
.diff-medium  { color: var(--warning); }
.diff-hard    { color: var(--danger); }
.diff-bar-easy   { background: var(--success); }
.diff-bar-medium { background: var(--warning); }
.diff-bar-hard   { background: var(--danger); }

.intent-box { border-top: 3px solid var(--accent); }
.difficulty-box { border-top: 3px solid var(--danger); }
.insight-cards-2col { grid-template-columns: 1fr 1fr; }

/* ============================================================
   GLOBAL HEALTH TOURISM — LANGUAGE TABS & CONTENT
   ============================================================ */
.ght-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}
.ght-subtitle-sm {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.ght-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.ght-tabs-sm {
    margin-bottom: 12px;
}
.ght-tab {
    padding: 7px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ght-tab:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    background: rgba(6,182,212,0.06);
}
.ght-tab.active {
    background: rgba(6,182,212,0.15);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.ght-tabs-sm .ght-tab {
    padding: 5px 10px;
    font-size: 0.75rem;
}
.ght-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(12px);
}
.ght-country-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}
.ght-country-header-sm {
    margin-bottom: 12px;
    padding-bottom: 8px;
}
.ght-flag {
    font-size: 1.5rem;
}
.ght-country-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ght-count {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--accent);
    background: rgba(6,182,212,0.1);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}
.ght-keywords-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}
.ght-keyword-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    transition: background 0.2s;
}
.ght-keyword-item:hover {
    background: rgba(255,255,255,0.06);
}
.ght-keyword-num {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.78rem;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.ght-keyword-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.4;
    flex: 1;
}

/* ── Inline status badge on each item ── */
.ght-status-badge {
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 7px;
    flex-shrink: 0;
    line-height: 1;
}
.ght-st-found  { color: #22c55e; background: rgba(34,197,94,0.12); }
.ght-st-partial { color: #eab308; background: rgba(234,179,8,0.12); }
.ght-st-missing { color: #ef4444; background: rgba(239,68,68,0.12); }

.ght-item-found  { border-left: 3px solid rgba(34,197,94,0.35); }
.ght-item-partial { border-left: 3px solid rgba(234,179,8,0.35); }
.ght-item-missing { border-left: 3px solid rgba(239,68,68,0.25); }

/* ── Inline header stats ── */
.ght-inline-stats {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ── Summary bar above tabs ── */
.ght-summary-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 14px;
    flex-wrap: wrap;
    font-size: 0.84rem;
}
.ght-bar-pct {
    font-weight: 700;
    font-size: 0.92rem;
    padding: 3px 10px;
    border-radius: 8px;
}
.ght-bar-pct.cc-good   { color: #22c55e; background: rgba(34,197,94,0.12); }
.ght-bar-pct.cc-medium { color: #eab308; background: rgba(234,179,8,0.12); }
.ght-bar-pct.cc-low    { color: #ef4444; background: rgba(239,68,68,0.12); }
.ght-bar-stat { color: var(--text-muted); }
.ght-bar-stat.cc-found  { color: #22c55e; }
.ght-bar-stat.cc-partial { color: #eab308; }
.ght-bar-stat.cc-missing { color: #ef4444; }

/* ── Inline filters row ── */
.ght-filters {
    margin-bottom: 10px;
}

/* ── Collapsed grid (show first 20, hide rest) ── */
.ght-items-list.ght-collapsed .ght-keyword-item:nth-child(n+21) {
    display: none;
}
.ght-show-more-wrap {
    text-align: center;
    margin-top: 12px;
}
.ght-show-more-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--accent);
    padding: 8px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
    transition: background 0.2s;
}
.ght-show-more-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* ── Questions wider items ── */
.ght-items-question {
    grid-template-columns: 1fr;
}
.ght-items-question .ght-keyword-item {
    padding: 10px 16px;
}

/* ============================================================
   CONTENT COVERAGE ANALYSIS
   ============================================================ */
.cc-summary {
    display: flex;
    align-items: center;
    gap: 32px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 20px;
    backdrop-filter: blur(12px);
}
.cc-summary-score {
    text-align: center;
    min-width: 100px;
}
.cc-pct {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
}
.cc-pct-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cc-summary-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.cc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.cc-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
}
.cc-stat-lbl {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cc-good { color: var(--success); }
.cc-medium { color: var(--warning); }
.cc-low { color: var(--danger); }
.cc-found { color: var(--success); }
.cc-partial { color: var(--warning); }
.cc-missing { color: var(--danger); }

/* Language overview grid */
.cc-lang-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.cc-lang-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}
.cc-lang-flag { font-size: 1.3rem; flex-shrink: 0; }
.cc-lang-info { flex: 1; min-width: 0; }
.cc-lang-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.cc-lang-bar-wrap {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.cc-lang-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s ease;
}
.cc-lang-bar.cc-good { background: var(--success); }
.cc-lang-bar.cc-medium { background: var(--warning); }
.cc-lang-bar.cc-low { background: var(--danger); }
.cc-lang-pct { font-size: 0.88rem; font-weight: 700; min-width: 36px; text-align: right; }
.cc-lang-detail {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-width: 50px;
    text-align: right;
}

/* Category tabs */
.cc-category-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.cc-cat-tab {
    padding: 8px 18px;
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}
.cc-cat-tab:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.cc-cat-tab.active {
    background: rgba(6,182,212,0.15);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* Language sub-tabs */
.cc-lang-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.cc-tab-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    background: rgba(239, 68, 68, 0.15);
}

/* Content area */
.cc-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px 24px;
    backdrop-filter: blur(12px);
}
.cc-items-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
    flex-wrap: wrap;
}
.cc-items-stats {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cc-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
}
.cc-badge.cc-found { background: rgba(34,197,94,0.12); }
.cc-badge.cc-partial { background: rgba(234,179,8,0.12); }
.cc-badge.cc-missing { background: rgba(239,68,68,0.12); }

/* Filters */
.cc-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.cc-filter {
    padding: 5px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}
.cc-filter:hover { border-color: var(--accent); color: var(--text-secondary); }
.cc-filter.active { background: rgba(6,182,212,0.1); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Items list */
.cc-items-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 600px;
    overflow-y: auto;
}
.cc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    transition: background 0.2s;
}
.cc-item:hover { background: rgba(255,255,255,0.05); }
.cc-item-found { border-left: 3px solid var(--success); }
.cc-item-partial { border-left: 3px solid var(--warning); }
.cc-item-missing { border-left: 3px solid var(--danger); }
.cc-item-icon {
    font-size: 0.88rem;
    font-weight: 700;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.cc-item-num {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 22px;
    flex-shrink: 0;
}
.cc-item-text {
    flex: 1;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.cc-item-status {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .cc-summary { flex-direction: column; gap: 16px; text-align: center; }
    .cc-lang-overview { grid-template-columns: 1fr 1fr; }
    .cc-category-tabs { flex-wrap: wrap; }
    .cc-item-status { display: none; }
}
@media (max-width: 480px) {
    .cc-lang-overview { grid-template-columns: 1fr; }
}

/* ============================================================
   KEYWORDS + USER QUESTIONS SIDE-BY-SIDE
   ============================================================ */
.kw-questions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.kw-questions-col {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
}
.section-title-sm {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}
.user-questions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.uq-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.4;
    transition: background 0.2s;
}
.uq-item:hover {
    background: rgba(255,255,255,0.06);
}
.uq-icon {
    color: var(--accent2);
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.uq-show-more {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--accent);
    cursor: pointer;
    text-align: center;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s;
}
.uq-show-more:hover {
    background: rgba(6,182,212,0.08);
}

/* ============================================================
   CONTENT LANDSCAPE BOX
   ============================================================ */
.landscape-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 28px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ============================================================
   COMPETITORS TABLE
   ============================================================ */
.competitors-table-box {
    overflow-x: auto;
}
.comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.comp-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--glass-border);
}
.comp-table tbody td {
    padding: 14px 16px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
.comp-table tbody tr:hover td {
    background: rgba(255,255,255,0.03);
}
.comp-pos-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.82rem;
}
.comp-pos-1 { background: rgba(245,158,11,0.15); color: #f59e0b; }
.comp-pos-2 { background: rgba(6,182,212,0.15); color: var(--accent); }
.comp-pos-3 { background: rgba(139,92,246,0.15); color: var(--accent2); }
.comp-pos-other { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.comp-domain-link {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}
.comp-domain-link:hover {
    color: var(--accent);
}
.comp-auth-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}
.auth-high { background: rgba(239,68,68,0.12); color: #ef4444; }
.auth-niche { background: rgba(6,182,212,0.12); color: var(--accent); }
.auth-standard { background: rgba(255,255,255,0.06); color: var(--text-muted); }

/* ============================================================
   📱 SOCIAL PREVIEW
   ============================================================ */
#socialPreviewSection .section-subtitle { margin-bottom: 24px; }
#socialPreviewGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.sp-card { background: var(--card-bg); border-radius: 14px; border: 1px solid var(--border); overflow: hidden; }
.sp-card-label { padding: 12px 16px; font-weight: 600; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.sp-icon { font-size: 1.1rem; }
.sp-mockup { background: #1a1a2e; }
.sp-img { height: 180px; background-size: cover; background-position: center; }
.sp-no-img { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.9rem; background: rgba(255,255,255,0.03); }
.sp-body { padding: 12px 16px; }
.sp-domain { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.sp-title { font-weight: 600; font-size: 0.95rem; color: #fff; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-desc { font-size: 0.82rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-status { padding: 10px 16px; font-size: 0.82rem; font-weight: 500; }
.sp-ok { color: var(--green); }
.sp-warn { color: var(--yellow); }
.sp-google-mock { background: #0d1117; padding: 16px; }
.sp-g-url { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 4px; }
.sp-g-title { color: #8ab4f8; font-size: 1.1rem; font-weight: 500; margin-bottom: 6px; cursor: pointer; }
.sp-g-title:hover { text-decoration: underline; }
.sp-g-desc { color: #bdc1c6; font-size: 0.85rem; line-height: 1.5; }

/* ============================================================
   📊 KEYWORD DENSITY
   ============================================================ */
.kd-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.kd-table th { text-align: left; padding: 10px 12px; background: rgba(255,255,255,0.04); color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }
.kd-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.kd-table tr:hover { background: rgba(255,255,255,0.02); }
.kd-kw { font-weight: 500; max-width: 220px; word-break: break-word; }
.kd-tick { color: var(--green); font-weight: 700; }
.kd-cross { color: rgba(255,255,255,0.2); }
.kd-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 600; font-size: 0.8rem; }
.kd-ok { background: rgba(16,185,129,0.12); color: var(--green); }
.kd-high { background: rgba(239,68,68,0.12); color: #ef4444; }
.kd-low { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.kd-footer { margin-top: 12px; font-size: 0.82rem; color: var(--text-muted); }

/* ============================================================
   🌐 HREFLANG MAP
   ============================================================ */
.hf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.hf-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; transition: transform 0.2s, border-color 0.2s; }
.hf-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.hf-self { border-color: var(--accent); background: rgba(6,182,212,0.06); }
.hf-flag { font-size: 2rem; margin-bottom: 6px; }
.hf-lang { font-weight: 700; font-size: 0.95rem; }
.hf-name { font-size: 0.82rem; color: var(--text-muted); margin: 2px 0 6px; }
.hf-url { font-size: 0.72rem; color: var(--text-muted); word-break: break-all; }
.hf-badge { display: inline-block; margin-top: 8px; padding: 2px 10px; font-size: 0.72rem; border-radius: 6px; background: rgba(6,182,212,0.15); color: var(--accent); font-weight: 600; }
.hf-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.hf-issues { margin-top: 16px; }
.hf-issue { padding: 8px 12px; background: rgba(245,158,11,0.08); border-radius: 8px; margin-bottom: 6px; font-size: 0.85rem; color: var(--yellow); }

/* ============================================================
   🖼️ IMAGE ANALYSIS
   ============================================================ */
.ia-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ia-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; }
.ia-stat-val { font-size: 1.8rem; font-weight: 800; }
.ia-stat-lbl { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.ia-good { color: var(--green); }
.ia-mid { color: var(--yellow); }
.ia-bad { color: #ef4444; }
.ia-score { font-size: 2.2rem; }
.ia-formats { font-size: 0.85rem; margin-bottom: 16px; }
.ia-fmt { display: inline-block; padding: 3px 10px; border-radius: 6px; background: rgba(255,255,255,0.06); margin: 2px 4px; font-weight: 500; }
.ia-issues { font-size: 0.83rem; }
.ia-issues ul { list-style: none; padding: 0; margin-top: 8px; }
.ia-issue-item { padding: 4px 0; color: var(--text-muted); word-break: break-all; font-size: 0.8rem; }
.ia-issue-item::before { content: '⚠️ '; }

/* ============================================================
   🔗 LINK ANALYSIS
   ============================================================ */
.la-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.la-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; }
.la-stat-val { font-size: 1.8rem; font-weight: 800; }
.la-stat-lbl { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.la-stat-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.la-int .la-stat-val { color: var(--accent); }
.la-ext .la-stat-val { color: #a78bfa; }
.la-warn { border-color: rgba(245,158,11,0.3); }
.la-warn .la-stat-val { color: var(--yellow); }
.la-sub { margin-bottom: 16px; font-size: 0.85rem; }
.la-sub strong { display: block; margin-bottom: 8px; }
.la-mini-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.la-mini-table th { text-align: left; padding: 8px 10px; background: rgba(255,255,255,0.04); color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.la-mini-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.la-mini-table tr:hover { background: rgba(255,255,255,0.02); }

/* ============================================================
   🏗️ SCHEMA GENERATOR
   ============================================================ */
.sg-ok { padding: 20px; text-align: center; color: var(--green); font-size: 0.95rem; font-weight: 500; }
.sg-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.sg-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; transition: background 0.2s; }
.sg-header:hover { background: rgba(255,255,255,0.03); }
.sg-icon { font-size: 1.2rem; }
.sg-type { font-weight: 700; font-size: 0.95rem; }
.sg-reason { flex: 1; font-size: 0.82rem; color: var(--text-muted); text-align: right; }
.sg-arrow { transition: transform 0.2s; flex-shrink: 0; }
.sg-item.sg-open .sg-arrow { transform: rotate(180deg); }
.sg-body { display: none; padding: 0 16px 16px; }
.sg-item.sg-open .sg-body { display: block; }
.sg-code-wrap { position: relative; }
.sg-copy { position: absolute; top: 8px; right: 8px; padding: 4px 12px; border-radius: 6px; background: rgba(6,182,212,0.15); color: var(--accent); border: none; cursor: pointer; font-size: 0.78rem; font-weight: 600; z-index: 2; }
.sg-copy:hover { background: rgba(6,182,212,0.25); }
.sg-code { background: rgba(0,0,0,0.4); border-radius: 10px; padding: 16px; font-size: 0.8rem; line-height: 1.6; overflow-x: auto; color: #e2e8f0; white-space: pre-wrap; word-break: break-word; }
.sg-note { margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); padding: 8px 12px; background: rgba(6,182,212,0.06); border-radius: 8px; }

/* ============================================================
   💾 HISTORY
   ============================================================ */
.hist-compare { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.hist-compare-title { font-weight: 700; font-size: 1rem; margin-bottom: 16px; }
.hist-compare-grid { display: flex; align-items: center; justify-content: center; gap: 24px; }
.hist-old, .hist-new { text-align: center; }
.hist-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; }
.hist-score { font-size: 2.2rem; font-weight: 800; }
.hist-old .hist-score { color: var(--text-muted); }
.hist-new .hist-score { color: var(--accent); }
.hist-arrow { font-size: 1.4rem; font-weight: 800; padding: 8px 16px; border-radius: 10px; }
.hist-up { background: rgba(16,185,129,0.12); color: var(--green); }
.hist-down { background: rgba(239,68,68,0.12); color: #ef4444; }
.hist-same { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.hist-list-title { font-weight: 700; margin-bottom: 12px; }
.hist-list { display: flex; flex-direction: column; gap: 6px; }
.hist-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; font-size: 0.85rem; }
.hist-current { border-color: var(--accent); background: rgba(6,182,212,0.04); }
.hist-item-score { font-weight: 800; min-width: 32px; text-align: center; }
.hist-s-good { color: var(--green); }
.hist-s-mid { color: var(--yellow); }
.hist-s-bad { color: #ef4444; }
.hist-item-url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.hist-item-date { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.hist-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.88rem; }

/* ============================================================
   RESPONSIVE: New sections
   ============================================================ */
@media (max-width: 768px) {
    .insight-cards-row { grid-template-columns: 1fr; }
    .kw-questions-row { grid-template-columns: 1fr; }
    .comp-table { font-size: 0.82rem; }
    .comp-table thead th, .comp-table tbody td { padding: 10px 10px; }
    #socialPreviewGrid { grid-template-columns: 1fr; }
    .ia-stats { grid-template-columns: repeat(2, 1fr); }
    .la-stats { grid-template-columns: repeat(2, 1fr); }
    .hf-grid { grid-template-columns: repeat(2, 1fr); }
    .hist-compare-grid { gap: 12px; }
    .hist-score { font-size: 1.6rem; }
    .kd-table { font-size: 0.78rem; }
    .kd-table th, .kd-table td { padding: 8px 6px; }
}

/* ============================================================
   v14: New sections — responsive grid fix
   ============================================================ */
#robotsSitemapSection .container { max-width: 100%; }
@media (max-width: 768px) {
    #robotsSitemapBox > div { grid-template-columns: 1fr !important; }
    #cwvBox > div:first-child { flex-direction: column; }
}