/* ============================================================================
   Tanıtım (landing) sayfası

   site.css'in token'larını (--yz-*) yeniden kullanır; kendi paletini kurmuyor.
   Sebebi tek cümle: tanıtım sayfasında gördüğü mavi ile uygulamaya girdiğinde
   gördüğü mavi aynı olmalı — farklı olsaydı ürün iki ayrı ürün gibi okunurdu.

   Canlılık renk miktarından değil, üç yüzey katmanından (koyu kabuk → zemin →
   kart), dört kademeli yükseklikten, tipografik kademeden ve ölçülü mikro
   tepkiden gelir. Sonsuz animasyon, sayaç, dönen kenar ve carousel YOK; sayfa
   sıfır JS ile çalışmaya devam eder.

   Uygulama kabuğunun (kenar çubuğu, üst şerit) hiçbiri burada yok: bu sayfa
   Layout = null ile çiziliyor çünkü menüsü, oturumu ve kiracısı yok.
   ========================================================================= */

/* ─── B.0 Temel ───────────────────────────────────────────────────────────── */

/* --yz-zemin GLOBAL olarak koyulaştırılmıyor: o token uygulamanın tablolarını
   besliyor ve koyulaşınca --yz-metin-soluk AA altına düşüyor. Landing ritmi
   için ayrı token kullanılıyor. */
body.tanitim {
    background: var(--yz-zemin-tanitim);
    color: var(--yz-metin);
    margin: 0;
    font-size: var(--yz-yazi-veri);
    line-height: 1.55;
}

.tanitim-kap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Okunabilirlik sınırı: uzun metin 1120px'te satır başına 120+ karakter olur ve
   göz satır sonunda yerini kaybeder. Metin bölümleri dar kapta duruyor. */
.tanitim-dar { max-width: 760px; }

/* ─── B.0 Koyu otorite yüzeyi ─────────────────────────────────────────────────
   Kahraman, akış bandı, kapanış ve giriş yan paneli AYNI sınıfı paylaşır:
   dört ekran için tek bakım noktası. Renkler iki temada da aynı — otorite
   yüzeyi tema tercihiyle kimlik değiştirmez. ────────────────────────────── */

.yz-kabuk {
    position: relative;
    isolation: isolate;
    background: var(--yz-kabuk-ust);
    background-image:
        radial-gradient(1100px 460px at 15% -20%, var(--yz-kabuk-hale), transparent 60%),
        linear-gradient(180deg, var(--yz-kabuk-ust) 0%, var(--yz-kabuk-alt) 100%);
    color: var(--yz-kabuk-metin);

    /* Karanlık temada bandın nerede bittiğini gölge söyleyemez; kenar söyler. */
    border-bottom: 1px solid var(--yz-kabuk-kenar);
}

/* Izgara dokusu — 0 bayt, 0 istek, 0 hareket. */
.yz-kabuk::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--yz-kabuk-izgara) 1px, transparent 1px),
        linear-gradient(90deg, var(--yz-kabuk-izgara) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 80%);
}

.yz-kabuk h1,
.yz-kabuk h2,
.yz-kabuk h3 { color: var(--yz-kabuk-metin); }

.yz-kabuk p { color: var(--yz-kabuk-soluk); }

/* site.css'te .metin-soluk !important ile yazılı; koyu bantta geri almanın
   tek yolu aynı silahı kullanmak — aksi hâlde bu kural ölü olurdu. */
.yz-kabuk .metin-soluk { color: var(--yz-kabuk-soluk) !important; }

/* --yz-ana koyu bantta 3.36:1 — dolgu olabilir, metin olamaz. */
.yz-kabuk a:not(.btn) { color: var(--yz-kabuk-baglanti); }

.yz-kabuk .btn-outline-secondary {
    color: var(--yz-kabuk-metin);
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .04);
}

.yz-kabuk .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

