/*==========================================================================
   page2.css — kurumsal/yardımcı sayfaların bileşenleri (2026-08-20 gecesi)
   --------------------------------------------------------------------
   TAMAMI .feat2 altında kapsanmıştır ve `feature2.css`ten SONRA yüklenir.
   Bu dosyayı silmek + _Layout'taki <link> satırını kaldırmak yalnız buradaki
   bileşenleri düşürür; feature/module sayfaları etkilenmez.

   NEDEN AYRI DOSYA: `feature2.css` 21 pazarlama sayfasını besliyor ve 1000
   satıra yaklaştı. Buradaki bileşenler (adım merdiveni, hukuk metni kolonu,
   form kartı, dosya satırları, SSS akordeonu, dizin, 404) yalnız ~14 kurumsal
   sayfada kullanılıyor. Karıştırılsaydı pazarlama sayfalarında hiç
   kullanılmayan kurallar her istekte taşınacaktı ve §15.7'deki "tek hamlede
   geri alınabilir katman" ilkesi zayıflardı.

   TOKEN YOK: bütün değerler `.feat2`nin custom property'lerinden geliyor
   (feature2.css:27). Burada yeni renk TANIMLANMIYOR — palet §15.1'de kapalı.

   KULLANAN SAYFALAR:
     Details/Index, Details/Installation, Details/Licensing
     Home/About, Home/FQA, Home/ContactUs, Home/BecomeReseller,
     Home/Download, Home/SiteMap, Home/Error,
     Home/Terms, Home/Privacy, Home/PreInfo, Home/Agreement
   ========================================================================== */

/* `interpolate-size` SSS akordeonunun açılış geçişi için (aşağıda .faq2).
   Desteklemeyen tarayıcı yok sayar, akordeon anında açılır — bozulma yok. */
.feat2 {
    interpolate-size: allow-keywords;
}

/*--------------------------------------------------------------------------
  1. ADIM MERDİVENİ (.steps)
  --------------------------------------------------------------------------
  SİTEDEKİ TEK MEŞRU NUMARALANDIRMA. Ana sayfada ve modül sayfalarında
  "01 / 02 / 03" biçimi bilerek kullanılmadı: oralarda kartların sırası
  keyfî, numara yalnız süs olurdu. Bakım ve Lisanslama sayfalarındaki
  içerik ise gerçekten bir SIRA — `<ol>` olarak yazılmış, adımlar birbirini
  izliyor. Numara burada bilgi taşıyor.

  Biçim, ürünün kendi dünyasından alındı: numara metnin soluna asılı bir
  OLUKTA duruyor ve satırlar ince çizgilerle ayrılıyor — bir sözleşmenin
  madde numaralandırması gibi. Pazarlama sayfalarındaki "iri numaralı
  zaman çizelgesi" kalıbı bilerek kullanılmadı; bu bir yönerge, kampanya
  değil.

  `.feat2__rows` (yan yana akan ✓ listesi) ile FARKI kasıtlı: o liste
  "bunlar eşit maddeler" der, bu liste "bunlar birbirini izler" der.
  İki farklı anlam, iki farklı biçim.
  --------------------------------------------------------------------------*/
.feat2 .steps {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 880px;
    counter-reset: step;
}

    .feat2 .steps li {
        counter-increment: step;
        position: relative;
        padding: 18px 0 18px 44px;
        border-top: 1px solid rgba(28,39,76,.12);
        font-size: 17px;
        line-height: 1.47;
        letter-spacing: -0.022em;
        color: var(--ink-soft);
    }

        /* Son maddenin ALTINA da çizgi: liste kapanmış görünsün diye.
           (Yalnız üst çizgi verilseydi son madde havada biterdi.) */
        .feat2 .steps li:last-child {
            border-bottom: 1px solid rgba(28,39,76,.12);
        }

        /* Numara olukta, ÇİZGİNİN SOL UCUYLA HİZALI — sağa yaslanınca
           metinle çizgi arasında havada duruyordu. `tabular-nums` iki
           haneye geçince (10, 11) hizanın kaymaması için. */
        .feat2 .steps li::before {
            content: counter(step);
            position: absolute;
            left: 0;
            top: 18px;
            width: 30px;
            text-align: left;
            font-size: 15px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            color: var(--ink);
            line-height: 1.66;
        }

        .feat2 .steps li strong {
            color: var(--ink);
            font-weight: 500;
        }

