/* ==========================================================================
   Ortak içerik bölümleri (ana sayfa ve hizmet sayfaları)
   --------------------------------------------------------------------------
   Tüm kurallar .ps-block altına kapsanmıştır; tema stillerine karışmaz.
   Marka rengi ve tipografi mevcut token'lardan alınır, yeniden tanımlanmaz.
   ========================================================================== */

.ps-block {
    --ps-ink: #1d2026;
    --ps-muted: #5f6672;
    --ps-line: #e3e6ec;
    --ps-surface: #ffffff;
    --ps-tint: #f6f7f9;
    --ps-accent: var(--primary-color);
    --ps-accent-soft: rgba(236, 106, 42, .09);
    --ps-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. */
    --ps-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. */
    --ps-text-xs: .8125rem;
    --ps-text-sm: .9375rem;
    --ps-text-md: 1.0625rem;
    --ps-text-lg: 1.1875rem;
    --ps-text-xl: 1.375rem;

    padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0;
    font-family: var(--primary-font);
    color: var(--ps-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.ps-block {
    background-color: var(--ps-surface) !important;
}

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

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

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

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

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

.ps-block h2.ps-title {
    font-family: var(--primary-font);
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ps-ink);
    margin: 0;
}

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

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

.ps-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);
}

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

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

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

/* ---- B. Kart ızgarası ---- */

.ps-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. */
.ps-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) {
    .ps-pains,
    .ps-grid--pairs {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ps-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-line);
    border-radius: 6px;
    padding: 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.ps-card__icon {
    color: var(--ps-accent-text);
    display: inline-flex;
    font-size: var(--ps-text-xl);
    line-height: 1;
    margin-bottom: .2rem;
}

/* Veritabanından gelen hizmet ikonları "icon icon-xxx" sınıfıyla geliyor; tema
   genelindeki .icon kuralı (44px kutu, 44px font, display:block, margin:auto)
   kutunun içinden taşıp aynı ızgaradaki diğer kartlardan iki kat büyük
   görünüyordu. Kutunun içindeki her ikon aynı ölçüde kalsın. */
.ps-card__icon > i,
.ps-card__icon > .icon {
    width: auto;
    height: auto;
    line-height: 1;
    font-size: inherit;
    display: inline-block;
    margin: 0;
}

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

.ps-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(--ps-text-sm);
    line-height: 1.6;
    color: var(--ps-muted);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.ps-flow__panel h3 {
    font-size: var(--ps-text-sm);
    font-weight: 600;
    color: var(--ps-muted);
    margin: 0 0 .9rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

.ps-compare__col h3 {
    font-size: var(--ps-text-sm);
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--ps-muted);
}

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

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

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

.ps-compare li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 6px;
    height: 6px;
    background: #b6bcc7;
}

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

.ps-compare__col--after li::before {
    background: var(--ps-accent);
}

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

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

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

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

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

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

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

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

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

.ps-step {
    counter-increment: ps-step;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--ps-ink);
}

.ps-step h3::before {
    content: counter(ps-step) ". ";
}

@media (min-width: 1100px) {
    .ps-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

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

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

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

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

/* Bazı sayfalarda .ps-cta içinde başlık ve açıklama da var. Global h2 (40-48px)
   375px ekranda "Operasyonunuzdaki" gibi uzun kelimelerle viewport'u aşıyordu.
   Başlık ve metin kendi satırında kalır, boyut ekranla ölçeklenir. */
.ps-cta h2,
.ps-cta p {
    flex-basis: 100%;
    margin: 0;
}

.ps-cta h2 {
    font-family: var(--primary-font);
    font-size: clamp(1.5rem, 1.05rem + 2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ps-ink);
    overflow-wrap: anywhere;
}

.ps-cta p {
    font-size: var(--ps-text-md);
    line-height: 1.6;
    color: var(--ps-muted);
    max-width: 60ch;
}

/* 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.
   ========================================================================== */

.ps-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;
}

.ps-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);
}