/* ─── B.0 Bölüm çatısı ────────────────────────────────────────────────────────
   Ağırlık = boşluk. Eskiden altı bölümün altısı da 3.5rem'di; bu yüzden hiçbiri
   diğerinden önemli görünmüyordu. ───────────────────────────────────────── */

.tanitim-bolum       { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.tanitim-bolum-genis { padding: clamp(4rem, 7vw, 6.5rem) 0; }    /* akış, paketler */
.tanitim-bolum-dar   { padding: clamp(2.25rem, 3.5vw, 3rem) 0; } /* problem, iletişim */

.tanitim-bolum-soluk {
    background: var(--yz-kart);
    border-block: 1px solid var(--yz-kenar);
}

/* ─── B.0 Bölüm başlığı bileşeni ──────────────────────────────────────────── */

.tanitim-bolum-basi {
    max-width: 62ch;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Punto/aralık/renk site.css'teki etiket kuralından gelir (text-transform YOK:
   Türkçe'de "iş" büyütülünce "IS" oluyor). Burada yalnız düzen ve çizgi var. */
.tanitim-etiket {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .7rem;
}

.tanitim-etiket::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: var(--yz-ana);
    flex: 0 0 auto;
}

.yz-kabuk .tanitim-etiket { color: var(--yz-kabuk-soluk); }
.yz-kabuk .tanitim-etiket::before { background: var(--yz-kabuk-baglanti); }

/* Başlığı .tanitim-bolum-basi sarmalı olmayan bölümler de aynı ölçekte kalsın
   diye taban kural bölümün kendisine yazılıyor; değerler birebir aynı. */
.tanitim-bolum h2,
.tanitim-bolum-basi h2 {
    font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.22;
    margin: 0 0 .6rem;
}

.tanitim-bolum-basi p {
    font-size: var(--yz-yazi-govde-buyuk);
    color: var(--yz-metin-soluk);
    line-height: 1.6;
    margin: 0;
}

/* Koyu bantta bölüm açıklaması: yukarıdaki kural --yz-metin-soluk atıyor ve
   eşit özgüllükte sonra geldiği için .yz-kabuk p'yi eziyordu (koyu zeminde
   2.4:1). Renk burada geri alınıyor. */
.yz-kabuk .tanitim-bolum-basi p { color: var(--yz-kabuk-soluk); }

/* ─── B.1 Duyuru şeridi ───────────────────────────────────────────────────── */

/* Dolu amber üstünde beyaz metin 3.19 ✗ idi; --yz-uyari-koyu ile 7.09 ✓. */
.tanitim-duyuru {
    background: var(--yz-uyari-koyu);
    color: #fff;
    font-weight: 600;
    font-size: var(--yz-yazi-kucuk);
    letter-spacing: .01em;
    padding: .55rem 1.25rem;
    text-align: center;
}

.tanitim-duyuru-bilgi { background: var(--yz-ana-metin); }   /* beyaz 7.26 ✓ */
.tanitim-duyuru a { color: #fff; text-decoration: underline; }

/* ─── B.2 Üst şerit ───────────────────────────────────────────────────────── */

.tanitim-ust {
    /* color-mix'ten ÖNCE düz değer: desteklenmezse bildirim tümden düşer ve
       sticky şerit saydam kalır, altından içerik geçer. */
    background: var(--yz-kart);
    background: color-mix(in srgb, var(--yz-kart) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--yz-kenar);
    position: sticky;
    top: 0;
    z-index: 20;
}

@supports not (backdrop-filter: blur(1px)) {
    .tanitim-ust { background: var(--yz-kart); }
}

.tanitim-ust-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--yz-ust-yuk);
    flex-wrap: wrap;
}

.tanitim-marka {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--yz-metin);
    text-decoration: none;
}

.tanitim-marka-im {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--yz-marka-gradyan);   /* mor uç kaldırıldı, tek hue */
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    box-shadow: var(--yz-kat-1), var(--yz-parlak);
}