/*--------------------------------------------------------------------------
  2. ŞEMA (.diagram)
  --------------------------------------------------------------------------
  `.shot`tan AYRI bir bileşen. `.shot` bir ekran görüntüsüdür: geniştir,
  kenardan kenara durur, kanıt sunar. Buradakiler ise küçük çizimler
  (787x711 ve 478x404) — eski markup'ta `max-width: 25%` ile ortalanmıştı.
  Ekran görüntüsü gibi büyütülselerdi piksellenir ve ucuz görünürlerdi.

  Beyaz bir yüzeyin üstünde duruyorlar çünkü ikisinin de zemini şeffaf;
  gri bantta doğrudan dursalardı kenarları belirsiz kalırdı.
  --------------------------------------------------------------------------*/
/* ORTALI (2026-08-30) — bkz. feature2.css'teki `.shot` notu. 360px'lik bu
   kutu 1200px'lik kabukta sola yaslıyken en dengesiz duranıydı. */
.feat2 .diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(360px, 100%);
    margin: 36px auto 0;
    padding: 28px;
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--lift-1);
}

    .feat2 .diagram img {
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        margin: 0;
    }

/*--------------------------------------------------------------------------
  3. BİLDİRİM (.notice)
  --------------------------------------------------------------------------
  Bootstrap'in `alert alert-danger` kutusunun yerine. Eski kutu KIRMIZI
  ZEMİNLİ bir hata kutusuydu; oysa hukuk sayfalarındaki uyarı bir hata
  değil, bir bilgi: "bu metin yalnız İngilizce". Kırmızı zemin hem yanlış
  şey söylüyordu hem de §15.1'deki "kırmızı yalnız üç yerde" kuralını
  deliyordu.

  Yerine: nötr yüzey + solda ince bir çizgi. Çizginin rengi bildirimin
  türünü söylüyor, zemin değil.
  --------------------------------------------------------------------------*/
.feat2 .notice {
    display: block;
    max-width: 880px;
    margin: 0 0 32px;
    padding: 16px 20px;
    border-left: 3px solid var(--slate);
    border-radius: 0 10px 10px 0;
    background: var(--hover-wash);
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.016em;
    color: var(--ink);
}

    /* Form geri bildirimleri. Yeşil PALETTE YOK (§15.1: tek kromatik aksan
       mühür kırmızısı) — başarı, kırmızının yokluğuyla ve lacivert çizgiyle
       anlatılıyor. Hata durumunda çizgi kırmızıya döner; metin her iki
       durumda da lacivert kalır, yani okunurluk sabittir. */
    .feat2 .notice--ok {
        border-left-color: var(--ink);
    }

    .feat2 .notice--error {
        border-left-color: var(--seal);
    }

    .feat2 .notice:last-child {
        margin-bottom: 0;
    }

/*--------------------------------------------------------------------------
  4. HUKUK METNİ (.doc2)
  --------------------------------------------------------------------------
  Sitedeki TEK "okunmak için" var olan sayfa ailesi: Kullanım Koşulları,
  Gizlilik, Ön Bilgilendirme, Mesafeli Satış. Dört sayfa da uzun ve tek
  parça İngilizce metin.

  ÜÇ KARAR:

  1. BANT ALTERNANSI YOK. Pazarlama sayfalarında beyaz↔gri dönüşümü bölüm
     sınırını gösteriyor; hukuk metninde bölümler metnin kendi
     numaralandırmasıyla belli ve zemin değişimi metni keyfî yerlerden
     keserdi. Tek beyaz bant.

  2. SATIR UZUNLUĞU 720px (~72 karakter). `.feat2__prose` 820px; burada
     daha dar, çünkü bu metinler paragraf paragraf okunuyor, taranmıyor.

  3. BAŞLIK KENDİNDEN SONRAKİNE AİT. `margin-top` >> `margin-bottom`:
     h3 üstündeki boşluk altındakinin üç katı, böylece başlık bir önceki
     paragrafın devamı değil, sonrakinin kapağı gibi okunuyor.
  --------------------------------------------------------------------------*/
/* Kolon ORTALANIYOR. Sitenin geri kalanında metin kolonları (`.feat2__prose`,
   `.shot`) sola yaslı, çünkü o sayfalarda kart ızgaraları ve tam genişlikte
   görseller sol kenarı zaten kuruyor. Hukuk sayfasında sayfadaki TEK öğe bu
   kolon; sola yaslandığında 1200px'lik kapsayıcının sağ yarısı boş kalıyor
   ve metin bir kenara itilmiş gibi duruyor. */