.ps-crosslink__label {
    margin: 0 0 .35rem;
    font-size: .9375rem;
    font-weight: 600;
    color: #b44e17;
}

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

.ps-crosslink__links li {
    margin: 0;
}

.ps-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;
}

.ps-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. */
.ps-crosslink a.ps-crosslink__link:link,
.ps-crosslink a.ps-crosslink__link:visited {
    color: #b44e17;
}

.ps-crosslink a.ps-crosslink__link:hover,
.ps-crosslink a.ps-crosslink__link:focus,
.ps-crosslink a.ps-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
   .ps-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.ps-page-hero {
    background-color: #1d2026 !important;
    color: #fff;
    padding: clamp(6rem, 4rem + 8vw, 9rem) 0 clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
}

.ps-page-hero h1 {
    font-family: var(--primary-font);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 1rem;
    max-width: 24ch;
}

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

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

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

.ps-page-hero .ps-crumb a:hover,
.ps-page-hero .ps-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. */
.ps-faq {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: 62rem;
}

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

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

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

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

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

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

/* Kapanış çağrısı */
section.ps-page-final {
    background-color: var(--ps-tint) !important;
}

/* Çözüm sayfalarındaki madde listeleri */
.ps-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;
}

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

.ps-sector-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ps-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. */
.ps-block a.ps-note-link:link,
.ps-block a.ps-note-link:visited,
.ps-sectors-note a:link,
.ps-sectors-note a:visited {
    color: var(--ps-accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Dokunma hedefleri (mobil)
   --------------------------------------------------------------------------
   Kart başlık bağlantıları ve "inceleyin" bağlantıları 23-24px yüksekteydi;
   44px hedef için dikey dolgu eklenir, negatif kenar boşluğu yerleşimi korur.
   ========================================================================== */
@media (max-width: 991.98px) {
    .ps-card h3 a,
    .ps-card > a,
    .ps-crosslink__link {
        display: inline-block;
        padding: .6rem 0;
        margin: -.6rem 0;
    }

    .ps-crosslink__link {
        display: inline-flex;
    }
}

/* Klavye odağı: tema yalnız renk değiştiriyor, halka her etkileşimli öğede görünür olsun. */
.ps-block :is(a, button, summary):focus-visible,
.ps-crosslink a:focus-visible {
    outline: 2px solid #b44e17;
    outline-offset: 2px;
}

.ps-page-hero :is(a, button):focus-visible,
.ps-flow__panel--ours :is(a, button):focus-visible {
    outline-color: #fff;
}

/* ==========================================================================
   Üst menü (her sayfada, _Layout.cshtml içindeki .ps-nav)
   --------------------------------------------------------------------------
   Tema kuralları "header .navbar-expand ..." ile geldiği için seçiciler
   "header .ps-nav" ile başlar. Mobil menü (#menu) bu bloktan etkilenmez.
   ========================================================================== */

header .navbar-expand.ps-nav {
    --ps-nav-ink: #1d2026;
    --ps-nav-muted: #4a505b;
    --ps-nav-line: #e3e6ec;
    padding: .5rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--ps-nav-line);
    box-shadow: 0 1px 0 rgba(20, 22, 28, .02), 0 8px 24px -18px rgba(20, 22, 28, .35);
}

header .ps-nav .container.header {
    max-width: 1200px;
    align-items: center;
}

header .navbar-expand.ps-nav .navbar-brand img {
    height: 60px;
    width: auto;
}

header .ps-nav .navbar-nav.items {
    gap: .125rem;
    align-items: center;
}

header .ps-nav .navbar-nav.items > .nav-item > .nav-link:not(.btn) {
    position: relative;
    min-height: 2.75rem;
    padding: .5rem .875rem;
    border-radius: 6px;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ps-nav-muted);
    transition: color .18s ease, background-color .18s ease;
}

header .ps-nav .navbar-nav.items > .nav-item > .nav-link:not(.btn):hover,
header .ps-nav .navbar-nav.items > .nav-item.dropdown:hover > .nav-link:not(.btn) {
    color: var(--ps-nav-ink);
    background-color: #f3f4f7;
}