.tanitim-menu {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-wrap: wrap;
}

.tanitim-menu a:not(.btn) {
    color: var(--yz-metin-soluk);
    text-decoration: none;
    font-size: var(--yz-yazi-govde);
    font-weight: 500;
    transition: color var(--yz-sure-hizli) var(--yz-egri);
}

.tanitim-menu a:not(.btn):hover { color: var(--yz-metin); }

/* Giriş, menüdeki diğer çapa bağlantılarıyla aynı ağırlıkta duramaz: bu bir
   bölüm değil, ürünün kapısı. */
.tanitim-menu-giris {
    font-weight: 600 !important;
    color: var(--yz-metin) !important;
}

/* Kaydırınca yükseklik kazanır — JS yok, scroll() zaman çizelgesi.
   Desteklemeyen tarayıcıda hiçbir şey kaybolmaz. */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .tanitim-ust {
            animation: ust-yogunlas linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 140px;
        }

        @keyframes ust-yogunlas {
            to {
                box-shadow: var(--yz-kat-2);
                border-bottom-color: transparent;
            }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .tanitim-ust { box-shadow: var(--yz-kat-1); }
}

/* ─── B.3 Kahraman ────────────────────────────────────────────────────────── */

.tanitim-kahraman {
    /* Alt boşluk, kanıt şeridinin bandın üstüne taşabilmesi için. */
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem);
    text-align: left;
}

.tanitim-kahraman-ic {
    display: grid;
    gap: clamp(2.25rem, 4vw, 3.5rem);
    align-items: center;
}

@media (min-width: 62rem) {
    .tanitim-kahraman-ic { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}

.tanitim-kahraman h1 {
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.08;
    max-width: 17ch;
    margin: 0 0 1rem;
    color: #fff;
}

.tanitim-alt {
    font-size: var(--yz-yazi-govde-buyuk);
    color: var(--yz-kabuk-soluk);
    max-width: 52ch;
    line-height: 1.6;
    margin: 0 0 1.75rem;
}

.tanitim-eylemler {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.tanitim-nisan {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .7rem .3rem .55rem;
    margin: 0 0 1.1rem;
    border: 1px solid var(--yz-kabuk-kenar);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    font-size: var(--yz-yazi-mikro);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--yz-kabuk-soluk);
}

/* Nabız YOK — sabit halka. Sonsuz animasyon bu üründe ciddiyeti düşürür. */
.tanitim-nisan .nokta {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
}

/* Ürünün en güçlü cümlesi kendi çipinde: on saniyelik taramada okunan cümle
   bu olmalı. Koyu bantta beyaz 13.0 ✓. */
.yz-guvence {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 1.5rem 0 0;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: var(--yz-yazi-govde);
    font-weight: 600;
    color: #fff;
}

.yz-guvence svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: #34d399;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tanitim-guvence-alt {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--yz-kabuk-kenar);
    font-size: var(--yz-yazi-kucuk);
    color: var(--yz-kabuk-soluk);
}

.tanitim-guvence-alt li {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.tanitim-guvence-alt svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: #34d399;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─── B.3 Ürün yüzeyi (sayfadaki TEK sahte ekran) ─────────────────────────── */

.tanitim-yuzey {
    margin: 0;
    background: var(--yz-kart);
    color: var(--yz-metin);

    /* Karanlıkta gölge okunmaz; kart ile bandın ayrımını bu kenar taşır. */
    border: 1px solid var(--yz-kenar-kontrol);
    border-radius: var(--yz-r-buyuk);
    box-shadow: var(--yz-kat-4), var(--yz-parlak);
    overflow: hidden;
    min-width: 0;
    transform: perspective(1400px) rotateY(-1.2deg) rotateX(.6deg);
}

/* Tek sütuna düşünce eğim yalancı bir derinlik üretir, düzleştiriliyor. */
@media (max-width: 61.99rem) {
    .tanitim-yuzey { transform: none; }
}

.tanitim-yuzey-basi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--yz-kenar);
    background: var(--yz-vurgu-zemin);
    font-size: var(--yz-yazi-kucuk);
    font-weight: 600;
}

