/*==========================================================================
   home2.css — Ana sayfa "kart/ray" denemesi (Apple Store esinli)
   --------------------------------------------------------------------
   TAMAMI .home2 sarmalayıcısının altında kapsanmıştır; bu dosyayı silmek
   ve _Layout.cshtml'deki <link> satırını kaldırmak siteyi eski hâline
   döndürür. Başka hiçbir sayfa etkilenmez.
   ========================================================================== */

/* Ölçüler apple/DESIGN.md + apple/variables.css token setinden geliyor.
   RENK ise 2026-08-19'da değişti: palet artık şablonun sarısından değil
   MARKANIN KENDİ LOGOSUNDAN türetiliyor (logo_h_navy.svg: #1C274C lacivert
   + #8D93A7 arduvaz). Siyahların yerini lacivert, sarının yerini tek bir
   "mühür" kırmızısı aldı. Gri (#f5f5f7) ve beyaz aynen korundu. */
.home2 {
    --canvas: #f5f5f7; /* alternating band / gray canvas — DEĞİŞMEDİ */
    --paper: #ffffff; /* DEĞİŞMEDİ */
    /* 2026-08-20 (Dilek'in isteği): siyah yazılar da laciverde çevrildi.
       Beyaz üstünde 14.6:1 — siyahtan (16.8:1) düşük ama fazlasıyla yeterli.
       Siyaha dönmek için tek satır: --ink: #1d1d1f. */
    --ink: #1C274C; /* gövde ve başlık metni */
    --ink-soft: #5F6880; /* ikincil metin: nötr gri değil, lacivert kırıklı (5.6:1).
                            Saf #707070 lacivertin yanında kirli duruyordu. */
    /* --- lacivert: siyahın yerine. Yalnız koyu yüzeylerde ve butonda. --- */
    --navy: #1C274C; /* logonun laciverti */
    --navy-deep: #111A33; /* koyu bant zemini — siyahın yerine */
    --navy-soft: #2A3760; /* koyu yüzeyde hover */
    --slate: #8D93A7; /* logonun ikincil rengi */
    /* --- mühür kırmızısı: sarının yerine, sayfada TEK kromatik aksan --- */
    --seal: #C8442F;
    --seal-hover: #B23A28;
    --seal-light: #E4664E; /* koyu yüzeylerde: lacivert üstünde 5.2:1 */
    --hover-wash: #e8e8ed; /* cool wash */
    --link: #1C274C; /* metin bağlantıları: mavi değil, markanın laciverti */
    --link-dark: rgba(255,255,255,.88); /* koyu zeminde bağlantı */
    --cta: var(--seal); /* dolu buton */
    --silver: #e3e4e5; /* nötr kart yüzeyi (eski sarı kartın yerine) */
    --radius: 28px; /* cards + productImages */
    --radius-link: 10px;
    --pad: 24px;
    /* --- derinlik: iki kademe, fazlası yok --- */
    --lift-1: 0 1px 2px rgba(17,26,51,.06), 0 12px 28px -12px rgba(17,26,51,.22);
    --lift-2: 0 2px 4px rgba(17,26,51,.07), 0 24px 44px -16px rgba(17,26,51,.26);
    --ease: cubic-bezier(.16,1,.3,1);
    background: var(--canvas);
    color: var(--ink);
}

.home2__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--pad);
}

.home2__section {
    padding: 100px 0; /* section gap 100–120px */
}

    .home2__section--tight {
        padding: 52px 0 100px;
    }

    /* Bölümler arası ayrım çizgiyle değil ZEMİN RENGİYLE yapılır:
       beyaz ↔ #f5f5f7 dönüşümlü. Beyaz bantta kartlar griye döner. */
    .home2__section--white {
        background:var(--paper);
    }

        /* 2026-08-19: kartlar ARTIK BEYAZ BANTTA DA BEYAZ.
           Eskiden griye dönüyorlardı, çünkü gölge yasağı yüzünden beyaz
           zeminde beyaz kart görünmüyordu. Gölge sistemi gelince o zorunluluk
           kalktı; kartı zeminden ayıran şey artık renk değil DERİNLİK.
           Sonuç: kart her yerde beyaz, bantlar beyaz↔gri dönüşümlü.
           Geri almak için: aşağıdaki seçiciye .process__item, .mcard, .pcard
           geri eklenir.
           Vitrin kartları (.tile) istisna — showcase zaten gri bantta duruyor. */
        .home2 .home2__section--white .tile:not(.tile--dark):not(.tile--mink) {
            background: var(--tone, var(--canvas));
        }