/* Bulunulan sayfa: koyu yazı ve altında kısa marka çizgisi (yalnızca renge bağlı değil). */
header .ps-nav .navbar-nav.items > .nav-item > .nav-link[aria-current="page"]:not(.btn) {
    color: var(--ps-nav-ink);
    font-weight: 600;
}

header .ps-nav .navbar-nav.items > .nav-item > .nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: .875rem;
    right: .875rem;
    bottom: .25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
}

header .ps-nav .nav-link:focus-visible,
header .ps-nav .lang-url:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Açılır liste */
header .ps-nav .dropdown .dropdown-menu {
    min-width: 13rem;
    padding: .375rem;
    background: #fff;
    border: 1px solid var(--ps-nav-line);
    border-radius: 8px;
    box-shadow: 0 16px 36px -18px rgba(20, 22, 28, .35);
}

header .ps-nav .navbar-nav .dropdown-menu .nav-link:not(.btn) {
    padding: .5rem .75rem;
    border-radius: 6px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ps-nav-muted);
}

header .ps-nav .navbar-nav .dropdown-menu .nav-link:not(.btn):not(.title):hover {
    color: var(--ps-nav-ink);
    background-color: #f3f4f7;
}

/* Çağrı düğmesi: menüyle aynı yükseklikte, daha sakin. */
header .ps-nav .navbar-nav.action .btn.primary-button {
    min-height: 2.75rem;
    padding: .5rem 1.25rem;
    border-radius: 8px;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
}

header .ps-nav .navbar-nav.action .btn.primary-button:focus-visible {
    outline: 2px solid var(--ps-nav-ink);
    outline-offset: 2px;
}

/* Dil değiştirici: çerçeveli küçük etiket. */
header .ps-nav .lang-url {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 .625rem;
    border: 1px solid var(--ps-nav-line);
    border-radius: 8px;
    font-size: .8125rem !important;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ps-nav-muted) !important;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

header .ps-nav .lang-url:hover {
    color: var(--ps-nav-ink) !important;
    border-color: #c9ced8;
    background-color: #f3f4f7;
}

@media (max-width: 575px) {
    header .navbar-expand.ps-nav { padding: .375rem 1rem; }
    header .navbar-expand.ps-nav .navbar-brand img { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    header .ps-nav .nav-link,
    header .ps-nav .lang-url { transition: none; }
}

/* ---- Mobil sabit çağrı düğmesi ----
   default.css'teki hap biçimli, gradyanlı, büyük harfli görünüm sitedeki diğer
   birincil düğmelerle uyuşmuyordu; aynı köşeli turuncu düğmeye çekildi. */
@media (max-width: 767px) {
    .teklifAl {
        background-image: none;
        background-color: #C2410C; /* beyaz yazıyla 4,5:1 üstü; pop-up düğmesiyle aynı ton */
        border: 0;
        border-radius: 8px;
        height: 52px;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        box-shadow: 0 6px 18px rgba(20, 23, 29, .22);
    }
}

/* ---- İç sayfa üst bandı (#slider.serviceSlider) ----
   Fotoğraf yönetim panelinden geliyor ve satır içi stille basılıyor; turuncu
   başlık fotoğrafın üstünde okunmuyordu. Fotoğraf yerinde kalır, üstüne ana
   sayfa hero'suyla aynı koyu ton biner, başlık beyaza çekilir. Katman satır
   içi "background" ile verildiği için important gerekir. */
section#slider.serviceSlider {
    /* Fotoğraf yüklenmezse de yazı okunur. Tema bölüm zeminini important ile verdiği için important. */
    background-color: #14171d !important;
}

section#slider.serviceSlider > .swiper-container {
    background: linear-gradient(180deg, rgba(20, 23, 29, .92) 0%, rgba(20, 23, 29, .82) 100%) !important;
}

/* Bandın üst kısmını sabit menü örtüyor (mobil 65px, masaüstü 77px). İçerik
   görünür alanda ortalansın ve uzun başlık menüye yapışmasın diye pay. */
