/* ==========================================================================
   Yapay zekâ ve otomasyon konumlandırma bölümleri (ana sayfa, Faz 2)
   --------------------------------------------------------------------------
   Tüm kurallar .ai-block altına kapsanmıştır; tema stillerine karışmaz.
   Marka rengi ve tipografi mevcut token'lardan alınır, yeniden tanımlanmaz.
   ========================================================================== */

.ai-block {
    --ai-ink: #1d2026;
    --ai-muted: #5f6672;
    --ai-line: #e3e6ec;
    --ai-surface: #ffffff;
    --ai-tint: #f6f7f9;
    --ai-accent: var(--primary-color);
    --ai-accent-soft: rgba(236, 106, 42, .09);
    --ai-accent-line: rgba(236, 106, 42, .28);

    /* Marka turuncusu (#EC6A2A) beyaz üzerinde 3.15:1 kontrast veriyor; küçük
       metin için WCAG AA eşiği 4.5:1. Dolgu, çerçeve ve dekoratif işaretlerde
       marka rengi korunur, METİN için bu koyu ton kullanılır: beyazda 5.19,
       açık zeminde 4.85, yumuşak turuncuda 4.54. */
    --ai-accent-text: #b44e17;

    /* Tipografi ölçeği. Önceden bölümler arasında .74 ile 1.3rem arasında
       on altıya yakın farklı değer vardı; sayfa bu yüzden bulanık okunuyordu.
       Beş kademe: etiket, gövde, başlık, giriş, çapa başlık. */
    --ai-text-xs: .8125rem;
    --ai-text-sm: .9375rem;
    --ai-text-md: 1.0625rem;
    --ai-text-lg: 1.1875rem;
    --ai-text-xl: 1.375rem;

    padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0;
    font-family: var(--primary-font);
    color: var(--ai-ink);
}

/* Tema her bölüme konumuna göre zemin atıyor:
   section:nth-child(N):not(.elementor-element) ve ilk iki bölüm için dört
   :not() taşıyan daha da ağır bir varyant. Bu seçiciler sınıf tabanlı
   kurallarımızı yeniyor ve yedi bölüm de aynı gri kalıyordu. Zemin, tema
   kuralının konuma bağlı olması nedeniyle özgüllük yarışına girmeden
   bilinçli olarak ezilir. Yalnızca bu iki bildirim important taşır. */
section.ai-block {
    background-color: var(--ai-surface) !important;
}

section.ai-block--tint {
    background-color: var(--ai-tint) !important;
}

.ai-block__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 clamp(1.1rem, .5rem + 2vw, 2rem);
}

/* ---- Bölüm başlığı ---- */

.ai-head {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.25rem);
    max-width: 62ch;
}

.ai-head--wide {
    max-width: none;
}

.ai-eyebrow {
    font-size: var(--ai-text-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ai-accent-text);
    margin: 0;
}

.ai-block h2.ai-title {
    font-family: var(--primary-font);
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.02em;
    color: var(--ai-ink);
    margin: 0;
    text-wrap: balance;
}

.ai-lede {
    font-size: var(--ai-text-lg);
    line-height: 1.65;
    color: var(--ai-muted);
    margin: 0;
}

/* ---- A. Problem: kart değil, editoryal liste ---- */

.ai-pains {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.ai-pains li {
    padding-top: 1.1rem;
    border-top: 2px solid var(--ai-accent-line);
}

.ai-pains h3 {
    font-size: var(--ai-text-md);
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 .45rem;
    color: var(--ai-ink);
}

.ai-pains p {
    margin: 0;
    font-size: var(--ai-text-sm);
    line-height: 1.6;
    color: var(--ai-muted);
}

/* ---- B. Çözüm alanları: bento; ilk kart çapa görevi görür ---- */

.ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 1rem;
}

/* Aynı bölümde akış şemasından sonra gelen kart ızgarası için ara boşluk. */
.ai-grid--spaced {
    margin-top: 1.5rem;
}

/* Dört öğeli gruplar ikişerli dizilir. Üç sütunlu ızgarada dördüncü öğe tek
   başına alt satıra düşüyor ve yanında geniş bir boşluk bırakıyordu; ayrıca
   dar sütunda başlıklar iki satıra kırıldığı için gövde metinleri sütunlar
   arasında farklı yükseklikte başlıyordu. İkişerli düzen satır sayısını
   artırmadan bu iki sorunu da gideriyor ve ölçüyü rahat okuma aralığına alıyor. */