/* Bölüm başlığı: sola dayalı, 600 ağırlık, hafif POZİTİF harf aralığı
   (DESIGN.md: mid ölçekli başlıklar "warm and approachable" dursun diye) */
.home2__title {
    font-size: clamp(26px, 2.6vw, 32px);
    line-height: 1.14;
    font-weight: 600;
    letter-spacing: 0.007em;
    color: var(--ink);
    margin: 0 0 32px;
}

/* Apple imzası: "Kalın başlık. Gri ikinci cümle." tek satırda */
.home2__title-soft {
    color: var(--ink-soft);
    font-weight: 600;
}

.home2__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

    .home2__head-row .home2__title {
        margin-bottom: 20px;
    }

/*--------------------------------------------------------------------------
  0. Hero — apple.com/tr ilk paneli: ortada iri başlık, iki satır alt metin,
     tek mavi hap buton, altında alttan taşan ürün görseli
  --------------------------------------------------------------------------*/
.hero2 {
    background: #fff;
    padding: 76px 0 0;
    text-align: center;
    overflow: hidden;
}

    /* display ölçeği: iri, 700, sıkı negatif harf aralığı */
    .hero2 h1 {
        font-size: clamp(34px, 4.8vw, 62px);
        line-height: 1.06;
        font-weight: 700;
        letter-spacing: -0.022em;
        color: var(--ink);
        max-width: 22ch;
        margin: 0 auto;
    }

    /* body-lg: 28/32 */
    .hero2 p {
        font-size: clamp(19px, 1.9vw, 28px);
        line-height: 1.2;
        font-weight: 400;
        color: var(--ink);
        max-width: 860px;
        margin: 22px auto 0;
    }

.hero2__brand {
    white-space: nowrap;
}

.hero2__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 28px;
}

/* Dolu hap buton: sayfanın TEK kromatik öğesi. Eskiden markanın sarısıydı,
   artık mühür kırmızısı. Beyaz metin #C8442F üstünde ~5.3:1. */
.hero2__cta {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 980px;
    background: var(--cta);
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}

    .hero2__cta:hover {
        background: var(--seal-hover);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -10px rgba(200,68,47,.75);
    }

.hero2__link {
    font-size: 17px;
    color: var(--link);
    text-decoration: none;
}

    /* Bağlantı metni lacivert, OKU mühür kırmızısı: aksan sayfada görünür
       kalsın ama on üç bağlantının hepsi kırmızıya boyanmasın diye. */
    .hero2__link::after {
        content: "\00a0\00a0\203A";
        display: inline-block;
        color: var(--seal);
        transition: transform .25s ease;
    }

    .hero2__link:hover {
        color: var(--link);
    }

        .hero2__link:hover::after {
            transform: translateX(4px);
        }

/* Hero ürün görseli de PENCERE (2026-08-19). Monitör kalkınca eski kural
   ("alttan kırp, monitörün siyah kenarına varma") anlamsızlaştı: geriye şeffaf
   tuvalde duran çıplak uygulama penceresi kaldı ve beyaz zeminde sınırsız
   yüzüyordu. Artık kendi çerçevesi ve gölgesi var.

   KADRAJ KALKTI (2026-08-20). Dilek görselleri 1920x1080'e sabitledi ve şeffaf
   kenar boşluklarını görselin kendisinden sildi (ölçüldü: alfa sınırları
   L=T=R=B=0, yani pencere kenardan kenara). Eskiden kadrajı CSS veriyordu
   (aspect-ratio 2.0339 + negatif offset); o değerler artık gerçek içeriği
   kesiyordu — görselin yukarı kaçmasının sebebi buydu. Şimdi kutu görselin
   kendi en/boyunu (16/9) alıyor, görsel de kutuyu birebir dolduruyor.
   Yeni görsel gelirse: kenarlarda şeffaflık YOKSA burada değişiklik gerekmez. */
.hero2__art {
    position: relative;
    width: min(1020px, 100% - 2 * var(--pad)); /* dar ekranda kenara yapışmasın */
    margin: 34px auto 0;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(17,26,51,.10), 0 34px 70px -30px rgba(17,26,51,.45);
}

    /* inset:0 + object-fit:cover — en/boy zaten birebir aynı, cover yalnız
       yuvarlama farkından doğacak saç teli kadar boşluğu kapatmak için. */
    .hero2__art img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: none;
        margin: 0;
    }

/*--------------------------------------------------------------------------
  1. Vitrin şeridi — nötr palet (beyaz / siyah / vizon)
     Apple'da renk kartın zemininden değil ürün görselinden gelir.
  --------------------------------------------------------------------------*/
.showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    padding: 28px;
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
}

    .tile:hover {
        color: var(--ink);
    }

    .tile img {
        height: 46px;
        width: 46px;
        object-fit: contain;
    }

