:root {
    --seo-dark: #0f172a;
    --seo-light: #f8fafc;
    --seo-blue: #2563eb;
    --seo-text: #334155;
}

body { background-color: var(--seo-light); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--seo-text); line-height: 1.7; }

/* 1. HERO SECTION (Dark & Text Focused) */
.seo-hero {
    position: relative; padding: 140px 0 100px; text-align: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white; overflow: hidden;
}
.hero-pattern {
    position: absolute; inset: 0; opacity: 0.1;
    background-image: radial-gradient(#475569 1px, transparent 1px);
    background-size: 30px 30px;
}

.sh-breadcrumbs {
    display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; 
    color: #94a3b8; margin-bottom: 20px; background: rgba(255,255,255,0.05);
    padding: 5px 15px; border-radius: 50px;
}
.sh-breadcrumbs a { color: #cbd5e1; text-decoration: none; transition: 0.2s; }
.sh-breadcrumbs a:hover { color: white; }

.sh-title { font-size: 3rem; lg:font-size: 4.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; letter-spacing: -1px; }
.sh-lead { font-size: 1.25rem; color: #cbd5e1; max-w-3xl mx-auto; font-weight: 400; }

/* 2. CONTENT BLOCKS (Zig-Zag) */
.content-section { padding: 80px 0; }
.zig-zag-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 80px;
}
.zig-zag-row.reverse { direction: rtl; } /* Görseli sağa/sola almak için */
.zig-zag-row.reverse .text-col { direction: ltr; } /* Metni düzelt */

.img-wrapper {
    position: relative; border-radius: 24px; overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
}
.img-wrapper img { w-100%; height: auto; display: block; transition: 0.5s; }
.img-wrapper:hover img { transform: scale(1.03); }

.text-col h2 { font-size: 2.2rem; font-weight: 800; color: var(--seo-dark); margin-bottom: 20px; line-height: 1.2; }
.text-col p { font-size: 1.05rem; color: var(--seo-text); margin-bottom: 20px; }

.check-list { list-style: none; padding: 0; margin-bottom: 30px; }
.check-list li {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
    font-weight: 600; color: #1e293b;
}
.check-list i { color: var(--seo-blue); font-size: 1.2rem; margin-top: 2px; }

.btn-text {
    font-weight: 700; color: var(--seo-blue); text-decoration: none; font-size: 1.1rem;
    display: inline-flex; align-items: center; gap: 8px; border-bottom: 2px solid transparent; transition: 0.3s;
}
.btn-text:hover { gap: 12px; border-color: var(--seo-blue); }

/* 3. INFO CARDS (Grid) */
.info-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 80px;
}
.info-card {
    background: white; padding: 30px; border-radius: 16px; border: 1px solid #e2e8f0;
    transition: 0.3s;
}
.info-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08); border-color: var(--seo-blue); }
.ic-icon {
    width: 50px; height: 50px; background: #eff6ff; color: var(--seo-blue);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 20px;
}
.ic-title { font-size: 1.25rem; font-weight: 700; color: var(--seo-dark); margin-bottom: 10px; }
.ic-text { font-size: 0.95rem; color: #64748b; }

/* 4. FAQ (Accordion) */
.faq-section { background: #f1f5f9; padding: 80px 0; border-radius: 30px; margin-bottom: 80px; }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-head { text-align: center; margin-bottom: 40px; }

.faq-item {
    background: white; border-radius: 12px; margin-bottom: 15px; overflow: hidden;
    border: 1px solid #e2e8f0;
}
.faq-question {
    padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    font-weight: 700; color: var(--seo-dark); font-size: 1.1rem; transition: 0.3s;
}
.faq-question:hover { color: var(--seo-blue); }
.faq-icon { transition: 0.3s; color: #94a3b8; }

.faq-answer {
    padding: 0 20px; max-height: 0; overflow: hidden; transition: all 0.3s ease; color: #475569; font-size: 0.95rem;
}
.faq-item.active .faq-answer { padding: 0 20px 20px 20px; max-height: 200px; }
.faq-item.active .faq-icon { transform: rotate(180deg); color: var(--seo-blue); }

/* 5. CTA BAR */
.cta-bar {
    background: var(--seo-blue); color: white; padding: 60px; border-radius: 24px;
    text-align: center; position: relative; overflow: hidden;
}
.cta-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 15px; }
.cta-btn {
    background: white; color: var(--seo-blue); padding: 15px 40px; border-radius: 12px;
    font-weight: 800; font-size: 1.1rem; display: inline-block; margin-top: 20px;
    transition: 0.3s; text-decoration: none;
}
.cta-btn:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

@media (max-width: 1024px) {
    .zig-zag-row { grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; }
    .zig-zag-row.reverse { direction: ltr; }
    .info-grid { grid-template-columns: 1fr; }
    .sh-title { font-size: 2.5rem; }
    .content-section {
        padding: 80px 20px;
    }
}