.tanitim-yuzey-satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem .75rem;
    align-items: start;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--yz-kenar);
}

.tanitim-yuzey-satir .baslik {
    font-size: var(--yz-yazi-veri);
    font-weight: 600;
}

.tanitim-yuzey-satir .no {
    font-family: var(--yz-yazi-tanimlayici);
    font-size: var(--yz-yazi-kucuk);
    color: var(--yz-metin-soluk);
    margin-top: .1rem;
}

/* Renk açıkça yazılıyor: bu blok koyu bandın İÇİNDEKİ açık kartta duruyor ve
   .yz-kabuk p kuralı (özgüllük eşit, sırası sonra) site.css'teki .gerekce
   rengini eziyor — açık zeminde --yz-kabuk-soluk 1.7:1 eder. */
.tanitim-yuzey-satir .gerekce {
    font-size: var(--yz-yazi-kucuk);
    margin-top: .4rem;
    max-width: none;
    color: var(--yz-metin-soluk);
}

/* Damga --yz-metin-soluk (5.43) ile yazılır; --yz-metin-cok-soluk beyazda 3.00,
   yani AA altı — ve bu ibare yasal nitelikte, süs değil. */
.tanitim-yuzey-damga {
    padding: .5rem .9rem;
    background: var(--yz-vurgu-zemin);
    border-top: 1px solid var(--yz-kenar);
    font-size: var(--yz-yazi-mikro);
    letter-spacing: .05em;
    color: var(--yz-metin-soluk);
    text-align: right;
}

/* ─── B.4 Kanıt şeridi — kahramanın üstüne taşar ──────────────────────────── */

.tanitim-kanit {
    position: relative;
    z-index: 2;
    margin-top: clamp(-4.5rem, -6vw, -3rem);
}

.tanitim-kanit-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    background: var(--yz-kart);
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r-buyuk);
    box-shadow: var(--yz-kat-3), var(--yz-parlak);
    overflow: hidden;
}

.tanitim-kanit-oge {
    padding: 1.35rem 1.5rem;
    border-right: 1px solid var(--yz-kenar);
}

.tanitim-kanit-oge:last-child { border-right: 0; }

/* Sayaç (count-up) YOK: rakamın ekranda dönmesi güven satan bir sayfada
   ters teper ve sayfayı JS'e bağlar. */
.tanitim-kanit-deger {
    display: block;
    margin-bottom: .35rem;
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tanitim-kanit-etiket {
    display: block;
    font-size: var(--yz-yazi-kucuk);
    font-weight: 600;
    color: var(--yz-metin);
}

/* Kaynağı yazılamayan rakam sayfaya girmez; bu satır o kuralın taşıyıcısı. */
.tanitim-kanit-kaynak {
    display: block;
    margin-top: .3rem;
    font-size: var(--yz-yazi-mikro);
    color: var(--yz-metin-soluk);
}

/* ─── B.5 Problem şeridi ──────────────────────────────────────────────────────
   Kart DEĞİL: problem henüz "ürün" değil, o yüzden kutuya girmiyor. ─────── */

.tanitim-sorun {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tanitim-sorun li {
    padding-left: 1rem;
    border-left: 3px solid var(--yz-uyari);
}

.tanitim-sorun b {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.tanitim-sorun p {
    font-size: var(--yz-yazi-govde);
    color: var(--yz-metin-soluk);
    margin: 0;
}

/* ─── B.6 Nasıl çalışır — 4 adımlı onay akışı ─────────────────────────────── */

.akis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.75rem, 3vw, 2.75rem);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.akis-adim {
    position: relative;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--yz-kabuk-kenar);
    border-radius: var(--yz-r);
    padding: 1.1rem 1.1rem 1.2rem;
    box-shadow: var(--yz-parlak);
}

.akis-adim h3 { font-size: 1.0625rem; margin: 0 0 .35rem; }

.akis-adim p {
    font-size: var(--yz-yazi-kucuk);
    line-height: 1.55;
    margin: 0;
    color: var(--yz-kabuk-soluk);
}

.akis-adim-no {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    margin-bottom: .7rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--yz-kabuk-kenar);
    font-family: var(--yz-yazi-tanimlayici);
    font-size: .78rem;
    color: var(--yz-kabuk-metin);
    font-variant-numeric: tabular-nums;
}