section#slider.serviceSlider .slide-content {
    padding-top: 4.5rem;
}

section#slider.serviceSlider h1.title {
    font-family: var(--primary-font);
    /* ProductDetail şablonu satır içi 60px veriyor; mobilde taşmasın diye important. */
    font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem) !important;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-wrap: balance;
    text-transform: none;
    color: #fff;
    /* Eski şablonlardaki .effect-static-text başlığı gradyanla boyuyor. */
    background-image: none;
    -webkit-text-fill-color: #fff;
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
}

/* Etkin öğe default.css'te important ile beyaz; yalnızca ayraç ve bağlantı soluklaştırılır. */
section#slider.serviceSlider .breadcrumb-item::before {
    color: rgba(255, 255, 255, .62);
}

section#slider.serviceSlider .breadcrumb-item a {
    color: rgba(255, 255, 255, .86);
}

section#slider.serviceSlider .breadcrumb-item a:hover,
section#slider.serviceSlider .breadcrumb-item a:focus {
    color: #fff;
}

/* Mobilde üç seviyeli breadcrumb'ın son öğesi başlığın tekrarı; alt satıra
   taşıp bandın altındaki çizgiyle çakışıyordu. Başlık hemen üstünde olduğu için
   görsel olarak gizlenir; ekran okuyucu "bulunduğunuz sayfa" bilgisini almaya devam eder. */
@media (max-width: 575px) {
    section#slider.serviceSlider .breadcrumb-item.active:nth-child(n+3) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ==========================================================================
   Hizmet sayfaları (web tasarım, mobil, SEO, e-ticaret ...)
   --------------------------------------------------------------------------
   Bu 11 sayfanın hero'su .svc-hero taşır; alttaki bölümler kardeş seçiciyle
   (.svc-hero ~ section) kapsanır, başka sayfalara dokunulmaz.
   ========================================================================== */

/* Logo şeridi: 191px'lik logo için 400px'lik bant vardı. */
.svc-hero ~ #partner {
    padding: 40px 0 !important;
}

.svc-hero ~ #partner #brands-carousel {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 600px) {
    /* Açıklama default.css/main.css'te mobilde beyaz kutuya alınıyor ve
       ekran genişliğini aşıyordu. Koyu zeminde düz metin olarak kalır. */
    section#slider.svc-hero .slide-content .inner .description {
        background-color: transparent;
        padding: 0;
        border-radius: 0;
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.6;
        color: #e4e4e4 !important;
    }

    /* "Sizi Arayalım" mobilde .mobile-none ile gizleniyordu; birincil CTA. */
    section#slider.svc-hero .slide-content .btn.mobile-none {
        display: flex !important;
    }

    /* "Neler Yaptık" ikincil: tek birincil CTA kalsın diye çerçeveli. */
    section#slider.svc-hero .slide-content .btn:not(.mobile-none) {
        background: transparent;
        border: 2px solid #fff;
        color: #fff;
    }

    section#slider.svc-hero .slide-content .btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 300px;
        min-height: 48px;
        margin: 12px auto 0 !important;
    }

    /* Bölüm başlıkları 40px'te beş satıra taşıyordu. */
    .svc-hero ~ section h2 {
        font-size: 1.75rem;
        line-height: 1.25;
    }

    .svc-hero ~ section h3 {
        font-size: 1.375rem;
        line-height: 1.3;
    }

    /* İkon ortada, başlık solda kalıyordu; mobilde madde içeriği ortalanır. */
    .svc-hero ~ #services .item [class*="col-"] {
        text-align: center;
    }

    /* Logo karuseli: sabit 222px genişlik sola yaslanıyor, komşu öğe kenarda
       kesik görünüyordu. Tek logo ortalanır ve biraz küçülür. */
    .svc-hero ~ #partner .carousel-item .item {
        width: auto !important;
        margin: 0 auto !important;
        text-align: center;
    }

    .svc-hero ~ #partner .carousel-item img {
        width: 140px;
        height: 140px;
    }
}