@media (min-width: 860px) {
    .ai-pains,
    .ai-grid--pairs {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ai-card {
    background: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    padding: 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ai-block--tint .ai-card {
    background: var(--ai-surface);
}

.ai-card:hover,
.ai-card:focus-within {
    border-color: var(--ai-accent-line);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -22px rgba(29, 32, 38, .5);
}

.ai-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ai-accent-soft);
    color: var(--ai-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ai-text-md);
    margin-bottom: .3rem;
}

.ai-card h3 {
    font-size: var(--ai-text-md);
    font-weight: 600;
    line-height: 1.32;
    margin: 0;
    color: var(--ai-ink);
}

.ai-card p {
    margin: 0;
    /* Ölçü sınırı: çapa kart iki sütun kapladığı için satırlar 91 karaktere
       çıkıyordu. Rahat okuma aralığı 60-75 karakter. */
    max-width: 68ch;
    font-size: var(--ai-text-sm);
    line-height: 1.6;
    color: var(--ai-muted);
}

/* İlk kart iki sütun kaplar: yedi eşit kart ızgarası tekdüze görünüyordu,
   çapa kart hiyerarşi kuruyor. */
@media (min-width: 860px) {
    .ai-grid--bento {
        grid-template-columns: repeat(3, 1fr);
    }

    .ai-grid--bento > .ai-card:first-child {
        grid-column: span 2;
        background: var(--ai-ink);
        border-color: var(--ai-ink);
    }

    .ai-grid--bento > .ai-card:first-child h3 {
        color: #fff;
        font-size: var(--ai-text-xl);
    }

    .ai-grid--bento > .ai-card:first-child p {
        color: rgba(255, 255, 255, .74);
    }

    .ai-grid--bento > .ai-card:first-child .ai-card__icon {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }
}

/* ---- C. Sektörler ---- */

.ai-sectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.ai-sector {
    background: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    padding: 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.ai-sector h3 {
    font-size: var(--ai-text-md);
    font-weight: 700;
    margin: 0;
    color: var(--ai-ink);
}

.ai-sector > p {
    margin: 0;
    font-size: var(--ai-text-sm);
    line-height: 1.6;
    color: var(--ai-muted);
}

.ai-sector ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.ai-sector li {
    position: relative;
    padding-left: 1.15rem;
    font-size: var(--ai-text-sm);
    line-height: 1.55;
    color: var(--ai-muted);
}

.ai-sector li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ai-accent);
}

.ai-sectors-note {
    margin: 1.5rem 0 0;
    font-size: var(--ai-text-sm);
    color: var(--ai-muted);
}

/* ---- D. Entegrasyon: akış şeması ---- */

.ai-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(1rem, .5rem + 2vw, 2.25rem);
}

@media (max-width: 820px) {
    .ai-flow {
        grid-template-columns: 1fr;
    }
}

.ai-flow__panel {
    background: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    padding: 1.4rem;
}

.ai-flow__panel h3 {
    font-size: var(--ai-text-xs);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ai-muted);
    margin: 0 0 .9rem;
}

.ai-flow__panel--ours {
    background: var(--ai-ink);
    border-color: var(--ai-ink);
}

.ai-flow__panel--ours h3 {
    color: rgba(255, 255, 255, .6);
}

.ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.ai-chip {
    font-size: var(--ai-text-xs);
    font-weight: 500;
    padding: .38rem .7rem;
    border-radius: 7px;
    background: var(--ai-tint);
    border: 1px solid var(--ai-line);
    color: var(--ai-ink);
}

.ai-flow__panel--ours .ai-chip {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

.ai-flow__link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ai-accent);
    font-size: 1.7rem;
    line-height: 1;
}

@media (max-width: 820px) {
    .ai-flow__link {
        transform: rotate(90deg);
        padding: .35rem 0;
    }
}

.ai-flow-note {
    margin: 1.5rem auto 0;
    text-align: center;
    max-width: 60ch;
    font-size: var(--ai-text-sm);
    line-height: 1.6;
    color: var(--ai-muted);
}

/* ---- E. Öncesi / sonrası ---- */

.ai-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.ai-compare__col {
    border-radius: 14px;
    padding: 1.5rem 1.45rem;
    border: 1px solid var(--ai-line);
    background: var(--ai-surface);
}

.ai-compare__col--after {
    border-color: var(--ai-accent-line);
    background: var(--ai-accent-soft);
}

.ai-compare__col h3 {
    font-size: var(--ai-text-xs);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: var(--ai-muted);
}

.ai-compare__col--after h3 {
    color: var(--ai-accent-text);
}

.ai-compare ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.ai-compare li {
    font-size: var(--ai-text-sm);
    line-height: 1.55;
    color: var(--ai-ink);
    padding-left: 1.5rem;
    position: relative;
}

.ai-compare li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.ai-compare__col--before li {
    color: var(--ai-muted);
}

.ai-compare__col--before li::before {
    content: "—";
    color: #b6bcc7;
}

.ai-compare__col--after li::before {
    content: "→";
    color: var(--ai-accent);
}