/* Dördüncü düğüm zincirin tek insan adımı: bilinçli olarak farklı ağırlıkta. */
.akis-adim-siz {
    border-color: var(--yz-ana);
    background: var(--yz-kabuk-vurgu);
    box-shadow: 0 0 0 1px var(--yz-ana), var(--yz-kat-3);
}

.akis-adim-siz .akis-adim-no {
    background: var(--yz-ana);
    border-color: var(--yz-ana);
    color: #fff;
}

.akis-etiket {
    display: inline-block;
    margin-left: .5rem;
    vertical-align: 2px;

    /* ★ --yz-ana DEĞİL --yz-ana-dolgu. Ölçüldü: --yz-ana karanlık temada
       #7c8fff'e açılıyor ve üstündeki beyaz metin 2.90:1'e düşüyordu.
       Gerekçe site.css'te, token tanımının yanında. */
    background: var(--yz-ana-dolgu);
    color: #fff;
    font-size: var(--yz-yazi-mikro);
    font-weight: 600;
    letter-spacing: .06em;
    padding: .14rem .5rem;
    border-radius: 999px;
}

/* Bağlayıcı çizgi + ok ucu — saf CSS, SVG yok, JS yok. */
.akis-adim + .akis-adim::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: clamp(1.75rem, 3vw, 2.75rem);
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, var(--yz-kabuk-soluk));
    opacity: .55;
}

.akis-adim + .akis-adim::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--yz-kabuk-soluk);
    border-right: 2px solid var(--yz-kabuk-soluk);
    transform: translate(4px, -50%) rotate(45deg);
    opacity: .7;
}

@media (max-width: 60rem) {
    .akis {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
    }

    /* Tek sütunda zincir yatay değil dikey akar; ok da döner. */
    .akis-adim + .akis-adim::before {
        top: auto;
        bottom: 100%;
        right: auto;
        left: 1.65rem;
        width: 2px;
        height: 1.6rem;
        transform: none;
        background: linear-gradient(180deg, transparent, var(--yz-kabuk-soluk));
    }

    .akis-adim + .akis-adim::after {
        top: auto;
        bottom: 100%;
        right: auto;
        left: 1.65rem;
        transform: translate(-3px, 5px) rotate(135deg);
    }
}

/* ─── B.7 Özellikler ızgarası ─────────────────────────────────────────────── */

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

.tanitim-kart {
    background: var(--yz-kart);
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r);
    padding: 1.5rem 1.4rem;
    box-shadow: var(--yz-kat-1), var(--yz-parlak);

    /* transition: all YOK; yalnız üç özellik, yer değiştirme tavanı 2px. */
    transition: box-shadow var(--yz-sure-orta) var(--yz-egri),
                transform var(--yz-sure-orta) var(--yz-egri),
                border-color var(--yz-sure-orta) var(--yz-egri);
}

.tanitim-bolum-soluk .tanitim-kart { background: var(--yz-zemin-tanitim); }

.tanitim-kart:hover,
.tanitim-kart:focus-within {
    transform: translateY(-1px);
    box-shadow: var(--yz-kat-2), var(--yz-parlak);
    border-color: var(--yz-kenar-koyu);
}