/* Koyu kart — eskiden siyah (--ink), artık MARKANIN LACİVERTİ.
   Seçiciler .tile h3 / .tile__cta'dan sonra geldiği için çift sınıfla
   yazıldı, yoksa sonraki kurallar rengi geri alıyor. */
.tile.tile--dark {
    background: var(--navy-deep);
    color: #fff;
}

    .tile.tile--dark:hover {
        color: #fff;
    }

    .tile.tile--dark h3 {
        color: #fff;
    }

    .tile.tile--dark .tile__cta {
        color: var(--link-dark);
    }

    .tile.tile--dark img {
        filter: brightness(0) invert(1);
    }

/* Eskiden vizon, sonra markanın sarısı; sarı kalkınca nötr gümüş yüzey.
   (Sınıf adı view'da olduğu için değişmedi.) */
.tile--mink {
    background: var(--silver);
}

.tile__eyebrow {
    display: block;
    margin-top: 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* "Ember rozeti" rolü: koyu kartın üst etiketi. Eskiden markanın sarısıydı,
   artık mühür kırmızısı — lacivert üstünde ~4.6:1, 12px/500 için yeterli. */
.tile--dark .tile__eyebrow {
    color: var(--seal-light);
}

.tile h3 {
    font-size: clamp(21px, 1.9vw, 24px);
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: 0.011em;
    color: var(--ink);
    margin: 8px 0 0;
}

.tile__cta {
    margin-top: 18px;
    font-size: 17px;
    font-weight: 400;
    color: var(--link);
}

    .tile__cta::after {
        content: "\00a0\00a0\203A";
        display: inline-block;
        color: var(--seal);
        transition: transform .25s ease;
    }

/* koyu kartta bağlantı ve oku beyaz kalır (kırmızı ok lacivertte sönük) */
.tile.tile--dark .tile__cta::after {
    color: inherit;
}

.tile:hover .tile__cta::after {
    transform: translateX(4px);
}

/*--------------------------------------------------------------------------
  2. Modül rayı — serbest yatay kaydırma (snap yok)
  --------------------------------------------------------------------------*/
.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(248px, 272px);
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* Snap yok: ray kart hizasına yapışmadan serbest kayıyor (Dilek, 2026-08-19).
       Kart hizasına oturmasını isteyen olursa `proximity` ara çözüm. */
    scroll-snap-type: none;
    scroll-behavior: smooth;
    scroll-padding-left: var(--pad);
    /* sarmalayıcının iç boşluğunu kırıp kenardan kenara akmasını sağlar */
    margin: 0 calc(-1 * var(--pad));
    padding: 6px var(--pad) 28px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

    .rail.is-grabbing {
        cursor: grabbing;
    }

    /* Sürükleme ve savrulma boyunca yumuşatma kapalı; açık kalırsa her kare
       yeni bir smooth animasyon başlatıp hareketi kilitliyor. */
    .rail.is-grabbing,
    .rail.is-gliding {
        scroll-behavior: auto;
    }

    .rail::-webkit-scrollbar {
        display: none;
    }

.rail-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

    .rail-nav button {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        background: var(--hover-wash);
        color: var(--ink);
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
        transition: background .2s ease, opacity .2s ease;
    }

        .rail-nav button:hover {
            background: rgba(0,0,0,.13);
        }

        .rail-nav button[disabled] {
            opacity: .32;
            cursor: default;
        }

/* Modül kartı — Apple kurgusu: metin ÜSTTE, görsel ALTTA ve karttan taşar */
.mcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    background: var(--tone, #fff);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: none; /* ray artık snap kullanmıyor */
}

    .mcard:hover {
        color: inherit;
    }

.mcard__body {
    padding: 28px 28px 0;
}

    .mcard__body h3 {
        font-size: 20px;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: 0.011em;
        color: var(--ink);
        margin: 0 0 8px;
    }

    /* Metin DOM'da eksiksiz durur; yalnız kartta 4 satırda kırpılır.
       Kartlar aynı boyda kalsın, devamı modül sayfasında okunsun diye. */
    /* caption ölçeği: 14px, mid gray */
    .mcard__body p {
        font-size: 14px;
        line-height: 1.42;
        letter-spacing: -0.016em;
        color: var(--ink-soft);
        margin: 0 0 12px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.mcard__link {
    font-size: 14px;
    font-weight: 400;
    color: var(--link);
}

    .mcard__link::after {
        content: "\00a0\00a0\203A";
        display: inline-block;
        color: var(--seal);
        transition: transform .25s ease;
    }

.mcard:hover .mcard__link::after {
    transform: translateX(4px);
}

/* PENCERE KURGUSU (2026-08-19). Dilek ekran görüntülerindeki monitörü kaldırdı;
   geriye şeffaf tuvalde duran çıplak uygulama penceresi kaldı. Artık kadrajı
   biz veriyoruz: kartın soluna hizalı, SAĞA TAŞAN, üst-sol köşesi yuvarlatılmış
   ve kendi gölgesi olan bir pencere. Kartın `overflow:hidden`ı sağı kesiyor,
   pencere kartın dibinde bitiyor — "uygulama kartın içinden bakıyor" etkisi.

   KADRAJ KALKTI (2026-08-20). Dilek on iki görseli 1920x1080'e sabitledi ve
   şeffaf kenar boşluklarını görselin kendisinden sildi. On dördü de yeniden
   ölçüldü: alfa sınırları L=T=R=B=0 — yani pencere kenardan kenara, artık
   kırpılacak boşluk yok. Eski çözüm (ortak güvenli kadraj, aspect-ratio 1.9688
   + negatif offset) bu görsellerde gerçek arayüzü kesiyordu.
   Kutu artık görselin kendi en/boyunu (16/9) alıyor.

   TEK BAKIM KURALI: yeni görsel eklenirken kenarlarda şeffaf boşluk BIRAKMA.
   Bırakılırsa boşluktan kartın beyazı sızar ve pencerenin kenarı ince bir çizgi
   gibi görünür; o zaman kadrajı yeniden ölçmek gerekir (eski yöntem: her görseli
   tuvale çiz, alfa > 12 sınırlarını bul, hepsinin KESİŞİMİNİ al).

   Taşma sayesinde arayüz 248px'lik kartta ~372px genişlikte görünüyor;
   monitörlü hâlde ~207px'ti. */
.mcard__media {
    position: relative;
    margin: auto 0 0 28px; /* auto: kartın dibine yaslanır (eski margin-top:auto) */
    /* .mcard bir flex kolonu: flex-shrink varsayılan 1 olduğu için taşan
       genişlik karta sığacak şekilde eziliyordu. 0 yapılmadan taşma olmuyor. */
    flex: 0 0 auto;
    width: 150%; /* karttan taşar; fazlası .mcard'ın overflow'u tarafından kesilir */
    aspect-ratio: 16 / 9;
    border-radius: 12px 0 0 0;
    overflow: hidden;
    box-shadow: -1px -1px 0 rgba(28,39,76,.10), -14px -16px 38px -20px rgba(17,26,51,.45);
}

    /* inset:0 + object-fit:cover — en/boy birebir aynı; cover yalnız yuvarlama
       farkından doğacak saç teli kadar boşluğu kapatıyor. */
    .mcard__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: none;
    }

/* NOT (2026-08-19): burada `.home2 .mcard[style*="f0e4d3"]` seçicisiyle bej
   kartları markanın sarısına çeviren bir `!important` kuralı duruyordu
   (teknik borç listesindeki iki `!important`ten biri). Sarı palet dışına
   çıkınca kural gereksizleşti ve SİLİNDİ — kart tonları da view'dan kalktı,
   kartlar artık beyaz/gri sistemin kendisini kullanıyor. */

/*--------------------------------------------------------------------------
  2b. İnsanlı kartlar
      Apple'ın "Today at Apple" kartında fotoğraf kartın tamamını kaplıyor;
      bunu yapabilmelerinin sebebi fotoğrafın üst kısmının boş ve aydınlık
      olması. Bizim iki fotoğrafta kafalar karenin tepesinde, yazı yüzlerin
      üstüne düşerdi — o yüzden "Apple Uzmanı" kartındaki kurgu: metin üstte,
      fotoğraf altta. Fotoğraf üretilirse (tepesi boş) tam kaplamaya geçilebilir.
  --------------------------------------------------------------------------*/
/* insanlı kartlar da ray: modül rayıyla aynı sürükleme/snap/ok davranışı */
.rail--people {
    grid-auto-columns: minmax(300px, 380px);
}

.pcard {
    display: flex;
    flex-direction: column;
    min-height: 460px;
    scroll-snap-align: none; /* ray artık snap kullanmıyor */
    background: var(--tone, #fff);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

    .pcard:hover {
        color: inherit;
    }

.pcard__body {
    padding: 32px 32px 0;
}

.pcard__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.pcard h3 {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.011em;
    color: var(--ink);
    margin: 10px 0 14px;
}

.pcard__media {
    margin-top: auto;
    height: 300px;
    overflow: hidden;
}

    .pcard__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* yüzler üstte kalsın, kırpma alttan olsun */
        object-position: center 22%;
    }

/* Fotoğrafın kartın TAMAMINI kapladığı kart: metin fotoğrafın üstünde.
   Fotoğraflar sinematik ve koyu olduğu için üstlerine karartma perdesi
   çekilip yazı beyaza alınıyor — Apple'ınkiler aydınlık çekildiği için
   perdeye ihtiyaç duymuyor, bizimkiler duyuyor. */
.pcard--photo {
    position: relative;
    /* Kaynak fotoğraflar 1770x658 (çok geniş). Dar bir dikey kartta kadraj
       yüze kilitleniyordu; kart iki kolon genişleyince sahne de giriyor. */
    grid-column: span 2;
}

    .pcard--photo .pcard__media {
        position: absolute;
        inset: 0;
        height: auto;
        margin: 0;
        z-index: 0;
    }

        .pcard--photo .pcard__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* yüz kadraja girsin diye kart bazında ayarlanır */
            object-position: var(--focus, center 30%);
        }

        .pcard--photo .pcard__media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,0) 68%);
        }

    .pcard--photo .pcard__body {
        position: relative;
        z-index: 1;
    }

    .pcard--photo .pcard__eyebrow {
        color: rgba(255,255,255,.78);
    }

    .pcard--photo h3 {
        color: #fff;
    }

    .pcard--photo .mcard__link {
        color: #fff;
    }

