/* ==========================================================================
   BARIŞ YAZILIM VE BİLİŞİM TEKNOLOJİLERİ
   Kurumsal tasarım sistemi + ana sayfa arayüzü

   Bu dosya mevcut template CSS mimarisine EK olarak yüklenir.
   css/style.css ve css/style-responsive.css dosyalarına dokunulmaz;
   gerekli görsel dönüşüm buradaki daha yüksek özgüllükteki kurallarla yapılır.

   İçindekiler
   00. Design tokens
   01. Base & typography
   02. Layout primitives
   03. Bileşenler (eyebrow, section head, buton, görsel alan, reveal)
   04. Header / navigation
   05. Hero
   06. Konumlandırma
   07. Çözümler
   08. Yazılım ekosistemi
   09. BT altyapısı
   10. Teknik destek
   11. Kurumsal / güven
   13. Kapanış CTA
   14. Footer
   15. Responsive
   16. Erişilebilirlik & hareket tercihi
   ========================================================================== */


/* ==========================================================================
   00. DESIGN TOKENS
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------------
       DİJİTAL MARKA RENKLERİ — web arayüzü için tek kaynak.
       Partner logoları, fotoğraflar ve durum renkleri bu tokenlarla
       yeniden renklendirilmez.
       --------------------------------------------------------------------- */
    --baris-red: #AA2A21;
    --baris-red-hover: #8B221B;
    --baris-red-dark: #691A14;
    --baris-red-rgb: 170, 42, 33;
    --baris-red-soft: rgba(170, 42, 33, .10);

    /* Koyu zeminde KÜÇÜK METİN için açılmış marka kırmızısı.
       #AA2A21, #151515 üzerinde yalnızca 2.66:1 veriyor — 11px etiketler için
       okunamaz. Bu token SADECE koyu zemindeki küçük metinlerde kullanılır;
       yüzey, buton, ikon aksanı, logo ve marka işareti DEĞİŞMEZ.

       Beta 2.2 ölçümü: önceki değer (#E15E4C) yalnızca en koyu yüzeylerde
       AA veriyordu. Sonradan eklenen açık koyu tonlarda eşiğin ALTINA
       düşüyordu — kart yüzeyi #262321'de 4.39:1, #262626'da 4.26:1.
       #E86A57 aynı ton ailesinde kalır ve TÜM koyu yüzeylerde AA geçer:
       #151515 5.77 · #211E1C 5.23 · #24211F 5.05 · #262321 4.93 · #262626 4.78.
       Odak halkası da bu tokenı kullandığı için görünürlüğü birlikte artar. */
    --baris-red-onDark: #E86A57;

    /* Nötr omurga — logonun antrasit karakterine hizalandı */
    --baris-ink: #292929;            /* logo antrasiti :: başlık ve güçlü metin */
    --baris-text: #2E2E2E;
    --baris-muted: #6F6F6F;

    /* ---------------------------------------------------------------------
       KOYU MİMARİ YÜZEYLER — metin rengi olan --baris-ink'ten ayrı tutulur.

       Site KOYU BASKIN bir sisteme geçti. Amaç düz siyah değil, koyunun
       İÇİNDE derinlik: nötr grafit ile sıcak taş-koyu tonlar dönüşümlü
       kullanılır, böylece "siyah / beyaz / siyah / beyaz" ritmi oluşmaz.

       Nötr grafit hattı  → altyapı, teknik, sistem
       Sıcak koyu hattı   → editoryal, insani, kurumsal
       --------------------------------------------------------------------- */
    --baris-surface-dark: #151515;      /* ana koyu zemin */
    --baris-surface-dark-2: #1D1D1D;    /* koyu yüzey üstü kart/görsel zemini */
    --baris-surface-dark-3: #262626;    /* koyu ayrım / çizgi bloğu */

    --baris-black: #0F0F0F;             /* en derin zemin — footer, teknik blok */
    --baris-ink-black: #111111;
    --baris-dark-raised: #262321;       /* koyu üstü yükseltilmiş yüzey */         /* teknik "siyaha yakın" — altyapı bölümü */
    --baris-graphite: #191817;          /* grafit, hafif sıcak */
    --baris-graphite-2: #1E1C1B;        /* grafit derinlik katmanı */
    --baris-graphite-3: #24211F;        /* grafit yüzey üstü */

    --baris-warm-dark-1: #211E1C;       /* sıcak koyu — editoryal bloklar */
    --baris-warm-dark-2: #262220;       /* sıcak koyu yüzey */
    --baris-warm-dark-3: #302A27;       /* sıcak koyu vurgu / kenar */

    --baris-bg: #F5F5F3;
    --baris-white: #FFFFFF;
    --baris-warm-white: #F8F6F2;
    --baris-stone: #F4F0EB;
    --baris-stone-deep: #EEE9E3;
    --baris-stone-line: #D8D1CA;
    --baris-red-tint: #F7ECEA;
    --baris-warm-dark: #201C1B;

    /* Çizgiler */
    --baris-line: rgba(41, 41, 41, .14);
    --baris-line-soft: rgba(41, 41, 41, .08);
    --baris-line-dark: rgba(255, 255, 255, .13);
    --baris-line-dark-soft: rgba(255, 255, 255, .07);

    /* Ölçü */
    --container-max: 1440px;
    --gutter: clamp(20px, 4.5vw, 72px);

    /* Bölüm ritmi. Daha küçük boşluklar bileşen düzeyinde tanımlıdır. */
    --space-xl: clamp(4.5rem, 8.5vw, 8.5rem);

    /* Tipografi */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --tracking-label: .16em;

    /* Hareket */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-inout: cubic-bezier(.65, 0, .35, 1);
    --dur: .45s;
    --dur-slow: .7s;

    /* Header yüksekliği — hero ve anchor offset hesapları buna bağlı */
    --nav-h: 92px;
    --nav-h-small: 68px;
}


/* ==========================================================================
   01. BASE & TYPOGRAPHY
   ========================================================================== */

/* Bootstrap 3 kök font boyutunu 10px'e çeker (html{font-size:10px}).
   Mevcut CSS dosyalarının hiçbirinde rem kullanılmadığı için kökü tarayıcı
   varsayılanına geri almak güvenli; bu olmadan buradaki tüm rem değerleri
   yarı boyutta hesaplanır. */
html {
    font-size: 100%;
    scroll-behavior: smooth;
    /* Gezinme sırasında tarayıcı beyazı görünmesin: belge zemini koyu. */
    background: var(--baris-surface-dark);
    color-scheme: dark;
}

body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--baris-text);
    /* Site koyu baskındır; belge zemini de koyudur. Beyaz zemin, aşırı kaydırma
       (rubber-band) ve içerikten kısa sayfalarda beyaz şerit olarak sızıyordu.
       Bölümler kendi zeminlerini bastığı için görünür tasarım değişmez. */
    background: var(--baris-surface-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Başlıklar template'te "Big Shoulders Display" istiyordu fakat bu font hiç
   yüklenmiyordu ve Arial'a düşüyordu. Tek aile (Inter) ile birleştiriyoruz. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-sans);
    letter-spacing: -.022em;
}

/* Renk yalnızca yeni ana sayfada sabitlenir; eski şablon sayfaları kendi
   devralma davranışını (koyu bölümlerde beyaz başlık vb.) korur. */
.baris-home h1, .baris-home h2, .baris-home h3,
.baris-home h4, .baris-home h5, .baris-home h6 {
    font-weight: 700;
    color: var(--baris-ink);
}

.baris-home ::selection {
    background: var(--baris-red);
    color: #fff;
}

/* TAM SAYFA YÜKLEYİCİ KAPALI.
   Eski şablon her gezinmede beyaz bir katman basıp 600 ms bekletiyordu;
   sayfa sunucudan tam basıldığı için bu katmanın işlevi yok. Kural,
   style.css icindeki .page-loader tanımını etkisiz bırakmak için durur. */
.page-loader {
    display: none !important;
}

.page-loader .loader {
    width: 34px;
    height: 2px;
    margin: -1px 0 0 -17px;
    background-color: var(--baris-red);
    border-radius: 0;
    -webkit-animation: baris-loader 1.1s infinite var(--ease-inout);
    animation: baris-loader 1.1s infinite var(--ease-inout);
}

@keyframes baris-loader {
    0%   { transform: scaleX(.15); opacity: .35; }
    50%  { transform: scaleX(1);   opacity: 1; }
    100% { transform: scaleX(.15); opacity: .35; }
}


/* ==========================================================================
   02. LAYOUT PRIMITIVES
   ========================================================================== */

.b-container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.b-section {
    position: relative;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    scroll-margin-top: calc(var(--nav-h-small) + 8px);
}

.b-section--tight {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.b-section--white { background: var(--baris-white); }

.b-section--dark {
    background: var(--baris-surface-dark);
    color: rgba(255, 255, 255, .74);
}

.b-section--dark h2,
.b-section--dark h3,
.b-section--dark h4 { color: #fff; }

/* 12 kolon editorial grid */
.b-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: clamp(32px, 4vw, 56px);
}


/* ==========================================================================
   02b. TAŞMA (BLEED) YARDIMCILARI
   Fotoğraf artık kart değil: bölüm kenarına dokunur, konteynerin dışına taşar.
   Geniş ekranda konteyner 1440'ta durduğu için fark hesaplanarak eklenir.
   ========================================================================== */

:root {
    --edge: calc((100vw - min(100vw, var(--container-max))) / 2 + var(--gutter));
}

.b-bleed-r { margin-right: calc(var(--edge) * -1); }
.b-bleed-l { margin-left: calc(var(--edge) * -1); }

/* Taşan görsellerde çerçeve dili kapanır — kart hissi kalmaz */
.b-bleed-r .b-visual__tick,
.b-bleed-l .b-visual__tick { display: none; }

.b-bleed-r .b-visual,
.b-bleed-l .b-visual { border-radius: 0; }


/* ==========================================================================
   03. BİLEŞENLER
   ========================================================================== */

/* --- Eyebrow ------------------------------------------------------------ */
.b-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 0 0 1.6rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--baris-muted);
}

.b-eyebrow__slash {
    color: var(--baris-red);
    font-weight: 700;
}

.b-section--dark .b-eyebrow { color: rgba(255, 255, 255, .55); }

/* --- Bölüm başlığı ------------------------------------------------------ */
.section-index {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.75rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--baris-muted);
}

.section-index::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--baris-red);
    flex: none;
}

.section-index__num {
    font-variant-numeric: tabular-nums;
    color: var(--baris-ink);
}

.b-section--dark .section-index { color: rgba(255, 255, 255, .55); }
.b-section--dark .section-index__num { color: #fff; }

.section-title {
    margin: 0;
    font-size: clamp(2.25rem, 3.3vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.028em;
    font-weight: 700;
    text-wrap: balance;
}

.section-title--lg {
    font-size: clamp(2.65rem, 3.9vw, 3.5rem);
    line-height: 1.03;
}

/* Daha sakin bölümlerde imza ölçeğini bilinçli olarak bir kademe düşür. */
.edonusum .section-title--lg,
.solutions .section-title--lg,
.maliMusavir .section-title--lg,
.about .section-title--lg {
    font-size: clamp(2.4rem, 3.5vw, 3.125rem);
}

.section-lead {
    margin: 1.6rem 0 0;
    max-width: 46ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--baris-muted);
}

.b-section--dark .section-lead { color: rgba(255, 255, 255, .62); }

/* --- Butonlar ----------------------------------------------------------- */
.b-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
}

.b-btn,
a.b-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 52px;
    padding: .9rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: .78125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    background: none;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.b-btn::after {
    content: "";
    width: 16px;
    height: 8px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform var(--dur) var(--ease);
}

.b-btn:hover::after,
.b-btn:focus-visible::after { transform: translateX(5px); }

.b-btn--primary,
a.b-btn--primary {
    background: var(--baris-red);
    color: #fff;
}

.b-btn--primary:hover,
a.b-btn--primary:hover,
.b-btn--primary:focus,
a.b-btn--primary:focus {
    background: var(--baris-red-hover);
    color: #fff;
    text-decoration: none;
}

.b-btn--ink,
a.b-btn--ink {
    background: var(--baris-surface-dark);
    color: #fff;
}

.b-btn--ink:hover,
a.b-btn--ink:hover {
    background: var(--baris-red);
    color: #fff;
    text-decoration: none;
}

.b-btn--ghost,
a.b-btn--ghost {
    border-color: var(--baris-line);
    color: var(--baris-ink);
}

.b-btn--ghost:hover,
a.b-btn--ghost:hover {
    border-color: var(--baris-ink);
    color: var(--baris-ink);
    background: rgba(41, 41, 41, .05);
    text-decoration: none;
}

.b-section--dark .b-btn--ghost,
.b-footer .b-btn--ghost {
    border-color: var(--baris-line-dark);
    color: #fff;
}

.b-section--dark .b-btn--ghost:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

/* Metin bağlantısı — altı çizgisi animasyonlu */
.b-link,
a.b-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    position: relative;
    padding-bottom: 3px;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--baris-ink);
    text-decoration: none;
}

.b-link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur) var(--ease);
}

.b-link:hover,
a.b-link:hover { color: var(--baris-red); text-decoration: none; }

.b-link:hover::before,
.b-link:focus-visible::before { transform: scaleX(1); transform-origin: left; }

.b-section--dark .b-link { color: #fff; }
.b-section--dark .b-link:hover { color: #fff; }

/* --- Görsel alanı -------------------------------------------------------
   Final görseller sonradan üretilecek. Bu yapı boş gri kutu değil; kompozisyonun
   parçası olan, teknik işaretli ve doğru en-boy oranına sahip bir çerçevedir.
   Görsel geldiğinde <img class="b-visual__img"> eklemek yeterlidir.        */

.b-visual {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    background: var(--baris-surface-dark-2);
    aspect-ratio: 16 / 10;
}

.b-visual--4x3   { aspect-ratio: 4 / 3; }
.b-visual--4x5   { aspect-ratio: 4 / 5; }
.b-visual--3x2   { aspect-ratio: 3 / 2; }

/* Görsel hover :: ölçülü ölçek, dramatik zoom yok */
.b-visual {
    transition: transform .65s var(--ease);
}

.solution:hover .b-visual,
.support__visual:hover .b-visual,
.infra__visual:hover .b-visual { transform: scale(1.025); }

.b-visual__img {
    position: absolute;
    inset: 0;
    width: 100%;
    /* Legacy tema img{height:auto!important} kuralını geçersiz kıl. */
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Her fotoğraf için odak noktası; kırpma değişse de insan/ekipman kadrajda kalır. */
.solution--media .solution__bg img { object-position: 54% 58%; }
.support__visual .b-visual__img    { object-position: 54% 50%; }
.mm__visual .b-visual__img         { object-position: 52% 48%; }
.zirve__visual .b-visual__img     { object-position: 55% 45%; }
.infra__visual .b-visual__img     { object-position: 46% 50%; }

/* Köşe işaretleri */
.b-visual__tick {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    z-index: 2;
}

.b-visual__tick--tl { top: 16px;    left: 16px;    border-right: 0; border-bottom: 0; }
.b-visual__tick--tr { top: 16px;    right: 16px;   border-left: 0;  border-bottom: 0; }
.b-visual__tick--bl { bottom: 16px; left: 16px;    border-right: 0; border-top: 0; }
.b-visual__tick--br { bottom: 16px; right: 16px;   border-left: 0;  border-top: 0; }

.b-visual__tick--tl::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 7px;
    height: 2px;
    background: var(--baris-red);
}

/* Teknik metadata katmanı :: kurumsal sistem bilgisi hissi, HUD değil.
   Metin görsele gömülü değil; gerçek HTML. */
.b-visual__meta {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
    text-align: right;
    pointer-events: none;
}

.b-visual__meta-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

.b-visual__meta-row i {
    font-style: normal;
    color: var(--baris-red);
}

.b-visual__meta-row--state { color: rgba(255, 255, 255, .3); }

.b-visual__led {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--baris-red);
    animation: baris-led 2.8s var(--ease-inout) infinite;
}

/* Görünmeyen slaytların LED'i compositor'ı meşgul etmesin */
.hero-slide:not(.is-active) .b-visual__led { animation-play-state: paused; }

@keyframes baris-led {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

/* Görsel üstü künye */
.b-visual__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.1rem;
    background: rgba(21, 21, 21, .80);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.b-visual__caption strong {
    color: #fff;
    font-weight: 600;
}

/* Hero görselleri dar olduğundan künye tek satırda kalır — dar ekranda
   iki satıra kırılıp kompozisyonu bozmasın. */
.hero-slide .b-visual__caption {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: .5625rem;
    letter-spacing: .12em;
    padding: .6rem .9rem;
}

.b-visual__caption span[aria-hidden] { color: var(--baris-red); }

/* --- Scroll reveal ------------------------------------------------------ */
/* Desen A :: editorial metin girişi (varsayılan) */
.b-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease),
                transform var(--dur-slow) var(--ease),
                clip-path var(--dur-slow) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

.b-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------------------
   İLK EKRAN ANİMASYONSUZ AÇILIR
   ---------------------------------------------------------------------------
   Sayfa üstündeki hero başlığı da .b-reveal ile geliyordu: açılışta 0.7 s
   boyunca yarı saydam kalıyor, koyu zeminde SİYAH bir başlık gibi okunuyordu.
   Ekranın ilk karesindeki metin beklemez; yalnızca kısa bir yukarı kayma
   animasyonu yapar. Aşağıdaki bölümler eskisi gibi kaydırmayla açılır.
   -------------------------------------------------------------------------- */
.b-page-hero .b-reveal,
.hero .b-reveal,
.b-page-hero .b-reveal.is-visible,
.hero .b-reveal.is-visible {
    opacity: 1;
}
.b-page-hero .b-reveal:not(.is-visible),
.hero .b-reveal:not(.is-visible) {
    transform: translateY(8px);
}

/* Desen B :: görsel maske açılımı — soldan sağa perde */
.b-reveal--mask {
    transform: none;
    opacity: 1;
    clip-path: inset(0 100% 0 0);
}

.b-reveal--mask.is-visible { clip-path: inset(0 0 0 0); }

/* Desen C :: kırmızı çizgi çizimi (marka imzası) */
.b-reveal--line {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
}

.b-reveal--line.is-visible { transform: scaleX(1); }

/* Bölüm başlığındaki kırmızı işaret, bölüm görünür olunca soldan çizilir */
.section-index::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s var(--ease) calc(var(--reveal-delay, 0ms) + 120ms);
}

.b-reveal.is-visible .section-index::before,
.is-visible .section-index::before,
.section-index.is-visible::before { transform: scaleX(1); }

/* JS tamamen devre dışıysa elements/header.php içindeki <noscript> bloğu
   .b-reveal öğelerini görünür kılar. */



/* ==========================================================================
   03b. BARIŞ İKON AİLESİ
   Sprite: elements/icons.php (sayfada bir kez basılır).
   Özel Barış hizmet/UI ikonları varsayılan durumda dijital marka
   kırmızısıdır; yoğunluk renk kısılarak değil ölçü ve boşlukla yönetilir.
   ========================================================================== */

.b-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--baris-red);
    transition: color var(--dur) var(--ease);
}

/* Koyu yüzeyde de yeterli kontrastı olan marka kırmızısı korunur. */
.b-section--dark .b-icon,
.solution--media .b-icon { color: var(--baris-red); }

.solution:hover .b-icon,
.mm-step:hover .b-icon,
.support-item:hover .b-icon { color: var(--baris-red-hover); }


/* ==========================================================================
   04. HEADER / NAVIGATION
   Template'in .main-nav / .inner-nav / .mobile-nav JS kancaları korunur;
   yalnızca görsel katman yeniden yazılır. Bazı kurallarda !important
   gerekiyor çünkü style.css ve all.js inline stilleri sabit yükseklik basıyor.
   ========================================================================== */