/* İşaret alanı hem SVG hem emoji taşıyabilir: yönetim ekranındaki serbest
   metin alanı duruyor, ikon setine geçiş zamana yayılıyor. */
.tanitim-kart-im {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    margin-bottom: .9rem;
    display: grid;
    place-items: center;
    background: var(--yz-ana-soluk);
    color: var(--yz-ana-metin);
    border: 1px solid var(--yz-kenar);
    font-size: 1.05rem;
    line-height: 1;
}

.tanitim-kart-im svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tanitim-kart h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: .4rem;
}

.tanitim-kart p {
    font-size: var(--yz-yazi-govde);
    line-height: 1.6;
    margin: 0;
    color: var(--yz-metin-soluk);
}

/* ─── B.8 Önce / sonra ────────────────────────────────────────────────────────
   Sol sütun (elle) sayısız; sağ sütunda yalnız kaynaklandırılabilen ifade. ─ */

.kiyas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 52rem) {
    .kiyas { grid-template-columns: 1fr 1fr; }
}

.kiyas-sutun {
    position: relative;
    border-radius: var(--yz-r);
    padding: 1.3rem 1.4rem 1.4rem;
}

.kiyas-once {
    border: 1px dashed var(--yz-kenar-kontrol);
    background: transparent;
    color: var(--yz-metin-soluk);
}

.kiyas-sonra {
    border: 1px solid var(--yz-ana);
    background: var(--yz-kart);
    box-shadow: var(--yz-kat-2), var(--yz-parlak);
}

.kiyas-sonra::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--yz-r) 0 0 var(--yz-r);
    background: var(--yz-ana);
}

.kiyas-baslik {
    font-size: var(--yz-yazi-mikro);
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--yz-metin-soluk);
    margin: 0 0 .7rem;
}

.kiyas-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--yz-yazi-govde);
}

.kiyas-liste li {
    position: relative;
    padding: .34rem 0 .34rem 1.4rem;
    line-height: 1.55;
}

.kiyas-once  li::before { content: "\2014"; position: absolute; left: 0; color: var(--yz-kenar-kontrol); }
.kiyas-sonra li::before { content: "\2713"; position: absolute; left: 0; color: var(--yz-basari); font-weight: 700; }

.kiyas-kaynak {
    margin: 1rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--yz-kenar);
    font-size: var(--yz-yazi-kucuk);
    color: var(--yz-metin-soluk);
    line-height: 1.5;
}

/* ─── B.9 Güvenlik & KVKK ─────────────────────────────────────────────────── */

.tanitim-guven-ic {
    display: grid;
    gap: 2rem;
}

@media (min-width: 58rem) {
    .tanitim-guven-ic { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

.tanitim-liste {
    display: grid;
    gap: 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tanitim-liste li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: .8rem;
}

.tanitim-liste svg {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--yz-basari);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tanitim-liste b {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .2rem;
}

.tanitim-liste span {
    display: block;
    color: var(--yz-metin-soluk);
    font-size: var(--yz-yazi-govde);
    line-height: 1.6;
}

/* Mühendislik kanıtı burada durur, kahramanda değil: "ödevimizi yaptık"
   argümanının doğru yeri güvenlik bölümüdür. */
.tanitim-karsi-kutu {
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r);
    background: var(--yz-zemin-tanitim);
    padding: 1.4rem;
    box-shadow: var(--yz-kat-1), var(--yz-parlak);
}

.tanitim-karsi-kutu h3 { font-size: 1rem; margin: 0 0 .8rem; }

.tanitim-karsi-kutu ul { list-style: none; margin: 0; padding: 0; }

.tanitim-karsi-kutu li {
    position: relative;
    padding: .45rem 0 .45rem 1.5rem;
    font-size: var(--yz-yazi-govde);
    color: var(--yz-metin-soluk);
}

.tanitim-karsi-kutu li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--yz-basari);
    font-weight: 700;
}