.feat2 .doc2 {
    max-width: 720px;
    margin-inline: auto;
}

    .feat2 .doc2 h2 {
        font-size: clamp(22px, 2.2vw, 27px);
        line-height: 1.18;
        font-weight: 600;
        letter-spacing: 0.007em;
        color: var(--ink);
        margin: 56px 0 18px;
        padding-top: 30px;
        border-top: 1px solid rgba(28,39,76,.12);
    }

        /* İlk başlık uyarı kutusunun hemen altında; oradaki dikiş çizgisi ve
           56px'lik boşluk fazlalık olurdu. `:first-child` TEK BAŞINA YETMEZ:
           dört sayfada da `.doc2`nin ilk çocuğu `.notice`, başlık ikinci. */
        .feat2 .doc2 > h2:first-child,
        .feat2 .doc2 > h3:first-child,
        .feat2 .doc2 > .notice + h2,
        .feat2 .doc2 > .notice + h3 {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }

    .feat2 .doc2 h3 {
        font-size: 19px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0.011em;
        color: var(--ink);
        margin: 36px 0 12px;
    }

    .feat2 .doc2 h4 {
        font-size: 17px;
        line-height: 1.35;
        font-weight: 600;
        letter-spacing: -0.016em;
        color: var(--ink);
        margin: 28px 0 10px;
    }

    .feat2 .doc2 p,
    .feat2 .doc2 li {
        font-size: 16px;
        line-height: 1.62;
        letter-spacing: -0.014em;
        color: var(--ink-soft);
        margin: 0 0 16px;
    }

    .feat2 .doc2 strong {
        color: var(--ink);
        font-weight: 600;
    }

    .feat2 .doc2 ul,
    .feat2 .doc2 ol {
        margin: 0 0 16px;
        padding-left: 22px;
    }

        .feat2 .doc2 li {
            margin-bottom: 8px;
        }

    /* Bağlantılar gövde içinde: altı çizili DEĞİL ama gövdeden koyu ve
       ağırlıklı — hukuk metninde çapraz gönderme sık, on beş altı çizili
       bağlantı sayfayı benekli gösterirdi. */
    .feat2 .doc2 a {
        color: var(--ink);
        font-weight: 500;
        text-decoration: underline;
        text-decoration-color: rgba(28,39,76,.28);
        text-underline-offset: 3px;
    }

        .feat2 .doc2 a:hover {
            text-decoration-color: var(--seal);
        }

    /* "Last Updated ..." satırı. Metin YERİNDE kalıyor (§17: sıra
       değişmez); yalnız ölçeği düşürülüp harf aralığı açılıyor, böylece
       gövde paragrafı olmaktan çıkıp bir künye satırı gibi okunuyor. */
    .feat2 .doc2 .dateline {
        font-size: 13px;
        line-height: 1.4;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--slate);
        margin: 0 0 40px;
    }

        /* Gizlilik sayfasında künye paragrafı iki `<br />` taşıyor (eski
           temada boşluk vermek için). Boşluğu artık `margin` veriyor;
           satır sonları burada yalnız boşluk açardı. Metin etkilenmiyor. */
        .feat2 .doc2 .dateline br {
            display: none;
        }

/*--------------------------------------------------------------------------
  5. FORM KARTI (.form2)
  --------------------------------------------------------------------------
  İletişim, İş Ortağı ve İndirme sayfalarındaki form + fotoğraf ikilisi.
  Tema bunları yan yana iki ayrı blok olarak koyuyordu; burada TEK BİR
  KART: fotoğraf kartın kenarına kadar taşıyor, form beyaz tarafta.

  Alanlar çerçeveli değil DOLU: zemin `--canvas`, kenarlık şeffaf. Odakta
  zemin beyaza döner ve lacivert bir halka çıkar — yani odak, kenarlık
  kalınlığıyla değil YÜZEY DEĞİŞİMİYLE anlatılıyor; sayfada zıplama olmuyor.

  Gönder düğmesi mühür kırmızısı: sayfanın tek eylemi burası, aksan burada
  hak ediliyor (§15.1'deki "hero'daki dolu buton" ile aynı gerekçe).
  --------------------------------------------------------------------------*/
.feat2 .form2 {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    background: var(--paper);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--lift-1);
}

    .feat2 .form2__body {
        padding: 44px;
        min-width: 0;
    }

    .feat2 .form2__aside {
        position: relative;
        min-height: 420px;
    }

        .feat2 .form2__aside img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            max-width: none;
            margin: 0;
        }

    .feat2 .form2 h2 {
        font-size: clamp(22px, 2.2vw, 27px);
        line-height: 1.18;
        font-weight: 600;
        letter-spacing: 0.007em;
        color: var(--ink);
        margin: 0 0 10px;
    }

    .feat2 .form2 > .form2__body > p {
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: -0.018em;
        color: var(--ink-soft);
        margin: 0 0 26px;
    }

/* Alan ızgarası: iki alan yan yana, tek alan tam genişlik. */
.feat2 .form2__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.feat2 .form2__field {
    margin-bottom: 14px;
}

/* Yüksek özgüllük BİLEREK (3 sınıf): Bootstrap'in `.form-control` ve
   temanın `.contact__form input` kuralları aynı alanları hedefliyor.
   İki sınıflı yazılsaydı yükleme sırasına güvenmek gerekirdi. */