.main-nav.baris-nav {
    height: var(--nav-h) !important;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: none;
    border-bottom: 1px solid transparent;
    transition: height var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.main-nav.baris-nav.small-height {
    height: var(--nav-h-small) !important;
    border-bottom-color: var(--baris-line);
    background: rgba(255, 255, 255, .92);
}

.baris-nav .full-wrapper {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Logo — orijinal asset, oran korunur, çevresinde clear-space bırakılır */
.baris-nav .nav-logo-wrap {
    margin-right: 0;
}

.baris-nav .nav-logo-wrap .logo {
    display: flex;
    align-items: center;
    height: var(--nav-h);
    /* style.css'teki max-width:120px logonun 2.376:1 oranını sıkıştırıyordu */
    max-width: none;
    padding-right: 28px;
    transition: height var(--dur) var(--ease);
}

.baris-nav.small-height .nav-logo-wrap .logo {
    height: var(--nav-h-small);
}

/* Logo asset'i 1675x705 (2.376:1). Oran korunur; yalnızca yükseklik sınırlanır,
   genişlik object-fit: contain ile kendiliğinden hesaplanır. */
.baris-nav .nav-logo-wrap .logo img {
    top: auto;
    width: auto;
    height: 56px;
    max-width: 100%;
    padding: 0;
    object-fit: contain;
    transform: none;
    transition: height var(--dur) var(--ease);
}

.baris-nav.small-height .nav-logo-wrap .logo img {
    height: 42px;
}

/* Masaüstü menü */
.baris-nav .inner-nav > ul {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: inherit;
    text-transform: none;
}

.baris-nav .inner-nav > ul > li {
    float: none;
    margin-left: 0;
    display: flex;
    align-items: center;
}

.baris-nav .inner-nav > ul > li > a {
    height: var(--nav-h) !important;
    line-height: var(--nav-h) !important;
    padding: 0 16px;
    position: relative;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--baris-ink);
    opacity: .72;
    transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.baris-nav.small-height .inner-nav > ul > li > a {
    height: var(--nav-h-small) !important;
    line-height: var(--nav-h-small) !important;
}

.baris-nav .inner-nav > ul > li > a:hover,
.baris-nav .inner-nav > ul > li > a:focus,
.baris-nav .inner-nav > ul > li > a.active {
    color: var(--baris-ink);
    opacity: 1;
    background: none;
    text-decoration: none;
}

/* Aktif sayfa göstergesi — ince kırmızı işaret */
.baris-nav .inner-nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 26px;
    height: 2px;
    background: var(--baris-red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur) var(--ease), bottom var(--dur) var(--ease);
}

.baris-nav.small-height .inner-nav > ul > li > a::after { bottom: 18px; }

.baris-nav .inner-nav > ul > li > a:hover::after,
.baris-nav .inner-nav > ul > li > a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.baris-nav .inner-nav > ul > li > a.mn-has-sub .b-nav-chevron {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    opacity: .55;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.baris-nav .inner-nav > ul > li > a.mn-has-sub[aria-expanded="true"] .b-nav-chevron {
    transform: rotate(180deg);
    opacity: .9;
}

/* CTA — menü listesinin son öğesi */
.baris-nav .inner-nav > ul > li.baris-nav__cta { margin-left: 18px; }

.baris-nav .inner-nav > ul > li > a.b-btn {
    display: inline-flex;
    height: 44px !important;
    line-height: 1 !important;
    min-height: 44px;
    padding: 0 1.25rem;
    opacity: 1;
    color: #fff;
    font-size: .71875rem;
}

/* Header CTA'sında ok işareti kullanılmıyor — menü sade kalsın */
.baris-nav .inner-nav > ul > li > a.b-btn::after { display: none; }

/* Dropdown — minimal, tek kolon */
.baris-nav .inner-nav ul li .mn-sub {
    min-width: 268px;
    padding: 10px 0;
    background: var(--baris-white);
    border: 1px solid var(--baris-line);
    border-radius: 2px;
    box-shadow: 0 24px 48px -24px rgba(41, 41, 41, .26);
}

.baris-nav .inner-nav ul li .mn-sub li a {
    padding: 11px 20px;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: var(--baris-muted);
    background: none;
    border: 0;
}

.baris-nav .inner-nav ul li .mn-sub li a:hover {
    color: var(--baris-ink);
    background: var(--baris-bg);
    text-decoration: none;
}

.baris-nav .inner-nav ul li .mn-sub li a .mn-sub__desc {
    display: block;
    margin-top: 2px;
    font-size: .6875rem;
    font-weight: 400;
    color: rgba(41, 41, 41, .42);
}

/* Mobil tetikleyici */
.baris-nav .mobile-nav {
    border: 0;
    color: var(--baris-ink);
    background: none;
}

.baris-nav .mobile-nav:hover,
.baris-nav .mobile-nav.active {
    background: var(--baris-bg);
    color: var(--baris-ink);
}

.baris-nav .mobile-nav .b-nav-icon {
    width: 23px;
    height: 23px;
    display: block;
    color: currentColor;
}

.baris-nav .b-nav-chevron { color: currentColor; }

/* Mobil panel — masaüstündeki flex sırası dikey listeye döner */
.main-nav.baris-nav.mobile-on .inner-nav > ul,
.main-nav.baris-nav.mobile-on .inner-nav > ul > li {
    display: block;
}

.main-nav.baris-nav.mobile-on .desktop-nav > ul {
    background: var(--baris-surface-dark);
    padding: 8px 0 14px;
    border-top: 1px solid var(--baris-line-dark);
}

/* KAPSAM DARALTILDI: eskiden `ul li a` idi, yani AÇILIR MENÜ bağlantılarına
   da uyuyordu. height/line-height !important olduğu için alt menü satırları
   52px'e çakılıyor, başlık+açıklama sığmayıp bir sonraki satırın üstüne
   biniyordu (ekran görüntüsüyle doğrulandı). !important üst düzey satırlar
   için şablonun 38px kuralına karşı hâlâ gerekli; bu yüzden kaldırılmadı,
   yalnızca `> ul > li > a` ile ÜST DÜZEYE sınırlandı.
   Alt menü ölçüleri: css/baris-responsive.css · çekmece bloğu.            */
.main-nav.baris-nav.mobile-on .desktop-nav > ul > li > a {
    height: 52px !important;
    line-height: 52px !important;
    padding: 0 var(--gutter);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, .72);
    border-bottom: 1px solid var(--baris-line-dark-soft);
}

.main-nav.baris-nav.mobile-on .desktop-nav ul li a:hover,
.main-nav.baris-nav.mobile-on .desktop-nav ul li a.active {
    color: #fff;
    background: rgba(255, 255, 255, .04);
}

.main-nav.baris-nav.mobile-on .inner-nav > ul > li > a::after { display: none; }

.main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub {
    min-width: 0;
    background: rgba(255, 255, 255, .03);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub li a {
    padding-left: calc(var(--gutter) + 18px);
    font-size: .875rem;
    color: rgba(255, 255, 255, .58);
    background: none;
}

.main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub li a .mn-sub__desc { display: none; }

.main-nav.baris-nav.mobile-on .inner-nav > ul > li.baris-nav__cta { margin-left: 0; }

.main-nav.baris-nav.mobile-on .inner-nav > ul > li > a.b-btn {
    height: 52px !important;
    margin: 14px var(--gutter) 0;
    width: calc(100% - (var(--gutter) * 2));
    border-bottom: 0;
    background: var(--baris-red);
    color: #fff;
}


/* ==========================================================================
   05. HERO SLIDER  ·  bütünleşik koyu kampanya kompozisyonu
   Fotoğraf tam kaplar, sol taraf scrim ile karartılır, metin fotoğrafın
   İÇİNDE durur. Beyaz sayfa + ayrı siyah kutu düzeni bilinçli olarak terk edildi.
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--baris-surface-dark);
    padding-top: var(--nav-h);              /* .main-nav fixed :: hemen altından başlar */
    min-height: clamp(760px, 82vh, 900px);
    overflow: hidden;
}

.hero__slider {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hero__track {
    position: relative;
    flex: 1;
    display: grid;                          /* slaytlar tek gözde :: CLS yok */
    min-height: 0;
    touch-action: pan-y;
}

/* --- Slayt --------------------------------------------------------------- */
.hero-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .6s var(--ease), visibility 0s linear .6s;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
    transition: opacity .6s var(--ease), visibility 0s linear 0s;
}

/* --- Görsel katman ------------------------------------------------------- */
.hero-slide__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-media {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    transform: scale(1.025);
    transition: transform 1.4s var(--ease);
}

.hero-slide.is-active .hero-media { transform: none; }

.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;               /* kompozisyon sağ ağırlıklı okunur */
    display: block;
}

.hero-media picture { position: absolute; inset: 0; display: block; }
.hero-slide--a .hero-media img { object-position: 72% 50%; }
.hero-slide--b .hero-media img { object-position: 68% 48%; }
.hero-slide--c .hero-media img { object-position: 76% 50%; }

/* Final fotoğraf gelene kadar duran nötr yüzey — çerçeve/kenarlık YOK */
.hero-media__fill {
    position: absolute;
    inset: 0;
    background:
        /* sağ üstten gelen sıcak nötr anahtar ışık */
        radial-gradient(96% 78% at 74% 22%, rgba(255, 244, 232, .16), transparent 62%),
        /* ölçülü Barış kırmızısı ortam yansıması */
        radial-gradient(58% 52% at 92% 76%, rgba(var(--baris-red-rgb), .18), transparent 70%),
        /* gövde hacmi */
        linear-gradient(118deg, #0e0e0e 0%, #1b1b1b 42%, #2c2a29 70%, #191817 100%);
}

/* Soldan sağa karartma :: metin alanı tam okunur, sağda fotoğraf açılır */
.hero-slide__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            var(--baris-surface-dark) 0%,
            rgba(21, 21, 21, .95) 24%,
            rgba(21, 21, 21, .70) 40%,
            rgba(21, 21, 21, .26) 58%,
            rgba(21, 21, 21, .06) 100%),
        linear-gradient(180deg, rgba(21, 21, 21, .55) 0%, transparent 22%, transparent 62%, rgba(21, 21, 21, .72) 100%);
}

/* --- İçerik -------------------------------------------------------------- */
.hero-slide__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(2rem, 4vw, 3.5rem);
}

.hero-slide__col {
    max-width: 780px;
    padding-left: clamp(0px, 1.5vw, 34px);
}

.hero-slide__anim {
    opacity: 0;
    transform: translateY(18px);
}

.hero-slide.is-active .hero-slide__anim {
    opacity: 1;
    transform: none;
    transition: opacity .7s var(--ease) calc(var(--i, 0) * 95ms + 140ms),
                transform .7s var(--ease) calc(var(--i, 0) * 95ms + 140ms);
}

/* --- Tipografi ----------------------------------------------------------- */
.hero .b-eyebrow {
    margin-bottom: 1.4rem;
    color: rgba(255, 255, 255, .58);
}

.b-eyebrow__hi { color: var(--baris-red); }

.hero-slide__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(2.5rem, 4.8vw, 4.75rem);
    line-height: 1.0;
    letter-spacing: -.038em;
    font-weight: 700;
    color: #fff;
}

/* index.php'deki ilk başlık h1 olduğundan tema tipografisinin daha yüksek
   özgüllükteki genel h1 rengiyle ezilmesini engelle. */
.hero h1.hero-slide__title { color: #fff; }

.hero-slide__line { display: block; }

.hero-slide--a .hero-slide__title { font-size: clamp(3.25rem, 4.8vw, 4.5rem); }
.hero-slide--b .hero-slide__title { font-size: clamp(3.1rem, 4.4vw, 4.2rem); letter-spacing: -.032em; }
.hero-slide--c .hero-slide__title {
    max-width: 820px;
    font-size: clamp(3.5rem, 4.8vw, 4.75rem);
    line-height: 1;
}

.hero-slide--c .hero-slide__col { max-width: 820px; }
.hero-slide--c .hero-slide__lead { max-width: 520px; }

/* Slayt 03: fotoğraf soldaki kopya alanının altında kesintisiz devam eder. */
.hero-slide--c .hero-slide__scrim {
    background:
        linear-gradient(90deg,
            rgba(21, 21, 21, .99) 0%,
            rgba(21, 21, 21, .96) 22%,
            rgba(21, 21, 21, .82) 38%,
            rgba(21, 21, 21, .48) 54%,
            rgba(21, 21, 21, .14) 72%,
            rgba(21, 21, 21, .05) 100%),
        linear-gradient(180deg, rgba(21, 21, 21, .48) 0%, transparent 24%, transparent 64%, rgba(21, 21, 21, .68) 100%);
}

.hero__dot { color: var(--baris-red); }

.hero-slide__lead {
    margin: 1.75rem 0 0;
    max-width: 580px;
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

.hero-slide__actions { margin-top: 2.5rem; gap: 1rem; }

/* --- Butonlar ------------------------------------------------------------ */
.b-btn--hero {
    min-height: 62px;
    padding: 1rem 1.9rem;
    font-size: .8125rem;
    border-radius: 2px;
}

.b-icon--btn { width: 19px; height: 19px; color: currentColor; }

.b-btn--onDark,
a.b-btn--onDark {
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
    background: rgba(255, 255, 255, .04);
}

.b-btn--onDark:hover,
a.b-btn--onDark:hover {
    border-color: var(--baris-red);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}

/* --- Slider navigasyonu :: hero'nun alt kenarında --------------------------- */
.hero-nav {
    position: relative;
    z-index: 3;
    padding-bottom: clamp(.85rem, 1.6vw, 1.35rem);
}

.hero-nav__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hero-nav__steps { display: flex; gap: clamp(16px, 1.8vw, 30px); }

.hero-nav__step {
    display: block;
    padding: 14px 0 0;
    margin-top: -14px;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}

.hero-nav__num {
    display: block;
    margin-bottom: .55rem;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .45);
    transition: color var(--dur) var(--ease);
}

.hero-nav__step.is-active .hero-nav__num,
.hero-nav__step:hover .hero-nav__num { color: #fff; }

.hero-nav__bar {
    display: block;
    width: clamp(44px, 5vw, 74px);
    height: 2px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}

.hero-nav__step.is-active .hero-nav__bar {
    width: clamp(72px, 8vw, 112px);
    background: rgba(255, 255, 255, .22);
}

.hero-nav__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--baris-red);
    transform: scaleX(0);
    transform-origin: left;
}

.hero-nav__step.is-active .hero-nav__fill {
    animation: hero-progress var(--hero-interval, 6200ms) linear forwards;
}

.hero__slider.is-paused .hero-nav__step.is-active .hero-nav__fill { animation-play-state: paused; }

.hero__slider.is-manual .hero-nav__step.is-active .hero-nav__fill {
    animation: none;
    transform: scaleX(1);
}

@keyframes hero-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hero-nav__arrows { display: flex; align-items: center; gap: .6rem; }

.hero-nav__count {
    margin: 0 .4rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .45);
}

.hero-nav__count b { color: #fff; font-weight: 600; }

.hero-nav__arrow {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 2px;
    background: none;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.hero-nav__arrow::before {
    content: "";
    width: 15px;
    height: 8px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform var(--dur) var(--ease);
}

.hero-nav__arrow--prev::before { transform: rotate(180deg); }
.hero-nav__arrow:hover { border-color: var(--baris-red); background: rgba(255, 255, 255, .06); }
.hero-nav__arrow--next:hover::before { transform: translateX(3px); }
.hero-nav__arrow--prev:hover::before { transform: rotate(180deg) translateX(3px); }

/* --- Hizmet şeridi :: hero'nun parçası ----------------------------------- */
.hero__rail {
    position: relative;
    z-index: 3;
    background: rgba(0, 0, 0, .18);
    border-top: 1px solid rgba(255, 255, 255, .065);
}

.hero-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-rail__item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    column-gap: .9rem;
    padding: clamp(1.05rem, 1.6vw, 1.45rem) clamp(1rem, 2vw, 2rem) clamp(1.05rem, 1.6vw, 1.45rem) 0;
}

.hero-rail__item + .hero-rail__item {
    border-left: 1px solid rgba(255, 255, 255, .065);
    padding-left: clamp(1.25rem, 2.4vw, 2.5rem);
}

.hero-rail .b-icon { color: var(--baris-red); }

.hero-rail__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

.hero-rail__title {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: #fff;
}

.hero-rail__text {
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .58);
}


/* 06. KONUMLANDIRMA bölümü KALDIRILDI.
   Ana sayfadaki bağımsız "Konumlandırma" bölümü, hero servis rayı zaten aynı
   dört ana sütunu ilettiği için çıkarıldı. .positioning / .pillars / .pillar
   seçicileri artık hiçbir sayfada kullanılmıyor; ölü CSS bırakılmadı.
   (Ray: .hero-rail — bkz. 04. HERO)                                          */


/* ==========================================================================
   07. ÇÖZÜMLER — asimetrik editorial grid
   ========================================================================== */

.solutions__head { grid-column: 1 / span 7; }

.solutions__aside {
    grid-column: 9 / -1;
    align-self: end;
}

.solutions__aside p {
    margin: 0 0 1.4rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--baris-muted);
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    background: var(--baris-line);
    border: 1px solid var(--baris-line);
}

.solution {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 248px;
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    background: var(--baris-white);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: background-color var(--dur) var(--ease);
}

.solution:hover,
.solution:focus { text-decoration: none; color: inherit; background: var(--baris-bg); }

/* Yerleşim ritmi: eşit kart yok */
.solution--lead   { grid-column: span 7; grid-row: span 2; min-height: 460px; }
.solution--wide   { grid-column: span 5; }
.solution--third  { grid-column: span 4; }

.solution__num {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    color: var(--baris-muted);
    font-variant-numeric: tabular-nums;
    transition: color var(--dur) var(--ease);
}

.solution:hover .solution__num { color: var(--baris-red); }

.solution .b-icon { margin-top: 1.25rem; }

.solution__title {
    margin: .75rem 0 0;
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 600;
}

.solution__text {
    margin: .85rem 0 0;
    max-width: 42ch;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--baris-muted);
}

.solution__tags {
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
}

.solution__tags li {
    padding: .28rem .6rem;
    border: 1px solid var(--baris-line);
    border-radius: 2px;
    font-size: .6875rem;
    letter-spacing: .04em;
    color: var(--baris-muted);
}

.solution__arrow {
    margin-top: auto;
    padding-top: 1.6rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .71875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--baris-ink);
}

.solution__arrow::after {
    content: "";
    width: 16px;
    height: 8px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform var(--dur) var(--ease);
}

.solution:hover .solution__arrow::after { transform: translateX(6px); }
.solution:hover .solution__arrow { color: var(--baris-red); }

/* Görsel destekli büyük hücre */
.solution--media {
    background: var(--baris-surface-dark);
    color: rgba(255, 255, 255, .74);
}

/* Görsel hücrede metin bloğu alta yaslanır */
.solution--media .solution__num { margin-top: auto; }

.solution--media:hover,
.solution--media:focus { background: var(--baris-surface-dark); color: rgba(255, 255, 255, .74); }

.solution--media .solution__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--baris-surface-dark-2);
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 64px 64px, 64px 64px;
    transform: scale(1.02);
    transition: transform var(--dur-slow) var(--ease);
}

.solution--media:hover .solution__bg { transform: scale(1.06); }

.solution--media .solution__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution--media .solution__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(21, 21, 21, .32) 0%, rgba(21, 21, 21, .93) 78%);
}

.solution--media > * { position: relative; z-index: 1; }
.solution--media .solution__title { color: #fff; }
.solution--media .solution__text { color: rgba(255, 255, 255, .68); }
.solution--media .solution__num { color: rgba(255, 255, 255, .55); }
.solution--media:hover .solution__num { color: var(--baris-red); }
.solution--media .solution__arrow { color: #fff; }
.solution--media:hover .solution__arrow { color: #fff; }

.solution--media .solution__tags li {
    border-color: var(--baris-line-dark);
    color: rgba(255, 255, 255, .7);
}


/* ==========================================================================
   08. YAZILIM EKOSİSTEMİ
   ========================================================================== */

.software {
    /* §5: yazılım bölümü koyu mimari yüzey. Açık zemin kaldırıldı — bölüm
       koyu ton sınıfı taşıdığı için beyaz başlıklar açık zeminde kayboluyordu. */
    background: var(--baris-graphite);
    padding-top: clamp(4.5rem, 7vw, 6.5rem);
    padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
}

.solutions { background: var(--baris-graphite-2); }   /* grafit + fotoğraf */

.software__intro {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
    margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.software__intro .section-index,
.software__intro .section-title {
    grid-column: 1 / span 5;
}

.software__intro .section-index { grid-row: 1; }
.software__intro .section-title { grid-row: 2 / span 2; }

.software__intro .section-lead {
    grid-column: 7 / -1;
    max-width: 40ch;
}

.software__intro .section-lead:first-of-type { grid-row: 2; }
.software__intro .section-lead:last-of-type { grid-row: 3; }

.software__list {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    /* TERS DURUM: matris VARSAYILAN OLARAK KOYU.
       Izgara tek bir mimari blok gibi okunur — hücreler arasında beyaz
       oluk yoktur, yalnızca ince iç ayırıcılar vardır. */
    background: var(--baris-surface-dark);
    border: 1px solid rgba(255, 255, 255, .10);
    overflow: hidden;
}

.software__list > li {
    min-width: 0;
    display: flex;
}

.software-row {
    position: relative;
    display: flex;
    width: 100%;
    min-height: clamp(270px, 20vw, 290px);
    padding: clamp(1.35rem, 2vw, 1.75rem);
    background: var(--baris-surface-dark);
    border-right: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    text-decoration: none;
    overflow: hidden;
    transition: background-color 320ms ease;
}

/* Hafif yüzey değişkenliği — düz siyah bir tabaka gibi durmasın */
.software__list > li:nth-child(even) .software-row { background: var(--baris-graphite); }

/* Son sütun / son satır iç ayırıcıları dışa taşmasın */
.software__list > li:nth-child(3n) .software-row { border-right: 0; }
.software__list > li:nth-last-child(-n+3) .software-row { border-bottom: 0; }

/* --- BAĞLANTI DURUMLARI --------------------------------------------------
   Tarayıcının ziyaret edilmiş bağlantı rengi ve alt çizgisi kart
   tipografisini ele geçiriyordu. Dört durum da açıkça tanımlanır:
   ziyaret edilmiş bir Mikro/Paraşüt sayfası kart rengini DEĞİŞTİRMEZ.     */
.software-row:link,
.software-row:visited,
.software-row:hover,
.software-row:active,
.software-row:focus,
.software-row:focus-visible {
    color: #fff;
    text-decoration: none;
}

.software-row:visited .software-row__name,
.software-row:visited .software-row__role,
.software-row:visited .software-row__text,
.software-row:visited .software-row__num { color: inherit; }

/* --- AÇIK DURUM PERDESİ :: koyu → beyaz ---------------------------------- */
.software-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--baris-warm-white);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--dur-slow) var(--ease);
    z-index: 0;
}

/* Kırmızı gösterge çizgisi — geçişin imzası */
.software-row::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--baris-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--ease);
    z-index: 2;
}

.software-row__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    grid-template-areas:
        "num id go"
        ". text text";
    align-items: start;
    align-content: start;
    column-gap: .9rem;
    row-gap: 1.15rem;
}

.software-row__num       { grid-area: num; }
.software-row__id        { grid-area: id; }
.software-row__text-wrap { grid-area: text; }
.software-row__go        { grid-area: go; }

/* --- VARSAYILAN (KOYU) TİPOGRAFİ ---------------------------------------- */
.software-row__num {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    color: rgba(255, 255, 255, .55);
    font-variant-numeric: tabular-nums;
    padding-top: .35rem;
    transition: color 250ms ease;
}

.software-row .software-row__name {
    /* Özgüllük notu: ".baris-home h3" (0,1,1) tek sınıflı bir seçiciyi yener;
       bu yüzden kart başlığı iki sınıfla (0,2,0) yazılır. */
    margin: 0;
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    font-weight: 600;
    color: #fff;
    transition: color 250ms ease;
}

.software-row__role {
    display: block;
    margin-top: .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    transition: color 250ms ease;
}

.software-row__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .62);
    transition: color 250ms ease;
}

.software-row__caps {
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .45rem;
}