.tanitim-karsi-kutu li b {
    color: var(--yz-metin);
    font-variant-numeric: tabular-nums;
}

.tanitim-karsi-not {
    margin: .9rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--yz-kenar);
    font-size: var(--yz-yazi-kucuk);
    color: var(--yz-metin-soluk);
}

/* ─── B.10 İndirme + SHA-256 ──────────────────────────────────────────────── */

.tanitim-indirme {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin: 1.4rem 0 1rem;
}

.tanitim-indirme-bilgi { font-size: var(--yz-yazi-govde); }

.tanitim-ozet {
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r-kucuk);
    padding: .85rem 1rem;
    background: var(--yz-kart);
    box-shadow: var(--yz-kat-1), var(--yz-parlak);
}

.tanitim-bolum-soluk .tanitim-ozet { background: var(--yz-zemin-tanitim); }

.tanitim-ozet summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--yz-yazi-govde);
}

.tanitim-ozet-deger {
    display: block;
    margin: .7rem 0;
    font-family: var(--yz-yazi-tanimlayici);
    font-size: var(--yz-yazi-kucuk);
    color: var(--yz-metin);

    /* break-all DEĞİL: anywhere aynı işi görür, Türkçe metni okunmaz yapmaz. */
    overflow-wrap: anywhere;
    word-break: normal;
}

.tanitim-komut {
    background: var(--yz-vurgu-zemin);
    border: 1px solid var(--yz-kenar);
    border-left: 3px solid var(--yz-ana);
    border-radius: var(--yz-r-kucuk);
    padding: .65rem .8rem;
    font-family: var(--yz-yazi-tanimlayici);
    font-size: var(--yz-yazi-kucuk);
    overflow-x: auto;
    margin: 0;
}

.tanitim-notlar { margin-top: 1.6rem; }
.tanitim-notlar h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.tanitim-notlar p { margin-bottom: .35rem; }

/* ─── B.11 Paketler ───────────────────────────────────────────────────────── */

.tanitim-izgara-paket { align-items: stretch; }

.tanitim-paket {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--yz-kart);
    border: 1px solid var(--yz-kenar);
    border-radius: var(--yz-r-buyuk);
    padding: 1.6rem;
    box-shadow: var(--yz-kat-1), var(--yz-parlak);
    transition: transform var(--yz-sure-orta) var(--yz-egri),
                box-shadow var(--yz-sure-orta) var(--yz-egri);
}

.tanitim-bolum-soluk .tanitim-paket { background: var(--yz-zemin-tanitim); }

.tanitim-paket:hover {
    transform: translateY(-1px);
    box-shadow: var(--yz-kat-2), var(--yz-parlak);
}

/* 2px kenar dışa taşmasın diye iç boşluk 1px geri alınıyor: vurgulu kart
   diğerleriyle aynı hizada dursun. */
.tanitim-paket.vurgulu {
    border: 2px solid var(--yz-ana);
    padding: calc(1.6rem - 1px);
    box-shadow: var(--yz-kat-3), var(--yz-parlak);
}

@media (min-width: 62rem) {
    .tanitim-paket.vurgulu { margin-block: -6px; }
}

.tanitim-paket-rozet {
    position: absolute;
    top: -.7rem;
    left: 1.4rem;
    background: var(--yz-ana);
    color: #fff;
    font-size: var(--yz-yazi-mikro);
    font-weight: 600;
    padding: .18rem .55rem;
    border-radius: 999px;
}

.tanitim-paket h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .6rem; }

.tanitim-fiyat { margin-bottom: 1rem; }

.tanitim-fiyat .tutar {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.tanitim-fiyat .donem { color: var(--yz-metin-soluk); font-size: var(--yz-yazi-govde); }

.tanitim-paket ul {
    flex: 1 1 auto;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: var(--yz-yazi-govde);
    color: var(--yz-metin-soluk);
}

.tanitim-paket li {
    padding: .32rem 0 .32rem 1.35rem;
    position: relative;
    line-height: 1.5;
}

.tanitim-paket li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--yz-basari);
    font-weight: 700;
}