/* ---- F. ROI: ölçüm çerçevesi, rakam vitrini değil ---- */

.ai-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--ai-line);
    border: 1px solid var(--ai-line);
    border-radius: 14px;
    overflow: hidden;
}

.ai-metric {
    background: var(--ai-surface);
    padding: 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ai-metric h3 {
    font-size: var(--ai-text-md);
    font-weight: 600;
    margin: 0;
    color: var(--ai-ink);
}

.ai-metric p {
    margin: 0;
    font-size: var(--ai-text-sm);
    line-height: 1.58;
    color: var(--ai-muted);
}

.ai-metric__how {
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px dashed var(--ai-line);
    font-size: var(--ai-text-xs);
    color: var(--ai-muted);
}

.ai-metric__how strong {
    color: var(--ai-ink);
    font-weight: 600;
}

/* ---- G. Çalışma modeli: içerik gerçekten sıralı olduğu için numaralı ---- */

.ai-steps {
    counter-reset: ai-step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(1.25rem, .8rem + 1.5vw, 2rem);
}

.ai-step {
    counter-increment: ai-step;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: 2.6rem;
    position: relative;
}

.ai-step::before {
    content: counter(ai-step, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--ai-text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ai-accent-text);
}

/* Bağlantı çizgisi yalnızca dört adım tek satırdayken anlam taşır. Izgara
   sarmaya başladığında satır sonundaki adımın çizgisi hiçbir yere işaret
   etmiyor, alt satıra geçen adımın altında da yatay bir çizgi kalıyordu.
   Bu genişlikte sütun sayısı sabitleniyor ki çizgi ile düzen hep uyuşsun. */
@media (min-width: 1100px) {
    .ai-steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .ai-step::after {
        content: "";
        position: absolute;
        top: 1.65rem;
        left: 0;
        right: 1.1rem;
        height: 2px;
        background: var(--ai-accent-line);
    }

    .ai-step:last-child::after {
        right: 0;
    }
}

.ai-step h3 {
    font-size: var(--ai-text-md);
    font-weight: 600;
    margin: 0;
    color: var(--ai-ink);
}

.ai-step p {
    margin: 0;
    font-size: var(--ai-text-sm);
    line-height: 1.6;
    color: var(--ai-muted);
}

/* ---- Bölüm sonu çağrısı ---- */

.ai-cta {
    margin-top: clamp(2rem, 1.2rem + 2vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ai-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .ai-card {
        transition: none;
    }

    .ai-card:hover,
    .ai-card:focus-within {
        transform: none;
    }
}

/* ==========================================================================
   Kaydırma ile yumuşak giriş
   --------------------------------------------------------------------------
   Tamamen CSS ile, kaydırmaya bağlı animasyon zaman çizelgesi kullanılarak.
   Bilinçli olarak JS kullanılmadı: sınıf ekleyip çıkaran bir çözümde betik
   veya gözlemci çalışmazsa içerik kalıcı olarak görünmez kalıyor. Burada
   varsayılan durum tam görünür; animasyon yalnızca destekleyen tarayıcıda
   ve kullanıcı hareket azaltma istemiyorsa devreye giriyor.
   Yalnızca opacity ve transform animasyonlanır.
   ========================================================================== */

@keyframes ai-giris {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ai-block__inner > * {
            animation: ai-giris linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 45%;
        }
    }
}

/* Sayfanın mevcut AOS animasyonları da hareket azaltma tercihine uysun. */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Hizmet sayfalarından yapay zekâ sayfasına bağlamsal köprü
   --------------------------------------------------------------------------
   Reklam bandı değil, sayfa içeriğinin devamı gibi okunmalı; bu yüzden
   dolgulu kutu yerine yalnızca sol kenarda vurgu çizgisi kullanılıyor.
   ========================================================================== */

.ai-crosslink {
    background: #f6f7f9;
    /* Yatay 15px, temanin .row > .col dolgusuyla ayni; boylece blok her
       genislikte sayfanin icerik kolonuyla hizali kalir ve dar ekranda
       ekran kenarina yapismaz. */
    padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) 15px;
}

.ai-crosslink__inner {
    /* Tema .container genisligi. */
    max-width: 1170px;
    margin: 0 auto;
    padding: .25rem 0 .25rem 1.15rem;
    border-left: 3px solid var(--primary-color);
    font-family: var(--primary-font);
}

.ai-crosslink__label {
    margin: 0 0 .35rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #b44e17;
}

.ai-crosslink__text {
    margin: 0 0 .6rem;
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #1d2026;
}

.ai-crosslink__links li {
    margin: 0;
}