.software-row__caps li {
    padding: .25rem .55rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 2px;
    font-size: .6875rem;
    color: rgba(255, 255, 255, .68);
    transition: border-color 250ms ease, color 250ms ease;
}

.software-row__go {
    align-self: start;
    margin-top: .35rem;
    width: 16px;
    height: 8px;
    background: rgba(255, 255, 255, .75);
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 250ms ease, background-color 250ms ease;
}

/* --- ETKİN DURUM (AÇIK) --------------------------------------------------
   .is-active sınıfı yerine gerçek durumlar kullanılır. Dokunmatik
   cihazlarda takılı kalan :hover riskini önlemek için işaretçi tabanlı
   kurallar @media (hover: hover) içine alınır; :focus-within her yerde
   çalışır, böylece dokunma ve klavye aynı açık durumu verir.              */
.software-row:focus-within::before { transform: scaleY(1); }
.software-row:focus-within::after  { transform: scaleX(1); }

.software-row:focus-within .software-row__name.software-row__name { color: var(--baris-ink); }
.software-row:focus-within .software-row__role { color: var(--baris-red); }
.software-row:focus-within .software-row__text { color: #707070; }
.software-row:focus-within .software-row__num  { color: var(--baris-red); }
.software-row:focus-within .software-row__caps li {
    background: transparent;
    border-color: rgba(41, 41, 41, .15);
    color: #555;
}
.software-row:focus-within .software-row__go {
    background: var(--baris-red);
    transform: translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
    .software-row:hover::before { transform: scaleY(1); }
    .software-row:hover::after  { transform: scaleX(1); }

    .software-row:hover .software-row__name.software-row__name { color: var(--baris-ink); }
    .software-row:hover .software-row__role { color: var(--baris-red); }
    .software-row:hover .software-row__text { color: #707070; }
    .software-row:hover .software-row__num  { color: var(--baris-red); }
    .software-row:hover .software-row__caps li {
        background: transparent;
        border-color: rgba(41, 41, 41, .15);
        color: #555;
    }
    .software-row:hover .software-row__go {
        background: var(--baris-red);
        transform: translateX(4px);
    }
}

/* Klavye odağı yalnızca renkle anlatılmaz — görünür bir halka da vardır. */
.software-row:focus-visible {
    outline: 2px solid var(--baris-red);
    outline-offset: -4px;
}

/* --- İŞ ORTAĞI LOGOSU ----------------------------------------------------
   Logo HİÇBİR durumda yeniden renklendirilmez: filter, invert, opacity
   veya mix-blend-mode uygulanmaz. Yalnızca 2px dikey hareket.             */
.software-row__logo {
    display: block;
    max-width: 132px;
    max-height: 30px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: .75rem;
    transform-origin: left center;
    transition: transform 250ms ease;
}

.software-row:hover .software-row__logo,
.software-row:focus-within .software-row__logo { transform: translateY(-2px); }

/* Koyu varsayılan zeminde tam renkli logoların okunması için ölçülü
   bir açık plaka. Logonun kendisine dokunulmaz — yalnızca ARKASINDAKİ
   yüzey değişir. Kart açık duruma geçtiğinde plaka görünmez olur. */
.software-row__id {
    position: relative;
}

.software-row__logo-plate {
    /* inline-block: inline-flex içinde SVG logolar 0x0'a çöküyordu
       (esnek öğe taban boyutu + max-height birleşimi). */
    display: inline-block;
    padding: 7px 11px;
    line-height: 0;
    margin-bottom: .75rem;
    background: rgba(255, 255, 255, .93);
    border-radius: 2px;
    transition: background-color 320ms ease;
}

.software-row__logo-plate .software-row__logo {
    margin-bottom: 0;
    /* Daralan (shrink-to-fit) bir kapsayıcı içinde width:auto + max-* olan
       değiştirilmiş öğe 0x0'a çöküyordu. Ölçek AÇIK YÜKSEKLİKLE verilir,
       genişlik otomatik kalır: oran korunur, logo esnetilmez.
       Renk, biçim ve oran hiçbir durumda değiştirilmez. */
    width: auto;
    max-width: none;
    max-height: none;
    height: 26px;
}

/* Her markanın optik ağırlığı farklı; yükseklikler göz hizasına göre ayarlı.
   Bunlar ÖLÇEK değerleridir — yeniden çizim veya kırpma değildir. */
.software-row__logo-plate .brand-mark--zirve    { height: 30px; }
.software-row__logo-plate .brand-mark--mikro    { height: 27px; }
.software-row__logo-plate .brand-mark--parasut  { height: 23px; }
.software-row__logo-plate .brand-mark--dia      { height: 32px; }
.software-row__logo-plate .brand-mark--narbulut { height: 21px; }
.software-row__logo-plate .brand-mark--logo     { height: 26px; }

.software-row:hover .software-row__logo-plate,
.software-row:focus-within .software-row__logo-plate { background: transparent; }

.brand-mark--zirve { max-height: 34px; max-width: 120px; }
.brand-mark--mikro { max-height: 31px; max-width: 116px; }
.brand-mark--parasut { max-height: 27px; max-width: 116px; }
.brand-mark--dia { max-height: 38px; max-width: 58px; }
.brand-mark--narbulut { max-height: 25px; max-width: 126px; }
.brand-mark--logo { max-height: 30px; max-width: 92px; }

.software__note {
    grid-column: 1 / -1;
    max-width: 72ch;
    margin: 1.5rem 0 0;
    font-size: .8125rem;
    color: var(--baris-muted);
}


/* ==========================================================================
   09. BT ALTYAPISI (koyu bölüm)
   ========================================================================== */

.infra { background: var(--baris-ink-black); }          /* teknik siyaha yakın */

/* Beyaz bölümden koyu bölüme geçiş: dekoratif dalga yok. Üstteki bölümün
   hairline dili koyu yüzeyde çok soluk bir çizgi olarak devam ediyor,
   böylece kesik bir duvar değil, sürekli bir sistem okunuyor. */
.infra::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .07);
}

.infra__head {
    grid-column: 1 / span 5;
    grid-row: 1;
}

.infra__caps {
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    max-width: 44ch;
}

.infra__caps li {
    padding: .35rem .7rem;
    border: 1px solid var(--baris-line-dark);
    border-radius: 2px;
    font-size: .71875rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .68);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.infra__caps li:hover {
    border-color: var(--baris-red);
    color: #fff;
}

.infra__visual {
    grid-column: 6 / -1;
    grid-row: 1 / span 2;
    position: relative;
    align-self: stretch;
    display: flex;
}

.infra__visual .b-visual {
    aspect-ratio: auto;
    width: 100%;
    min-height: clamp(620px, 54vw, 780px);
    height: 100%;
    flex: 1 1 auto;
}

.infra__visual .b-visual {
    background: var(--baris-surface-dark-3);
}

.infra__index {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    margin: clamp(1rem, 3vw, 2rem) 0 0;
    padding: 0;
    list-style: none;
}

.infra-item {
    position: relative;
    padding: 1.5rem 1.25rem 0 0;
    border-top: 1px solid var(--baris-line-dark);
}

.infra-item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--baris-red);
    transition: width var(--dur-slow) var(--ease);
}

.infra-item:hover::before { width: 100%; }

.infra-item__key {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.infra-item__key b {
    color: rgba(255, 255, 255, .82);
    font-variant-numeric: tabular-nums;
    transition: color var(--dur) var(--ease);
}

.infra-item:hover .infra-item__key b { color: var(--baris-red); }

.infra-item__title {
    margin: .6rem 0 .5rem;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -.015em;
    color: #fff;
}

.infra-item__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .58);
}




/* ==========================================================================
   07b. MALİ MÜŞAVİR  ·  ZİRVE  ·  e-DÖNÜŞÜM
   Yeni görsel sistem yok: mevcut grid, hairline, kırmızı çizgi/nokta ve
   tipografi ölçeği aynen kullanılır.
   ========================================================================== */

/* --- Mali Müşavir -------------------------------------------------------- */
.maliMusavir { background: var(--baris-warm-dark-1); }  /* koyu editoryal */

.maliMusavir::before {
    content: "";
    position: absolute;
    top: var(--space-xl);
    bottom: var(--space-xl);
    right: 0;
    width: clamp(5px, .65vw, 10px);
    background: var(--baris-red);
    opacity: .92;
    pointer-events: none;
}

.mm__head {
    grid-column: 1 / span 5;
    grid-row: 1;
    align-self: start;
    padding-top: clamp(1rem, 3vw, 3.5rem);
}
.mm__actions { margin-top: 2.25rem; }

.mm__visual {
    grid-column: 6 / -1;
    grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    margin-top: clamp(-2.5rem, -3vw, -1.25rem);
}

.mm__visual .b-visual {
    aspect-ratio: auto;
    width: 100%;
    min-height: clamp(620px, 55vw, 790px);
    height: 100%;
    flex: 1 1 auto;
}

/* Sekiz eş kart değil: numaralandırılmış iş akışı */
.mm__steps {
    grid-column: 1 / span 5;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(14px, 1.4vw, 22px);
    row-gap: 1.15rem;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.mm-step {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: .9rem;
    padding: 1rem .75rem 0 0;
    border-top: 1px solid var(--baris-line);
}

.mm-step::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--baris-red);
    transition: width var(--dur-slow) var(--ease);
}

.mm-step:hover::before { width: calc(100% - .75rem); }

.mm-step__num {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    font-variant-numeric: tabular-nums;
    color: var(--baris-muted);
    transition: color var(--dur) var(--ease);
}

.mm-step:hover .mm-step__num { color: var(--baris-red); }

.mm-step__title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--baris-ink);
}

.mm-step__text {
    display: block;
    margin-top: .3rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--baris-muted);
}

/* --- Zirve Yazılım ------------------------------------------------------- */
.zirve { background: var(--baris-warm-dark); }

.zirve__head   { grid-column: 1 / span 7; }
.zirve__visual {
    grid-column: 8 / -1;
    align-self: stretch;
    display: flex;
}

.zirve__visual .b-visual {
    aspect-ratio: auto;
    width: 100%;
    min-height: clamp(460px, 46vw, 700px);
}

.zirve__head { align-self: center; }

/* Orijinal asset geldiğinde açılacak logo yuvası */
.zirve__logo {
    display: block;
    /* Template'in genel img{width:100%;height:auto!important} kuralını
       geçersiz kıl; sıkı kırpılmış gerçek SVG optik olarak baskınlaşmasın. */
    width: 180px !important;
    height: auto !important;
    max-width: min(180px, 100%);
    object-fit: contain;
    margin-bottom: 1.5rem;
}

.zirve__caps {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    max-width: 52ch;
}

.zirve__caps li {
    padding: .35rem .7rem;
    border: 1px solid var(--baris-line-dark);
    border-radius: 2px;
    font-size: .71875rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .68);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.zirve__caps li:hover { border-color: var(--baris-red); color: #fff; }

/* Bayilik ifadesi — onaylı metin gelene kadar yer tutucu */
.zirve__badge {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin: 2rem 0 0;
    padding: .85rem 1.1rem;
    border: 1px solid var(--baris-line-dark);
    border-left: 2px solid var(--baris-red);
    border-radius: 2px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.zirve__badge-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--baris-red);
    flex: none;
}

.zirve__actions { margin-top: 2.25rem; }

/* --- e-Dönüşüm ----------------------------------------------------------- */
.edonusum { background: var(--baris-warm-dark-1); }     /* koyu sıcak grafit */

.edonusum__head { grid-column: 1 / span 6; }

.edonusum__body {
    grid-column: 8 / -1;
    align-self: end;
}

.edonusum__body p {
    margin: 0 0 1.1rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--baris-muted);
}

/* Süreç akışı :: altı eş kart yerine tek yönlü hat.
   Kırmızı nokta ve yatay çizgi mevcut marka dilinin devamı. */
.edonusum__flow {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: clamp(12px, 1.6vw, 24px);
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    padding: 0;
    list-style: none;
}

.edonusum__flow::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--baris-line);
}

.edonusum-step { position: relative; padding: 1.6rem 1rem 0 0; }

.edonusum-step__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--baris-bg);
    box-shadow: inset 0 0 0 1px var(--baris-line);
    transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* İlk ve son adım markanın kırmızı noktası ile işaretlenir */
.edonusum-step:first-child .edonusum-step__dot,
.edonusum-step:last-child .edonusum-step__dot {
    background: var(--baris-red);
    box-shadow: none;
}

.edonusum-step:hover .edonusum-step__dot {
    background: var(--baris-red);
    box-shadow: none;
}

.edonusum-step__title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--baris-ink);
}

.edonusum-step__text {
    display: block;
    margin-top: .35rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--baris-muted);
}

/* Belge tipleri */
.edonusum__docs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--baris-line);
}

.edoc {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: .9rem;
    align-items: start;
    padding: 1.25rem 1rem 1.25rem 0;
    border-bottom: 1px solid var(--baris-line);
}

.edoc__body { display: flex; flex-direction: column; gap: .2rem; }

.edoc__name {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--baris-ink);
}

.edoc__desc {
    font-size: .8125rem;
    color: var(--baris-muted);
}


/* ==========================================================================
   09b. AĞ / VERİ AKIŞI GÖRSELLEŞTİRMESİ
   Saf SVG + CSS. Paket hareketi stroke-dasharray/dashoffset ile yapılır;
   yol uzunlukları js/baris.js tarafından ölçülüp --len değişkenine yazılır.
   Canvas, particle sistemi veya animasyon kütüphanesi kullanılmadı.
   ========================================================================== */

.infra__network {
    grid-column: 1 / span 5;
    grid-row: 2;
    align-self: end;
    margin-top: 0;
    padding-top: clamp(1.15rem, 2vw, 1.75rem);
    border-top: 1px solid var(--baris-line-dark);
}

.netviz__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: clamp(.5rem, 1.5vw, 1rem);
}

.netviz__title,
.netviz__status {
    margin: 0;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.netviz__status {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.netviz__status b { color: #fff; font-weight: 600; }

.netviz__pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--baris-red);
    animation: baris-led 2.8s var(--ease-inout) infinite;
}

.netviz {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Üç topoloji varyantı tek bir görsel dili paylaşır (aynı sınıflar, aynı JS).
   Varsayılan = masaüstü; diğer ikisi kırılım noktalarında açılır.
   bkz. css/baris-responsive.css · HOME BT ALTYAPISI */
.netviz--tablet,
.netviz--mobile { display: none; }


/* Görünür alan dışındayken paketler durur — boşa compositor işi yapılmaz.
   .is-idle sınıfı js/baris.js içindeki IntersectionObserver tarafından yönetilir. */
.netviz.is-idle .netviz__packet,
.netviz.is-idle ~ * .netviz__pulse { animation-play-state: paused; }

.infra__network.is-idle .netviz__pulse,
.infra__network.is-idle .netviz__packet { animation-play-state: paused; }

/* --- Bağlantı hatları ---------------------------------------------------- */
.netviz__link {
    stroke: rgba(255, 255, 255, .13);
    stroke-width: 1;
    transition: stroke .4s var(--ease), stroke-width .4s var(--ease);
}

.netviz__link--tail { stroke: rgba(255, 255, 255, .09); }

/* --- Veri paketleri ------------------------------------------------------ */
.netviz__packet {
    stroke: rgba(255, 255, 255, .62);
    stroke-width: 2;
    stroke-linecap: round;
    /* --len ve --dash JS tarafından yazılır; yazılmazsa paket görünmez */
    stroke-dasharray: var(--dash, 0) var(--gap, 99999);
    animation: netviz-travel var(--dur, 9s) linear var(--delay, 0s) infinite;
}

.netviz__packet--red { stroke: var(--baris-red); stroke-width: 2.4; }

@keyframes netviz-travel {
    from { stroke-dashoffset: var(--len, 0); opacity: 0; }
    6%   { opacity: 1; }
    92%  { opacity: 1; }
    to   { stroke-dashoffset: 0; opacity: 0; }
}

/* --- Düğümler ------------------------------------------------------------ */
.netviz__node { cursor: default; }

.netviz__halo {
    fill: rgba(255, 255, 255, .05);
    opacity: 0;
    transform: scale(.6);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.netviz__dot {
    fill: rgba(255, 255, 255, .42);
    transition: fill .4s var(--ease), r .4s var(--ease);
}

.netviz__node--key .netviz__dot { fill: var(--baris-red); }

.netviz__label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-anchor: middle;
    fill: rgba(255, 255, 255, .3);
    transition: fill .4s var(--ease);
}

/* Dikey mobil zincirde etiket düğümün SAĞINDA durur; ortalanmış etiket
   düğümün ve bağlantı çizgisinin üzerine biniyordu.
   .netviz__label ile aynı özgüllük (0,1,0) — bu yüzden ONDAN SONRA
   tanımlanmak zorunda, aksi hâlde text-anchor:middle kazanır. */
.netviz__label--side { text-anchor: start; }

/* Masaüstünde düğüm vurgusu — mobilde hover'a bağımlı hiçbir bilgi yok */
.netviz.is-focused .netviz__link { stroke: rgba(255, 255, 255, .07); }
.netviz.is-focused .netviz__packet { opacity: .18; }
.netviz.is-focused .netviz__label { fill: rgba(255, 255, 255, .18); }
.netviz.is-focused .netviz__dot { fill: rgba(255, 255, 255, .22); }

.netviz .netviz__link.is-lit {
    stroke: var(--baris-red);
    stroke-width: 1.6;
}

.netviz .netviz__node.is-lit .netviz__dot { fill: #fff; }
.netviz .netviz__node.is-lit .netviz__label { fill: #fff; }
.netviz .netviz__node.is-lit .netviz__halo { opacity: 1; transform: scale(1); }


/* --- Ağ görselleştirmesi :: mobil sadeleştirme -------------------------
   Efekt gizlenmiyor, hafifletiliyor: 4 kilit düğüm + 2 animasyonlu rota. */
/* Dar masaüstü (1180–1240) :: menü 8 başlığa çıktığı için logo ile çakışıyordu.
   Mobil menü eşiği js/all.js'te 1179px; bu aralık masaüstü menüde kalır. */
@media (min-width: 1180px) and (max-width: 1240px) {
    .baris-nav .nav-logo-wrap .logo { padding-right: 16px; }
    .baris-nav .nav-logo-wrap .logo img { height: 44px; }
    .baris-nav.small-height .nav-logo-wrap .logo img { height: 38px; }

    .baris-nav .inner-nav > ul > li > a {
        padding: 0 9px;
        font-size: .75rem;
    }

    .baris-nav .inner-nav > ul > li > a::after { left: 9px; right: 9px; }

    .baris-nav .inner-nav > ul > li.baris-nav__cta { margin-left: 10px; }

    .baris-nav .inner-nav > ul > li > a.b-btn {
        padding: 0 .9rem;
        font-size: .6875rem;
    }
}

/* Tablet :: geniş çerçeve korunur (6 düğüm sığıyor) ama SVG küçüldüğü için
   etiketler ölçek sonrası okunur kalsın diye büyütülür. */
@media (min-width: 768px) and (max-width: 1099px) {
    .netviz__label { font-size: 13px; }
}

@media (max-width: 767px) {
    /* viewBox js/baris.js tarafından dar çerçeveye alınır; çerçeve dışına taşan
       yol parçaları görünmesin diye kırpma açılır. */
    .netviz { overflow: hidden; }

    .netviz__node[data-net-node="backup"],
    .netviz__node[data-net-node="cloud"] { display: none; }

    /* Gizlenen düğümlere giden hatlar da kapanır — boşluğa uzanan çizgi kalmaz */
    .netviz__link[data-net-link="security backup"],
    .netviz__link[data-net-link="security cloud"],
    .netviz__link[data-net-link="cloud"] { display: none; }

    /* Üç rotadan biri kapanır: kalan iki rota akmaya devam eder */
    .netviz__packet:first-child { display: none; }

    /* Çerçeve daraldığı için etiketler ölçek sonrası okunur boyuta çıkarılır */
    .netviz__label { font-size: 19px; letter-spacing: .06em; }

    .netviz__head { margin-bottom: .75rem; }
}


/* ==========================================================================
   09c. ÇÖZÜM EKOSİSTEMİ  ·  kompakt logo rayı
   Uzun içerik bölümü değil; tek satırlık kimlik bandı.
   ========================================================================== */

.partner-rail__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: center;
    column-gap: clamp(24px, 3vw, 56px);
}

.partner-rail__title {
    margin: 0;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.35;
    color: var(--baris-ink);
    max-width: 26ch;
}

.partner-rail__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 0;
    border-bottom: 0;
}

.partner-rail__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 1rem .5rem;
}

.partner-rail__item + .partner-rail__item { border-left: 1px solid var(--baris-line); }

/* Kırmızı çizgi aktivasyonu — marka dilinin devamı */
.partner-rail__item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--baris-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.partner-rail__item:hover::after { transform: scaleX(1); }

.partner-rail__name {
    font-size: clamp(.95rem, 1.15vw, 1.125rem);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--baris-ink);
    opacity: .5;
    transition: opacity var(--dur) var(--ease);
}

.partner-rail__item:hover .partner-rail__name { opacity: 1; }

/* Logo yuvası (eski ray) — üretim sertleştirmesi §4: `opacity: .68` KALDIRILDI.
   Logolar hiçbir bağlamda opaklıkla sönükleştirilmez. */
.partner-rail__item img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform var(--dur) var(--ease);
}

.partner-rail__item:hover img { transform: translateY(-1px) scale(1.015); }

.partner-rail__item .brand-mark--zirve { max-height: 42px; max-width: 92px; }
.partner-rail__item .brand-mark--mikro { max-height: 35px; max-width: 92px; }
.partner-rail__item .brand-mark--parasut { max-height: 26px; max-width: 96px; }
.partner-rail__item .brand-mark--dia { max-height: 42px; max-width: 52px; }
.partner-rail__item .brand-mark--narbulut { max-height: 23px; max-width: 108px; }
.partner-rail__item .brand-mark--logo { max-height: 29px; max-width: 84px; }

/* Zirve'ye ölçülü öncelik */
.partner-rail__item--lead .partner-rail__name { opacity: .85; }

.partner-rail__item--lead::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--baris-red);
}