/* CTA kartın dibine yapışır: farklı kalem sayılı paketlerde düğmeler aynı
   hatta dursun. 44px dokunma hedefi. */
.tanitim-paket-eylem {
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--yz-kenar);
}

.tanitim-paket-eylem .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
}

/* ─── B.12 SSS ────────────────────────────────────────────────────────────── */

.tanitim-sss {
    border-bottom: 1px solid var(--yz-kenar);
    padding: 0;
}

.tanitim-sss summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem .25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color var(--yz-sure-hizli) var(--yz-egri);
}

/* Yerleşik üçgen yerine kendi işaretimiz: tarayıcılar arasında konumu ve boyu
   tutarsız, sağa hizalamak mümkün değil. */
.tanitim-sss summary::-webkit-details-marker { display: none; }

.tanitim-sss summary:hover { color: var(--yz-ana-metin); }

.tanitim-sss summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--yz-vurgu-zemin);
    color: var(--yz-metin-soluk);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1;
}

.tanitim-sss[open] summary { color: var(--yz-ana-metin); }
.tanitim-sss[open] summary::after { content: "\2212"; color: var(--yz-ana-metin); }

.tanitim-sss p {
    margin: 0 0 1rem;
    max-width: 68ch;
    font-size: var(--yz-yazi-govde);
}

/* ─── B.13 Kapanış CTA + iletişim ─────────────────────────────────────────── */

.tanitim-kapanis { text-align: center; }

.tanitim-kapanis h2 {
    max-width: 22ch;
    margin: 0 auto .7rem;
    font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.022em;
}

.tanitim-kapanis p {
    max-width: 56ch;
    margin: 0 auto 1.6rem;
    font-size: var(--yz-yazi-govde-buyuk);
}

.tanitim-kapanis .tanitim-eylemler { justify-content: center; }

.tanitim-kapanis-iletisim {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 1.5rem;
    margin: 1.8rem 0 0;
    padding-top: 1.3rem;
    border-top: 1px solid var(--yz-kabuk-kenar);
    font-size: var(--yz-yazi-kucuk);
    color: var(--yz-kabuk-soluk);
}

/* ─── B.14 Alt şerit ──────────────────────────────────────────────────────── */

.tanitim-alt-serit {
    border-top: 1px solid var(--yz-kenar);
    padding: 1.6rem 0;
    background: var(--yz-kart);
}

.tanitim-alt-ic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: var(--yz-yazi-kucuk);
    color: var(--yz-metin-soluk);
}

.tanitim-alt-ic a { color: var(--yz-metin-soluk); }
.tanitim-alt-ic a:hover { color: var(--yz-metin); }

/* ─── B.15 Hareket tercihi ────────────────────────────────────────────────────
   Kural: hareket kapalıyken SON DURUM ANINDA gösterilir, öğe kaybolmaz. ─── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .tanitim-kart:hover, .tanitim-paket:hover { transform: none; }
    .tanitim-yuzey { transform: none; }

    /* Sticky bir hareket değil, konumlandırmadır; kalsın. */
    .tanitim-ust { position: sticky; box-shadow: var(--yz-kat-1); }
}

/* ─── B.15 Yazdırma ───────────────────────────────────────────────────────── */

@media print {
    .tanitim-ust, .tanitim-duyuru { position: static; box-shadow: none; }
    .yz-kabuk { background: #fff !important; color: #000 !important; border: 0; }
    .yz-kabuk::before { display: none; }
    .yz-kabuk h1, .yz-kabuk h2, .yz-kabuk h3, .yz-kabuk p, .yz-kabuk a { color: #000 !important; }
    .tanitim-yuzey { transform: none; box-shadow: none; }
    body.tanitim { background: #fff !important; }
}