/* rayın sonundaki "tüm modüller" kartı */
.mcard--more {
    justify-content: center;
    align-items: flex-start;
    min-height: 400px;
    padding: 30px 26px;
}

    .mcard--more h3 {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.02em;
        margin: 0 0 10px;
    }

/*--------------------------------------------------------------------------
  3. Uzun metinli bölümler — mevcut .process__item'ın kart hâli
     (metne dokunulmaz, yalnız yüzey + düzen değişir)
  --------------------------------------------------------------------------*/
.home2 .process,
.home2 .work,
.home2 .service {
    background: transparent;
}

.home2 .process__items {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* kısa metinli bölümler dörtlü, uzun metinli bölümler ikili dizilir */
.home2 .process__items--quad {
    grid-template-columns: repeat(4, 1fr);
}

.home2 .process__items--duo {
    grid-template-columns: repeat(2, 1fr);
}

    .home2 .process__items--duo .process__item {
        padding: 40px;
    }

    /* Tek kalan kart iki kolonu birden kaplar. İkili ızgarada kart sayısı
       tekse son satırda sağda boşluk kalıyordu (yapay zekâ bandı "Otomatik
       Kişi Dizini" kartı kaldırılınca 8'den 7'ye düştü, 2026-08-18). */
    .home2 .process__items--duo .process__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .home2 .process__items--duo .process__item h3 {
        font-size: 24px;
    }

.home2 .process__item {
    background: #fff;
    border: 0;
    border-radius: var(--radius);
    padding: 28px;
    text-align: left;
}

    .home2 .process__item:first-child {
        border-left: 0;
    }

    /* eski "hover'da simsiyah + invert" davranışı iptal; yüzey beyaz kalır.
       Kartın hover hareketi 6. bölümde tanımlı. */
    .home2 .process__item:hover {
        background: #fff;
    }

        .home2 .process__item:hover img {
            filter: none;
        }

        .home2 .process__item:hover h3 {
            color: var(--ink);
        }

        .home2 .process__item:hover p {
            color: var(--ink-soft);
        }

    /* ikon: renkli çip yok, çıplak monokrom glif (DESIGN.md: ikonografi
       monokrom, dekoratif yüzey yok) */
    .home2 .process__item img {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 0;
        object-fit: contain;
        background: none;
    }

    .home2 .process__item h3 {
        font-size: 21px;
        line-height: 1.24;
        font-weight: 600;
        letter-spacing: 0.011em;
        padding: 20px 0 10px;
    }

    /* body ölçeği: 17px, mid gray — Apple'ın kanonik okuma boyu */
    .home2 .process__item p {
        font-size: 17px;
        line-height: 1.47;
        letter-spacing: -0.022em;
        color: var(--ink-soft);
        max-width: none;
        margin: 0;
    }

/* bölüm altındaki buton ortada dursun */
.home2__section-cta {
    padding-top: 36px;
    text-align: center;
}

/* Bölüm sonu butonları (.btn__dot): temanın hâli siyah hapın sağında beyaz bir
   nokta taşıyor ve hover'da yazıyı 3B çeviriyor. Hero'daki düz hap diliyle
   aynı olsun diye nokta ve dönme burada kapatılıyor — renk siyah kalıyor,
   ölçüler hero butonuyla eşitlendi. Kural yalnız `.home2` altında geçerli;
   diğer sayfalardaki aynı buton dokunulmadan duruyor. */
.home2 .btn__dot {
    padding: 12px 22px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    background: var(--navy); /* eskiden siyah (--ink) */
    transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}

    /* sağdaki beyaz nokta */
    .home2 .btn__dot::after {
        content: none;
    }

    /* dönen yazı: ikinci kopya ve devrilme kapatıldı */
    .home2 .btn__dot span {
        transform: none;
        transition: none;
        transform-style: flat;
    }

        .home2 .btn__dot span::before {
            content: none;
        }

    .home2 .btn__dot:hover {
        background: var(--navy-soft);
        opacity: 1;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -12px rgba(17,26,51,.8);
    }

        .home2 .btn__dot:hover span {
            transform: none;
        }

/*--------------------------------------------------------------------------
  4. Slogan bantları
  --------------------------------------------------------------------------*/
/* İki slogan bandı da diğer bölümlerle aynı nefesi alsın (100px).
   Önceden biri 56/48, öbürü 56/0 idi; farkı sen fark ettin. */
.home2 .work {
    padding: 100px 0;
}

/* İki slogan bandı da koyu zeminli. Zemin 2026-08-19'da SİYAHTAN LACİVERDE
   çevrildi (--coal → --navy-deep): siyah, beyaz/gri sayfanın içinde delik
   gibi duruyordu; markanın kendi laciverti bant hissi veriyor.
   (Bir ara burada sitenin sarı/gri background.svg deseni denendi, kaldırıldı.) */
.home2 .work:not(.home2__section--white) {
    background-color: var(--navy-deep);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

    /* Bant metni: gövde kırık beyaz, vurgular tam beyaz — ayrım renkle değil
       parlaklık ve ağırlıkla veriliyor (aksan sayfada tek yerde kalsın diye). */
    .home2 .work:not(.home2__section--white) .company-info__heading h2 {
        color: rgba(255,255,255,.74);
    }

    .home2 .work:not(.home2__section--white) .company-info__heading h2 span {
        color: #fff;
    }

    /* "Reinvented" / "Paradigma Değişimi" başlıkları koyu bantta beyaz */
    .home2 .work:not(.home2__section--white) .section-title h2 {
        color: #fff;
    }

/* slogan bantları da içerik sütunuyla aynı genişlikte hizalansın */
.home2 .container-fluid {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* slogan metni: body ölçeği (21/29) — başlıktan küçük, sola dayalı
   (küçülen punto ortalandığında başıboş duruyor) */
.home2 .company-info__heading h2 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.42;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
    color: var(--ink-soft);
    padding-bottom: 0;
}

/* başlık ile slogan arası, küçülen puntoya göre daralır */
.home2 .company-info.mt-120 {
    margin-top: 28px;
}

    /* Sözlükteki vurgu öbekleri <span> içinde geliyor ve temada hap çerçeveli.
       21px gövde metninde rastgele etiket gibi duruyorlardı; vurgu artık
       çerçeveyle değil renk ve ağırlıkla veriliyor. */
    .home2 .company-info__heading h2 span {
        font-size: inherit;
        line-height: inherit;
        border: 0;
        border-radius: 0;
        padding: 0;
        color: var(--link);
        font-weight: 500;
    }

/* "Paradigma Değişimi" — diğer bölüm başlıklarıyla aynı ölçek.
   İki ayrı h2 olduğu için inline yapılıp tek satırda akıyor. */
.home2 .section-title h2 {
    display: inline;
    font-size: clamp(26px, 2.6vw, 32px);
    line-height: 1.14;
    font-weight: 600;
    letter-spacing: 0.007em;
    color: var(--link);
    margin: 0;
}

/*--------------------------------------------------------------------------
  5. Duyarlılık — style.css'teki eski kırılım noktalarını da ezer
  --------------------------------------------------------------------------*/
@media (max-width: 1100px) {
    .home2 .process__items,
    .home2 .process__items--quad,
    .home2 .process__items--duo {
        grid-template-columns: repeat(2, 1fr);
    }

    .showcase {
        grid-template-columns: 1fr;
    }

    .tile {
        min-height: 220px;
    }
}

@media (max-width: 700px) {
    .home2 .process__items,
    .home2 .process__items--quad,
    .home2 .process__items--duo {
        grid-template-columns: 1fr;
    }

    .home2__section {
        padding: 48px 0;
    }

    .rail {
        grid-auto-columns: minmax(240px, 78vw);
    }

    .rail-nav {
        display: none; /* dokunmatikte parmakla kaydırılır */
    }
}

/* Not: bir süre burada `.slider-container` (Module/Document'teki kayan kart
   bileşeni) için bir ölçü/ton bloğu duruyordu. İki sunum karşılaştırıldı,
   `.mcard` rayı seçildi ve o blok kaldırıldı — bileşenin kendisi modül
   sayfalarında yaşamaya devam ediyor. */

/*--------------------------------------------------------------------------
  6. DERİNLİK ve HAREKET (2026-08-19)
     Eski kural "gölge yok, çerçeve yok, hover'da kart kıpırdamaz" idi.
     Sayfanın "statik ve cansız" durmasının başlıca sebebi buydu; kural
     bilerek terk edildi. Yerine iki kademeli tek bir derinlik sistemi
     ve TEK bir hareket dilbilgisi geldi.
  --------------------------------------------------------------------------*/

/* Kartlar artık yüzey değil nesne: dururken çok hafif bir gölge taşır. */
.home2 .tile,
.home2 .mcard,
.home2 .pcard,
.home2 .process__item {
    box-shadow: var(--lift-1);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

/* Tıklanabilir kartlar: tam yükselme. */
.home2 a.tile:hover,
.home2 a.mcard:hover,
.home2 a.pcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--lift-2);
}

/* 2026-08-23 (Dilek): "alttaki kartlarda da hover'da bir hareket olsun."
   Buradaki eski kural `.process__item`i bilerek sabit tutuyordu: kart bir
   bağlantı değil, tıklanabilir kartlarla birebir aynı 4px'lik yükselme
   "buraya tıklanır" diye yanlış söz verirdi. O gerekçe hâlâ geçerli, o
   yüzden hareket VAR ama bir tık daha yumuşak — 3px yükselme, aynı gölge
   kademesi, ikon hafifçe büyür. Kart canlanır, "tıkla" demez. */
.home2 .process__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--lift-2);
}