.feat2 .form2 input,
.feat2 .form2 textarea {
    display: block;
    width: 100%;
    height: auto;
    padding: 15px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--canvas);
    color: var(--ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.018em;
    box-shadow: none;
    transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.feat2 .form2 textarea {
    min-height: 132px;
    resize: vertical;
}

    .feat2 .form2 input::placeholder,
    .feat2 .form2 textarea::placeholder {
        color: var(--slate);
    }

    .feat2 .form2 input:focus,
    .feat2 .form2 textarea:focus {
        outline: none;
        background: var(--paper);
        border-color: var(--ink);
        box-shadow: 0 0 0 3px rgba(28,39,76,.12);
    }

/* Sayı alanındaki artır/azalt okları: telefon numarası için anlamsız ve
   kaydırırken yanlışlıkla değeri değiştiriyorlar. (Alanın `type="number"`
   olması içerik değil markup kararı; eski hâli korunuyor.) */
.feat2 .form2 input[type=number] {
    -moz-appearance: textfield;
}

    .feat2 .form2 input[type=number]::-webkit-outer-spin-button,
    .feat2 .form2 input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* reCAPTCHA kutusu 304px sabit genişlikte ve kendi çerçevesini taşıyor;
   dar kolonda taşmasın diye ölçekleniyor. */
.feat2 .form2 .g-recaptcha {
    margin: 4px 0 20px;
    transform-origin: 0 0;
}

/* Gönder düğmesi */
.feat2 .form2__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 0;
    border-radius: 980px;
    background: var(--seal);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.018em;
    cursor: pointer;
    transition: background .25s var(--ease), transform .25s var(--ease);
}

    .feat2 .form2__submit:hover {
        background: var(--seal-hover);
        color: #fff;
        transform: translateY(-1px);
    }

    .feat2 .form2__submit::after {
        content: "\203A";
        font-size: 19px;
        line-height: 1;
    }

    /* İkon düğmesi (indirme anahtarı). Ok kalkıyor — metin yok, iki glif
       yan yana ne olduğunu söylemez. İkon beyaz: kırmızı hapın üstü,
       §15.5'teki koyu yüzey istisnası. */
    .feat2 .form2__submit--icon {
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

        .feat2 .form2__submit--icon::after {
            content: none;
        }

        .feat2 .form2__submit--icon img {
            width: 22px;
            height: 22px;
            margin: 0;
            filter: brightness(0) invert(1);
        }

.feat2 .form2 .notice {
    margin: 20px 0 0;
    max-width: none;
}

/*--------------------------------------------------------------------------
  6. DOSYA SATIRLARI (.filegrid / .filerow)
  --------------------------------------------------------------------------
  İndirme sayfasının ASIL İŞİ dosya vermek, o yüzden sayfanın en iyi
  görünen öğesi bu olmalı. Eski hâlde dosyalar 5rem'lik (80px!) PDF
  ikonları ve `<br>` ile alt alta diziliydi; ikon bağlantı metninden üç kat
  büyüktü.

  Yeni: her dosya tıklanabilir bir SATIR. İkon 22px, ad 16px, sağda ok.
  Ok üzerine gelince kırmızıya döner ve sağa kayar — kart kaldırma
  kullanılmadı, çünkü bunlar kart değil satır; §15.2'deki "yalnız bağlantı
  olan kartlar kalkar" kuralının satır karşılığı yüzey renginin değişmesi.
  --------------------------------------------------------------------------*/
.feat2 .filegrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 1100px;
    margin: 28px 0 0;
}

.feat2 .filerow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--lift-1);
    color: var(--ink);
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

    .feat2 .filerow:hover {
        text-decoration: none;
        color: var(--ink);
        transform: translateY(-2px);
        box-shadow: var(--lift-2);
    }

    .feat2 .filerow img {
        flex: 0 0 auto;
        width: 22px;
        height: 26px;
        margin: 0;
    }

    .feat2 .filerow span {
        flex: 1 1 auto;
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: -0.018em;
        min-width: 0;
    }

    /* Ok: §15.1'deki "tek tırnaklı ok glifi" kuralının aynısı — metin
       lacivert, ok kırmızı. */
    .feat2 .filerow::after {
        content: "\2193";
        flex: 0 0 auto;
        font-size: 17px;
        color: var(--seal);
        transition: transform .25s var(--ease);
    }

    .feat2 .filerow:hover::after {
        transform: translateY(2px);
    }

/* Lacivert hap düğme. `.dlbtn` bunun ok ekleyen türevi; ok yalnız gerçekten
   bir dosya inecekse konur — 404'teki "ana sayfaya dön" bağlantısında ok
   yanlış söz verirdi. */