/* ==========================================================================
   10. TEKNİK DESTEK
   ========================================================================== */

.support { background: var(--baris-warm-dark-2); }      /* biraz daha sıcak koyu */

.support__visual {
    grid-column: 1 / span 7;
    position: relative;
    align-self: stretch;
    display: flex;
}

.support__visual .b-visual {
    aspect-ratio: auto;
    width: 100%;
    min-height: clamp(560px, 48vw, 720px);
    height: 100%;
    flex: 1 1 auto;
}

.support__body {
    grid-column: 8 / -1;
    align-self: center;
}

.support__list {
    margin: 1.65rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--baris-line);
}

.support-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    padding: .85rem .25rem;
    border-bottom: 1px solid var(--baris-line);
    transition: padding-left var(--dur) var(--ease);
}

.support-item:hover { padding-left: .9rem; }

.support-item__num {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    color: var(--baris-muted);
    font-variant-numeric: tabular-nums;
    transition: color var(--dur) var(--ease);
}

.support-item:hover .support-item__num { color: var(--baris-red); }

.support-item__title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--baris-ink);
}

.support-item__text {
    display: block;
    margin-top: .2rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--baris-muted);
}

.support__actions { margin-top: 2.25rem; }



/* ==========================================================================
   11. KURUMSAL / GÜVEN
   ========================================================================== */

/* İŞ ORTAĞI RAYI — bilinçli AÇIK "nefes" adası (§5, §6).
   Tam renkli iş ortağı logoları en iyi açık yüzeyde okunur; logolara
   filtre/opaklık uygulanmaz. Bölüm koyu ton sınıfını taşıdığı için
   koyu bağlam metin renkleri buraya SIZAR — bu yüzden ada kendi
   açık bağlam renklerini açıkça geri alır (aksi hâlde beyaz başlık
   beyaz zeminde kaybolur). */
/* Bu bölüm KOYU TON SINIFI TAŞIMAZ (bkz. index.php). Koyu bağlam
   kurallarıyla özgüllük yarışına girmemesi için tasarım kararı bu:
   ada gerçekten açık bir bölümdür, koyu bölümün üzerine yamalanmış
   bir istisna değildir. Böylece metin renkleri varsayılan açık
   bağlamdan gelir ve hiçbir override gerekmez. */
.partner-rail {
    background: var(--baris-warm-white);
    color: var(--baris-muted);
}

/* KURUMSAL — §24: sıcak kömür, "kurumsal siyah boşluk" değil.
   Önceki açık taş zemin kaldırıldı; koyu bağlam renkleri geçerli olsun. */
.about { background: var(--baris-warm-dark-1); }

.about__head { grid-column: 1 / span 6; }

.about__body {
    grid-column: 8 / -1;
    align-self: start;
}

.about__body p {
    margin: 0 0 1.15rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--baris-muted);
}

.about__points {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: 2rem;
    margin: clamp(1rem, 3vw, 2rem) 0 0;
    padding: 0;
    list-style: none;
}

.about-point {
    position: relative;
    padding: 1.35rem 1.25rem 0 0;
    border-top: 1px solid var(--baris-line);
}

.about-point::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 26px;
    height: 1px;
    background: var(--baris-red);
}

.about-point h3 {
    margin: 0 0 .45rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.012em;
}

.about-point p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--baris-muted);
}


/* ==========================================================================
   13. KAPANIŞ CTA
   ========================================================================== */

.cta {
    position: relative;
    background: var(--baris-warm-dark);
    overflow: hidden;
}

.cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--baris-red);
}

/* Ölçülü kırmızı alan — arka plan teması değil, kompozisyon aksanı */
.cta::after {
    content: "";
    position: absolute;
    right: calc(var(--gutter) * -1);
    bottom: -30%;
    width: min(38vw, 520px);
    height: min(38vw, 520px);
    background: radial-gradient(circle at 50% 50%, rgba(var(--baris-red-rgb), .26), transparent 62%);
    pointer-events: none;
}

.cta__inner { position: relative; z-index: 1; }

.cta__head { grid-column: 1 / span 8; }

.cta__title {
    margin: 0;
    font-size: clamp(1.9rem, 3.3vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: #fff;
}

.cta__title > span { display: block; }

.cta__lead {
    margin: 1.5rem 0 0;
    max-width: 44ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .62);
}

.cta__side {
    grid-column: 9 / -1;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cta__side .b-actions { flex-direction: column; align-items: stretch; }

.cta__note {
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--baris-line-dark);
    font-size: .8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .5);
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.b-footer {
    background: var(--baris-surface-dark);
    color: rgba(255, 255, 255, .6);
    padding-top: clamp(3rem, 5vw, 4.5rem);
    padding-bottom: 1.75rem;
    border-top: 1px solid var(--baris-line-dark);
}

.b-footer__grid {
    display: grid;
    grid-template-columns: 1.65fr repeat(4, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 48px);
    row-gap: 2.5rem;
}

.b-footer__brand {
    position: relative;
    max-width: 38ch;
    margin: calc(clamp(3rem, 5vw, 4.5rem) * -1) 0 -1.75rem calc(var(--gutter) * -1);
    padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 3.5vw, 3.75rem) 2.75rem var(--gutter);
    background: var(--baris-bg);
    color: var(--baris-ink);
    border-left: 3px solid var(--baris-red);
}

.b-footer__brand::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin-top: 1.5rem;
    background: var(--baris-red);
}

.b-footer__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.b-footer__logo img {
    width: auto;
    height: 44px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* Elimizdeki logo açık zemin için üretildiğinden koyu footer'da kendi
   renklerini koruyan beyaz bir yüzeye oturur. Logoya filter/invert
   UYGULANMAZ. Gerçek koyu-zemin varyantı gelirse bu sınıf hiç eklenmez. */
.b-footer__statement {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--baris-muted);
}

.b-footer__col h2 {
    margin: 0 0 1.1rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.b-footer__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.b-footer__col li + li { margin-top: .55rem; }

.b-footer__col a {
    font-size: .875rem;
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.b-footer__col a:hover {
    color: #fff;
    text-decoration: none;
}

.b-footer__social {
    display: flex;
    gap: .5rem;
    margin-top: 1.75rem;
}

.b-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--baris-line-dark);
    border-radius: 2px;
    color: rgba(255, 255, 255, .62);
    font-size: 15px;
    transition: border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.b-footer__social a:hover {
    border-color: var(--baris-red);
    background: var(--baris-red);
    color: #fff;
    text-decoration: none;
}

.b-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--baris-line-dark);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .42);
}

.b-footer__bottom p { margin: 0; }
.b-footer__bottom a { color: rgba(255, 255, 255, .6); }
.b-footer__bottom a:hover { color: #fff; text-decoration: none; }

/* Başa dön */
.b-footer .link-to-top {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--baris-line-dark);
    border-radius: 2px;
    color: #fff;
}

.b-footer .link-to-top:hover {
    background: var(--baris-red);
    border-color: var(--baris-red);
}

.b-footer .b-top-icon {
    width: 20px;
    height: 20px;
    display: block;
    margin: auto;
}


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* ---- ≤ 1099px ---------------------------------------------------------- */
@media (max-width: 1099px) {
    .solution--lead  { grid-column: span 6; min-height: 420px; }
    .solution--wide  { grid-column: span 6; }
    .solution--third { grid-column: span 6; }
    .solution--lead  { grid-row: span 2; }

    /* İki kolonda son hücre tek başına kalıyor; boş grid gözü görünmesin diye
       satırın tamamını kaplar. */
    .solutions-grid > :last-child { grid-column: 1 / -1; }

    .software__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- ≤ 1179px : navigasyon mobil moda geçer ---------------------------- */
@media (max-width: 1179px) {
    :root { --nav-h: 74px; --nav-h-small: 62px; }

    /* Hero :: metin okunurluğu için scrim tabana döner, görsel arka planda kalır */
    .hero { min-height: clamp(680px, 88vh, 860px); }

    .hero-slide__scrim {
        background:
            linear-gradient(180deg, rgba(21, 21, 21, .45) 0%, rgba(21, 21, 21, .62) 55%, rgba(21, 21, 21, .94) 100%),
            linear-gradient(90deg, rgba(21, 21, 21, .78) 0%, rgba(21, 21, 21, .18) 100%);
    }

    .hero-slide--c .hero-slide__scrim {
        background:
            linear-gradient(180deg, rgba(21, 21, 21, .42) 0%, rgba(21, 21, 21, .60) 55%, rgba(21, 21, 21, .94) 100%),
            linear-gradient(90deg, rgba(21, 21, 21, .78) 0%, rgba(21, 21, 21, .16) 100%);
    }

    /* TABLET KADRAJI (768–1179) — <=767 kendi bloğunda ezer.
       Telefondan daha GENİŞ bir pencere: çevresel bağlam korunur.
       01: monitör + profesyonel + arkadaki kabin
       02: mali müşavirin yüzü + çift monitörlü istasyon
       03: kablolu rack GÖVDESİ + teknisyen (teknisyen portresi değil)     */
    .hero-slide--a .hero-media img { object-position: 74% 50%; }
    .hero-slide--b .hero-media img { object-position: 76% 50%; }
    .hero-slide--c .hero-media img { object-position: 72% 50%; }
    .solution--media .solution__bg img { object-position: 54% 58%; }
    .support__visual .b-visual__img    { object-position: 52% 50%; }
    .mm__visual .b-visual__img         { object-position: 50% 48%; }
    .zirve__visual .b-visual__img      { object-position: 54% 44%; }
    .infra__visual .b-visual__img      { object-position: 48% 50%; }
    .hero-slide__col { max-width: none; padding-left: 0; }

    .b-bleed-r { margin-right: calc(var(--gutter) * -1); }
    .b-bleed-l { margin-left: calc(var(--gutter) * -1); }

    .mm__visual .b-visual,
    .zirve__visual .b-visual,
    .support__visual .b-visual,
    .infra__visual .b-visual { min-height: clamp(300px, 56vw, 460px); }

    .hero-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-rail__item:nth-child(odd) { border-left: 0; padding-left: 0; }
    .hero-rail__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); }

    .baris-nav .nav-logo-wrap .logo img { height: 46px; }
    .baris-nav.small-height .nav-logo-wrap .logo img { height: 38px; }
    .baris-nav .nav-logo-wrap .logo { padding-right: 20px; }


    .solutions__head,
    .solutions__aside,
    .software__intro,
    .software__list,
    .software__note,
    .infra__head,
    .infra__visual,
    .infra__network,
    .support__visual,
    .support__body,
    .about__head,
    .about__body,
    .mm__head,
    .mm__visual,
    .zirve__head,
    .zirve__visual,
    .edonusum__head,
    .edonusum__body,
    .cta__head,
    .cta__side { grid-column: 1 / -1; }

    .infra__head,
    .infra__visual,
    .infra__network,
    .mm__head,
    .mm__visual,
    .mm__steps { grid-row: auto; }

    .mm__head { padding-top: 0; }
    .mm__visual { margin-top: 0; }
    .mm__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .infra__visual .b-visual,
    .mm__visual .b-visual,
    .support__visual .b-visual { height: auto; }

    @supports (position: sticky) {
        .software__intro { position: static; }
    }

    .b-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
    .b-footer__brand {
        grid-column: 1 / -1;
        max-width: none;
        margin-right: calc(var(--gutter) * -1);
    }
}

/* ---- ≤ 900px ----------------------------------------------------------- */
@media (max-width: 900px) {
    .infra__index,
    .about__points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }


    .mm__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .partner-rail__inner { grid-template-columns: 1fr; row-gap: 1.75rem; }
    .partner-rail__title { max-width: none; }
    .partner-rail__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .partner-rail__item:nth-child(3n+1) { border-left: 0; }
    .partner-rail__item:nth-child(n+4) { border-top: 1px solid var(--baris-line); }

    .edonusum__flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.75rem; }
    .edonusum__flow::before { display: none; }
    .edonusum-step { border-top: 1px solid var(--baris-line); padding-top: 1.6rem; }
    .edonusum__docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }


    .software-row__inner {
        grid-template-columns: 36px minmax(0, 1fr) 20px;
        grid-template-areas:
            "num id go"
            ". text text";
    }

    .cta__side .b-actions { flex-direction: row; }
}

/* ---- ≤ 767px : tek kolon ---------------------------------------------- */
@media (max-width: 767px) {
    /* MOBİL SCRIM — <=1179'daki yatay .78'lik bileşen masaüstünden kalmaydı:
       metin orada SOL sütunda duruyordu. Telefonda metin tam genişlik olduğu
       için bu bileşen tüm kareyi karartıp fotoğrafı görünmez kılıyordu.
       Burada ağırlık DİKEYE alınır: üstte görsel okunur, altta metnin oturduğu
       bölge korunur. */
    .hero-slide__scrim {
        background:
            linear-gradient(180deg,
                rgba(21, 21, 21, .34) 0%,
                rgba(21, 21, 21, .50) 40%,
                rgba(21, 21, 21, .86) 74%,
                rgba(21, 21, 21, .95) 100%),
            linear-gradient(90deg, rgba(21, 21, 21, .50) 0%, rgba(21, 21, 21, .10) 100%);
    }

    .hero-slide--c .hero-slide__scrim {
        background:
            linear-gradient(180deg,
                rgba(21, 21, 21, .30) 0%,
                rgba(21, 21, 21, .48) 40%,
                rgba(21, 21, 21, .86) 74%,
                rgba(21, 21, 21, .95) 100%),
            linear-gradient(90deg, rgba(21, 21, 21, .48) 0%, rgba(21, 21, 21, .08) 100%);
    }

    /* MOBİL KADRAJ — slayt başına ayrı ayrı ölçüldü. Kaynak görsellerin
       SOL ~%40'ı anlamsız koyu duvar; tek bir ortak kural üçünde de yanlış
       sonuç veriyordu. Dikey eksen mobilde etkisiz: 16:9 görsel, telefonda
       yüksekliğe göre ölçeklendiği için düşey kırpma yok — yalnızca X önemli.
       01 %72: monitör (görselin %52–69'u) + profesyonel
       02 %66: mali müşavirin yüzü kadraja ortalanır, istasyon korunur
       03 %60: rack ve kablolar baskın kalır — teknisyen portresi DEĞİL     */
    .hero-slide--a .hero-media img { object-position: 72% 50%; }
    .hero-slide--b .hero-media img { object-position: 66% 50%; }
    .hero-slide--c .hero-media img { object-position: 60% 50%; }
    .solution--media .solution__bg img { object-position: 58% 60%; }
    .support__visual .b-visual__img    { object-position: 52% 48%; }
    .mm__visual .b-visual__img         { object-position: 48% 48%; }
    .zirve__visual .b-visual__img      { object-position: 55% 42%; }
    .infra__visual .b-visual__img      { object-position: 52% 50%; }
    body { font-size: 16px; }

    .b-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }




    .hero { min-height: 0; padding-bottom: 0; }
    .hero__track { min-height: clamp(400px, 52svh, 470px); }
    /* --- MOBİL BAŞLIK HİYERARŞİSİ · TEK KAYNAK ------------------------------
       Sorun: .hero-slide--a/--b/--c .hero-slide__title masaüstü kuralları
       (0,2,0) MEDYA SORGUSU DIŞINDA tanımlı olduğu için mobil taban kuralını
       (0,1,0) yeniyordu. B ve C'ye mobil karşılık yazılmıştı, A'ya
       YAZILMAMIŞTI — bu yüzden yalnızca slayt 01 telefonda 52px kalıyordu.

       Çözüm: üç slayt da AYNI özgüllükte (0,2,0) tek bir blokta tanımlanır.
       Seçici savaşı yok, !important yok. Metin uzunluğu farklı olduğu için
       yalnızca küçük, bilinçli bir fark bırakılır. */
    .hero-slide--a .hero-slide__title,
    .hero-slide--b .hero-slide__title,
    .hero-slide--c .hero-slide__title {
        font-size: clamp(2.15rem, 10.2vw, 2.65rem);   /* 390'da ~40px */
        line-height: 1.08;
        letter-spacing: -.03em;
    }

    /* Slayt 02'nin metni en uzun olan — bir tık daha küçük kalır. */
    .hero-slide--b .hero-slide__title { font-size: clamp(2.05rem, 9.6vw, 2.5rem); }
    .b-btn--hero { min-height: 56px; padding: .9rem 1.4rem; }
    .hero-slide__lead { margin-top: 1.5rem; }
    .hero-slide__actions { margin-top: 2rem; }
    .hero-slide__actions .b-btn { width: 100%; justify-content: flex-start; }
    .hero-nav__inner { align-items: center; }
    .hero-rail__item { padding-right: .75rem; }

    /* Mobilde kontroller tam genişlik, dokunma hedefleri korunur */
    .hero-nav {
        align-items: center;
        gap: 1rem;
        padding-bottom: 1.25rem;
    }

    .hero-nav__bar { width: 34px; }
    .hero-nav__step.is-active .hero-nav__bar { width: 54px; }


    .baris-nav .nav-logo-wrap .logo img { height: 40px; }
    .baris-nav.small-height .nav-logo-wrap .logo img { height: 34px; }
    .b-footer__logo img { height: 38px; }

    .solutions-grid { grid-template-columns: 1fr; }
    .solution--lead,
    .solution--wide,
    .solution--third { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
    .solution--lead { min-height: 340px; }

    .software__intro {
        display: block;
        margin-bottom: 2.5rem;
    }
    .software__list { grid-template-columns: 1fr; }
    .software-row {
        min-height: 0;
        padding: 1.4rem 1.2rem 1.5rem;
    }

    .software-row__inner {
        grid-template-columns: minmax(0, 1fr) 24px;
        grid-template-areas:
            "num  go"
            "id   id"
            "text text";
        row-gap: .9rem;
    }

    .software-row__num { padding-top: 0; }
    .software-row__go  { align-self: start; }

    .support-item { grid-template-columns: 24px minmax(0, 1fr); }


    .mm__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
        row-gap: 1.25rem;
    }
    .mm-step {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .65rem;
        padding-right: .25rem;
    }
    .partner-rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .partner-rail__item:nth-child(odd) { border-left: 0; }
    .partner-rail__item:nth-child(n+3) { border-top: 1px solid var(--baris-line); }
    .partner-rail__item { min-height: 78px; }

    .edonusum__flow { grid-template-columns: 1fr; }
    .edonusum__docs { grid-template-columns: 1fr; }
    .zirve__badge { width: 100%; }


    .cta__side .b-actions { flex-direction: column; }
    .cta__side .b-btn { width: 100%; }

    .b-footer__grid { grid-template-columns: 1fr 1fr; }
    .b-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- ≤ 480px ----------------------------------------------------------- */
@media (max-width: 480px) {
    :root { --gutter: 20px; }

    .infra__index,
    .about__points { grid-template-columns: 1fr; }


    .hero-nav__steps { gap: 12px; }
    /* §6: ray dar ekranda da 2×2 kalır — tek kolona düşünce hero
       gereksiz uzuyor ve dört sütun mesajı zayıflıyordu. */
    .hero-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .b-footer__grid { grid-template-columns: 1fr; }

    .section-title,
    .section-title--lg,
    .edonusum .section-title--lg,
    .solutions .section-title--lg,
    .maliMusavir .section-title--lg,
    .about .section-title--lg { font-size: clamp(1.875rem, 8vw, 2.25rem); }
}

/* ==========================================================================
   16. ERİŞİLEBİLİRLİK & HAREKET TERCİHİ
   ========================================================================== */

.b-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100001;
    padding: .85rem 1.25rem;
    background: var(--baris-surface-dark);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
}

.b-skip-link:focus {
    left: 0;
    color: #fff;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
.b-btn:focus-visible,
.solution:focus-visible,
.software-row:focus-visible,
.mobile-nav:focus-visible {
    outline: 2px solid var(--baris-red);
    outline-offset: 3px;
}

.baris-nav .inner-nav > ul > li > a:focus-visible {
    outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .b-reveal { opacity: 1 !important; transform: none !important; }

    /* Slider: otomatik geçiş JS tarafında kapatılır, slaytlar anında değişir */
    .hero-slide__anim { opacity: 1 !important; transform: none !important; }
    .hero-media { transform: none !important; }
    .hero-nav__step.is-active .hero-nav__fill { animation: none !important; transform: scaleX(1) !important; }

    /* Ağ paketleri ve durum yanıp sönmesi tamamen durur (JS de ayrıca durdurur) */
    .netviz__packet { animation: none !important; opacity: 0 !important; }
    .b-visual__led,
    .netviz__pulse { animation: none !important; opacity: 1 !important; }

    /* Maske ve çizgi desenleri anında son hâline gelir */
    .b-reveal--mask { clip-path: none !important; }
    .b-reveal--line { transform: none !important; }
    .section-index::before { transform: scaleX(1) !important; }

    /* Hover hareketleri sadeleşir, bilgi kaybı olmaz */
    .partner:hover { transform: none !important; }
    .solution:hover .b-visual,
    .support__visual:hover .b-visual,
    .infra__visual:hover .b-visual { transform: none !important; }
}


/* ==========================================================================
   20. İÇ SAYFA TASARIM SİSTEMİ
   Ana sayfa dondurulmuştur. Buradaki bileşenler yalnızca iç sayfalarda
   kullanılır ve ana sayfanın hiçbir seçicisini geçersiz kılmaz.
   Sayfa başına ayrı CSS YOK — tüm iç sayfalar bu primitifleri paylaşır.
   ========================================================================== */

/* --- İç sayfa hero :: ana sayfa hero'su ile yarışmaz -------------------- */
.b-page-hero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 4.5rem));
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
    background: var(--baris-bg);
    overflow: hidden;
}

.b-page-hero--dark {
    background: var(--baris-surface-dark);
    color: rgba(255, 255, 255, .74);
}