/* İkon hareketi kartın kendi eğrisiyle aynı ritimde. (Renk filtresi 8.
   bölümde veriliyor; burada yalnız ölçek değişiyor.) */
.home2 .process__item img {
    transition: transform .3s var(--ease);
}

.home2 .process__item:hover img {
    transform: scale(1.08);
}

/* Gölge rayın kendi taşma kutusunda kırpılmasın diye üstte biraz pay. */
.home2 .rail {
    padding-top: 14px;
    padding-bottom: 32px;
}

/* --- Beliriş: tek dilbilgisi. 34px yükselme + opaklık, 950ms, 95ms kademeli.
   Gizleme sınıfını (.m-reveal) motion2.js ekler ve YALNIZ ekran dışındaki
   öğelere ekler — böylece açılışta hiçbir şey yanıp sönmez ve betik hiç
   çalışmazsa sayfa tamamen normal görünür.

   2026-08-20 akşamı (Dilek): "hareketlilik çok belirgin değil, biraz daha
   yavaş yerini alsa ve daha uzun mesafe hareket etseler." Mesafe 18→34px,
   süre 600→950ms, kademe 70→95ms (motion2.js). Hareket sayfa başına BİR KEZ
   çalıştığı için uzun süre yorucu olmuyor. */
.home2 .m-reveal {
    opacity: 0;
    transform: translateY(34px);
}

    .home2 .m-reveal.is-in {
        opacity: 1;
        transform: none;
        transition: opacity .95s var(--ease), transform .95s var(--ease);
    }