.feat2 .btn2,
.feat2 .dlbtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 980px;
    background: var(--navy);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.018em;
    text-decoration: none;
    transition: background .25s var(--ease), transform .25s var(--ease);
}

    .feat2 .btn2:hover,
    .feat2 .dlbtn:hover {
        background: var(--navy-soft);
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
    }


    .feat2 .dlbtn::after {
        content: "\2193";
        font-size: 17px;
    }

/*--------------------------------------------------------------------------
  7. SÜRÜM SATIRI (.release)
  --------------------------------------------------------------------------
  Sitedeki tek CANLI veri (`Version.GetLast()`). İndirme sayfasının en
  belirleyici bilgisi bu: kullanıcı buraya "en son ne çıktı" diye geliyor.
  Sürüm numarası gövdeden ayrılıp koyulaştırıldı; tarih ve etiket
  ikincil kalıyor. Metin ve sırası aynen korundu — değişen yalnız ağırlık.
  --------------------------------------------------------------------------*/
.feat2 .release {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 8px;
    margin: 22px auto 0;
    padding: 11px 22px;
    border-radius: 980px;
    background: var(--hover-wash);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.016em;
    color: var(--ink-soft);
}

    .feat2 .release strong {
        font-size: 17px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--ink);
    }

/*--------------------------------------------------------------------------
  8. PANEL (.panel)
  --------------------------------------------------------------------------
  Kendi başına duran teknik blok — İndirme sayfasındaki Docker yönergesi.
  `.callout` (koyu lacivert kart) KULLANILMADI: o bileşen sayfanın en
  kritik CÜMLESİ için; burada yirmi satırlık bir yönerge var ve lacivert
  zeminde beyaz yirmi satır okunmuyor.
  --------------------------------------------------------------------------*/
.feat2 .panel {
    max-width: 1000px;
    padding: 40px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--lift-1);
    /* Docker yönergesi düz metin içinde uzun adresler taşıyor
       ("https://docs.docker.com/get-docker/"). Bunlar boşluksuz olduğu için
       390px'lik ekranda kutudan taşıyor ve BELGENİN kaydırma genişliğini
       büyütüyordu (7px yatay taşma — ölçüldü). Kutunun kendisi taşmıyordu,
       o yüzden `getBoundingClientRect` ile bulunamıyor: taşan şey satırın
       kendisi. Adresler kırılıyor, metin değişmiyor. */
    overflow-wrap: anywhere;
}

    .feat2 .panel h3 {
        font-size: 20px;
        line-height: 1.25;
        font-weight: 600;
        letter-spacing: 0.011em;
        color: var(--ink);
        margin: 0 0 16px;
    }

    /* Yönergenin adımları: numaraları METNİN İÇİNDE ("1. Prerequisites"),
       o yüzden `.steps` kullanılmadı — numara iki kez çıkardı. Sıra
       duygusunu soldaki ince çizgi veriyor. */
    .feat2 .panel__steps {
        margin: 26px 0;
    }

        .feat2 .panel__steps p {
            position: relative;
            padding-left: 20px;
            border-left: 2px solid var(--silver);
            margin: 0 0 20px;
        }

            .feat2 .panel__steps p:last-child {
                margin-bottom: 0;
            }

/*--------------------------------------------------------------------------
  9. SSS AKORDEONU (.faq2)
  --------------------------------------------------------------------------
  Temanın jQuery akordeonu (main.js:720, `.faq__block` üzerinden) BIRAKILDI;
  yerine yerel `<details name="faq">` geldi. Kazanç:
    · klavye ve ekran okuyucu desteği bedava (summary düğme gibi davranır),
    · JS yüklenmese de açılıp kapanıyor,
    · `name` özniteliği aynı anda tek maddenin açık kalmasını tarayıcıya
      yaptırıyor — eski betiğin elle yaptığı iş.
  `name` desteklemeyen tarayıcıda birden çok madde açık kalabilir; içerik
  yine erişilebilir, yalnız davranış daha gevşek.

  NUMARALAR (01., 02., ...) eski markup'ta yazılıydı ve KORUNDU, ama
  tipografik olarak geri çekildi: SSS'nin sırası bir yönerge değil, numara
  burada bilgi taşımıyor — yalnız yer imi.
  --------------------------------------------------------------------------*/
.feat2 .faq2 {
    max-width: 900px;
    margin-inline: auto;
    border-top: 1px solid rgba(28,39,76,.12);
}

.feat2 .faq2 details {
    border-bottom: 1px solid rgba(28,39,76,.12);
}

.feat2 .faq2 summary {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(18px, 1.7vw, 20px);
    line-height: 1.32;
    font-weight: 600;
    letter-spacing: -0.014em;
    color: var(--ink);
}

    .feat2 .faq2 summary::-webkit-details-marker {
        display: none;
    }

    .feat2 .faq2 summary:hover {
        color: var(--navy-soft);
    }