.b-page-hero--dark .b-page-hero__title { color: #fff; }
.b-page-hero--dark .b-page-hero__lead  { color: rgba(255, 255, 255, .7); }
.b-page-hero--dark .b-breadcrumb       { color: rgba(255, 255, 255, .45); }
.b-page-hero--dark .b-breadcrumb a     { color: rgba(255, 255, 255, .65); }
.b-page-hero--dark .b-eyebrow          { color: rgba(255, 255, 255, .55); }

.b-page-hero__inner { position: relative; z-index: 2; }
.b-page-hero__col   { grid-column: 1 / span 7; }

.b-page-hero__title {
    margin: 0;
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);   /* 1440'ta ~52px, hero'nun altında */
    line-height: 1.06;
    letter-spacing: -.03em;
    font-weight: 700;
    color: var(--baris-ink);
}

/* Başlık satırları blok :: doğrudan çocuk seçici şart, aksi hâlde satır içi
   .hero__dot da blok olup alt satıra düşer. */
.b-page-hero__title > span { display: block; }
.b-page-hero__title .hero__dot { display: inline; color: var(--baris-red); }

.b-page-cta__title > span { display: block; }
.b-page-cta__title .hero__dot { display: inline; color: var(--baris-red); }

.b-page-hero__lead {
    margin: 1.5rem 0 0;
    max-width: 62ch;
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.72;
    color: var(--baris-muted);
}

.b-page-hero__actions { margin-top: 2.25rem; }

/* Görselli varyant :: sağ kenara taşan fotoğraf */
.b-page-hero--photo .b-page-hero__col { grid-column: 1 / span 6; }

.b-page-hero__visual {
    grid-column: 7 / -1;
    align-self: stretch;
    display: flex;
    margin-right: calc(var(--edge) * -1);
}

.b-page-hero__visual .b-visual {
    aspect-ratio: auto;
    width: 100%;
    min-height: clamp(280px, 26vw, 400px);
}

.b-page-hero__visual .b-visual__tick { display: none; }

/* --- Breadcrumb --------------------------------------------------------- */
.b-breadcrumb {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--baris-muted);
}

.b-breadcrumb li { display: flex; align-items: center; gap: .5rem; }

.b-breadcrumb li + li::before {
    content: "";
    width: 10px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}

.b-breadcrumb a { color: var(--baris-ink); text-decoration: none; }
.b-breadcrumb a:hover { color: var(--baris-red); text-decoration: none; }
.b-breadcrumb [aria-current] { color: var(--baris-muted); }

/* --- Bölüm girişi ------------------------------------------------------- */
.b-section-intro__head { grid-column: 1 / span 6; }

.b-section-intro__body {
    grid-column: 8 / -1;
    align-self: end;
}

.b-section-intro__body p {
    margin: 0 0 1.1rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--baris-muted);
    max-width: 62ch;
}

.b-section--dark .b-section-intro__body p { color: rgba(255, 255, 255, .64); }

/* --- Yetenek ızgarası :: ikon + başlık + tek satır ----------------------- */
.b-capability-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: 2.25rem;
    margin: clamp(1rem, 3vw, 2.5rem) 0 0;
    padding: 0;
    list-style: none;
}

.b-capability-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-capability-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.b-capability {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: .9rem;
    padding: 1.4rem 1.25rem 0 0;
    border-top: 1px solid var(--baris-line);
}

.b-section--dark .b-capability,
.b-page-hero--dark .b-capability { border-top-color: var(--baris-line-dark); }

.b-capability::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--baris-red);
    transition: width var(--dur-slow) var(--ease);
}

.b-capability:hover::before { width: calc(100% - 1.25rem); }

.b-capability__title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--baris-ink);
}

.b-section--dark .b-capability__title { color: #fff; }

.b-capability__text {
    display: block;
    margin-top: .3rem;
    font-size: .9375rem;
    line-height: 1.62;
    color: var(--baris-muted);
}

.b-section--dark .b-capability__text { color: rgba(255, 255, 255, .58); }

/* --- Süreç adımları :: yatay hat + kırmızı uç noktalar ------------------ */
.b-process {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    column-gap: clamp(12px, 1.6vw, 24px);
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    padding: 0;
    list-style: none;
}

.b-process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-process--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-process--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.b-process::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--baris-line);
}

.b-section--dark .b-process::before { background: var(--baris-line-dark); }

.b-process__step { position: relative; padding: 1.6rem 1rem 0 0; }

.b-process__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--baris-bg);
    box-shadow: inset 0 0 0 1px var(--baris-line);
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.b-section--white .b-process__dot { background: var(--baris-white); }

.b-process__step:first-child .b-process__dot,
.b-process__step:last-child .b-process__dot,
.b-process__step:hover .b-process__dot {
    background: var(--baris-red);
    box-shadow: none;
}

.b-process__title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--baris-ink);
}

.b-section--dark .b-process__title { color: #fff; }

.b-process__text {
    display: block;
    margin-top: .35rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--baris-muted);
}

/* --- Görsel + metin bölünmesi ------------------------------------------- */
.b-split__visual {
    grid-column: 1 / span 6;
    align-self: stretch;
    display: flex;
    margin-left: calc(var(--edge) * -1);
}

.b-split__visual--right {
    grid-column: 7 / -1;
    margin-left: 0;
    margin-right: calc(var(--edge) * -1);
}

.b-split__visual .b-visual {
    aspect-ratio: auto;
    width: 100%;
    min-height: clamp(360px, 34vw, 520px);
}

.b-split__visual .b-visual__tick { display: none; }

.b-split__body { grid-column: 8 / -1; align-self: center; }
.b-split__body--left { grid-column: 1 / span 6; }

/* Bölünmüş düzen TEK satırdır. Görsel sağdayken (DOM'da önce gelir) otomatik
   yerleştirme metni 2. satıra atıyordu → solda 490px boş hücre (BT hub
   regresyonu). Satır açıkça sabitlenir; ≤1024'te yığılmaya döner. */
.b-split__visual,
.b-split__visual--right,
.b-split__body,
.b-split__body--left { grid-row: 1; }

.b-split__body p {
    margin: 1.4rem 0 0;
    max-width: 62ch;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--baris-muted);
}

/* --- Marka satır indeksi (yazılım/ekosistem sayfaları) ------------------ */
.b-brand-list {
    grid-column: 1 / -1;
    margin: clamp(1rem, 3vw, 2rem) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--baris-line);
}

.b-brand {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.3fr) 24px;
    align-items: center;
    column-gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1.5rem, 2.4vw, 2.1rem) .25rem;
    border-bottom: 1px solid var(--baris-line);
    text-decoration: none;
    color: inherit;
    transition: padding-left var(--dur) var(--ease);
}

.b-brand:hover { padding-left: .8rem; text-decoration: none; color: inherit; }

.b-brand::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--baris-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease);
}

.b-brand:hover::after { transform: scaleX(1); }

.b-brand__num {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    font-variant-numeric: tabular-nums;
    color: var(--baris-muted);
}

.b-brand__name {
    margin: 0;
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
    font-weight: 600;
    letter-spacing: -.022em;
    color: var(--baris-ink);
}

.b-brand__role {
    display: block;
    margin-top: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--baris-muted);
    transition: color var(--dur) var(--ease);
}

.b-brand:hover .b-brand__role { color: var(--baris-red); }

.b-brand__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.68;
    color: var(--baris-muted);
}

.b-brand__go {
    width: 16px;
    height: 8px;
    background: var(--baris-ink);
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform var(--dur) var(--ease);
}

.b-brand:hover .b-brand__go { transform: translateX(5px); }

/* --- İlgili çözümler ---------------------------------------------------- */
.b-related {
    grid-column: 1 / -1;
    display: grid;
    /* auto-fit: BOŞ track'i çökertir. Sabit 4 kolonda 3 bağlantı verildiğinde
       kullanılmayan hücre, ızgaranın arka planı (çizgi rengi) yüzünden gri bir
       boşluk olarak görünüyordu. auto-fit ile 3 öğe satırı doldurur, 4 öğe
       yine 4 kolon olur. */
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1px;
    margin: clamp(1rem, 3vw, 2rem) 0 0;
    padding: 0;
    list-style: none;
    background: var(--baris-line);
    border: 1px solid var(--baris-line);
}

.b-related__item {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background: var(--baris-white);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--dur) var(--ease);
}

.b-related__item:hover { background: var(--baris-bg); text-decoration: none; color: inherit; }

.b-related__name {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--baris-ink);
}

.b-related__text { font-size: .875rem; line-height: 1.55; color: var(--baris-muted); }

/* --- Sayfa kapanış CTA :: ana sayfa CTA'sının sakin kardeşi ------------- */
.b-page-cta {
    position: relative;
    background: var(--baris-surface-dark);
    overflow: hidden;
}

.b-page-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--baris-red);
}

.b-page-cta::after {
    content: "";
    position: absolute;
    right: calc(var(--gutter) * -1);
    bottom: -30%;
    width: min(34vw, 460px);
    height: min(34vw, 460px);
    background: radial-gradient(circle at 50% 50%, rgba(170, 42, 33, .24), transparent 62%);
    pointer-events: none;
}

.b-page-cta__inner { position: relative; z-index: 1; }
.b-page-cta__head  { grid-column: 1 / span 7; }

.b-page-cta__title {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.85rem);
    line-height: 1.1;
    letter-spacing: -.028em;
    color: #fff;
}

.b-page-cta__lead {
    margin: 1.25rem 0 0;
    max-width: 52ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .62);
}

.b-page-cta__side {
    grid-column: 9 / -1;
    align-self: center;
}

.b-page-cta__side .b-actions { flex-direction: column; align-items: stretch; }


/* ==========================================================================
   20b. İÇ SAYFA RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .b-page-hero__col,
    .b-page-hero--photo .b-page-hero__col,
    .b-page-hero__visual,
    .b-section-intro__head,
    .b-section-intro__body,
    .b-split__visual,
    .b-split__visual--right,
    .b-split__body,
    .b-split__body--left,
    .b-page-cta__head,
    .b-page-cta__side { grid-column: 1 / -1; }

    .b-page-hero__visual { margin-right: calc(var(--gutter) * -1); order: 2; }
    .b-split__visual,
    .b-split__visual--right,
    .b-split__body,
    .b-split__body--left { grid-row: auto; }
    .b-split__visual { margin-left: calc(var(--gutter) * -1); }
    .b-split__visual--right { margin-left: 0; margin-right: calc(var(--gutter) * -1); }

    .b-capability-grid,
    .b-capability-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .b-process--4,
    .b-process--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.75rem; }
    /* §8: mobilde süreç DİKEY akar. Yatay bağlayıcı gizlenir ve yerine
       düğümleri birleştiren DİKEY bir çizgi gelir. Önceki çözüm adım başına
       border-top: var(--baris-line) kullanıyordu — bu AÇIK TEMA rengi
       (rgba(41,41,41,.14)) olduğu için koyu zeminde görünmüyordu ve süreç
       bağlantısız görünüyordu. */
    .b-process::before {
        top: 10px;
        bottom: 10px;
        left: 5px;
        right: auto;
        width: 1px;
        height: auto;
        background: rgba(255, 255, 255, .17);
    }

    .b-process__step {
        border-top: 0;
        padding: 0 0 1.6rem 1.75rem;
    }

    .b-process__step:last-child { padding-bottom: 0; }

    /* Nokta dikey hatta oturur */
    .b-process__dot { top: 5px; left: 0; }

    .b-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .b-brand { grid-template-columns: 44px minmax(0, 1fr) 24px; row-gap: .75rem; }
    .b-brand__text { grid-column: 2 / span 2; }
}

@media (max-width: 767px) {
    .b-page-hero { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 2.25rem; }
    .b-page-hero__title { font-size: clamp(2rem, 8.4vw, 2.7rem); }

    .b-capability-grid,
    .b-capability-grid--4,
    .b-capability-grid--2,
    .b-process--3,
    .b-process--4,
    .b-process--5,
    .b-related { grid-template-columns: 1fr; }

    .b-related__item { border-bottom: 0; }

    .b-brand { grid-template-columns: minmax(0, 1fr) 24px; }
    .b-brand__num { grid-column: 1 / -1; }
    .b-brand__text { grid-column: 1 / -1; }

    .b-page-cta__side .b-btn { width: 100%; }
}


/* ==========================================================================
   21. FORM SİSTEMİ  ·  iletişim / destek talebi
   Bootstrap'in .form-control görünümü kullanılmaz; Barış dili uygulanır.
   ========================================================================== */

.b-contact-form { grid-column: 7 / -1; }

.b-field { margin: 0 0 1.25rem; }

.b-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
}

.b-field label {
    display: block;
    margin-bottom: .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--baris-ink);
}

.b-req { color: var(--baris-red); }

.b-field input,
.b-field select,
.b-field textarea {
    width: 100%;
    padding: .95rem 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--baris-ink);
    background: var(--baris-white);
    border: 1px solid var(--baris-line);
    border-radius: 2px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

.b-field select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 9.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 20px 20px;
    padding-right: 2.6rem;
}

.b-field textarea { resize: vertical; min-height: 140px; }

.b-field input:focus,
.b-field select:focus,
.b-field textarea:focus {
    outline: none;
    border-color: var(--baris-red);
    box-shadow: 0 0 0 3px var(--baris-red-soft);
}

.b-field input:focus-visible,
.b-field select:focus-visible,
.b-field textarea:focus-visible { outline: none; }

/* Hata durumu YALNIZCA kullanıcı etkileşiminden sonra gösterilir.
   :invalid tek başına sayfa açılışında tüm zorunlu alanları kırmızıya boyuyordu. */
.b-field input:user-invalid,
.b-field select:user-invalid,
.b-field textarea:user-invalid {
    border-color: var(--baris-red);
    box-shadow: 0 0 0 3px var(--baris-red-soft);
}

/* Bot tuzağı — ekran okuyucudan da uzak tutulur */
.b-field--hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.b-form-kvkk {
    margin: 0 0 1.5rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--baris-muted);
    max-width: 58ch;
}

.b-form-required {
    margin: 1rem 0 0;
    font-size: .75rem;
    color: var(--baris-muted);
}

.b-form-required span { color: var(--baris-red); }

/* Gönderim sonucu bildirimi */
.b-form-note {
    margin: 0 0 1.75rem;
    padding: 1rem 1.15rem;
    border-left: 2px solid var(--baris-line);
    background: var(--baris-bg);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--baris-ink);
    border-radius: 2px;
}

.b-form-note--success { border-left-color: #2E7D32; }
.b-form-note--error,
.b-form-note--pending { border-left-color: var(--baris-red); background: var(--baris-red-soft); }

@media (max-width: 1024px) {
    .b-contact-form { grid-column: 1 / -1; margin-top: 2.5rem; }
}

@media (max-width: 767px) {
    .b-field-row { grid-template-columns: 1fr; column-gap: 0; }
    .b-contact-form .b-btn { width: 100%; }
}


/* ==========================================================================
   22. DETAY SAYFASI BİLEŞENLERİ
   Yazılım markası / e-Dönüşüm belgesi / BT hizmeti detay sayfaları için.
   Ana sayfanın hiçbir seçicisini geçersiz kılmaz; §20 primitiflerinin üstüne
   eklenir. Sayfa başına ayrı CSS yoktur.
   ========================================================================== */

/* --- Teknoloji kimliği işareti ------------------------------------------
   Sayfanın markası her zaman BARIŞ'tır. İş ortağı logosu yalnızca burada,
   sınırlı ölçekte ve ORİJİNAL RENKLERİNDE görünür.

   Koyu hero'da logo beyaz plaka üzerine oturtulur: filter/invert/recolor
   uygulanmaz — tam renkli logoyu koyu zeminde okunur kılmanın tek doğru
   yolu, logonun kendisini değil arkasındaki yüzeyi değiştirmektir.         */
.b-tech-mark {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin: 0 0 1.75rem;
}

/* Üretim sertleştirmesi §4/§5: İŞ ORTAĞI LOGOSUNUN ALTINDAN BEYAZ PLAKA
   KALDIRILDI. Logo koyu Barış yüzeyinde şeffaf, orijinal renkleriyle durur;
   kutu / kart / kenarlık / arka plan dikdörtgeni YOKTUR. Filtre, invert ya da
   yeniden renklendirme kullanılmaz — okunurluk §8'deki optik arka ışıkla
   çözülür (yalnızca gerçekten koyu markalar için). */
.b-tech-mark__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.b-tech-mark__logo img {
    display: block;
    position: relative;
    z-index: 1;
    width: auto !important;
    height: 26px !important;
    max-width: 152px;
    object-fit: contain;
}

/* §8 — Koyu logo optik arka ışığı: sınırı olmayan, dağılan sıcak-nötr ışık.
   Dikdörtgen / kart / kenarlık / beyaz yüzey YOK; kenarları zemine erir. */
.b-tech-mark__logo:has(img[src*="mikro"])::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 152%;
    height: 230%;
    background: radial-gradient(ellipse at center,
        rgba(248, 246, 242, .14) 0%,
        rgba(248, 246, 242, .08)  36%,
        rgba(248, 246, 242, .03)  58%,
        rgba(248, 246, 242, 0)    76%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

.b-tech-mark__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--baris-ink);
    background: var(--baris-red-soft);
    border: 1px solid var(--baris-line);
    border-radius: 2px;
}

.b-tech-mark__icon .b-icon { width: 24px; height: 24px; }

.b-page-hero--dark .b-tech-mark__icon {
    color: #fff;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
}

.b-tech-mark__ctx {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--baris-muted);
}

.b-page-hero--dark .b-tech-mark__ctx { color: rgba(255, 255, 255, .5); }

/* --- Dikey editoryal görsel (4:5) ---------------------------------------
   Kenara taşmaz. Zirve gibi dikey kadraj gerektiren uzmanlık bölümleri için. */
.b-portrait          { grid-column: 1 / span 5; align-self: center; }
.b-portrait--right   { grid-column: 8 / -1; }
.b-portrait .b-visual__tick { display: none; }

/* --- Künye satırları ----------------------------------------------------
   İSTATİSTİK DEĞİL: kategori bilgisi. Sayı, oran veya müşteri adedi taşımaz. */
.b-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    margin: clamp(2.25rem, 3.5vw, 3.25rem) 0 0;
    padding: 0;
}

.b-facts__row {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.0625rem 0;
    border-top: 1px solid var(--baris-line);
}

.b-facts dt {
    margin: 0;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--baris-muted);
    line-height: 1.5;
}

.b-facts dd {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--baris-ink);
}

.b-section--dark .b-facts__row { border-top-color: rgba(255, 255, 255, .1); }
.b-section--dark .b-facts dt   { color: rgba(255, 255, 255, .5); }
.b-section--dark .b-facts dd   { color: rgba(255, 255, 255, .86); }

/* --- İletişim bilgileri (KOŞULLU) ---------------------------------------
   Bu blok yalnızca elements/config.php içinde doğrulanmış değer varsa
   render edilir. Boş alan için yer tutucu, "yakında" veya örnek veri YOK. */
.b-contact-info { grid-column: 8 / -1; align-self: start; }

.b-contact-info__title {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--baris-ink);
}

.b-contact-info__list { margin: 0; padding: 0; list-style: none; }

.b-contact-info__list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.125rem 0;
    border-top: 1px solid var(--baris-line);
}

.b-contact-info__list .b-icon { width: 22px; height: 22px; margin-top: 2px; color: var(--baris-ink); }

.b-contact-info__label {
    display: block;
    margin-bottom: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--baris-muted);
}

.b-contact-info__value {
    display: block;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--baris-ink);
}

.b-contact-info__value a { color: var(--baris-ink); text-decoration: none; }
.b-contact-info__value a:hover { color: var(--baris-red); }

/* KOYU BÖLÜMDE İLETİŞİM BİLGİSİ.
   Bileşen açık zemin için yazılmıştı; iletişim sayfası koyu bölüme geçince
   metinler koyu-üstü-koyu kalıyor ve 1.22:1 gibi okunamaz bir orana düşüyordu.
   Bölüm tonuna göre ayrı bir bileşen yazmak yerine var olan kuralın koyu
   karşılığı tanımlanır. */
