/* =====================================================
   BALKAy.net - Hizmet sayfaları (crm.css bileşenleri üzerine)
   ===================================================== */

.sv-hero { padding-bottom: 72px; }
.sv-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 28px; }
.sv-crumbs a { color: var(--text-secondary); }
.sv-crumbs a:hover { color: var(--accent-cyan); }
.sv-crumbs [aria-current] { color: var(--text-primary); }

.sv-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
.sv-hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); font-weight: 900; line-height: 1.12; margin: 16px 0 18px; letter-spacing: -0.02em; }
.sv-icon {
    width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 2rem;
    background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.25);
}
.sv-summary { background: var(--bg-card); border: 1px solid var(--border-glow); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-glow); }
.sv-summary h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-emerald); margin-bottom: 14px; }
.sv-summary ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sv-summary li { position: relative; padding-left: 26px; font-weight: 500; }
.sv-summary li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-emerald); font-weight: 800; }
.sv-summary-note { margin-top: 18px; font-size: 0.82rem; color: var(--text-muted); }

.sv-intro p { font-size: 1.12rem; line-height: 1.85; color: var(--text-secondary); margin-bottom: 18px; }

.sv-includes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sv-includes h3 { font-size: 1.02rem; margin-bottom: 8px; }
.sv-includes p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }

.sv-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.sv-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); }
.sv-steps b { display: block; margin-bottom: 4px; }
.sv-steps p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
.cx-two .crm-features { margin-top: 20px; }

.sv-related-title { font-size: 1.3rem; margin: 56px 0 18px; }
.sv-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sv-related-card {
    display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 14px; color: inherit;
    background: var(--bg-card); border: 1px solid var(--border-color); transition: var(--transition);
}
.sv-related-card:hover { border-color: var(--border-glow); transform: translateY(-3px); }
.sv-related-card b { display: block; margin-bottom: 4px; }
.sv-related-card small { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }
.sv-related-icon { font-size: 1.5rem; }

/* Merkez sayfa */
.sv-hub-head { max-width: 820px; margin-bottom: 44px; }
.sv-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sv-hub-card {
    display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius); color: inherit;
    background: var(--bg-card); border: 1px solid var(--border-color); transition: var(--transition);
}
.sv-hub-card:hover { border-color: var(--border-glow); transform: translateY(-4px); box-shadow: var(--shadow-glow); }
.sv-hub-card.featured { border-color: rgba(16, 185, 129, 0.4); background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), var(--bg-card)); }
.sv-hub-card h2 { font-size: 1.15rem; }
.sv-hub-card p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; flex: 1; }
.sv-hub-icon { font-size: 1.8rem; }
.sv-hub-more { font-size: 0.85rem; font-weight: 600; color: var(--accent-cyan); }

@media (max-width: 1100px) {
    .sv-includes { grid-template-columns: repeat(2, 1fr); }
    .sv-hub, .sv-related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .sv-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
    .sv-includes, .sv-hub, .sv-related { grid-template-columns: 1fr; }
}