.feat2 .faq2__no {
    flex: 0 0 auto;
    width: 30px;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--slate);
}

.feat2 .faq2__q {
    flex: 1 1 auto;
    min-width: 0;
}

/* Artı/eksi yerine chevron: açılan bir panelin yönünü gösteriyor.
   `currentColor` — hover'da başlıkla birlikte tonu değişsin diye. */
.feat2 .faq2__mark {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s var(--ease);
    opacity: .55;
}

.feat2 .faq2 details[open] .faq2__mark {
    transform: rotate(225deg) translate(-2px, -2px);
}

.feat2 .faq2__a {
    padding: 0 46px 26px 46px;
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: -0.018em;
    color: var(--ink-soft);
}

    .feat2 .faq2__a p {
        margin: 0;
        font: inherit;
        color: inherit;
    }

    .feat2 .faq2__a a {
        color: var(--ink);
        font-weight: 500;
        text-decoration: underline;
        text-decoration-color: rgba(28,39,76,.28);
        text-underline-offset: 3px;
    }

        .feat2 .faq2__a a:hover {
            text-decoration-color: var(--seal);
        }

/* Açılış geçişi — destekleyen tarayıcıda yükseklik animasyonlu, ötekinde
   anında. `interpolate-size` yukarıda `.feat2`de tanımlı. */
@supports (height: calc-size(auto, size)) {
    .feat2 .faq2 details::details-content {
        height: 0;
        overflow: clip;
        transition: height .35s var(--ease), content-visibility .35s allow-discrete;
    }

    .feat2 .faq2 details[open]::details-content {
        height: auto;
    }
}

/*--------------------------------------------------------------------------
  10. DİZİN (.sitemap)
  --------------------------------------------------------------------------
  Site haritası bir pazarlama sayfası değil, bir DİZİN. Süs eklenmedi:
  üç sütun, her sütunda bir başlık ve bağlantı listesi. Kartlar
  tıklanabilir olmadığı için kalkmıyor (§15.2).
  --------------------------------------------------------------------------*/
.feat2 .sitemap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.feat2 .sitemap__col {
    padding: 32px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--lift-1);
}

    .feat2 .sitemap__col h2 {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--slate);
        margin: 0 0 18px;
    }

.feat2 .sitemap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    /* Gruplar arası ayrım: eski markup'ta `<ul>` içinde `<hr>` vardı
       (geçersiz HTML). Ayrı `<ul>`lere bölündü, ayrımı boşluk + çizgi
       veriyor. */
    .feat2 .sitemap ul + ul {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(28,39,76,.12);
    }

    .feat2 .sitemap li + li {
        margin-top: 2px;
    }

    .feat2 .sitemap a {
        display: block;
        padding: 7px 10px;
        margin: 0 -10px;
        border-radius: 8px;
        font-size: 16px;
        line-height: 1.35;
        letter-spacing: -0.018em;
        color: var(--ink);
        text-decoration: none;
        transition: background .2s var(--ease);
    }

        .feat2 .sitemap a:hover {
            background: var(--hover-wash);
            text-decoration: none;
        }

/*--------------------------------------------------------------------------
  11. HATA SAYFASI (.err2)
  --------------------------------------------------------------------------
  404: tek iş, tek çıkış. Ortalanmış, kısa, tek düğme.
  --------------------------------------------------------------------------*/
.feat2 .err2 {
    text-align: center;
    padding: 110px 0 130px;
}

    .feat2 .err2 img {
        width: min(340px, 74%);
        height: auto;
        margin: 0 auto 34px;
        display: block;
    }

    .feat2 .err2 h2 {
        font-size: clamp(24px, 2.8vw, 32px);
        line-height: 1.14;
        font-weight: 600;
        letter-spacing: -0.014em;
        color: var(--ink);
        margin: 0 0 14px;
    }

    .feat2 .err2 p {
        font-size: 17px;
        line-height: 1.47;
        letter-spacing: -0.022em;
        color: var(--ink-soft);
        max-width: 520px;
        margin: 0 auto 30px;
    }

/*--------------------------------------------------------------------------
  12. MODÜL ROZETLERİ (.mini-grid / .mini) — Hakkımızda sayfası
  --------------------------------------------------------------------------
  On iki modülün adı, ikonuyla. `.spec` KULLANILMADI: o kart 260px yüksek
  ve bir başlık + açıklama taşımak için var; burada yalnız iki kelime var,
  aynı kartta boşluk uçurumu olurdu.

  Bunlar bağlantı DEĞİL (eski markup'ta da değildi), o yüzden hover'da
  kalkmıyorlar — §15.2: "bağlantı olmayan kartı kaldırmak 'buraya tıklanır'
  diye yanlış söz vermektir."
  --------------------------------------------------------------------------*/