.b-section--dark .b-contact-info__title { color: #FFFFFF; }
.b-section--dark .b-contact-info__label { color: rgba(255, 255, 255, .58); }
.b-section--dark .b-contact-info__value { color: rgba(255, 255, 255, .88); }
.b-section--dark .b-contact-info__value a { color: rgba(255, 255, 255, .88); }
.b-section--dark .b-contact-info__value a:hover { color: var(--baris-red-onDark); }
.b-section--dark .b-contact-info__list .b-icon { color: var(--baris-red-onDark); }
.b-section--dark .b-contact-info__list li { border-color: var(--baris-line-dark-soft); }

.b-map {
    grid-column: 1 / -1;
    margin-top: clamp(2.25rem, 3.5vw, 3.25rem);
    background: var(--baris-surface-dark-2);
}

.b-map iframe { display: block; width: 100%; aspect-ratio: 21 / 9; border: 0; }

/* --- İki kolonlu açılır menü --------------------------------------------
   BT Hizmetleri menüsü 8 satıra çıktı; tek kolon açılır menü ekranı aşıyordu.

   GÖRÜNÜRLÜĞE ASLA DOKUNULMAZ.
   Şablonun kendi sistemi açılır menüyü şöyle yönetir:
       .mn-sub { display: none }                    → varsayılan kapalı
       js/all.js → fadeIn()/slideDown()             → satır içi display: block
   Bu yüzden buradaki kurallar YALNIZCA iç yerleşimi tanımlar; `display`
   özelliği hiç yazılmaz. (Önceki sürümdeki `display: grid`, .mn-sub'ın
   `display: none` varsayılanını geçersiz kılıp menüyü sayfa açılışında
   kalıcı olarak görünür bırakıyordu — davranış regresyonu.)

   İki kolon float ile kurulur: jQuery satır içinde `display: block` yazdığında
   yerleşim bozulmaz, `!important` savaşına da gerek kalmaz.
   AKTİF BÖLÜM (.active / aria-current) ile AÇIK MENÜ ayrı durumlardır;
   hiçbir seçici aktif sayfadan menü açmaz.                                 */
.baris-nav .inner-nav ul li .mn-sub--2col {
    min-width: 548px;
    /* OKUMA SIRASI SÜTUN SÜTUNDUR: sol kolon 01-02-03, sağ kolon 04-05-06.
       Float ile satır satır dolduruluyordu (01 02 / 03 04 / 05 06); CSS
       sütunları hem DOM sırasını hem görsel sırayı aynı tutar. display
       değeri değişmediği için menüyü açan satır içi display:block bozulmaz. */
    column-count: 2;
    column-gap: 0;
    column-rule: 1px solid var(--baris-line);
}

.baris-nav .inner-nav ul li .mn-sub--2col::after {
    content: "";
    display: table;
    clear: both;
}

.baris-nav .inner-nav ul li .mn-sub--2col > li {
    float: none;
    width: auto;
    break-inside: avoid;
}

/* Sütun düzeninde ayırıcı çizgi column-rule ile çizilir; satır paritesine
   dayalı eski kural kaldırıldı. */

/* Menü grubu başlığı — açılır menüde ilk satır "genel bakış" olarak ayrılır */
.baris-nav .inner-nav ul li .mn-sub li.mn-sub__lead a { font-weight: 600; color: var(--baris-ink); }
.baris-nav .inner-nav ul li .mn-sub li.mn-sub__lead { border-bottom: 1px solid var(--baris-line); }

.baris-nav .inner-nav ul li .mn-sub--2col > li.mn-sub__lead {
    column-span: all;        /* genel bakış satırı iki kolonu birden kaplar */
    width: auto;
    border-right: 0;
}

/* --- Klavye erişimi ------------------------------------------------------
   Şablonun kendi masaüstü davranışı, üst seviye bir bağlantı odaklandığında
   açılır menüyü KAPATIYOR (js/all.js › $(".inner-nav a").focus). Bu yüzden
   klavye kullanıcısı alt menü öğelerine hiç ulaşamıyordu.

   Aşağıdaki kural yalnızca ODAK İÇERİDEYKEN menüyü açar; fare bırakıldığında
   veya odak dışarı çıktığında satır içi stil yeniden devreye girip menüyü
   kapatır. `!important` şart: jQuery fadeOut, satır içi `display:none`
   yazıyor ve satır içi stil normal kuralları yener.

   Bu seçici SADECE :focus-within'e bağlıdır — .active / [aria-current] ile
   hiçbir ilişkisi yoktur, dolayısıyla aktif sayfa menüyü açık bırakmaz.     */
@media (min-width: 1025px) {
    .baris-nav .inner-nav > ul > li:focus-within > .mn-sub {
        display: block !important;
        opacity: 1 !important;
    }
}


/* ==========================================================================
   22b. DETAY SAYFASI RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
    .baris-nav .inner-nav ul li .mn-sub--2col { min-width: 460px; }
}

@media (max-width: 1024px) {
    /* Mobil menüde iki kolon tek kolona döner. Burada da `display` YAZILMAZ;
       yalnızca float sıfırlanır — görünürlük şablonun slideDown/slideUp
       sistemine ait kalır.
       .mobile-on sınıfı js/all.js tarafından eklenir; sınıf henüz eklenmemişse
       (yeniden boyutlandırma anı) 460px'lik iki kolonlu panel ekranı aşacağı
       için kural .mobile-on'a BAĞLI OLMADAN da uygulanır. */
    .baris-nav .inner-nav ul li .mn-sub--2col { min-width: 0; }

    .baris-nav .inner-nav ul li .mn-sub--2col > li,
    .baris-nav .inner-nav ul li .mn-sub--2col > li.mn-sub__lead {
        float: none;
        width: 100%;
        clear: both;
        border-right: 0;
    }

    .b-portrait,
    .b-portrait--right { grid-column: 1 / -1; }
    .b-portrait .b-visual { max-height: 78vh; }

    .b-contact-info { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
}

@media (max-width: 767px) {
    .b-tech-mark { gap: .75rem; margin-bottom: 1.5rem; }
    .b-tech-mark__logo img { height: 22px !important; max-width: 124px; }
    .b-tech-mark__icon { width: 42px; height: 42px; }

    .b-facts { grid-template-columns: 1fr; }
    .b-facts__row { grid-template-columns: 1fr; gap: .375rem; padding: .9375rem 0; }

    .b-map iframe { aspect-ratio: 4 / 3; }
}

/* Hareket azaltma tercihi — yeni bileşenler de aynı kurala tabidir. */
@media (prefers-reduced-motion: reduce) {
    .b-tech-mark,
    .b-facts__row,
    .b-contact-info,
    .b-map { transition: none; }
}


/* --- Tıklanabilir yetenek kartı ------------------------------------------
   b_capability_links() çıktısı. Görsel dil b-capability ile aynıdır; tek fark
   gerçek bir hedefi olması ve bunu okla belli etmesidir. Overview sayfalarında
   satırların tıklanabilir olduğu bu şekilde anlaşılır.                     */
.b-capability--link {
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    align-items: start;
    padding-bottom: 1.4rem;
    text-decoration: none;
    color: inherit;
}

.b-capability--link:hover,
.b-capability--link:focus-visible { text-decoration: none; color: inherit; }

.b-capability__go {
    align-self: center;
    width: 16px;
    height: 8px;
    background: var(--baris-ink);
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: .4;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.b-capability--link:hover .b-capability__go { transform: translateX(5px); opacity: 1; }
.b-section--dark .b-capability__go { background: #fff; }

.b-capability--link:hover .b-capability__title { color: var(--baris-red); }
.b-section--dark .b-capability--link:hover .b-capability__title { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .b-capability__go { transition: none; }
    .b-capability--link:hover .b-capability__go { transform: none; }
}


/* --- Footer iletişim satırı (KOŞULLU) ------------------------------------
   elements/config.php doldurulmadıkça bu blok hiç basılmaz. */
.b-footer__contact {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.b-footer__contact li + li { margin-top: .5rem; }

.b-footer__contact a {
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.b-footer__contact a:hover { color: var(--baris-red); }

/* Açılır menüde bulunulan sayfa */
.baris-nav .inner-nav ul li .mn-sub li a.is-current {
    color: var(--baris-ink);
    background: var(--baris-red-soft);
}


/* ==========================================================================
   23. KOYU BASKIN SANAT YÖNETİMİ
   -------------------------------------------------------------------------
   Site "açık zeminli kurumsal" dilden KOYU BASKIN bir sisteme geçti.
   Kural: düz siyah değil, koyunun İÇİNDE derinlik.

   Üç koyu hat dönüşümlü kullanılır, böylece siyah/beyaz/siyah ritmi oluşmaz:
     grafit      → teknik / altyapı
     sıcak koyu  → editoryal / insani / kurumsal
     siyaha yakın→ derin teknik zemin (yalnızca altyapı bölümü)

   Açık yüzeyler KALDIRILMADI; "nefes alma anları" olarak seçici biçimde
   korunur (Yazılım, Teknik Hizmetler, İş ortağı rayı).
   ========================================================================== */

/* --- Koyu ton çeşitleri --- .b-section--dark ile BİRLİKTE kullanılır ----- */
.b-section--dark.b-tone-graphite { background: var(--baris-graphite); }
.b-section--dark.b-tone-warm     { background: var(--baris-warm-dark-1); }
.b-section--dark.b-tone-black    { background: var(--baris-ink-black); }

/* Koyu bölümler arasında sert kesim olmasın: ince üst çizgi + derinlik */
.b-section--dark + .b-section--dark { border-top: 1px solid rgba(255, 255, 255, .055); }

/* --- Sıcak açık yüzey :: "nefes" bölümleri ------------------------------ */
.b-section--warmlight { background: var(--baris-warm-white); }

/* Koyu bölümden açık bölüme geçişte ince kırmızı eşik — geçiş kasıtlı görünsün */
.b-section--dark + .b-section--warmlight,
.b-section--dark + .b-section--white,
.b-section--dark + .b-section:not(.b-section--dark) { position: relative; }

.b-section--dark + .b-section:not(.b-section--dark)::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--edge);
    width: clamp(48px, 6vw, 96px);
    height: 2px;
    background: var(--baris-red);
}

/* Koyu yüzeyde fotoğrafı KARARTMAYIZ; yalnızca kenarları zemine bağlarız.
   §26: ten tonu, ahşap, kâğıt, sıcak ofis ışığı korunur. */
.b-section--dark .b-visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(17, 17, 17, .55), transparent);
    pointer-events: none;
    z-index: 1;
}

.b-section--dark .b-visual__caption { z-index: 3; }


/* ==========================================================================
   24. "SİSTEM AKTİF" NABIZ DİLİ
   -------------------------------------------------------------------------
   Barış kırmızısı yalnızca marka rengi değil, DURUM ışığıdır:
       grafit  = altyapı
       sıcak nötr = insan / iş
       kırmızı = aktif teknoloji

   Kural seti:
     - yalnızca KÜÇÜK durum göstergeleri nabız atar
     - 1.8s–3.0s, ease-in-out, opacity/box-shadow (yerleşim tetiklemez)
     - büyük metin, buton, kart, arka plan ve İŞ ORTAĞI LOGOLARI ASLA atmaz
     - süreler bilerek farklı: göstergeler mekanik biçimde senkron olmasın
   ========================================================================== */

@keyframes b-pulse {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

/* Kısıtlı kırmızı hale — neon değil, tek katman, düşük alfa */
@keyframes b-pulse-halo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--baris-red-rgb), 0); }
    50%      { box-shadow: 0 0 0 4px rgba(var(--baris-red-rgb), .16); }
}

/* Temel durum noktası — "● DURUM — AKTİF" */
.b-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.b-section:not(.b-section--dark) .b-status { color: var(--baris-muted); }

.b-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--baris-red);
    animation: b-pulse 2.6s var(--ease-inout) infinite,
               b-pulse-halo 2.6s var(--ease-inout) infinite;
}

/* Ekran dışındaki / etkin olmayan göstergeler compositor'ı meşgul etmesin */
.hero-slide:not(.is-active) .b-status__dot { animation-play-state: paused; }

/* --- Slider :: YALNIZCA aktif gösterge canlanır ------------------------- */
.hero-nav__step.is-active .hero-nav__num::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: .5rem;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--baris-red);
    animation: b-pulse 2.2s var(--ease-inout) infinite;
}

/* Pasif slayt numaraları ve ileri/geri düğmeleri ASLA yanıp sönmez. */

/* --- Ağ görselleştirmesi :: aynı nabız dili ----------------------------- */
/* Güvenlik düğümü sistemin "aktif" noktasıdır: kırmızı ve nabızlı.
   Aynı nabız dili hero göstergesi, yazılım satırı ve Zirve ekranıyla ortaktır —
   tek bir hareket kimliği. Yalnızca ANAHTAR düğüm atar, tüm ağ değil. */
.netviz__node--key .netviz__dot { animation: b-pulse 3s var(--ease-inout) infinite; }

/* --- Yazılım satırı :: seçili/hover durumunda küçük aktif nokta --------- */
.software-row__live {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: .55rem;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--baris-red);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}

.software-row:hover .software-row__live,
.software-row:focus-within .software-row__live {
    opacity: 1;
    animation: b-pulse 2.4s var(--ease-inout) infinite;
}

/* --- Anahtar / durum seçici LED'i --------------------------------------- */
.b-switch {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.b-switch__led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    transition: background 320ms var(--ease), box-shadow 320ms var(--ease);
}

.b-switch.is-on .b-switch__led {
    background: var(--baris-red);
    animation: b-pulse 2.8s var(--ease-inout) infinite,
               b-pulse-halo 2.8s var(--ease-inout) infinite;
}

/* --- §11 HAREKET AZALTMA -------------------------------------------------
   Sonsuz nabız kaldırılır; öğe STATİK olarak aktif/kırmızı kalır.
   Durum bilgisi kaybolmaz — yalnızca hareket durur.                       */
@media (prefers-reduced-motion: reduce) {
    .b-status__dot,
    .hero-nav__step.is-active .hero-nav__num::after,
    .netviz__node--key .netviz__dot,
    .software-row:hover .software-row__live,
    .software-row:focus-within .software-row__live,
    .b-switch.is-on .b-switch__led,
    .b-visual__led {
        animation: none !important;
        opacity: 1;
        box-shadow: none;
    }

    .b-switch__led { transition: none; }
}


/* ==========================================================================
   23b. KOYU BAĞLAM KONTRAST KATMANI
   -------------------------------------------------------------------------
   §5 ile e-Dönüşüm, Donanım & BT, Mali Müşavir ve Kurumsal bölümleri açık
   zeminden koyuya geçti. Bu bölümlerdeki bileşenler daha önce AÇIK zemin
   için renklendirilmişti; başlıklar #292929 ile koyu üstünde 1.14:1'e
   düşüyordu (okunamaz).

   Aşağıdaki katman yalnızca RENK düzeltir — tipografi, boşluk, düzen ve
   bileşen yapısı değişmez. Hedef: gövde ≥ 4.5:1, başlık ≥ 7:1.
   §33: okunabilirlik atmosfere feda edilmez.
   ========================================================================== */

/* --- Başlık düzeyi metinler → beyaz ------------------------------------- */
.b-section--dark .edonusum-step__title,
.b-section--dark .edoc__name,
.b-section--dark .mm-step__title,
.b-section--dark .solution__name,
.b-section--dark .about__point-label,
.b-section--dark .support-item__title { color: #fff; }

/* --- Gövde / açıklama metinleri → yüksek kontrastlı kırık beyaz ---------- */
.b-section--dark .edonusum-step__text,
.b-section--dark .edoc__desc,
.b-section--dark .mm-step__text,
.b-section--dark .solution__text,
.b-section--dark .about__point-text,
.b-section--dark .support-item__text,
.b-section--dark p { color: rgba(255, 255, 255, .70); }

/* Başlık/etiket altındaki ikincil bilgi biraz daha sönük ama AA üstü */
.b-section--dark .solution__num,
.b-section--dark .edonusum-step__index { color: rgba(255, 255, 255, .58); }

/* --- Koyu zeminde açık kalan iç yüzeyler -------------------------------- */
/* Çözüm kartı: beyaz kart koyu bölümde delik gibi duruyordu */
.b-section--dark .solution {
    background: var(--baris-graphite-3);
    border-color: rgba(255, 255, 255, .09);
}

.b-section--dark .solution:hover { background: var(--baris-warm-dark-3); }

.b-section--dark .solution__arrow { color: rgba(255, 255, 255, .55); }
.b-section--dark .solution:hover .solution__arrow { color: var(--baris-red); }

/* Süreç noktası: açık dolgu yerine koyu zeminde okunur halka */
.b-section--dark .edonusum-step__dot {
    background: var(--baris-graphite-3);
    border-color: rgba(255, 255, 255, .22);
}

.b-section--dark .edonusum-step:first-child .edonusum-step__dot,
.b-section--dark .edonusum-step.is-active .edonusum-step__dot {
    background: var(--baris-red);
    border-color: var(--baris-red);
}

/* --- Çizgiler koyu bağlama uyarlanır ------------------------------------ */
.b-section--dark .edonusum-step,
.b-section--dark .edoc,
.b-section--dark .mm-step,
.b-section--dark .about__point { border-color: var(--baris-line-dark); }

/* --- Odak halkası koyu zeminde görünür kalmalı (§33) -------------------- */
.b-section--dark a:focus-visible,
.b-section--dark button:focus-visible,
.b-page-hero--dark a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Koyu bağlamda küçük kırmızı etiket metinleri okunur kırmızıya geçer.
   Yüzeyler, butonlar, ikon aksanları ve logolar etkilenmez. */
.b-section--dark .b-eyebrow__hi,
.b-page-hero--dark .b-eyebrow__hi,
.hero .b-eyebrow__hi,
.b-section--dark .b-visual__meta-row i { color: var(--baris-red-onDark); }


/* ==========================================================================
   25. BARIŞ ÖZEL EKRAN KOMPOZİSYONU  (elements/zirve-screen.php)
   -------------------------------------------------------------------------
   Zirve bölümlerinin özel görsel dili. Gerçek yazılım ekran görüntüsü
   DEĞİLDİR; içinde tek bir harf yoktur (§14). Gerçek Zirve logosu ayrı bir
   HTML varlığıdır ve bu görsele gömülmez (§15).

   Hareket (§19): yalnızca üç küçük öğe hareket eder, tamamı CSS'tir.
   ========================================================================== */

.zscreen {
    position: relative;
    display: block;
    width: 100%;
    background: #1A1918;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 3px;
    overflow: hidden;
}

.zscreen--panel {
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8),
                0 0 0 1px rgba(255, 255, 255, .04);
}

.zscreen__svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
}

/* --- 1 · Durum ışığı :: sistem aktif ------------------------------------ */
.zscreen__status { animation: b-pulse 2.6s var(--ease-inout) infinite; }

/* --- 2 · Kayıtlar arasında ilerleyen gösterge --------------------------- */
@keyframes zscreen-scan {
    0%   { transform: translateY(0);     opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateY(180px); opacity: 0; }
}

.zscreen__scan {
    animation: zscreen-scan 7s var(--ease-inout) infinite;
    transform-box: fill-box;
}

/* --- 3 · Dönem ilerleme çizgisi ----------------------------------------- */
@keyframes zscreen-progress {
    0%   { stroke-dashoffset: 530; }
    55%  { stroke-dashoffset: 132; }
    100% { stroke-dashoffset: 132; }
}

.zscreen__progress {
    stroke-dasharray: 530;
    stroke-dashoffset: 530;
    animation: zscreen-progress 9s var(--ease-inout) infinite;
}

/* Ekran görünmüyorken compositor'ı meşgul etmesin */
.hero-slide:not(.is-active) .zscreen__status,
.hero-slide:not(.is-active) .zscreen__scan,
.hero-slide:not(.is-active) .zscreen__progress { animation-play-state: paused; }

/* --- §11 hareket azaltma :: durum korunur, hareket durur ---------------- */
@media (prefers-reduced-motion: reduce) {
    .zscreen__status,
    .zscreen__scan,
    .zscreen__progress { animation: none !important; }

    .zscreen__scan     { opacity: 1; }
    .zscreen__progress { stroke-dashoffset: 132; }
}