.ai-crosslink__links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* Dar ekranda linkler alt alta duser; satir bosluu dokunma hedefleri
       arasinda en az 8px birakacak sekilde acilir. */
    gap: .75rem 1.75rem;
}

.ai-crosslink__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: 1rem;
    color: #b44e17;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tema `a:link:not(.btn)` (0,2,1) ile geliyor; erisilebilir tonu (5.19:1)
   korumak icin daha yuksek ozgullukte tekrar tanimlanir. */
.ai-crosslink a.ai-crosslink__link:link,
.ai-crosslink a.ai-crosslink__link:visited {
    color: #b44e17;
}

.ai-crosslink a.ai-crosslink__link:hover,
.ai-crosslink a.ai-crosslink__link:focus,
.ai-crosslink a.ai-crosslink__link:active {
    color: #8f3d11;
}

/* ==========================================================================
   Çözüm sayfaları (belge işleme, süreç otomasyonu ...)
   --------------------------------------------------------------------------
   Bilinçli olarak yeni bir tasarım sistemi kurulmuyor: bu sayfalar yukarıdaki
   .ai-block token ve bileşenlerini kullanır. Buraya yalnızca ana sayfada
   karşılığı olmayan sayfa seviyesi parçalar eklenir (hero, SSS, kapanış).
   ========================================================================== */

/* Koyu hero. Tema, konuma göre bölümlere zemin atadığı için burada da
   important gerekiyor; gerekçe yukarıdaki bölüm zemini notuyla aynı. */
section.ai-page-hero {
    background-color: #1d2026 !important;
    color: #fff;
    padding: clamp(6rem, 4rem + 8vw, 9rem) 0 clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
}

.ai-page-hero .ai-eyebrow {
    color: #ff9a5c;
}

.ai-page-hero h1 {
    font-family: var(--primary-font);
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 1rem;
    max-width: 20ch;
    text-wrap: balance;
}

.ai-page-hero .ai-lede {
    color: rgba(255, 255, 255, .78);
    max-width: 62ch;
}

.ai-page-hero .ai-crumb {
    margin: 0 0 1.1rem;
    font-size: var(--ai-text-sm);
    color: rgba(255, 255, 255, .6);
}

.ai-page-hero .ai-crumb a {
    color: rgba(255, 255, 255, .82);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ai-page-hero .ai-crumb a:hover,
.ai-page-hero .ai-crumb a:focus {
    color: #fff;
}

/* SSS: ayrı bir akordiyon betiği yerine yerel details/summary.
   Klavyeyle çalışır, JavaScript gerektirmez, arama motoru içeriği görür. */
.ai-faq {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: 62rem;
}

.ai-faq details {
    background: var(--ai-surface);
    border: 1px solid var(--ai-line);
    border-radius: 12px;
    padding: 0 1.2rem;
}

.ai-faq summary {
    cursor: pointer;
    padding: 1.05rem 0;
    font-size: var(--ai-text-md);
    font-weight: 600;
    color: var(--ai-ink);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ai-faq summary::-webkit-details-marker {
    display: none;
}

.ai-faq summary::after {
    content: "+";
    flex: none;
    font-weight: 700;
    color: var(--ai-accent-text);
    font-size: 1.25rem;
    line-height: 1;
}

.ai-faq details[open] summary::after {
    content: "\2212";
}

.ai-faq details > p {
    margin: 0;
    padding: 0 0 1.1rem;
    max-width: 68ch;
    font-size: var(--ai-text-sm);
    line-height: 1.65;
    color: var(--ai-muted);
}

/* Kapanış çağrısı */
section.ai-page-final {
    background-color: #1d2026 !important;
    color: #fff;
    text-align: center;
}

.ai-page-final h2.ai-title {
    color: #fff;
    margin-inline: auto;
    max-width: 22ch;
}

.ai-page-final .ai-lede {
    color: rgba(255, 255, 255, .78);
    margin-inline: auto;
    max-width: 56ch;
}

.ai-page-final .ai-cta {
    justify-content: center;
}

/* Çözüm sayfalarındaki madde listeleri */
.ai-sector-list {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .55rem 1.5rem;
    max-width: 72rem;
}

.ai-sector-list li {
    position: relative;
    padding-left: 1.15rem;
    font-size: var(--ai-text-sm);
    line-height: 1.6;
    color: var(--ai-muted);
}

.ai-sector-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ai-accent);
}

/* Not satırındaki yönlendirme bağlantısı. Tema a:link kuralı marka
   turuncusunu dayatıyor ve açık zeminde 3.15:1 kalıyor; özgüllük
   eşitlenerek erişilebilir tona çekiliyor. */
.ai-block a.ai-note-link:link,
.ai-block a.ai-note-link:visited,
.ai-sectors-note a:link,
.ai-sectors-note a:visited {
    color: var(--ai-accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}