.feat2 .mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.feat2 .mini {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 18px;
    border-radius: 18px;
    background: var(--paper);
    box-shadow: var(--lift-1);
}

    .feat2 .mini img {
        width: 26px;
        height: 26px;
        margin: 0;
    }

    .feat2 .mini h3 {
        font-size: 15px;
        line-height: 1.28;
        font-weight: 500;
        letter-spacing: -0.014em;
        color: var(--ink);
        margin: 0;
    }

/*--------------------------------------------------------------------------
  13. E-POSTA BANDI (.cta2) — Hakkımızda sayfası
  --------------------------------------------------------------------------
  Sitedeki tek "bırak, biz arayalım" alanı. Koyu lacivert bir bant:
  sayfanın gövdesi boyunca beyaz↔gri gittikten sonra koyu bir yüzey
  eylemi ayırıyor. Aynı koyu yüzey ana sayfada ve `.callout`ta da var,
  yani yeni bir dil değil — var olanın bant boyuna büyütülmüş hâli.

  KONTRAST: üst etiket `--seal-light` (§15.1 tuzağı — `--seal` lacivert
  üstünde 3.55:1 eder, 12px etikette yetersiz).
  --------------------------------------------------------------------------*/
.feat2 .cta2 {
    background: var(--navy-deep);
    padding: 92px 0;
    text-align: center;
}

    .feat2 .cta2__eyebrow {
        display: block;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--seal-light);
        margin: 0 0 14px;
    }

    .feat2 .cta2 h3 {
        font-size: clamp(24px, 3vw, 36px);
        line-height: 1.14;
        font-weight: 600;
        letter-spacing: -0.014em;
        color: #fff;
        max-width: 820px;
        margin: 0 auto 32px;
    }

/* Alan + düğme tek bir hap içinde: iki ayrı nesne gibi durmasınlar diye
   dış kapsayıcı beyaz, düğme onun içinde bir daire. */
.feat2 .cta2__form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 7px 7px 7px 22px;
    border-radius: 980px;
    background: var(--paper);
}

    .feat2 .cta2__form input {
        flex: 1 1 auto;
        min-width: 0;
        height: auto;
        padding: 10px 0;
        border: 0;
        background: none;
        color: var(--ink);
        font-family: inherit;
        font-size: 16px;
        letter-spacing: -0.018em;
        box-shadow: none;
    }

        .feat2 .cta2__form input:focus {
            outline: none;
        }

        .feat2 .cta2__form input::placeholder {
            color: var(--slate);
        }

    .feat2 .cta2__form button {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--seal);
        cursor: pointer;
        transition: background .25s var(--ease);
    }

        .feat2 .cta2__form button:hover {
            background: var(--seal-hover);
        }

        /* Kâğıt uçak ikonu koyu dolgulu bir SVG; kırmızı dairenin üstünde
           BEYAZ olmalı. §15.5'teki koyu yüzey istisnası. */
        .feat2 .cta2__form button img {
            width: 20px;
            height: 20px;
            margin: 0;
            filter: brightness(0) invert(1);
        }

/* Odak halkası koyu zeminde: `--seal` yerine beyaz — kırmızı halka
   lacivert üstünde yeterince ayrışmıyor. */
.feat2 .cta2 input:focus-visible,
.feat2 .cta2 button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/*--------------------------------------------------------------------------
  14. ORTAK YARDIMCILAR
  --------------------------------------------------------------------------*/
/* Bölüm başlığından hemen sonra gelen ızgara/panel için üst boşluk. */
.feat2 .feat2__lead-gap {
    margin-top: 28px;
}