/* --- Hero girişi: scroll beklemez, ilk karede sırayla girer.
   Saf CSS animasyonu (`both` dolgusuyla) — JS'e bağlı olmadığı için
   yanıp sönme riski yok. Sayfanın tek orkestreli anı. */
@keyframes m-rise {
    from {
        opacity: 0;
        transform: translateY(34px);
    }

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

.home2 .hero2 h1 {
    animation: m-rise 1.05s var(--ease) both;
}

.home2 .hero2 p {
    animation: m-rise 1.05s var(--ease) .14s both;
}

.home2 .hero2__actions {
    animation: m-rise 1.05s var(--ease) .28s both;
}

.home2 .hero2__art {
    animation: m-rise 1.25s var(--ease) .42s both;
}

/* --- Hareketi azaltılmış tercih: HER ŞEY durur, sayfa eksiksiz görünür. */
@media (prefers-reduced-motion: reduce) {
    .home2 .m-reveal,
    .home2 .m-reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .home2 .hero2 h1,
    .home2 .hero2 p,
    .home2 .hero2__actions,
    .home2 .hero2__art {
        animation: none;
    }

    .home2 .tile,
    .home2 .mcard,
    .home2 .pcard,
    .home2 .process__item,
    .home2 .process__item img,
    .home2 .hero2__cta,
    .home2 .btn__dot {
        transition: none;
    }

        .home2 a.tile:hover,
        .home2 a.mcard:hover,
        .home2 a.pcard:hover,
        .home2 .process__item:hover,
        .home2 .process__item:hover img,
        .home2 .hero2__cta:hover,
        .home2 .btn__dot:hover {
            transform: none;
        }
}

/* --- Klavye erişilebilirliği: yeni CSS'in hiçbirinde odak halkası yoktu. */
.home2 a:focus-visible,
.home2 button:focus-visible {
    outline: 2px solid var(--seal);
    outline-offset: 3px;
    border-radius: 6px;
}

/*--------------------------------------------------------------------------
  7. TELEFONDA YATAY RAY (2026-08-20, Dilek onayladı)
     Sorun: dörtlü/ikili kart ızgaraları telefonda tek sütuna inince her kart
     tam boy bir blok oluyordu ve sayfa 16.500px'e (≈44 ekran) çıkıyordu.
     Çözüm: ızgaralar telefonda dikey yığın yerine YATAY RAY. Kart genişliği
     78vw — sağdaki kartın bir dilimi görünsün ve kaydırılabildiği anlaşılsın
     diye (tam genişlik verilirse ray gizli kalır).
     Masaüstünde hiçbir şey değişmiyor.
  --------------------------------------------------------------------------*/
@media (max-width: 700px) {
    .home2 .showcase,
    .home2 .process__items,
    .home2 .process__items--quad,
    .home2 .process__items--duo {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78vw;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-left: var(--pad);
        /* sarmalayıcının iç boşluğunu kırıp kenardan kenara aksın */
        margin: 0 calc(-1 * var(--pad));
        padding: 6px var(--pad) 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        touch-action: pan-x pan-y;
    }

        .home2 .showcase::-webkit-scrollbar,
        .home2 .process__items::-webkit-scrollbar,
        .home2 .process__items--quad::-webkit-scrollbar,
        .home2 .process__items--duo::-webkit-scrollbar {
            display: none;
        }

    .home2 .process__item,
    .home2 .tile {
        scroll-snap-align: start;
    }

        /* Masaüstündeki "tek kalan kart iki kolonu kaplasın" kuralı yatay
           akışta anlamsız; sıfırlanmazsa kart rayı bozuyor. */
        .home2 .process__items--duo .process__item:last-child:nth-child(odd) {
            grid-column: auto;
        }

    /* Yatay rayda kartlar aynı boyda dursun (dikey yığında gerekmiyordu). */
    .home2 .process__item {
        display: flex;
        flex-direction: column;
    }
}

/*--------------------------------------------------------------------------
  8. KART BAŞLIKLARI ve İKONLAR LACİVERT (2026-08-20, Dilek'in isteği)
  --------------------------------------------------------------------------*/

/* Başlıklar: temanın `#1A1919`'u sızıyordu (style.css), o yüzden `--ink`
   laciverde çevrilmesine rağmen siyah kalmışlardı. */
.home2 .process__item h3 {
    color: var(--ink);
}

/* İkonlar `<img>` olarak geldiği (ve SVG'lerin dolgusu `fill="#212121"`
   olduğu) için renk CSS'ten doğrudan verilemiyor; filtreyle çevriliyor.
   Değerler tahmin DEĞİL: tarayıcıda canvas üstünde sayısal olarak çözüldü —
   #212121 → rgb(28,39,76), sapma 0.00 (birebir #1C274C).
   `brightness(0)` baştaki normalleştirme: kaynak hangi koyu ton olursa olsun
   önce saf siyaha indiriliyor, zincirin geri kalanı oradan hedefe taşıyor. */
.home2 .process__item img,
.home2 .tile:not(.tile--dark) img {
    filter: brightness(0) invert(0.116) sepia(0.556) saturate(26.77) hue-rotate(216.6deg) brightness(0.681) contrast(0.863);
}

    /* Koyu karttaki ikonlar beyaz kalır (`.tile.tile--dark img` kuralı) —
       yukarıdaki seçici `:not(.tile--dark)` ile onu dışarıda bırakıyor;
       ikisi aynı ağırlıkta olduğu için sıraya güvenmek riskliydi. */

    /* Hover'da ikon rengi kaybolmasın: home2'deki eski `filter: none`
       temanın `invert(2)`sini iptal etmek içindi, artık laciverdi de
       iptal ediyordu. */
    .home2 .process__item:hover img {
        filter: brightness(0) invert(0.116) sepia(0.556) saturate(26.77) hue-rotate(216.6deg) brightness(0.681) contrast(0.863);
    }