/* --- Zirve bölümü :: fotoğraf + ekran birlikte (§27) --------------------- */
.zirve__visual {
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

/* Ekran, fotoğrafın alt kenarına bindirilir: iki katman tek kompozisyon olur */
.zirve__screen {
    position: relative;
    z-index: 2;
    margin: -18% 0 0 calc(var(--edge) * -1 + 0px);
    padding-right: clamp(12px, 3vw, 44px);
    align-self: stretch;
}

.zirve__screen .zscreen { margin-left: auto; max-width: 92%; }

.zirve__screen-status {
    margin: .9rem 0 0;
    padding-right: 4px;
    justify-content: flex-end;
    width: 100%;
}

@media (max-width: 1024px) {
    .zirve__screen {
        margin: -14% 0 0;
        padding-right: 0;
    }
    .zirve__screen .zscreen { max-width: 100%; }
    .zirve__screen-status { justify-content: flex-start; }
}


/* --- İç sayfa hero'sunda özel ekran (Zirve uzmanlık sayfası) ------------- */
.b-page-hero__screen {
    grid-column: 7 / -1;
    align-self: center;
    margin-right: calc(var(--edge) * -1);
    padding-left: clamp(12px, 2vw, 32px);
}

/* Ekranlı hero'da metin kolonu 6 sütuna daralır */
.b-page-hero:has(.b-page-hero__screen) .b-page-hero__col { grid-column: 1 / span 6; }

.b-page-hero__screen-status { margin: 1rem 0 0; }

@media (max-width: 1024px) {
    .b-page-hero__screen {
        grid-column: 1 / -1;
        margin: clamp(2.5rem, 5vw, 3.5rem) calc(var(--gutter) * -1) 0 0;
        padding-left: 0;
    }
    .b-page-hero:has(.b-page-hero__screen) .b-page-hero__col { grid-column: 1 / -1; }
}


/* ==========================================================================
   23c. KOYU BAĞLAM — İÇ SAYFA BİLEŞENLERİ
   -------------------------------------------------------------------------
   §6 ile iç sayfa ritmi koyu baskın hâle geldi: marka indeksi, süreç listesi
   ve ilgili çözümler artık grafit/siyah bölümlerde de görünüyor. Bu bileşenler
   açık zemin için renklendirilmişti (marka adı 1.22:1 — okunamaz).

   Yalnızca RENK düzeltilir; tipografi ve düzen değişmez.
   Hedef: gövde ≥ 4.5:1, büyük başlık ≥ 3:1.
   ========================================================================== */

/* --- Süreç adımı açıklaması --------------------------------------------- */
.b-section--dark .b-process__text { color: rgba(255, 255, 255, .70); }

/* --- Marka indeksi (b_brand_list) --------------------------------------- */
.b-section--dark .b-brand { border-color: var(--baris-line-dark); }
.b-section--dark .b-brand__name { color: #fff; }
.b-section--dark .b-brand__num,
.b-section--dark .b-brand__role { color: rgba(255, 255, 255, .62); }
.b-section--dark .b-brand__text { color: rgba(255, 255, 255, .70); }
.b-section--dark .b-brand__go   { background: #fff; }

.b-section--dark .b-brand:hover { background: rgba(255, 255, 255, .035); }
.b-section--dark .b-brand:hover .b-brand__name { color: var(--baris-red-onDark); }

/* --- İlgili çözümler (b_related) ---------------------------------------- */
.b-section--dark .b-related__item { border-color: var(--baris-line-dark); }
.b-section--dark .b-related__name { color: #fff; }
.b-section--dark .b-related__text { color: rgba(255, 255, 255, .68); }
.b-section--dark .b-related__item:hover { background: rgba(255, 255, 255, .035); }
.b-section--dark .b-related__item:hover .b-related__name { color: var(--baris-red-onDark); }

/* --- Yetenek / künye / bölüm gövdesi ------------------------------------ */
.b-section--dark .b-capability__text     { color: rgba(255, 255, 255, .68); }
.b-section--dark .b-section-intro__body p { color: rgba(255, 255, 255, .70); }
.b-section--dark .section-lead           { color: rgba(255, 255, 255, .70); }

/* --- Yazılım satırı koyu bağlamda --------------------------------------- */
.b-section--dark .software-row__text,
.b-section--dark .software-row__role { color: rgba(255, 255, 255, .68); }
.b-section--dark .software-row__name { color: #fff; }
.b-section--dark .software-row__num  { color: rgba(255, 255, 255, .55); }

/* Koyu bölümde "ilgili çözüm" kartı beyaz kalıyordu; beyaz metinle birleşince
   içerik tamamen kayboluyordu (1:1). Kart yüzeyi de koyu bağlama alınır. */
.b-section--dark .b-related__item {
    background: var(--baris-graphite-3);
    border: 1px solid rgba(255, 255, 255, .07);
}

.b-section--dark .b-related__item:hover {
    background: var(--baris-warm-dark-3);
    border-color: rgba(255, 255, 255, .14);
}

/* Koyu hero'da breadcrumb'ın bulunulan sayfa öğesi --baris-muted kalıyordu. */
.b-page-hero--dark .b-breadcrumb [aria-current] { color: rgba(255, 255, 255, .55); }


/* --- Form alanı kenarlığı :: WCAG 1.4.11 (arayüz sınırı ≥ 3:1) -----------
   --baris-line (rgba(41,41,41,.14)) beyaz üzerinde ~1.3:1 kalıyordu; alan
   sınırı görsel olarak seçilemiyordu. Form kontrolleri için ayrı, daha koyu
   bir kenarlık kullanılır — diğer ince ayrım çizgileri değişmez.            */
.b-field input,
.b-field select,
.b-field textarea { border-color: rgba(41, 41, 41, .45); }

.b-field input:hover,
.b-field select:hover,
.b-field textarea:hover { border-color: rgba(41, 41, 41, .62); }

.b-field input:focus,
.b-field select:focus,
.b-field textarea:focus {
    border-color: var(--baris-red);
    outline: 2px solid transparent;      /* Windows yüksek kontrast için */
    box-shadow: 0 0 0 3px var(--baris-red-soft);
}


/* ==========================================================================
   26. CANLI SİSTEM KATMANI  ·  hero slayt 03
   -------------------------------------------------------------------------
   Amaç: "burada gerçekten çalışan bir BT altyapısı var" hissi.
   Ölçü: sakin, düşük frekanslı, kurumsal. Neon / strobe / gamer RGB YOK.

   Görsel hiyerarşi korunur — bu katman başlığın, metnin ve CTA'ların
   ARKASINDA ve ONLARDAN SÖNÜK kalır (z-index scrim'in altında).
   ========================================================================== */

.hero-live {
    position: absolute;
    inset: 0;
    z-index: 1;                 /* fotoğrafın üstü, scrim'in ve içeriğin altı */
    pointer-events: none;
    overflow: hidden;
}

/* --- 1 · Bölgesel çok hafif canlılık ------------------------------------
   Rack bölgesinde nefes alan, neredeyse fark edilmeyen sıcaklık.
   Fotoğrafı KARARTMAZ, üzerine renk basmaz — yalnızca ışık ekler. */
.hero-live__glow {
    position: absolute;
    top: 50%;
    left: 58%;
    width: 46%;
    height: 78%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
                rgba(255, 214, 170, .09) 0%,
                rgba(255, 190, 140, .04) 42%,
                transparent 72%);
    opacity: .55;
    animation: hero-live-breath 7s var(--ease-inout) infinite;
}

@keyframes hero-live-breath {
    0%, 100% { opacity: .40; }
    50%      { opacity: .85; }
}

/* --- 2 · Rack durum şeridi ----------------------------------------------
   Kompozisyonun kendi öğesi: ince, dikey, kabin durum kolonu.
   Fotoğrafa piksel hizalı değildir, bu yüzden her kırpmada doğru kalır. */
.hero-live__rack {
    position: absolute;
    top: 50%;
    right: clamp(38px, 6vw, 104px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: clamp(9px, 1.1vw, 15px);
    padding: clamp(12px, 1.4vw, 18px) clamp(9px, 1vw, 13px);
    border-left: 1px solid rgba(255, 255, 255, .10);
    border-right: 1px solid rgba(255, 255, 255, .06);
    background: linear-gradient(to right,
                rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

.hero-live__led {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 0 5px rgba(255, 255, 255, .40);
    opacity: .38;
    animation: hero-live-led var(--t, 2.6s) var(--ease-inout) var(--d, 0s) infinite;
}

/* Bazıları sabit açık — hepsi birden yanıp sönmez, sistem böyle okunur */
.hero-live__led--steady {
    animation: none;
    opacity: .62;
}

.hero-live__led--amber {
    background: #E8B06A;
    box-shadow: 0 0 6px rgba(232, 176, 106, .45);
}

.hero-live__led--red {
    background: var(--baris-red);
    box-shadow: 0 0 7px rgba(var(--baris-red-rgb), .55);
}

@keyframes hero-live-led {
    0%, 100% { opacity: .26; }
    50%      { opacity: 1; }
}

/* --- 3 · Çok hafif veri akışı -------------------------------------------
   Kısa, sönük, seyrek. Işık çizgisi gösterisi değil; bir hareket ipucu. */
.hero-live__flow {
    position: absolute;
    top: 46%;
    right: clamp(38px, 6vw, 104px);
    width: clamp(90px, 12vw, 190px);
    height: 1px;
    background: linear-gradient(to right,
                transparent, rgba(255, 255, 255, .5), transparent);
    opacity: 0;
    animation: hero-live-flow 6.5s var(--ease-inout) infinite;
}

@keyframes hero-live-flow {
    0%, 62%   { transform: translateX(-42%); opacity: 0; }
    72%       { opacity: .5; }
    88%       { opacity: .28; }
    100%      { transform: translateX(6%);   opacity: 0; }
}

/* Slayt görünmüyorken compositor boşuna çalışmasın */
.hero-slide:not(.is-active) .hero-live__glow,
.hero-slide:not(.is-active) .hero-live__led,
.hero-slide:not(.is-active) .hero-live__flow { animation-play-state: paused; }

/* Dar ekranda kadraj teknisyene yaklaşır. ESKİ DAVRANIŞ: şerit ve akış
   TAMAMEN gizleniyordu, geriye yalnızca sıcaklık kalıyordu — sistem "çalışıyor"
   demeyi bırakıyordu. Artık ölçülü bir durum kolonu kalır:
   bir kırmızı nabız + iki sabit gösterge. Veri akışı çizgisi telefonda
   kalabalık yaptığı için kaldırılır. */
@media (max-width: 767px) {
    .hero-live__flow { display: none; }
    .hero-live__glow { left: 62%; width: 70%; }

    .hero-live__rack {
        top: 30%;                       /* başlık bloğunun üstünde kalır */
        right: 22px;
        gap: 9px;
        padding: 10px 8px;
        background: linear-gradient(to right,
                    rgba(255, 255, 255, .045), rgba(255, 255, 255, .014));
    }

    /* 8 göstergeden yalnızca 3'ü: kırmızı nabız (7) + iki sabit (2, 5) */
    .hero-live__led:nth-child(1),
    .hero-live__led:nth-child(3),
    .hero-live__led:nth-child(4),
    .hero-live__led:nth-child(6),
    .hero-live__led:nth-child(8) { display: none; }
}

/* Tablet: telefondan zengin, masaüstünden seyrek. Kehribar gösterge ve iki
   beyaz nabız düşer; kırmızı nabız, sabitler ve tek veri ipucu kalır. */
@media (min-width: 768px) and (max-width: 1179px) {
    .hero-live__led:nth-child(3),
    .hero-live__led:nth-child(4) { display: none; }
}

/* --- HAREKET AZALTMA -----------------------------------------------------
   Hareket durur, sistem HÂLÂ AKTİF görünür: LED'ler sabit yanık kalır,
   sıcaklık sabit seviyede durur. Tasarım bozulmaz.                        */
@media (prefers-reduced-motion: reduce) {
    .hero-live__glow,
    .hero-live__led,
    .hero-live__flow { animation: none !important; }

    .hero-live__glow { opacity: .6; }
    .hero-live__led  { opacity: .65; }
    .hero-live__flow { opacity: .3; transform: none; }
}


/* ==========================================================================
   27. KOYU USTA SANAT YÖNÜ  ·  derinlik, kırmızı ortam ışığı, beyaz kontrast
   -------------------------------------------------------------------------
   Kural: düz siyah DEĞİL. Birden çok koyu derinlik + çok düşük seviyeli
   kırmızı ortam ışığı + beyaz tipografi + kırmızı aktif ayrıntı.
   Beyaz artık sayfa zemini değil, ETKİLEŞİM IŞIĞIDIR.
   ========================================================================== */

/* --- Kırmızı ortam ışığı :: yansıyan sistem ışığı gibi ------------------- */
.b-section--dark { position: relative; isolation: isolate; }

.b-section--dark > .b-container { position: relative; z-index: 2; }

.b-section--dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 18%, rgba(var(--baris-red-rgb), .13), transparent 40%),
        linear-gradient(135deg, rgba(var(--baris-red-rgb), .05), transparent 34%);
}

/* Ton çeşitlerine göre ışığın geldiği yön değişir — bölümler aynı görünmesin */
.b-section--dark.b-tone-graphite::after {
    background:
        radial-gradient(circle at 16% 22%, rgba(var(--baris-red-rgb), .10), transparent 42%),
        linear-gradient(200deg, rgba(255, 255, 255, .022), transparent 46%);
}

.b-section--dark.b-tone-black::after {
    background:
        radial-gradient(circle at 88% 76%, rgba(var(--baris-red-rgb), .12), transparent 38%);
}

.b-section--dark.b-page-cta::after {
    background:
        radial-gradient(circle at 74% 26%, rgba(var(--baris-red-rgb), .18), transparent 44%),
        linear-gradient(120deg, rgba(var(--baris-red-rgb), .07), transparent 40%);
}

/* --- İnce teknik doku :: siyah yüzey sıkıcı bir dikdörtgen olmasın ------- */
.b-section--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .026) 1px, transparent 1px);
    background-size: clamp(80px, 8vw, 132px) 100%;
}

/* §6 NOTU: 'warmlight' ve 'white' tonları artık b_section_open() içinde
   doğrudan koyu yüzeylere (b-tone-graphite / b-tone-warm) eşleniyor.
   Böylece bu iki ton için AYRI renk kuralı yazmak gerekmez; koyu bağlam
   kuralları tek kaynaktan geçerli olur. Beyaz yalnızca kart, hover ve
   form yüzeyi olarak kullanılır.                                          */


/* ==========================================================================
   27b. e-DÖNÜŞÜM  ·  koyu zemin + beyaz kart + kırmızı hover
   ========================================================================== */

/* --- NOKTA HATASI · GERÇEK NEDEN ----------------------------------------
   .edonusum-step__dot halkası BORDER ile değil,
       box-shadow: inset 0 0 0 1px var(--baris-line)
   ile çiziliyor. Önceki koyu bağlam düzeltmesi `border-color` yazıyordu;
   öğede border OLMADIĞI için o bildirim hiçbir şey yapmadı. Geriye
   koyu zemin üstünde koyu dolgu (#24211F / #211E1C) ve koyu halka
   (rgba(41,41,41,.14)) kaldı → noktalar görünmez oldu.

   Doğru düzeltme: halkayı ÇİZEN özelliği, yani box-shadow'u değiştirmek.  */
.b-section--dark .edonusum-step__dot {
    z-index: 3;                                   /* çizgi (2) ve dokunun (0-1) üstünde */
    background: var(--baris-graphite);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}

/* İkincil aktif nokta biraz daha parlak */
.b-section--dark .edonusum-step:nth-child(3) .edonusum-step__dot {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .60);
}

/* TEK birincil kırmızı veri noktası — ilk adım. Son adım artık kırmızı
   değil; §12 "bir aktif nokta yeter". */
.b-section--dark .edonusum-step:first-child .edonusum-step__dot {
    background: var(--baris-red);
    box-shadow: 0 0 0 4px rgba(var(--baris-red-rgb), .22);
}

.b-section--dark .edonusum-step:last-child .edonusum-step__dot {
    background: var(--baris-graphite);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}

.b-section--dark .edonusum-step:hover .edonusum-step__dot {
    background: var(--baris-red);
    box-shadow: 0 0 0 4px rgba(var(--baris-red-rgb), .22);
}

/* --- Bağlantı çizgisi + ilerleyen veri noktası --------------------------- */
.edonusum__flow { position: relative; z-index: 2; }

.b-section--dark .edonusum__flow::before {
    background: rgba(255, 255, 255, .17);
    z-index: 2;
}

/* Süreç boyunca ilerleyen tek kırmızı veri noktası (§15) */
.edonusum__flow::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    z-index: 3;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--baris-red);
    box-shadow: 0 0 0 3px rgba(var(--baris-red-rgb), .20);
    opacity: 0;
    animation: edonusum-data 7s var(--ease-inout) infinite;
}

@keyframes edonusum-data {
    0%        { left: 0;    opacity: 0; }
    8%        { opacity: 1; }
    88%       { opacity: 1; }
    100%      { left: 100%; opacity: 0; }
}

/* --- e-Belge kartları :: KOYU zeminde BEYAZ kart ------------------------- */
.edonusum__docs { border-top-color: rgba(255, 255, 255, .12); }

.edoc {
    position: relative;
    z-index: 2;
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    padding: 1.15rem 1rem;
    background: var(--baris-warm-white);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 2px;
    text-decoration: none;
    transition: background-color 330ms ease, border-color 250ms ease, transform 250ms ease;
}

/* Bağlantı durumları açıkça tanımlı — ziyaret edilmiş renk sızmaz */
.edoc:link, .edoc:visited, .edoc:hover, .edoc:focus, .edoc:focus-visible {
    text-decoration: none;
}