/* Sayfa içi ilk bant başlığı ortalanacaksa (SSS, İletişim). */
.feat2 .feat2__title--center {
    text-align: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* GÖRSELSİZ TEPE. `.feat2--a .fhero` alt boşluk TAŞIMIYOR (feature2.css:181,
   `padding: 76px 0 0`) çünkü altındaki `.fhero__art` zaten 56px üst boşlukla
   geliyor. Site haritasında ve hukuk sayfalarında tepede görsel yok; alt
   boşluk verilmezse başlık bir sonraki banda yapışır. */
.feat2 .fhero--bare {
    padding-bottom: 64px;
}

/* Ortalanmış başlığın altındaki ortalanmış paragraf (İş Ortağı sayfasının
   kapanış bandı). `.feat2__prose` genişliği korunuyor, yalnız hizalanıyor. */
.feat2 .feat2__center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* NOT: buradaki `.vshot--center` kuralı 2026-08-30'da SİLİNDİ — `.vshot`
   feature2.css'te zaten ortalanıyor, bu kural onu tekrar ediyordu. Sınıf
   Hakkımızda sayfasının markup'ında duruyor ama artık bir şey yapmıyor. */

/* `.spec` kartında BİRDEN ÇOK paragraf (Hakkımızda/"Değerlerimiz" üç
   paragraf taşıyor). feature2.css'te `.spec p { margin: 0 }` — tek
   paragraf varsayımı; ikincisi gelince paragraflar birbirine yapışıyordu. */
.feat2 .spec p + p {
    margin-top: 10px;
}

/* İKON RENGİ — §15.5. feature2.css bu filtreyi yalnız `.spec img` için
   yazıyor; buradaki iki yeni bileşen de ikon taşıyor. Değerler kopya
   DEĞİL, aynı çözülmüş zincir (sapma 0.00 → #1C274C); tek yerde
   toplanamıyor çünkü feature2.css bu dosyadan önce yükleniyor ve
   seçici listesine dokunmak 21 pazarlama sayfasını da etkilerdi.
   `.cta2__form button img` BU KURALIN DIŞINDA: orası kırmızı bir dairenin
   üstü, ikon beyaz olmalı (yukarıda ayrıca yazıldı). */
.feat2 .mini img,
.feat2 .filerow img {
    filter: brightness(0) invert(0.116) sepia(0.556) saturate(26.77) hue-rotate(216.6deg) brightness(0.681) contrast(0.863);
}

/*--------------------------------------------------------------------------
  15. BELİRİŞ — feature2.css'teki dilbilgisinin aynısı
  --------------------------------------------------------------------------
  Gizleme/geçiş kuralları `.feat2 .m-reveal` üzerinden zaten feature2.css'te
  tanımlı; burada yalnız yeni hedefler için bir şey gerekmiyor. Hedef
  seçicileri `motion2.js`e eklendi.
  --------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
  16. DUYARLILIK — kırılımlar 1100 / 780 / 700 (§15.6)
  --------------------------------------------------------------------------*/
@media (max-width: 1100px) {
    .feat2 .filegrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feat2 .sitemap {
        grid-template-columns: repeat(2, 1fr);
    }

    .feat2 .mini-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .feat2 .form2 {
        grid-template-columns: 1fr;
    }

        /* Fotoğraf üstte, form altta. Yükseklik düşüyor çünkü tam boy
           fotoğraf tabletde ekranın tamamını yer. */
        .feat2 .form2__aside {
            order: -1;
            min-height: 260px;
        }
}

@media (max-width: 780px) {
    .feat2 .filegrid,
    .feat2 .sitemap {
        grid-template-columns: 1fr;
    }

    .feat2 .form2__body,
    .feat2 .panel {
        padding: 28px;
    }

    .feat2 .form2__row {
        grid-template-columns: 1fr;
    }

    /* reCAPTCHA 304px + kartın 2x28px iç boşluğu = 360px; 390px'lik
       ekranda taşmıyor ama 360px'likte taşıyor. Ölçek küçültülüyor. */
    .feat2 .form2 .g-recaptcha {
        transform: scale(.86);
        margin-bottom: 6px;
    }

    .feat2 .err2 {
        padding: 70px 0 90px;
    }

    .feat2 .faq2__a {
        padding-left: 0;
        padding-right: 0;
    }

    .feat2 .steps li {
        padding-left: 42px;
    }

        .feat2 .steps li::before {
            width: 26px;
        }

    /* Rozetler telefonda ÜÇ sütun kalıyor (ikonlu iki kelime, dar sütunda
       da okunuyor). Tek sütuna inseydi on iki tam boy blok olurdu. */
    .feat2 .mini-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .feat2 .mini {
        padding: 16px 12px;
        gap: 10px;
        border-radius: 14px;
    }

        .feat2 .mini h3 {
            font-size: 13px;
        }

    .feat2 .cta2 {
        padding: 64px 0;
    }

    .feat2 .cta2__form {
        padding-left: 18px;
    }
}

/*--------------------------------------------------------------------------
  Telefonda yatay ray — SİTEMAP VE DOSYA SATIRLARINDA KULLANILMIYOR.
  --------------------------------------------------------------------------
  §15.6'daki ray kararı kart ızgaraları içindi ve sayfayı %52 kısaltmıştı.
  Burada bilerek uygulanmadı:
    · site haritasının işi HER bağlantıyı göstermek — yarısını raya gizlemek
      sayfanın amacına ters (§17.5'teki Feature/Index kararının aynısı),
    · dosya satırları zaten alçak (58px); rayda kazanılacak boy yok, üstelik
      indirmek isteyen kullanıcı listeyi taramak ister.
  --------------------------------------------------------------------------*/