.edoc .b-icon      { color: var(--baris-red); transition: color 240ms ease; }
.edoc .edoc__name  { color: var(--baris-ink); transition: color 240ms ease; }
.edoc .edoc__desc  { color: #707070; transition: color 240ms ease; }

.edoc__go {
    align-self: center;
    width: 14px;
    height: 8px;
    background: var(--baris-ink);
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h13.2L10 .8 10.8 0 15.4 4l-4.6 4-.8-.8L13.2 4H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: .45;
    transition: transform 250ms ease, background-color 240ms ease, opacity 240ms ease;
}

/* --- e-Belge kartı ETKİN durum :: Barış kırmızısı ----------------------- */
.edoc:focus-within,
.edoc:focus-visible {
    background: var(--baris-red);
    border-color: var(--baris-red);
    transform: translateY(-2px);
}

.edoc:focus-within .b-icon,
.edoc:focus-visible .b-icon        { color: #fff; }
.edoc:focus-within .edoc__name,
.edoc:focus-visible .edoc__name    { color: #fff; }
.edoc:focus-within .edoc__desc,
.edoc:focus-visible .edoc__desc    { color: rgba(255, 255, 255, .78); }
.edoc:focus-within .edoc__go,
.edoc:focus-visible .edoc__go      { background: #fff; opacity: 1; transform: translateX(3px); }

@media (hover: hover) and (pointer: fine) {
    .edoc:hover {
        background: var(--baris-red);
        border-color: var(--baris-red);
        transform: translateY(-2px);
    }
    .edoc:hover .b-icon     { color: #fff; }
    .edoc:hover .edoc__name { color: #fff; }
    .edoc:hover .edoc__desc { color: rgba(255, 255, 255, .78); }
    .edoc:hover .edoc__go   { background: #fff; opacity: 1; transform: translateX(3px); }
}

.edoc:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Buton sistemi koyu ortamda tutarlı (§26) ---------------------------- */
.b-section--dark .b-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.b-section--dark .b-btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--baris-ink);
}

/* --- Hareket azaltma ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .edonusum__flow::after { animation: none !important; left: 0; opacity: 1; }
    .edoc                  { transition: background-color 1ms linear; }
    .edoc:hover, .edoc:focus-within { transform: none; }
}


/* --- İletişim / başvuru formu :: KOYU KART, AÇIK ALANLAR -----------------
   Form kartı sayfanın koyu yüzey sistemine katılır; büyük açık levha olarak
   ayrı durmaz. GİRDİ ALANLARI BEYAZ KALIR: yazılan metnin okunabilirliği
   tema uğruna düşürülmez — bu bilinçli bir kullanılabilirlik kararıdır ve
   korunur.                                                                */
.b-contact-form--surface {
    position: relative;
    z-index: 2;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--baris-line-dark);
    border-radius: 2px;
}

.b-contact-form--surface label       { color: rgba(255, 255, 255, .70); }
.b-contact-form--surface .b-form-kvkk,
.b-contact-form--surface .b-form-required { color: rgba(255, 255, 255, .55); }
.b-contact-form--surface .b-req      { color: var(--baris-red-onDark); }

/* Bildirim şeridi koyu kartta okunur kalsın */
.b-contact-form--surface .b-form-note {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--baris-line-dark);
}

/* Devre dışı başvuru formu: alanlar soluk ama okunur kalır. */
.b-contact-form--surface fieldset[disabled] label { color: rgba(255, 255, 255, .45); }


/* ==========================================================================
   28. BEYAZ MARKA + KOYU NAVİGASYON + KOYU e-DÖNÜŞÜM KARTLARI
   -------------------------------------------------------------------------
   Paydaş tarafından sağlanan BEYAZ Barış logosu koyu arayüzün kaynak
   varlığıdır. Logoya filter / invert / recolor UYGULANMAZ; yalnızca
   yerleştiği YÜZEY koyulaşır. Beyaz kutu / plaka artık gereksizdir.
   ========================================================================== */

/* --- Global başlık :: mimari koyu --------------------------------------- */
.main-nav.baris-nav {
    background: rgba(15, 15, 15, .94);
    -webkit-backdrop-filter: saturate(120%) blur(12px);
    backdrop-filter: saturate(120%) blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.main-nav.baris-nav.small-height {
    background: rgba(15, 15, 15, .97);
    border-bottom-color: rgba(255, 255, 255, .12);
}

/* Menü bağlantıları — koyu bağlam */
.baris-nav .inner-nav > ul > li > a {
    color: rgba(255, 255, 255, .70);
}

.baris-nav .inner-nav > ul > li > a:hover,
.baris-nav .inner-nav > ul > li > a:focus-visible { color: #fff; }

.baris-nav .inner-nav > ul > li > a.active { color: #fff; }

.baris-nav .b-nav-chevron { color: rgba(255, 255, 255, .55); }
.baris-nav .inner-nav > ul > li > a:hover .b-nav-chevron { color: #fff; }

/* Mobil menü tetikleyicisi de koyu zeminde okunur */
.baris-nav .mobile-nav,
.baris-nav .b-nav-icon--menu { color: #fff; }

/* CTA butonu değişmez: kırmızı zemin + beyaz metin */
.baris-nav .inner-nav > ul > li > a.b-btn--primary { color: #fff; }

/* Açılır menü açık kalır — beyaz panel koyu başlığın altında kontrast aracı */
.baris-nav .inner-nav ul li .mn-sub { border-color: rgba(0, 0, 0, .18); }

/* Mobil açılır menü koyu başlıkla aynı dile geçer */
.main-nav.baris-nav.mobile-on .desktop-nav {
    background: rgba(15, 15, 15, .98);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.main-nav.baris-nav.mobile-on .desktop-nav ul li a { color: rgba(255, 255, 255, .78); }
.main-nav.baris-nav.mobile-on .desktop-nav ul li a:hover { color: #fff; }

/* --- Footer marka kolonu :: AÇIK PLAKA KALDIRILDI ----------------------- */
.b-footer__brand {
    margin: 0;
    padding: 0 clamp(2rem, 3.5vw, 3.75rem) 0 0;
    background: transparent;                /* beyaz logo doğrudan koyu zemine oturur */
    color: rgba(255, 255, 255, .72);
    border-left: 0;
}

.b-footer__brand::after { margin-top: 1.25rem; }

.b-footer__logo img {
    width: auto !important;
    height: auto !important;
    max-width: clamp(210px, 18vw, 268px);   /* §31: kontrollü boyut */
}

.b-footer__statement { color: rgba(255, 255, 255, .64); }

/* --- Başlık logosu :: beyaz varyant ------------------------------------- */
.baris-nav .nav-logo-wrap .logo img {
    /* Oran 2.333:1 — object-fit: contain, hiçbir bozulma yok. */
    max-width: none;
}


/* ==========================================================================
   28b. e-DÖNÜŞÜM KARTLARI :: KOYU YÜKSELTİLMİŞ YÜZEY
   -------------------------------------------------------------------------
   Önceki beyaz kart yönü GEÇERSİZ. Kartlar artık koyu; ama bölümden
   görünür biçimde AYRIŞIR (yüzey farkı + hairline + iç gradyan).
   Hover hâlâ Barış kırmızısı.
   ========================================================================== */
.edoc {
    background: var(--baris-dark-raised);
    border: 1px solid rgba(255, 255, 255, .10);
    background-image: linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 50%);
    transition: background-color 320ms ease, border-color 260ms ease, transform 260ms ease;
}

.edoc .b-icon      { color: var(--baris-red); }
.edoc .edoc__name  { color: #fff; }
.edoc .edoc__desc  { color: rgba(255, 255, 255, .62); }
.edoc__go          { background: rgba(255, 255, 255, .55); opacity: 1; }

/* Etkin durum — kırmızı korunur */
.edoc:focus-within,
.edoc:focus-visible {
    background-color: var(--baris-red);
    background-image: none;
    border-color: var(--baris-red);
}

.edoc:focus-within .edoc__desc,
.edoc:focus-visible .edoc__desc { color: rgba(255, 255, 255, .82); }
.edoc:focus-within .edoc__go,
.edoc:focus-visible .edoc__go   { background: #fff; }

@media (hover: hover) and (pointer: fine) {
    .edoc:hover {
        background-color: var(--baris-red);
        background-image: none;
        border-color: var(--baris-red);
    }
    .edoc:hover .edoc__desc { color: rgba(255, 255, 255, .82); }
    .edoc:hover .edoc__go   { background: #fff; }
}


/* ==========================================================================
   28c. ZİRVE BÖLÜMÜ :: KOMPAKT İMZA KOMPOZİSYONU
   -------------------------------------------------------------------------
   Önceki hâlde bölüm iki tam görsel bölüm üst üste yığılmış gibi duruyordu:
   büyük fotoğraf + ALTINDA neredeyse tam genişlikte ikinci bir panel.
   Yeni kurgu: TEK güçlü fotoğraf + alt kenarına BİNEN küçük sistem katmanı.
   ========================================================================== */

.zirve {
    padding-top: clamp(3rem, 5vw, 4.75rem);
    padding-bottom: clamp(3rem, 5vw, 4.75rem);
}

/* Sol içerik biraz daralır, sağ görsel biraz genişler (§19: 42–46 / 54–58) */
.zirve__head   { grid-column: 1 / span 5; align-self: center; }
.zirve__visual { grid-column: 6 / -1; }

/* Görsel bloğu toplam yükseklik hedefi (§18) */
.zirve__visual .b-visual {
    aspect-ratio: auto;
    height: clamp(370px, 41vh, 460px);      /* fotoğraf: sağ görselin ~%70'i */
    min-height: 0;
}

/* Sistem katmanı: fotoğrafın ALT KENARINA BİNER, tam genişlik DEĞİL.
   Binme payı arttıkça bölüm kısalır — hedef toplam ~650–740px (§18). */
.zirve__screen {
    margin: -17% 0 0 0;
    padding-right: 0;
    align-self: auto;
}

.zirve__screen .zscreen {
    max-width: 78%;                          /* §22: 72–90% */
    margin-left: auto;
    margin-right: clamp(0px, 2vw, 28px);
}

.zirve__screen-status {
    margin-top: .7rem;
    justify-content: flex-end;
    padding-right: clamp(0px, 2vw, 28px);
}

/* Başlık ölçeği hero'nun altında kalır (§25) */
.zirve .section-title--lg {
    font-size: clamp(2rem, 3.3vw, 3.1rem);   /* 1440'ta ~48px */
    line-height: 1.08;
}

/* Yetenek çipleri :: daha hafif, daha az satır (§24) */
.zirve__caps {
    gap: .28rem .32rem;
    margin-top: .95rem;
}

.zirve__caps li {
    padding: .22rem .5rem;
    font-size: .6875rem;
}

.zirve .section-lead { margin-top: .8rem; max-width: 42ch; }
.zirve__actions { margin-top: 1.25rem; }

.zirve__logo { margin-bottom: .85rem; max-height: 44px; width: auto; }

/* --- Mobil: dev dikey yığın oluşmasın (§28) ------------------------------ */
@media (max-width: 1024px) {
    .zirve__head,
    .zirve__visual { grid-column: 1 / -1; }

    .zirve__visual .b-visual { height: clamp(300px, 42vh, 400px); }

    .zirve__screen {
        margin: -12% 0 0 0;
        padding-right: 0;
    }

    .zirve__screen .zscreen {
        max-width: 88%;
        margin-left: auto;
        margin-right: 0;
    }

    .zirve__screen-status { justify-content: flex-start; padding-right: 0; }
}

@media (max-width: 767px) {
    .zirve__visual .b-visual { height: clamp(260px, 38vh, 340px); }
    .zirve__screen .zscreen  { max-width: 94%; }
}

/* Geniş şerit kadrajı — ana sayfa Zirve bölümünde fotoğrafa binen ince
   sistem katmanı. §21: sağ görselin ~%25–35'i. §22: %72–90 genişlik.
   Bu iki koşul yalnızca ekranın KENDİ oranı genişlediğinde birlikte sağlanır;
   8:5 kare kadrajda %78 genişlik zorunlu olarak 341px yükseklik üretiyordu. */
.zscreen--band .zscreen__svg { aspect-ratio: 21 / 8; }

/* Zirve logosu koyu zeminde :: §21 uyarınca küçük nötr plaka.
   Logo YENİDEN RENKLENDİRİLMEZ — yalnızca arkasındaki yüzey açılır, böylece
   mavi kelime markası ve ince "mikrogrup" alt satırı okunur kalır.
   Bölümün tamamı beyaza çevrilmez. */
.zirve__logo {
    padding: 9px 14px;
    background: rgba(255, 255, 255, .94);
    border-radius: 2px;
    box-sizing: content-box;
}

/* Logo bağlantısı koyu başlıkta miras yoluyla siyah metin rengi alıyordu;
   içinde görünür metin yok ama seçim/odak durumunda fark ediliyordu. */
.baris-nav .nav-logo-wrap .logo { color: #fff; }


/* ==========================================================================
   29. KOYU AÇILIR MENÜLER  +  KOYU ÇÖZÜM EKOSİSTEMİ
   -------------------------------------------------------------------------
   Kalan iki büyük açık yüzey koyu sisteme alınır. Beyaz artık bir bölüm
   zemini değil, ETKİLEŞİM durumudur.
   ========================================================================== */

/* --- Açılır menü yüzeyi -------------------------------------------------- */
.baris-nav .inner-nav ul li .mn-sub {
    background:
        radial-gradient(circle at 85% 0%, rgba(var(--baris-red-rgb), .08), transparent 35%),
        var(--baris-graphite);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}

/* Öğe tipografisi */
.baris-nav .inner-nav ul li .mn-sub li a {
    color: rgba(255, 255, 255, .78);
    border-left: 2px solid transparent;
    transition: background-color 220ms var(--ease), color 220ms var(--ease),
                border-left-color 220ms var(--ease);
}

.baris-nav .inner-nav ul li .mn-sub li a .mn-sub__desc {
    color: rgba(255, 255, 255, .48);
    transition: color 220ms var(--ease);
}

/* Hover / odak — küçük kırmızı aksan, her satır kırmızı DEĞİL */
.baris-nav .inner-nav ul li .mn-sub li a:hover,
.baris-nav .inner-nav ul li .mn-sub li a:focus-visible {
    background: rgba(255, 255, 255, .045);
    color: #fff;
    border-left-color: var(--baris-red);
}

.baris-nav .inner-nav ul li .mn-sub li a:hover .mn-sub__desc,
.baris-nav .inner-nav ul li .mn-sub li a:focus-visible .mn-sub__desc {
    color: rgba(255, 255, 255, .72);
}

/* Bulunulan detay sayfası */
.baris-nav .inner-nav ul li .mn-sub li a.is-current {
    background: rgba(var(--baris-red-rgb), .12);
    border-left-color: var(--baris-red);
    color: #fff;
}

/* "Genel Bakış" satırı — biraz daha güçlü, ama ayrı bir kart gibi değil */
.baris-nav .inner-nav ul li .mn-sub li.mn-sub__lead {
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.baris-nav .inner-nav ul li .mn-sub li.mn-sub__lead a { color: #fff; }
.baris-nav .inner-nav ul li .mn-sub li.mn-sub__lead a .mn-sub__desc {
    color: rgba(255, 255, 255, .54);
}

/* İki kolonlu BT menüsünün ayırıcısı — GÖRÜNÜRLÜĞE DOKUNMAZ (bkz. §22).
   .mn-sub--2col yalnızca yerleşim tanımlar; display hiç yazılmaz. */
.baris-nav .inner-nav ul li .mn-sub--2col > li:nth-child(even) {
    border-right-color: rgba(255, 255, 255, .10);
}

/* --- Mobil açılır menü :: aynı koyu sistem ------------------------------- */
.main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub {
    background: var(--baris-warm-dark-1);
    border: 0;
    box-shadow: none;
}

.main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub li a {
    color: rgba(255, 255, 255, .76);
    border-left: 2px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub li a:hover,
.main-nav.baris-nav.mobile-on .desktop-nav ul li .mn-sub li a:focus-visible {
    background: rgba(255, 255, 255, .045);
    border-left-color: var(--baris-red);
    color: #fff;
}


/* ==========================================================================
   29b. ÇÖZÜM EKOSİSTEMİ :: koyu ray + açık hover
   -------------------------------------------------------------------------
   Bölüm artık AÇIK ADA DEĞİL. Koyu mimari ray; etkileşimde hücre açılır —
   yazılım matrisiyle aynı etkileşim felsefesi.

   Bölüm ton zinciri (§21): BT Altyapısı #111111 → Ekosistem #191817
   → Kurumsal #211E1C. Aynı koyu dünya, ayrılabilir bölümler.
   ========================================================================== */

.partner-rail {
    background:
        radial-gradient(circle at 72% 35%, rgba(var(--baris-red-rgb), .10), transparent 38%),
        var(--baris-graphite);
    color: rgba(255, 255, 255, .70);
    /* §18: dolu bir bölüm değil, kompakt bir ray */
    padding-top: clamp(2.5rem, 4vw, 3.75rem);
    padding-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

.partner-rail .partner-rail__title { color: #fff; }
.partner-rail .section-index       { color: rgba(255, 255, 255, .58); }
.partner-rail .section-index__num  { color: var(--baris-red-onDark); }
.partner-rail .partner-rail__name  { color: rgba(255, 255, 255, .62); }

/* --- Logo hücreleri :: varsayılan KOYU ---------------------------------- */
.partner-rail__list {
    border: 1px solid rgba(255, 255, 255, .10);
    background: var(--baris-surface-dark-2);
    overflow: hidden;
}

.partner-rail__item {
    min-height: 84px;
    background: #1D1C1B;
    transition: background-color 300ms ease, border-color 250ms ease, transform 250ms ease;
}

.partner-rail__item + .partner-rail__item {
    border-left-color: rgba(255, 255, 255, .10);
}

/* --- Etkin durum :: hücre AÇILIR (yazılım matrisiyle aynı felsefe) ------- */
.partner-rail__item:focus-within {
    background: var(--baris-warm-white);
    transform: translateY(-1px);
}

.partner-rail__item:focus-within .partner-rail__name { color: var(--baris-muted); }

@media (hover: hover) and (pointer: fine) {
    .partner-rail__item:hover {
        background: var(--baris-warm-white);
        transform: translateY(-1px);
    }
    .partner-rail__item:hover .partner-rail__name { color: var(--baris-muted); }
}

/* --- Logo okunabilirliği ------------------------------------------------
   ÖLÇÜM (koyu #191817 üzerinde, kontrast oranı):
       Zirve    rgb(30,55,194)   2.05:1   ✗
       Mikro    rgb(0,0,0)       1.05:1   ✗
       DİA      #2f62ac          2.92:1   ✗
       Narbulut #005cb9          2.73:1   ✗
       Paraşüt  —                 ≥3:1    ✓
       Logo     #c8102e          3.01:1   ✓

   Altı logodan DÖRDÜ koyu zeminde eşiğin altında kalıyor. Yarısı plakalı
   yarısı plakasız bir ızgara kaza eseri gibi görünürdü; bu yüzden plaka
   TÜM logolara tutarlı biçimde uygulanır.

   Plaka logoyu SARAR, hücreyi doldurmaz: küçük iç boşluk, yuvarlatma yok,
   gölge yok, tam hücre beyazı yok. Logolar HİÇBİR durumda yeniden
   renklendirilmez — yalnızca arkalarındaki yüzey değişir.
   Hücre açık duruma geçtiğinde plaka görünmez olur.                        */
/* Plaka YALNIZCA ölçümle eşiğin altında kalan dört logoya uygulanır.
   Paraşüt ve Logo koyu zeminde zaten okunuyor → plakasız kalır (§14). */
.partner-rail__item img {
    transition: background-color 300ms ease, transform 250ms ease;
}

.partner-rail__item .brand-mark--zirve,
.partner-rail__item .brand-mark--mikro,
.partner-rail__item .brand-mark--dia,
.partner-rail__item .brand-mark--narbulut {
    padding: 7px 10px;
    background: rgba(255, 255, 255, .90);
    box-sizing: content-box;
}

.partner-rail__item:hover img,
.partner-rail__item:focus-within img {
    background: transparent;
    transform: translateY(-1px);          /* §16: agresif ölçekleme yok */
}

/* --- Mobil: 2 kolon × 3 satır ------------------------------------------- */
@media (max-width: 767px) {
    .partner-rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .partner-rail__item {
        border-left: 1px solid rgba(255, 255, 255, .10);
        border-top: 1px solid rgba(255, 255, 255, .10);
        min-height: 76px;
    }

    .partner-rail__item:nth-child(2n+1) { border-left: 0; }
    .partner-rail__item:nth-child(-n+2) { border-top: 0; }
}


/* ==========================================================================
   30. İÇ SAYFA HERO'SU :: TÜM VARYANTLAR KOYU
   -------------------------------------------------------------------------
   Denetim sonucu: sitedeki SON açık tema kalıntısı .b-page-hero taban
   yüzeyiydi (#F5F5F3, 1440'ta ~879.000 px²). Altı sayfada hâlâ açık
   açılıyordu:
       aboutus · e-donusum · mali-musavir · yazilim-cozumleri ·
       bilgisayar-donanim · contact

   Bu 26 sayfaya ayrı ayrı yama yazmak yerine PAYLAŞILAN bileşen düzeltilir
   (§45): taban hero koyu olur, --dark varyantı daha derin ton olarak kalır,
   --photo varyantı sıcak koyu olur. Böylece her sayfa tek kaynaktan gelir.
   ========================================================================== */

.b-page-hero {
    background: var(--baris-warm-dark-1);
    color: rgba(255, 255, 255, .70);
    isolation: isolate;
}

/* Kırmızı ortam ışığı + ince dikey doku — bölümlerle aynı dil */
.b-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 84% 16%, rgba(var(--baris-red-rgb), .11), transparent 40%),
        linear-gradient(135deg, rgba(var(--baris-red-rgb), .05), transparent 34%);
}

.b-page-hero > .b-container { position: relative; z-index: 2; }

/* Varyantlar farklı derinlikte kalır ki sayfalar aynı görünmesin */
.b-page-hero--dark  { background: var(--baris-surface-dark); }
.b-page-hero--photo { background: var(--baris-graphite); }

/* --- Tipografi: artık TÜM varyantlarda koyu bağlam ---------------------- */
.b-page-hero__title { color: #fff; }
.b-page-hero__lead  { color: rgba(255, 255, 255, .70); }
.b-page-hero .b-eyebrow { color: rgba(255, 255, 255, .58); }
.b-page-hero .b-eyebrow__hi { color: var(--baris-red-onDark); }

.b-page-hero .b-breadcrumb                { color: rgba(255, 255, 255, .48); }
.b-page-hero .b-breadcrumb a              { color: rgba(255, 255, 255, .68); }
.b-page-hero .b-breadcrumb a:hover        { color: #fff; }
.b-page-hero .b-breadcrumb [aria-current] { color: rgba(255, 255, 255, .55); }
.b-page-hero .b-breadcrumb li + li::before { color: var(--baris-red-onDark); }

/* Teknoloji işareti koyu bağlamda — logoda plaka/kenarlık YOK (§5). */
.b-page-hero .b-tech-mark__ctx  { color: rgba(255, 255, 255, .52); }
.b-page-hero .b-tech-mark__icon {
    color: #fff;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
}

/* İkincil buton :: tek sistem (§22) */
.b-page-hero .b-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.b-page-hero .b-btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--baris-ink);
}

/* Odak halkası koyu zeminde görünür */
.b-page-hero a:focus-visible,
.b-page-hero button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Fotoğrafın alt kenarı zemine bağlanır — görsel kutu gibi durmasın */
.b-page-hero__visual .b-visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    background: linear-gradient(to top, rgba(17, 17, 17, .5), transparent);
    pointer-events: none;
    z-index: 1;
}

.b-page-hero__visual .b-visual__caption { z-index: 3; }


/* ==========================================================================
   31. MOBİL KOMPOZİSYON DÜZELTMELERİ
   -------------------------------------------------------------------------
   Ölçümle bulunan somut kusurlar (390px):
     · iç sayfa hero'ları 620–1055px — §34 "belirgin biçimde daha kompakt"
     · ana sayfa hero 1056px — §35 "birden fazla ekranı doldurmamalı"
     · bölüm üst boşluğu 106px — §49 "yaklaşık 64–96px"
     · ana sayfa H1 52px — §33 "40–50px"

   Masaüstü kompozisyonu DEĞİŞMEZ; bunlar yalnızca mobil sorgulardır.
   ========================================================================== */

@media (max-width: 767px) {

    /* --- Bölüm ritmi: 106px → ~72px (§49) ------------------------------- */
    :root { --space-xl: clamp(3.25rem, 11vw, 4.5rem); }

    .b-section--tight {
        padding-top: clamp(2.5rem, 8vw, 3.25rem);
        padding-bottom: clamp(2.5rem, 8vw, 3.25rem);
    }

    /* Ana sayfa hero yüksekliği MOBİLDE min-height ile değil İÇERİKLE
       belirlenir (.hero { min-height: 0 } — bkz. ≤767 bloğu). Bu yüzden
       burada min-height YAZILMAZ; ölçü .hero__track ve .hero-rail'dedir. */


    /* --- İç sayfa hero: belirgin biçimde kompakt (§34) ------------------- */
    .b-page-hero {
        padding-top: calc(var(--nav-h-small) + clamp(1.75rem, 6vw, 2.5rem));
        padding-bottom: clamp(1.75rem, 6vw, 2.5rem);
    }

    .b-page-hero__title { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }   /* 34–40px */
    .b-page-hero__lead  { margin-top: 1rem; }
    .b-page-hero__actions { margin-top: 1.5rem; }

    /* Fotoğraflı hero görseli mobilde alçalır — 280px'lik masaüstü
       taban yüksekliği telefonda hero'yu 900px'e çıkarıyordu. */
    .b-page-hero__visual {
        margin-top: clamp(1.5rem, 5vw, 2rem);
    }

    .b-page-hero__visual .b-visual { min-height: clamp(170px, 42vw, 205px); }

    /* Fotoğraflı hero mobilde metin + görsel olarak DİKEY yığıldığı için
       en yüksek varyant oluyordu (785px). Üst boşluk ve lead genişliği
       ayrıca sıkıştırılır. */
    .b-page-hero--photo .b-page-hero__lead { margin-top: .85rem; }
    .b-page-hero--photo .b-page-hero__actions { margin-top: 1.25rem; }
    .b-page-hero--photo .b-page-hero__visual { margin-top: clamp(1.1rem, 4vw, 1.5rem); }

    /* Zirve uzmanlık sayfasının hero ekranı da küçülür */
    .b-page-hero__screen { margin-top: clamp(1.5rem, 5vw, 2rem); }
    .b-page-hero__screen .zscreen__svg { aspect-ratio: 16 / 9; }

    /* --- CTA: iki buton dar ekranda dikey yığılır (§52) ------------------ */
    .b-page-hero__actions.b-actions,
    .hero-slide__actions.b-actions { gap: .5rem; }

    /* Hero slayt içeriği orantılı sıkışır — yalnızca H1 küçültülerek değil,
       eyebrow/lead/CTA boşlukları da dengeli biçimde azaltılır (§5). */
    .hero-slide__col .b-eyebrow  { margin-bottom: .9rem; }
    .hero-slide__lead            { margin-top: .9rem; }
    .hero-slide__actions         { margin-top: 1.35rem; }
    .b-btn--hero                 { min-height: 50px; padding: .8rem 1.2rem; }

    /* --- Hero servis rayı: 2×2 KORUNUR, yükseklik sıkıştırılır ------------
       Ölçüm: ray 390px'te 313px yer kaplıyordu — hero yüksekliğindeki tek
       en büyük kalem. Ray kaldırılmaz; iç boşluk, satır aralığı ve açıklama
       satırı sıkıştırılır. */
    .hero-rail__item {
        column-gap: .65rem;
        padding: .7rem 0;
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .hero-rail .b-icon { width: 20px; height: 20px; }

    /* 2×2 ızgarada kenarlık mantığı: sol sütun (tek sıra) kenarlıksız,
       sağ sütun (çift sıra) ince dikey ayırıcı alır. Ardışık kardeş
       seçicisi ızgarada yanlış öğeyi hedeflediği için sıfırlanır. */
    .hero-rail__item + .hero-rail__item { border-left: 0; padding-left: 0; }

    .hero-rail__item:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, .09);
        padding-left: .9rem;
    }

    .hero-rail__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); }

    .hero-rail__body { gap: .1rem; }
    .hero-rail__title { font-size: .6875rem; }
    .hero-rail__text  { font-size: .8125rem; line-height: 1.4; }

    /* --- Künye ve süreç boşlukları --------------------------------------- */
    .b-facts { margin-top: 1.75rem; }
}

/* --- Mobil manzara (§61): 100vh yerine içerik odaklı yükseklik ---------- */
@media (max-width: 900px) and (orientation: landscape) {
    .hero { min-height: clamp(420px, 92svh, 560px); }
    .b-page-hero { padding-top: calc(var(--nav-h-small) + 1.25rem); }
}

/* 'warmlight' tonunun kendi yüzeyi — grafitten ayrışır, sıcak koyudan da
   ayrışır. Böylece ardışık bölümler asla birebir aynı tonda kalmaz (§20).
   #24211F : #191817'den ~0.006, #211E1C'den ~0.002 parlaklık farkı. */
.b-section--dark.b-tone-raised { background: var(--baris-graphite-3); }

.b-section--dark.b-tone-raised::after {
    background:
        radial-gradient(circle at 22% 14%, rgba(var(--baris-red-rgb), .09), transparent 40%),
        linear-gradient(160deg, rgba(255, 255, 255, .02), transparent 42%);
}

/* --- Süreç noktaları koyu bağlamda (b_process) ---------------------------
   .edonusum-step__dot ile AYNI hata sınıfı: halka box-shadow ile çiziliyor
   ve rengi açık tema değeri (rgba(41,41,41,.14)) kalmıştı; dolgu ise açık
   (--baris-bg). Koyu zeminde halka görünmüyor, nokta açık leke gibi duruyordu.
   Nokta sistemi e-Dönüşüm ile aynı dile getirilir. */
.b-section--dark .b-process__dot {
    background: var(--baris-graphite);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}

.b-section--dark .b-process__step:first-child .b-process__dot,
.b-section--dark .b-process__step:last-child .b-process__dot {
    background: var(--baris-red);
    box-shadow: 0 0 0 4px rgba(var(--baris-red-rgb), .22);
}

.b-section--dark .b-process__step:hover .b-process__dot {
    background: var(--baris-red);
    box-shadow: 0 0 0 4px rgba(var(--baris-red-rgb), .22);
}